@griffinboy Can't wait to see what you make, this sounds amazing!

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

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

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

@Soundavid Thanks for your response!
I already have multithreading and 'Rebuild Pool Files' enabled as I suspected they might help! I hadn't cleaned my build folder, I've done that now and recompiled and ITS WORKING! Thank you so much for your help.
Just as a learning moment - did I do something wrong here? How often should I be cleaning my build directories?

@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

@d-healey That would help. Face palmed pretty hard there.

Just in case it helps anyone in future!

function onNoteOn()
{
//Velocity Limiter Knob
Message.setVelocity(Math.min(Message.getVelocity(), MaxVelKnob.getValue())); 
Console.print("Velocity: " + Message.getVelocity());
};
 

@d-healey Ahh gotcha - thanks as always d.healey!

For the future:

//PresetDisplay
const var PresetNameLabel = Content.getComponent("PresetNameLabel");
UserPresetHandler.setPostCallback(function()
{
	PresetNameLabel.set("text", Engine.getCurrentUserPresetName());
});

@d-healey Ahh gotcha - thanks as always d.healey!

For the future:

//PresetDisplay
const var PresetNameLabel = Content.getComponent("PresetNameLabel");
UserPresetHandler.setPostCallback(function()
{
	PresetNameLabel.set("text", Engine.getCurrentUserPresetName());
});

Hey all!
I'm trying to write the name of the currently loaded preset into a label so that the user can see which preset is loaded even when the preset browser tile is hidden - i got this working on compile with the following:

PresetNameLabel.set("text", Engine.getCurrentUserPresetName());

The problem i'm having is putting this in the callback of the floating tile does absolutely nothing:

//PresetDisplay
const var PresetNameLabel = Content.getComponent("PresetNameLabel");

inline function onPresetBrowserControl(component, value)
{
	PresetNameLabel.set("text", Engine.getCurrentUserPresetName());
};

Content.getComponent("PresetBrowser").setControlCallback(onPresetBrowserControl);

I tried popping a 'hello world' print into the callback, nada. Is there another way I should be getting a callback from the preset browser? I've had a read around the forum and it looks like a broadcaster might do the job but i can't make heads nor tails of it.

@d-healey I was being daft. The problem I have is that the vast bulk of my instrument is tied up in a ScriptFX Granulator - because using the scriptnode synth module caused me loads of audio issues early on, so I switched to using ScriptFX instead and it's been clean sailing since. Issue is - you can't use these modulators on ScriptFX, the envelope, pitch etc aren't available.

I think I may be being daft- I'm trying to implement MPE into my latest project, I've got the MPE floating tile etc - but because there aren't global envelope modulators, and things like Gain, filters etc only accept time-variant modulation, I don't see how to place the envelope modulators and actually implement MPE for the user? Am I being daft?

Clicking a draggablefilterpanel controlling a ParametricEQ within a panel that is disabled will hard crash HISE, and Cubase + Logic once the plugin is compiled. This is a real bummer as my latest plugin uses panels to display a series of effects which users can enable and disable, disabling the panel makes it visibly obvious the effect is off, but if a user was to click the panel they'd hard crash their DAW.

@LozPetts So - following the instructions, wrapping the SNEXShaper as it's own DSP Network fails with the same error but does produce a Project.SnexShaper node - placing this in the project, the node says to click it to wrap it and all effects as a DLL to use the node, clicking this also produces the above.
I've never had any issues with scriptnode before, I've spent all day on this and I'm pulling my hair out

@LozPetts Updated to the latest commit - same issue

> Create files
> Sorting include dependencies
> Creating C++ file for Network snex_shaper
> Compiling dll plugin
Re-saving file: /Volumes/RHR Audio/Development/Mosaic/DspNetworks/Binaries/AutogeneratedProject.jucer
Finished saving: Visual Studio 2022
Finished saving: Xcode (macOS)
Finished saving: Linux Makefile
Compiling Mosaic ...
/Volumes/RHR Audio/Development/Mosaic/DspNetworks/Binaries/batchCompileOSX.sh: line 9: /Volumes/RHR Audio/Development/source/repos/HISE1/tools/Projucer/xcbeautify: Bad CPU type in executable
** BUILD FAILED **


The following build commands failed:
	CompileC /Volumes/RHR\ Audio/Development/Mosaic/DspNetworks/Binaries/Builds/MacOSX/build/Mosaic.build/Debug/Mosaic\ -\ Dynamic\ Library.build/Objects-normal/x86_64/Main.o /Volumes/RHR\ Audio/Development/Mosaic/DspNetworks/Binaries/Source/Main.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'Mosaic - Dynamic Library' from project 'Mosaic')
	CompileC /Volumes/RHR\ Audio/Development/Mosaic/DspNetworks/Binaries/Builds/MacOSX/build/Mosaic.build/Debug/Mosaic\ -\ Dynamic\ Library.build/Objects-normal/arm64/Main.o /Volumes/RHR\ Audio/Development/Mosaic/DspNetworks/Binaries/Source/Main.cpp normal arm64 c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'Mosaic - Dynamic Library' from project 'Mosaic')
(2 failures)

It's literally just a blank scriptnode project with a SNEX shaper in it

@LozPetts @Christoph-Hart looking through the GitHub I can see a change a few days ago referencing a fix for DLL and C++ compilation - is that relevant here?

Also, thanks for adding custom font support in CSS, I got it done with regular LAF in the end but that'll be super helpful in the future!

@Lindon Yeah that would be how I would do it too - I did see someone post a snippet for a basic transient designer a while back, OP could potentially use that as a starting point - certainly above my experience level at the moment!

@HarveySmith That's an interesting one -

"Fruity Slicer uses beat detection to slice a wave file into pieces and make them independently playable from the Piano roll or from a controller. If the wave file contains slice/region data this will be automatically used instead of beat-detection. Fruity Slicer offers playback, reordering of slices and time-stretching capabilities optimized for drum loops."

So if I'm correct, it divides up the signal into chunks depending on the tempo and note value, and then resequences them as you play in MIDI?

You could do that in HISE but it'll be tricky, you'd need to script getting the tempo, doing the maths on the length of note values in ms, 1/8th=120ms for example, and then somehow assign these as playable samples(?) and script cycling through them or triggering them at random with MIDI I guess?
I have no idea how to do transient/beat detection in HISE but I'd bet it's possible.

Would be a real cool project, especially if you've got some experience already.