HISE Logo Forum
    • Categories
    • Register
    • Login

    Great LAF Examples anyone?

    Scheduled Pinned Locked Moved General Questions
    look and feelgui designsnippetsfreelance
    19 Posts 6 Posters 1.6k 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.
    • StraticahS
      Straticah @Christoph Hart
      last edited by

      @Christoph-Hart oh thanks a lot for taking your time to share! It is amazing to get so much possibilities as someone who comes from a creative background.

      building user interfaces in HISE :)
      web: www.vst-design.com

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

        This UI is all LAF. Also check out Mndala, we built that with LAF and lotties.

        Peek 2022-10-29 12-45.gif

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

        StraticahS 1 Reply Last reply Reply Quote 6
        • orangeO
          orange
          last edited by

          This is not finished yet, all UI is Custom LAF & Paint Routines.

          Screen Shot 2022-10-29 at 15.51.04.png

          develop Branch / XCode 13.1
          macOS Monterey / M1 Max

          StraticahS 1 Reply Last reply Reply Quote 8
          • StraticahS
            Straticah @d.healey
            last edited by

            @d-healey @orange omg these are just beautiful! Mndala and Chronic XL Great Work! I guess these are commercial projects so you are not able to share the snippets but this is just amazing.

            building user interfaces in HISE :)
            web: www.vst-design.com

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

              @Straticah Snippets wouldn't show much, unless I made a LAF gallery or something. LAF is just a collection of functions that can be applied to controls. A lot the LAF in my project is on github - under the GNU GPL license.

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

              StraticahS 1 Reply Last reply Reply Quote 2
              • StraticahS
                Straticah @d.healey
                last edited by

                @d-healey got it! Will look into those for sure, keep it up!

                building user interfaces in HISE :)
                web: www.vst-design.com

                1 Reply Last reply Reply Quote 0
                • oskarshO
                  oskarsh
                  last edited by

                  @Straticah I've just finished the design for my first ever plugin made with HISE. Its fully vectorized and features a dark mode + some paint routine animations that are controlled via the knobs. The filter panel is also customized via LAF and the preset browser also has some customization to fit the theme.

                  I've learned that most of the UI can be achieved with LAF and HISE (except masks for a layer that scale @Christoph-Hart :) ) but it just takes some creativity to and tricks to get the result you want.

                  Reach.gif
                  9fdad9ab-4cb2-4951-9aff-42f2c937a67a-image.png

                  breathing HISE

                  DabDabD 1 Reply Last reply Reply Quote 7
                  • DabDabD
                    DabDab @oskarsh
                    last edited by

                    @oskarsh How did you change the Draggable Filter band? Mine is Rounded Square , how did you manage to get circular ?

                    Bollywood Music Producer and Trance Producer.

                    oskarshO 1 Reply Last reply Reply Quote 0
                    • oskarshO
                      oskarsh @DabDab
                      last edited by

                      @DabDab
                      there you go

                      const localLaf = Content.createLocalLookAndFeel();
                      localLaf.registerFunction("drawFilterDragHandle", function(g, obj)
                      {	
                      	var area = [obj.handle[0], obj.handle[1], 26, 26];
                      	
                      	g.setColour(0XFFFFFFFF);
                      	g.fillEllipse(area);
                      
                      	g.drawAlignedText(obj.index, area, "centred");
                      });
                      
                      const var EQ = Content.getComponent("tile_eq");
                      EQ.setLocalLookAndFeel(localLaf);
                      

                      breathing HISE

                      DabDabD 1 Reply Last reply Reply Quote 3
                      • DabDabD
                        DabDab @oskarsh
                        last edited by DabDab

                        @oskarsh Thank you so much. I didn't find this drawFilterDragHandle function at @Christoph-Hart documentations. Am I something missing?

                        Can anybody @d-healey @Christoph-Hart list all the new updated LAF functions which is available in master branch?

                        Previously I used to use Global LAF. Now there is Local LAF. So little deep, kindly get me all the updated functions.

                        Bollywood Music Producer and Trance Producer.

                        1 Reply Last reply Reply Quote 0
                        • oskarshO
                          oskarsh
                          last edited by

                          @DabDab
                          You can use global LAF or localLAF. I recommend using local LAF for objectsthat are not repeated often. Objects that are used again and again like a button or knob should use global LAF.

                          "drawTableHeaderColumn",
                          "drawFilterDragHandle",
                          "drawFilterBackground",
                          "drawFilterPath",
                          "drawFilterGridLines",
                          "drawAnalyserBackground",
                          "drawAnalyserPath",
                          "drawAnalyserGrid"
                          "drawOscilloscopeBackground"
                          "drawOscilloscopePath"
                          

                          Link Preview Image
                          Filter drag overlay and filter graph LAF methods

                          @orange Not yet as far as I know. The new functions are: "drawTableHeaderColumn", "drawFilterDragHandle", "drawFilterBackground", "drawFilterPath", "drawFilt...

                          favicon

                          Forum (forum.hise.audio)

                          breathing HISE

                          DabDabD 1 Reply Last reply Reply Quote 1
                          • DabDabD
                            DabDab @oskarsh
                            last edited by DabDab

                            @oskarsh Excellent. Thank you so much.

                            Can I change Label Righclick Pop up Menu background via LAF ?

                            Bollywood Music Producer and Trance Producer.

                            1 Reply Last reply Reply Quote 0
                            • DabDabD
                              DabDab
                              last edited by

                              How can I change Filter BG Menu?

                              const var laf = Engine.createGlobalScriptLookAndFeel();
                              
                              laf.registerFunction("drawFilterBackground", function(g, obj)
                              {
                                g.fillAll(Colours.red);
                              	
                              });
                              
                              
                              laf.registerFunction("drawFilterPath", function(g, obj)
                              {
                              	g.setColour(0XffFFFFFF);
                              	g.drawPath(obj.pathArea,2);
                              	
                              });
                              
                              
                              Not working.
                              

                              Bollywood Music Producer and Trance Producer.

                              1 Reply Last reply Reply Quote 0
                              • StraticahS
                                Straticah @orange
                                last edited by

                                @orange Was this preset Browser made with LAF or did you build it from the ground up? Looks pretty cool with the icons at bottom and the modified search bar :)

                                building user interfaces in HISE :)
                                web: www.vst-design.com

                                d.healeyD orangeO 2 Replies Last reply Reply Quote 0
                                • d.healeyD
                                  d.healey @Straticah
                                  last edited by

                                  @Straticah said in Great LAF Examples anyone?:

                                  @orange Was this preset Browser made with LAF or did you build it from the ground up? Looks pretty cool with the icons at bottom and the modified search bar :)

                                  It has all of the components of the stock browser so my guess is it's LAF.

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

                                  1 Reply Last reply Reply Quote 0
                                  • orangeO
                                    orange @Straticah
                                    last edited by

                                    @Straticah said in Great LAF Examples anyone?:

                                    @orange Was this preset Browser made with LAF or did you build it from the ground up? Looks pretty cool with the icons at bottom and the modified search bar :)

                                    Yes it is LAF. In the documentation, you can find cool examples: https://docs.hise.audio/glossary/custom_lookandfeel.html#presetbrowser

                                    develop Branch / XCode 13.1
                                    macOS Monterey / M1 Max

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

                                    49

                                    Online

                                    1.7k

                                    Users

                                    11.7k

                                    Topics

                                    101.8k

                                    Posts