HISE Logo Forum
    • Categories
    • Register
    • Login

    6 State Paint Routine Button

    Scheduled Pinned Locked Moved General Questions
    14 Posts 2 Posters 450 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ?
      A Former User @d.healey
      last edited by

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

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

      d.healeyD 1 Reply Last reply Reply Quote 0
      • d.healeyD
        d.healey @A Former User
        last edited by

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

        Libre Wave - Freedom respecting instruments and effects
        My Patreon - HISE tutorials
        YouTube Channel - Public HISE tutorials

        ? 2 Replies Last reply Reply Quote 0
        • ?
          A Former User @d.healey
          last edited by

          @d-healey I will check thank you

          1 Reply Last reply Reply Quote 1
          • ?
            A Former User @d.healey
            last edited by 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);
            }
            
            1 Reply Last reply Reply Quote 0
            • d.healeyD
              d.healey
              last edited by

              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?

              Libre Wave - Freedom respecting instruments and effects
              My Patreon - HISE tutorials
              YouTube Channel - Public HISE tutorials

              ? 1 Reply Last reply Reply Quote 0
              • ?
                A Former User @d.healey
                last edited by 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);
                }
                
                1 Reply Last reply Reply Quote 0
                • d.healeyD
                  d.healey
                  last edited by 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 ;) )

                  Libre Wave - Freedom respecting instruments and effects
                  My Patreon - HISE tutorials
                  YouTube Channel - Public HISE tutorials

                  ? 1 Reply Last reply Reply Quote 1
                  • ?
                    A Former User @d.healey
                    last edited by 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.healeyD 1 Reply Last reply Reply Quote 0
                    • d.healeyD
                      d.healey @A Former User
                      last edited by

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

                      Libre Wave - Freedom respecting instruments and effects
                      My Patreon - HISE tutorials
                      YouTube Channel - Public HISE tutorials

                      ? 1 Reply Last reply Reply Quote 1
                      • ?
                        A Former User @d.healey
                        last edited by

                        @d-healey Thank you I will look at it

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post

                        23

                        Online

                        1.7k

                        Users

                        11.8k

                        Topics

                        103.2k

                        Posts