Is it possible to insert a looping video in a UI?

[Lurch]

@d-healey I've found that but it doesn't seem to work, pasting it into hise in a blank project and filling in the filmstrip name etc throws an error

HiseSnippet 1366.3oc6W8taaaCDWJIpaw6OXEXO.D9CCxotJxaC6C0nXsw1YwsMIF0oYcXXHfQhRhnxjBjzNwqHOk6EYuAaGojrjbbBxFv91DRLDui2we2u6H4oIBd.QJ4BK6cOaYFwx9ycltjoRFjfoLqwCsr+RmiwREQfxEcvxLrTRBsrs29mzBr2cGKyye9iGfSwr.RkHKqy4z.xanynpJoSdwqoooGhCImQmUa1e+KFGvYC3o74.d11w2JCG7AbL4DrdZa4XY+nQgTEWLUgUDok8NGvCWNMgeEKe9mSkzKSI5A8rlBNJW7g7zPMh0RsFjPSCmTF2RKvKSpXgsyYgu14XZHck7J13qLJPUVTmOr2pI71tA75cWvaCPxtFj1IGRO1YZfflopznwym4LlAImHLP60gR9bs15O9DmAbXFLk2L7GHGJfAqrv8G786hfe5zueq9s1eu8PCDDM1QXDkQif+UjzkHAGhHL.cTBAG5g1a+VTVJkQPQyYAJJmgBLFdDndZl.rxkAIstnq6hV1o0GagfmTd.NEcEMLlnPOGUhKbX3DLijV2h9FCL+TNMIQG5YDghRjPbL6USO8jBax8OB0FbtJo8yPeKDXkxRHz3D0ZBk3EjwrIBB3VPkRLmrRGNMke0.32KgxOIns8fTJ7VWzQ7EvFguAMTfiior31FStoNb2eezqorPfzxD7ETntCc4RzHXiA5HvIof8OqiYl4DgWJGGNdFTk619iSd6ouZzfyt3vSeyvQu8lyOc7PuLXY5hZGQSmIUPRsc8UqvGZtApPUukOWAYE2xrhab9RUxOF3AQVv7THYgTIDHMGRtF4pec0RfRvRTOeejDhaBD2DbPhl9xtFk.j4Jus.KJbvyQYXgDnTE3JpzCP043z4D2N6ANxyu.zq.t9I1KTfupH1qhutneEpJg+JczOqSptcpDbjIi5142LSKG.6owWwprdB4LvND7mNHkDljpnKnpkHdjQjo5FXq5LZHTu6UetOG8c99Mc6TnFx3fPXGNvEP3h.hSPhHBBbNHJhKPPYDBByXTHIUgk2ZMz1ZXJXE.dZi41i4ykjxBxpjKYAruX8DLMJWtWftlkD1Yklp4The3np7.HXt.PrpHFzvtJHtJgvLQftfugKtqvXsBfpL+M2tFXEb0qv8f02IInK4pDD9ZchjiLaRQgTbLmgKn3KII3ET31iFVqKRMjO.sp058nmfdZOOenvoR3uzugkqCBFWLCmR+8hrtwmyk.sXFGSA+Tu9Zyn3jRmDB3I2G6mSYqWyc+fo41XF4pxJPVn93LVfVEUo4JeOOud2BMfIMxXqkGex5vsIbpY8pWeJ5XrJwKJkyEtkR6b+gw6xBKigL8s.MzavkrrR5N7nYRAIXVLIzcS5DjL8gi2tRrw4DBhZtfUTT2u0M8Wc0FmcBWQNk4puHa2VfsqqJJZi5zWcI3ovY9aTst6Gw8YnKa9rKIht4Y1USDZInYeFO5g0mQP9Mo0lHmMFtg+zLRw36uQIqhqhg2d23gP0htQkBYUWMCxFRV.2aj21xtNCIxOn3YPee2pmFnaJdntHtYKV59JKT.7Qi9Zz8tn2frrdemq220N2Me3+faK7gB2G6LgpBR1Ld2ZC3EXs+qwaQWregynnHRfpBr63b36+21xp+81xpUduGwvI.B50V1NmLe1T3n3.Br5LXiM3bG6szUQ4i80i0rwTBKzL3ufmBk8zisKT1qTo0LbffeQP9tCcexepQBfIl4SDfOdAC6hySClMM0o8YPm6WDDzzaqr0w4kxj+oFAeSx+awcZg9Skd4bEeVdBwx53IiLmaXaOho+bBSIn0eCxDkER.

[d.healey]

@LozPetts It was made in a really old version of HISE so probably requires some clean-up to run in a recent version

[ulrik]

@LozPetts I looked at the code and here's the error code

        if(event.clicked)
        {
            // Store the current value for reference when dragging
            widget.data.downValue = this.getValue();
        }

replacing "widget" with "this" solves it

[ulrik]

@ulrik tried to set it up as an animation with a very small sprite, 19 frames 50x50, and it works

here's the project:
project

[Straticah]

@LozPetts i see, you dont need the whole loop, you can loop this using davinci smooth cut to around 2 seconds. Other way is to separate dark and reflections ij photoshop and play them at different filmstrip speeds so it looks like an infinite loop.

[Lurch]

@ulrik Thank you! Thank works beautifully - I had a few issues but I've got it going smoothly and it looks killer. Thank you to you all.

RE memory usage, I cropped the dead space from the video when I converted it to a film strip, according to the image pool table it looks like it's using around 100mb RAM, much better than expected.

@d-healey Once again thanks for your help - is there a way we can update the documentation to reflect the fix above? Or can only Christopher do that?

[d.healey]

@LozPetts said in Is it possible to insert a looping video in a UI?:

it looks like it's using around 100mb RAM

How are you checking that?

@LozPetts said in Is it possible to insert a looping video in a UI?:

is there a way we can update the documentation

HISE | HISE | Contribute to the HISE Docs

How to contribute to this documentation.

(docs.hise.dev)

[Lurch]

@d-healey I saw in another thread you advised someone to check the pool to see how much memory the bitmaps were using (if I understood correctly at least!). Created a popup window, Image pool table, although looking at it now it might not be showing the full size as hise sees it.

[d.healey]

@LozPetts Perfect!

[ulrik]

@LozPetts What software do you use to create the sprites?
I've searched for a simple application for Mac OS but I only found some online sites who had that service but the sprite sheet was always horizontal and I had problems using the "offset x" instead of y, I couldn't get it to work (probably some stupid writing error from my side)

So I tried another approach with png sequences and loaded all pngs into the panel, and used the

g.drawImage(images[index], [0, 0, this.getWidth(), this.getHeight()], 0, 0);

switching pngs instead of using the offset function.

Here's an example using 360 png files size 1920 x 1080, weight of 71mb
I scaled the display inside Hise to half the size.

It works quite well I think

But I would prefer to make sprite sheets so if you have any tip of software for Mac OS, let me know.

[d.healey]

@ulrik said in Is it possible to insert a looping video in a UI?:

But I would prefer to make sprite sheets so if you have any tip of software for Mac OS, let me know.

Strip Generator | Blog | Wavesfactory

Free app that creates vertical and horizontal strips from a collection of JPG - PNG images.

(www.wavesfactory.com)

[ulrik]

@d-healey I had forgotten this one, thanks David!

[Lurch]

@ulrik That one didn't work properly for me so I use this:

CSS Sprite Generator - CSS Portal

Welcome to CSS Sprite Generator, the fastest way for you to make CSS sprites.

(www.cssportal.com)

What I did to get this working was:

• Trim the empty space from the video edges.
• Convert the video to GIF - https://ezgif.com/video-to-gif
• Extract the frames from the GIF as PNG files - https://ezgif.com/split
• Convert all the PNGs into a filmstrip with the above CSS Sprite Generator
• attach filmstrip to Panel in HISE.

/** Looping Video Panel */
inline function createHeadSprite(name, x, y)
{
    local widget = Content.addPanel(name, x, y);
    
    Content.setPropertiesFromJSON(name, {
      "width": WIDTH OF SINGLE PNG,
      "height": HEIGHT OF SINGLE PNG,
      "saveInPreset": true,
      "allowCallbacks": "Clicks, Hover & Dragging"
    });
    
    // Asset Strip
    widget.loadImage("{PROJECT_FOLDER}FILMSTRIP.png", "filmstrip");
    
    widget.setPaintRoutine(function(g)
    {
        // Calculate the index (the filmstrip has 100 slices, each ???px high
        var index = parseInt(this.getValue()*197.0);
        
        g.drawImage("filmstrip", [0, 0, this.getWidth(), this.getHeight()], 0, index * ???);
    });
    
    // This is the sensitivity of the rotation
    widget.data.sensitivity = 300;
    
    // Save the down value as reference for all drag deltas
    widget.data.downValue = 0.0;
    
    widget.setMouseCallback(function(event)
    {
        if(event.clicked)
        {
            // Store the current value for reference when dragging
            this.data.downValue = this.getValue();
        }
        
        if(event.drag)
        {
            // Use both axis to allow diagonal drag behaviour
            var delta = event.dragX + -1.0 * event.dragY;
            
            // normalize the delta using the given sensitivity
            var deltaNormalized = delta / this.data.sensitivity;
            
            // Calculate the new value and truncate it to 0...1
            var newValue = this.data.downValue + deltaNormalized;
            newValue = newValue - Math.floor(newValue);
            
            // Update the panel
            this.setValue(newValue);
            this.changed();
            this.repaint();
        }
    });
    
    return widget;
};

const sprite = createHeadSprite("LOOPPANEL", X, Y);

//	timer for animation (FPS)
reg count = 0;
sprite.setTimerCallback(function()
{
	count = (count+1) % 24;
	this.setValue(count * 1/24);
	this.changed();
});
//Speed
sprite.startTimer(62); //Play with this to set speed

Hope that helps someone out!