6 State Paint Routine Button

[A Former User]

@d-healey This is filstrip image. Actually I need panel button.

At least, how can we make it 2 state button with text?

[d.healey]

@Steve-Mohican

Follow the tutorial. Ignore the bits about setting a film strip, and paint your button in the paint routine instead, using the button states you get from the mouse callback

    widget.data.hover = 0;
    widget.data.on = 0; 
    widget.data.down = 0;

@Steve-Mohican said in 6 State Paint Routine Button:

At least, how can we make it 2 state button with text?

I've shown this in at least one of my tutorial videos, can't remember which but probably a paint routines/panels one.

[A Former User]

@d-healey I will check thank you

[A Former User]

@d-healey

Ok I edited the tutorial but hover still doesn't work :(

namespace SixStateButton
{
    inline function createWidget(name, x, y)
    {
        local widget = Content.addPanel(name, x, y);
    
        Content.setPropertiesFromJSON(name, {
        "width": 200,
        "saveInPreset": 1,
        "allowCallbacks": "Clicks & Hover",
        "opaque": 1,
        "stepSize": "1"
        });
    
        widget.data.hover = 0;
        widget.data.on = 0; 
        widget.data.down = 0;
        
    
        widget.setPaintRoutine(function(g)
        {
            g.fillAll(0xFF24A8E0);
        });
    
        widget.setMouseCallback(function(event)
        {
            if(event.clicked) 
            {
                Engine.openWebsite("https://forum.hise.audio/");
                this.data.down = true;
                this.repaint();
            }
            else if(event.mouseUp) 
            {
                this.data.down = false;
                setButtonValue(this, 1 - this.getValue());  
                this.changed();
            }
            else 
            {
                this.data.hover = event.hover;
                this.repaint();
            }
        });
        
        return widget;
    };
    

    
    
    inline function update(p, value)
    {
        p.setValue(value);
        p.changed();
        p.repaint();
    }
    
    inline function setButtonValue(p, value)
    {
        p.setValue(value);
        p.repaint();
    }
};

// Create two buttons
const var b1 = SixStateButton.createWidget("b1", 0, 0);


function onNoteOn(){}
function onNoteOff(){}
function onController(){}
function onTimer(){}

function onControl(number, value)
{
    // Update the buttons in the onControl callback
    SixStateButton.update(number, value);
}

[d.healey]

What you've got there is a factory function for creating buttons. You can use this to create several buttons. You should give the button (panel) a control callback that is triggered in the mouse callback, rather than performing the button's action directly inside the mouse callback.

What do you mean hover doesn't work?

[A Former User]

@d-healey

When I add else if(event.hover) when mouse is over the button, color doesn't change

namespace SixStateButton
{
    inline function createWidget(name, x, y)
    {
        local widget = Content.addPanel(name, x, y);
    
        Content.setPropertiesFromJSON(name, {
        "width": 200,
        "saveInPreset": 1,
        "allowCallbacks": "Clicks & Hover",
        "opaque": 1,
        "stepSize": "1"
        });
    
        widget.data.hover = 0;
        widget.data.on = 0; 
        widget.data.down = 0;
        
    
        widget.setPaintRoutine(function(g)
        {
            g.fillAll(0xFF24A8E0);
        });
    
        widget.setMouseCallback(function(event)
        {
            if(event.clicked) 
            {
                Engine.openWebsite("https://forum.hise.audio/");
                this.data.down = true;
                this.repaint();
            }
            
            else if(event.hover) 
            {
                g.setColour(Colours.darkgrey);
            }
            
            
            else if(event.mouseUp) 
            {
                g.setColour(Colours.darkgrey);
                this.data.down = false;
                setButtonValue(this, 1 - this.getValue());  
                this.changed();
            }
            else 
            {
                this.data.hover = event.hover;
                this.repaint();
            }
        });
        
        return widget;
    };

    
    inline function update(p, value)
    {
        p.setValue(value);
        p.changed();
        p.repaint();
    }
    
    inline function setButtonValue(p, value)
    {
        p.setValue(value);
        p.repaint();
    }
};

// Create two buttons
const var b1 = SixStateButton.createWidget("b1", 0, 0);



function onNoteOn(){}
function onNoteOff(){}
function onController(){}
function onTimer(){}

function onControl(number, value)
{
    // Update the buttons in the onControl callback
    SixStateButton.update(number, value);
}

[d.healey]

You can't repaint the panel in the mouse callback, you have to do that in the paint routine. You'll notice that g is passed into the paint routine and not into the mouse callback.

Maybe read the rest of the panel documentation and try out the examples so you get a good grasp of how these things are handled (and watch my videos ;) )

[A Former User]

@d-healey I am very very confused and I am on this for a couple of hours, I really don't understand. Can you please show me your fix?

That would be much more helpful to learn.

[d.healey]

@Steve-Mohican I don't have a fix, I'd have to rewrite it and I don't have time at the moment.

https://www.youtube.com/watch?v=ZjRRcOmTtqI

[A Former User]

@d-healey Thank you I will look at it