HISE Logo Forum
    • Categories
    • Register
    • Login

    LAF ScriptSlider?

    Scheduled Pinned Locked Moved General Questions
    195 Posts 11 Posters 15.9k 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 @ustk
      last edited by d.healey

      @ustk Do you have example of drawing a knob with the correct middle position?

      This is what I'm working with:

          laf.registerFunction("drawRotarySlider", function(g, obj)
          {
              var a = obj.area;
              var width = obj.area[2];
              var height = obj.area[3];
              var stroke = 3;
              var mark = 4;
              var range = obj.max - obj.min;
              var startOffset = 2.5;
              var endOffset = -startOffset + 2.0 * startOffset * (obj.value - obj.min) / range;
      
              g.setColour(obj.itemColour1);
              g.fillEllipse(a);
      
              g.setColour(obj.itemColour2);
              g.drawEllipse([stroke / 2, stroke / 2, width - stroke, height - stroke], stroke);
      
              g.rotate(endOffset, [a[2] / 2, a[2] / 2]);
      
              g.setColour(obj.textColour);
              g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
          });
      

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

      ustkU 1 Reply Last reply Reply Quote 0
      • Christoph HartC
        Christoph Hart
        last edited by Christoph Hart

        laf.registerFunction("drawRotarySlider", function(g, obj)
        {
            var a = obj.area;
            var width = obj.area[2];
            var height = obj.area[3];
            var stroke = 3;
            var mark = 4;
            var range = obj.max - obj.min;
            var startOffset = Math.PI * 0.25;
            var fullArc = Math.PI * 1.5;
            var arcPos = startOffset + fullArc * (obj.value - obj.min) / range;
        
            // 0 = starts in the center
            var intend = width * 0.25;
            
            g.setColour(obj.itemColour1);
            g.fillEllipse(a);
            g.setColour(obj.itemColour2);
            g.drawEllipse([stroke / 2, stroke / 2, width - stroke, height - stroke], stroke);
            
            var p = Content.createPath();
            p.addArc([0, 0, 1.0, 1.0], Math.PI + startOffset + fullArc, Math.PI + startOffset);
            
            /// itemColour3 ?
            g.setColour(0x22FFFFFF);
            
            // Annoyingly the path can't scale proportionally so we need to factor this weird number
            // in to make it non-squashed (change it if you change the intend)
            // someone with more math ambition could calculate it with a middle-school grade formula...
            var magicScaler = 1.4;
            
            g.drawPath(p, [intend/2 + stroke, 
                           intend/2 + stroke, 
                           width - intend - 2 * stroke, 
                           height - magicScaler * intend - 2 * stroke], 
                          intend);
            
            g.rotate(arcPos, [a[2] / 2, a[3] / 2]);
            g.setColour(obj.textColour);
            g.drawLine(width/2, height/2, intend - stroke + width/2, height - stroke, 4.0);
        });
        
        1 Reply Last reply Reply Quote 2
        • ustkU
          ustk @d.healey
          last edited by

          @d-healey Sorry but I don't understand what was the problem... Everything seems fine here...

          Can't help pressing F5 in the forum...

          d.healeyD 1 Reply Last reply Reply Quote 0
          • d.healeyD
            d.healey @ustk
            last edited by

            @ustk If you use it with the attack knob of an ADSR for example the skew is totally off.

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

            ustkU 1 Reply Last reply Reply Quote 0
            • Christoph HartC
              Christoph Hart
              last edited by

              Oops I thought you were talking about the center point of the circle :)

              I think the obj.value should be normalized (or at least an obj.normalisedValue should be added) that takes the skew factor into account.

              ustkU 1 Reply Last reply Reply Quote 1
              • ustkU
                ustk @Christoph Hart
                last edited by ustk

                @Christoph-Hart @d-healey There's a valueNormalized but I might have made a mistake (or not), so this is where obj.skew might help.
                This is the formula of the valueNormalized I've made:

                (s.getValue() - s.getMinimum()) / (s.getMaximum() - s.getMinimum())
                

                so this doesn't take the skew factor, hence 0.5 isn't the middlePosition of 1,000, but half the range (10,000 in the case of a 0-20,000 time knob)

                Can't help pressing F5 in the forum...

                1 Reply Last reply Reply Quote 0
                • ustkU
                  ustk @d.healey
                  last edited by ustk

                  @d-healey @Christoph-Hart This is what you want, but since it complicates too much the formula, I should either add a valueNormalizedWithSkew, or modify the existing valueNormalized... ?

                  laf.registerFunction("drawRotarySlider", function(g, obj)
                  {
                      var a = obj.area;
                      var width = obj.area[2];
                      var height = obj.area[3];
                      var stroke = 3;
                      var mark = 4;
                      var startOffset = 2.5;
                      
                      var valueNormalizedWithSkew = Math.pow(10, (Math.log10(obj.valueNormalized) / (1/obj.skew)));
                      
                      var endOffset = 5 * valueNormalizedWithSkew - startOffset;
                  
                      Console.print(obj.skew);
                      g.setColour(obj.itemColour1);
                      g.fillEllipse(a);
                  
                      g.setColour(obj.itemColour2);
                      g.drawEllipse([stroke / 2, stroke / 2, width - stroke, height - stroke], stroke);
                  
                      g.rotate(endOffset, [a[2] / 2, a[2] / 2]);
                  
                      g.setColour(obj.textColour);
                      g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
                  });
                  

                  Can't help pressing F5 in the forum...

                  1 Reply Last reply Reply Quote 1
                  • Christoph HartC
                    Christoph Hart
                    last edited by

                    Yeah, valueNormalised should definitely include the "deskewing", otherwise you can just use the normal value.

                    ustkU 1 Reply Last reply Reply Quote 2
                    • ustkU
                      ustk @Christoph Hart
                      last edited by

                      @Christoph-Hart Alright, correcting... 😉

                      Can't help pressing F5 in the forum...

                      ustkU 1 Reply Last reply Reply Quote 1
                      • ustkU
                        ustk @ustk
                        last edited by

                        @Christoph-Hart @d-healey that's fixed and pushed, so you can now do this:

                        laf.registerFunction("drawRotarySlider", function(g, obj)
                        {
                            var a = obj.area;
                            var width = obj.area[2];
                            var height = obj.area[3];
                            var stroke = 3;
                            var mark = 4;
                            var startOffset = 2.5;
                            var endOffset = 5 * obj.valueNormalized - startOffset;
                        
                            g.setColour(obj.itemColour1);
                            g.fillEllipse(a);
                        
                            g.rotate(endOffset, [a[2] / 2, a[2] / 2]);
                        
                            g.setColour(obj.textColour);
                            g.fillRoundedRectangle([width / 2 - mark / 2, 0, mark, height / 2.5], 1.5);
                        });
                        

                        Can't help pressing F5 in the forum...

                        d.healeyD 1 Reply Last reply Reply Quote 1
                        • d.healeyD
                          d.healey @ustk
                          last edited by

                          @ustk Woohoo! Thank you both!

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

                          1 Reply Last reply Reply Quote 0
                          • d.healeyD
                            d.healey
                            last edited by

                            @Christoph-Hart Merge?

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

                            Christoph HartC 1 Reply Last reply Reply Quote 1
                            • Christoph HartC
                              Christoph Hart @d.healey
                              last edited by

                              @d-healey Merge.

                              1 Reply Last reply Reply Quote 4
                              • NatanN
                                Natan
                                last edited by

                                @d-healey @Christoph-Hart so Is This Stable To Build?
                                https://github.com/christophhart/HISE/commits/scriptnode

                                The Top One, Is The Latest, Right?
                                71f75e5 <<< This?

                                1 Reply Last reply Reply Quote 1
                                • Christoph HartC
                                  Christoph Hart
                                  last edited by

                                  Yes, that should be fine.

                                  1 Reply Last reply Reply Quote 1
                                  • ?
                                    A Former User @Natan
                                    last edited by

                                    This post is deleted!
                                    1 Reply Last reply Reply Quote 0
                                    • d.healeyD
                                      d.healey
                                      last edited by

                                      I'm convinced that LAF is the way to go now for a custom UI without images.

                                      Peek 2021-03-18 17-31.gif

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

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

                                        @d-healey I was experimenting with Lottie graphics yesterday and was totally blown away by its looks and possibilities! I don’t get what LAF is exactly tbh. But it looks really nice too!

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

                                          @vewilya I haven't used rlottie much but what I have done with it has looked nice, very smooth animation.

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

                                          1 Reply Last reply Reply Quote 0
                                          • ustkU
                                            ustk @A Former User
                                            last edited by

                                            @vewilya Be just careful with Lottie since all actions aren't rendered/compatible with Hise. So complex animations might not work, keep them simple.
                                            Custom LAF is a way to redraw the components (sliders, comboboxes, etc...) with fully customizable graphics (shapes and colours). So you don't necessarily need to recreate the components from script panels for full customizations, the original ones can now give you almost anything you want...

                                            Can't help pressing F5 in the forum...

                                            DanHD ? 2 Replies Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            8

                                            Online

                                            1.7k

                                            Users

                                            11.8k

                                            Topics

                                            102.7k

                                            Posts