Custom Look and Feel for Sliders with Image

[larryseyer]

I'm making a custom look and feel for all sliders in my project.

Do I have to create a look and feel object for each slider like I'm currently doing or can I use a global one instead?

I've tried to do a global one previously, but it doesn't seem to work.

This is what I've come up with so far.

This works, even though the slider image operates backwards (still working on that problem)

I'm open to suggestions, comments, and ways to improve this code.

var slider_id = [];
var slider_name = [];
var number_rows = 1;
var number_cols = 3;
var slider_count = 0;
var faderLineWidth = 3;
for (var p = 0; p < number_of_rhythm_players; p++)
{
    player_counter = 1;
    for (var r = 0; r < number_rows; r++)
    {
        for (var c = 0; c < number_cols; c++)
        {
            slider_name[slider_count] = "Slider" + (p + 1) + (r + 1) + (c + 1);
            slider_id[slider_count] = Content.createLocalLookAndFeel();

            slider_id[slider_count].loadImage("{PROJECT_FOLDER}SliderKnob.png", "SliderKnob");

            slider_id[slider_count].registerFunction("drawLinearSlider", function(g, obj)
            {
                // get the slider area
                var a = obj.area;
                var x1 = a[0];
                var x2 = a[1];
                var y1 = a[2];
                var y2 = a[3];
                var midway = y1 * 0.5;

                // set color and draw the slider line
                g.setColour(0xFF777777);
                g.drawLine(x1 + midway, x2 + midway, y1 - y1, y2, faderLineWidth);

                // draw the fader image on the line
                // This is showing up at the top of the fader instead of bottom
                // and works backwards... still working on this issue
                g.drawImage("SliderKnob", [x1, (y2 * obj.value) - x2, y1, y2], 0, 0);
            });

            slider_name[slider_count] = Content.getComponent(slider_name[slider_count]);
            slider_name[slider_count].setLocalLookAndFeel(slider_id[slider_count]);

            slider_count++;
        }
    }
    player_counter++;
}

[d.healey]

@larryseyer

You can create one local look and feel object, and apply it to multiple sliders.

Avoid using var use either, reg, local, or const depending on the context - if all you can use is var though then go with that.

Looking at the code you posted I detect ChatGPT, is that right? If so you need to correct its mistakes.

[larryseyer]

@d-healey

Ha!

No, that is my code unfortunately...

Guess I should consider that a compliment? But I'm not sure.

How would you suggest I improve it (other than using REG instead of VAR?

L

[d.healey]

@larryseyer said in Custom Look and Feel for Sliders with Image:

No, that is my code unfortunately...

Then you need to correct your own mistakes :face_with_tongue:

For loops in HISE don't need the var for the iterator variable.

[d.healey]

@larryseyer said in Custom Look and Feel for Sliders with Image:

How would you suggest I improve it (other than using REG instead of VAR?

Start with something simpler. 1 slider, 1 look and feel object. Once you have that working we can talk about multiple sliders.

[larryseyer]

@d-healey

Got it working...

For others who many be interested, here is code that will apply local look and feel to 'p' pages of sliders in 'r' rows, and 'c' columns.

var number_rows = 1;
var number_cols = 3;
var slider_id = [];
var slider_name = [];
var slider_count = 0;
var faderLineWidth = 3;
var slider_image_height = 30;
for (p = 0; p < number_of_rhythm_players; p++)
{
    player_counter = 1;
    for (r = 0; r < number_rows; r++)
    {
        for (c = 0; c < number_cols; c++)
        {
            slider_name[slider_count] = "Slider" + (p + 1) + (r + 1) + (c + 1);
            
            slider_id[slider_count] = Content.createLocalLookAndFeel();

            slider_id[slider_count].loadImage("{PROJECT_FOLDER}SliderKnob.png", "SliderKnob");

            slider_id[slider_count].registerFunction("drawLinearSlider", function(g, obj)
            {
                // get the slider area
                var a = obj.area;
                var x1 = a[0];
                var x2 = a[1];
                var y1 = a[2];
                var y2 = a[3] - slider_image_height;
                var midway = y1 * 0.5;

                // set color and draw the slider line
                g.setColour(0xFF777777);
                g.drawLine(x1 + midway, x2 + midway, y1 - y1, y2 + slider_image_height, faderLineWidth);

                // draw the fader image on the line
                g.drawImage("SliderKnob", [x1, 190 - x2 + (y2 * -obj.value), y1, y2], 0, 0);
            });

            slider_name[slider_count] = Content.getComponent(slider_name[slider_count]);
            slider_name[slider_count].setLocalLookAndFeel(slider_id[slider_count]);

            slider_count++;
        }
    }
    player_counter++;
}

[d.healey]

@larryseyer You're still creating one look and feel object per component, you only need 1.

[larryseyer]

@d-healey

Understood...

Done.

Thank you!

L