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.
    • d.healeyD
      d.healey
      last edited by

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

      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

        @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

                          25

                          Online

                          1.7k

                          Users

                          11.8k

                          Topics

                          103.2k

                          Posts