6 State Paint Routine Button



  • 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
    


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

    I tried to make it a 6 state

    Show me what you tried.



  • @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 This is filstrip image. Actually I need panel button.

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



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



  • @d-healey I will check thank you



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


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



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


  • 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 😉 )



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



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



  • @d-healey Thank you I will look at it


Log in to reply
 

14
Online

1.2k
Users

3.8k
Topics

33.6k
Posts