@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());
};
 

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

I've read Christoph's instructions on this but it's failing - I've created a Scriptnode that is just a SNEX shaper in the stock container. Trying to compile this I get:

> 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/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')
(1 failure)

Is there a setting or something I'm missing here? Following Christophs instructions I get to the point where I need to wrap the SNEX Shaper in a DLL, I try this and get the same error so I'm unable to proceed to the next steps.
Any ideas?

Latest HISE build, macOS

Title is rubbish but I can't word it any better.
Say I had two oscillators going and I wanted to run that audio directly into the Granulator in scriptnode - is that possible?
On similar lines - is it possible to implement granulator as part of an effect that processes incoming audio - like a reverb or delay plugin would?
I love granular synthesis and I really want to experiment with it but relying on set audio files and sample maps is a little bit limiting at the moment.

@LozPetts Additionally, would I need to draw the combobox using LAF or can I keep my current combobox and style it with LAF?

@d-healey That's fair enough - this is my first time getting into CSS, I'm surprised I even got it working haha.
Could I achieve what I've done via CSS using regular LAF? I read from either yourself or Christoph that CSS is best for Combobox's, I literally just want the font in Baskerville and aligned centrally - the changes I've made to colours etc are a nice to have but not critical right now.

@LozPetts I think it's something to do with the fact that i have added the combobox and styled it using a LAF inlinestylesheet rather than drawing the combobox with LAF from the off. If i remove the LAF i can actually change the font via the font setting on the combobox in the HISE UI (as opposed to scripting) but with LAF active i cannot change the font (in windows) and i cannot set it to load the font from my project folder.
Even on macOS it seems to be using the system font Baskerville instead of the Project folder version i've added to avoid OS level font issues (exactly like this one, for example)