HISE supports gif images

[CatABC]

When will the HISE image component support gif images?

[aaronventure]

@CatABC

If it were added to the image component, webp would be a much better choice.

You can already import a stitched image, or you can load in individual frames of a gif, then simply play through them using a timer (use the panel component for this).

If you don't need to have other components on top of the gif, you can also use a WebView (no other HISE component can be rendered on top of the webview), and then you can import gifs, webp (way better) etc.

[Chazrox]

@aaronventure webview...gif pop-ups.... I like!

[rglides]

@aaronventure webp would be nice!

[LozPetts]

@CatABC Not sure what you're trying to do but this might help - if you want moving images in HISE what I did to get this working was:

CSS Sprite Generator - CSS Portal

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

(www.cssportal.com)

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
Add your filmstrip to your project images folder
Attach filmstrip to Panel in HISE.

You'll need to tweak the timer and speed values to get it looking how you want.

/** 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

[CatABC]

@LozPetts Thank you for the information. My idea is that if HISE can support dynamic images by itself, some image displays will become more vivid.

[dannytaurus]

I'm curious to know what GIFs would be used for in a UI.

I can't think of any plugins I have that have constantly looping animations in them.

[CatABC]

@dannytaurus For example, if I want to show the atmosphere of a PAD sound, I can use a dynamic picture of rain or waterfall, which will make you feel more vivid.

[d.healey]

@CatABC Use lottie animation, it will scale nicely too.

[clevername27]

@d-healey This is the way.