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

https://www.cssportal.com/css-sprite-generator/

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?

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

@Lindon Thanks mate - I went the expansions route before I saw this or I'd have given it a go! Thanks so much for putting that together.

@d-healey I had no idea this existed, this is killer. I've got two expansions working so far! Thanks David!

Hi all!

I'm building a plugin that is effectively going to work as a platform for many different virtual instruments. I need to be able to use a combo box to navigate through these instruments, but as some of them require more than one sampler to be active at a time I can't just use the combobox to change sample map, I need to enable and disable samplers depending on what's selected.

It will also need to enable and disable panels, as each instrument has a different interface and these are each on their own panel.

My issue creating a list of samplers that I can join to the options in the combobox? When using a combobox to change sample map you would join the two, as below:

//Get sample list
const var samplemaps = Sampler.getSampleMapList();

//Get and populate the combobox
const var ComboBox1 = Content.getComponent("Presetbrowser");
ComboBox1.set("items", samplemaps.join("\n"));

//Load the samplemap
inline function onComboBox1Control(component, value)
{
	slot.loadFile("{XYZ::SampleMap}" + component.getItemText());
};

How do I create a list of samplers and join that to the items in the combo box? Is it possible for more than one sampler to by nested into one item? For example, selecting one item from the combobox needs to enable 3 samplers?

Hope this made sense,
Thank you!

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

@LozPetts PS you both rock - thank you so much for your help.

@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 D'oh. Thank you!
That's got it printing the velocity okay, no more errors - still not limiting the velocity when I play with my knob though...

@ustk You absolute star, thanks for that! This is where I am, I think I might be pretty close but I'm getting 'Unknown Function "min"' errors, which seems odd consider HISE filled it in for me so I KNOW the function is written correctly at least.

function onNoteOn()
{
math.min(message.getVelocity(), MaxVelKnob(getValue()));
Console.print("Velocity: " + Message.getVelocity());
};

I'm using math.min to compare the two numbers (the velocity played and the velocity stated by the knob), and pick the lowest one. Then (as I've only loaded in one sample across the keyboard as I haven't had the sample session yet), I've got it to print the velocity so I can confirm it's working.

Hey all,

I'm trying to create a knob that as you turn it down will limit the maximum velocity that gets fed into my sampler. I'm trying to use message.setVelocity like so:

message.setVelocity(range, 1 - 127)

But I'm not sure how to:
A. use this to limit the velocity depending on the value of the knob.
B. Tie this to a knob, I understand this shouldn't be used in the interface script, would you put this in a control callback or in onNoteon in the MIDI script processor?

Has anyone got an example of this so I can see how/where it would be used?

Thanks all!

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

https://www.cssportal.com/css-sprite-generator/

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!