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

[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.

[LozPetts]

@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 | Docs

(docs.hise.dev)

[LozPetts]

@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!

[LozPetts]

@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!