6 State Paint Routine Button

[Steve Mohican]

Here is a paint routine panel button. I tried to make it a 6 state website opener button (also text in center) but I couldn't figured it out.

Please any advices?

HiseSnippet 879.3ocsV00aaaCEkzwpq1adXEX+.DxCCxXcJxsocEnnnNwwt0XKoFyYc8sBFoqrHhDo.EURMBx+48On8RQaK6L2hVCLlWx8iC0gWdtW5IJYHTTHUDZqymmCD5O3LctPmLHgwEjwmPn+nyorBMnbstNddNqn.hHT5dux3f1pIoZ8uu7XVJSDB0tHj2J4gvexy35ZuS5+G7zzQrH3bd1ZYeX+wgRw.YprD4ydNAjbV3krYvYLSZMbHz6MLhqkpoZlFJvbNVFMeZh7ZgM+2xK3WjBFidjo3FYcSFjvSilr7rVPHzlSpO46YO4+ryo7H9J+0UfepJfaMh0qAzFaRolaPodeNJMRlFY1fOC8nqQulV58.mogJdttNhgaeuyXAd4Dyvx95zxlKoQqFNCjXFBseF6RXjBMVgv6oAAOz8IAAcedm1l+vxeg18JlxcBS.o8beg6Rzy.8.YVtTfFd6aCuuEm0vu.zSvRl9ujkZt.7hKEgZtT3Mqam12zosKtl4GiW8Gkl5E7gQidzgG8rgUe7au6Ncprr.FvRSu.k.0aEbE94q2Ndrq0keXJO7RHpq0+MtqVVGl0PwLjV9xbP7OvEEbM3s+AGDKUkY9I7BvmUFwkGTcnVhQiA7UPt4b40842cauciOP0wXIUckhyjZ3MButsuocq12118tghi2ZLSEWISSA0VCa5YTeIfdhxrK.0Cw6wzRXUhnPZSk5895TpgVAvZIJEiEb8av5n0tVK2aKZYxBED9e+83SXZlQduvGlWNnzbCcnm.WgyJrh8VNm.EWpk4U4tP1QnemtJZmksBF4Bgie566XkNjOTON479yWYz+c8Qsj75kJpBSW8.ilov8Wbes7JPQtlGoSHTG59TBIA3yRzFqesZj0+ocDGJHiJSY5MmTXFItH.dorQKoosSfxt4qOx7aX7QvVGer0R9WIcefyDtNLY67swV3Kd08+MeWLLtiyv3XHTWS1lNid2tN48afJ1oWyNkoUbTL4bVY1T78nP.Yh.kXEFMQCir1ZGXrMUlofHpx3i3ZQvdFa5hf8VFjjwBUx2GZaWMi6uekGjShpW5ZgO4h1t8HUsvHNm.+.RF9Jz6CCMkheC491w7nc.yi2ALGtCXdxNf4o6.leeGv7ruHFyO.3nRsLy1lfNlLrZVFkNTvPUVkhj7IfDAj2V

[d.healey]

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

I tried to make it a 6 state

Show me what you tried.

[Steve Mohican]

@d-healey I deleted it because it was a whole mess. I tried to used this but did not work unfortunately.

if(event.clicked) 
  {

  }
else if(event.mouseUp) 
 {

  }
 else 
  {

  }

[d.healey]

Did you try the tutorial - https://docs.hise.audio/scripting/scripting-in-hise/scriptpanel.html#a-six-state-button ?

[Steve Mohican]

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

[Steve Mohican]

@d-healey I will check thank you

[Steve Mohican]

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

[Steve Mohican]

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

[Steve Mohican]

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

[Steve Mohican]

@d-healey Thank you I will look at it