HISE Logo Forum
    • Categories
    • Register
    • Login

    PresetBrowser LAF Scrollbar

    Scheduled Pinned Locked Moved General Questions
    lafpreset browsergraphics
    30 Posts 6 Posters 1.7k 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 @d.healey
      last edited by

      @d-healey oh i did not know that, might have a look!

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

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

        @d-healey the hero we need! Makes this code much cleaner. Thanks a lot!
        @Straticah there is a small exception for the scrollbars you use obj.handle for the actual handle area instead of the usual obj.area.

        const SCROLLBAR_PADDING = 5;
        laf.registerFunction('drawScrollbar', function(g, obj) {
        	var a = obj.handle;
        	var pa = [
        		a[0] + SCROLLBAR_PADDING,
        		a[1] + SCROLLBAR_PADDING,
        		a[2] - SCROLLBAR_PADDING * 2,
        		a[3] - SCROLLBAR_PADDING * 2,
        	];
        
        	g.setColour(Colours.grey);
        	g.fillRoundedRectangle(pa, 5);
        });
        
        DanHD 1 Reply Last reply Reply Quote 1
        • DanHD
          DanH @oskarsh
          last edited by

          @oskarsh works nicely, thanks! Have added some hover and down entries

          HiseSnippet 1643.3ocwX8taaaCDWJIpH1sccEnO.BEEqtcttR9OwIsXn1NNtvXNIF1ccCKMnfVhVlKxjdTzIwqq.CCXeduB6QYOJ6y6S6MX6njrkjiRZZZKV9RDu+w62w6Nxyc4LKrmGiqnl4EylfUTugV+YTwnsGgHTk1MUTuiVWN1CKzavYm3g45cp2RowrIHOOrshp5pOWJoZl0T7+6edVCjKhZgiHon7RFwB2gLlHhn1s1WSbcagrwufLNlzkq01hQ2l4xlBd0pZFJSPVGgbv6gjhshlh501wlHX79Bj.6ontVCl8r9iXmPCj+kDOx.WrbgoRevPAjawbskdrjpx1iHt1cmidOEvJcihEqFDKti1tDaxB5QwjO2mgdjFwiGpqjz8VMg6YF28Lh4do3Rpwbo0Bboaq02hSlHh3H8mqq0lJv7gHHrG2UBjUYkeaUssYfDTQgwnivs3vhEZjaCCi75kqX7fmlMKD58D5CBNp6fFp+U56PcHTbAKNFvyycYCPtA1sCicTcpcKL1MWjt82t29c5znduW2sdyls264fIp7zrQlr.G6P7fMu0Tpkfvn4tuMGcBXSlq6.D+940GNmiSdc1fe3A5uIaliQbcDXKXcgQHpsK9oADmHodP1LYPGXbn9WdVGHuOOyKfWwC0eTJN9C0KFvuzEw+P.5NEfJjfb1bA+yqfCGOCBKNEFB448XSoP1WOrk.Qcbw4lffXtLpQFpmShI1wX9CxB.MMacxHBjKMlcDFTIy6vjYd7icJHCooJQk75EAgdazNaColm6Nyw1yM44toUBbpycKKGrkYReG7NZ1.2oWFfA9LXCHS1i4hKLgSnhbBtLEVljHEPFPmm7nyn6wD38o47AGns9xrFNLUdxZEYxHlmJaY+J9EoXN5zwCv775Gij.atfPQbxNCZmemg3MtrBJciIHi1lRD6OASOu1YJg06vWeS6lHAR1NIjFH2DLWPjtfZS7wPu4flKYzZh8NRvl.sX2lMdBiJsfZVgO2aNu0ChhcUH1x6JZ.slc3xyKkSi2veV7EmPrEiVP3O+0ZivDmQQWEn+y0F3Lug+MzJWr5VaTZyRFEUfj9wuCFEWhy.F2Fy6S9oDW.ob4fSeLhaMRuAhGCN+BpVL3buZIgiNeY3nTsV5NQ.0dHaxTuH5qW6rnzrZ0hk1HMTFxINd9LQ3kUA3okKCIHTmWPfLIIrtkVbRlWvAUX9QPxvsBu2O7ZekninrZlaTE7CyJINfRkbniuU4sLLqtgghep3JcWQ6MY00uqLktO5XbioBAid2mnK3Sw4myYmSmfndPkkWcOvZSGKkXHx0KRD+6z4oqtrB26L1DJ.CDOAqHxPOA.z.OSiEJU21N8snGlBOJIcdMwtXw4vqE5XFGBRxW5DmWnm0FPsMtge5RBHu2zwAABoyWzmTv5uUlS1CNjY.iC.555FEJuY9vupXBebnu7cfqdqCWku.mgRmOs+sPqfcoG6jtHaaHS5xpWPAETO0P1iP50GDvXWFOL1rLmn7gk4LOpcFtYe6koGSTRYovpoMKZVdKSS3kgx5n001+zYNPKUA9TQT8XIixU2rZwhUp.O9LVY20Ou1Hqq4+chBs6DuERyZSPbvFwL1x0nKAme7L8XZ9A1iYyMMKVoTosNao5BNJuGfsXLv1k+AA1+h++MXuYRv1AMXAX8+NwI68RBVYtirU31vM7NL9rk.GbWxYAGxk3PG6u0WSyEOTnLDRHCF2YQRIF5PgVL1fTfjQih0Rl1Jurn5FvshgBKlI08ZvSNbseuPa7i1+fmFZuAL8gGzCyGBervaZHLYL3Jh20Sh21igQKCwq+2wOc0shiWiZvqSCGC8Kz99m7plvCxfLYauWIajqiNA6wFiejmeSuBSnNKEMfjkkiFODhFSFgBIn+pe+uelxYm5Cl2jYO0EIRNDpbx6PFvsjIl7SNcGbKhXV7Iy+nMY5k0EusVWhvZT593Jo3ivqT+T3igyyeSscFNDlpHxAWSq028oY3cEXJFYKtcQBNAxnzf6t6C4pVXX2oPKS46+UWQ9pqf0Fx0xHPeL01ew+B+ExzTtVMjo4blJiQvPyu1JXpC4uXv59T.eh5mklQaW4ZcSE+IQ.8zLJXnLlXSdskkD9OBFdHccJdEzozUPmxWAcpbEzYiqfNUuB5r4Epi72Mp9TAabP4.Pn6N9uIVUcGpr2leVnx+ArkpwDO
          

          DHPlugins / DC Breaks | Artist / Producer / DJ / Developer
          https://dhplugins.com/ | https://dcbreaks.com/
          London, UK

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

            @DanH thats cool, thanks :) Just noticed its my browser template you are using lol :D

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

            DanHD 1 Reply Last reply Reply Quote 1
            • DanHD
              DanH @Straticah
              last edited by

              @Straticah yea I loaded that snippet earlier and it was still open on my laptop so started playing around with the scroll bars too!

              DHPlugins / DC Breaks | Artist / Producer / DJ / Developer
              https://dhplugins.com/ | https://dcbreaks.com/
              London, UK

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

                @DanH i see :) maybe i have a template soon that is so good that ppl actually use it :D currently trying to get svg knobs into the text areas of the buttons.
                do you know how this would work? I guess i would have to replace my styling with a draw svg or something. have to find it in docs i think i have seen it the other day.

                  var editButtons = ["Add", "Rename", "Delete"];    
                		
                    if (editButtons.contains(obj.text))
                    {
                        var icons = ["add", "edit", "trash"];
                	var path = Paths.icons[icons[editButtons.indexOf(obj.text)]];
                        g.drawPath(paths, pa, 3);
                    }
                

                i got this from this thread but have no idea how i implement the icon source

                laf.registerFunction("createPresetBrowserIcons", function(id)
                {
                    if (id == "favorite_on")
                        return myFavoriteOnPath;
                
                    if (id == "favorite_off")
                        return myFavoriteOffPath;
                        
                    if (id == "searchIcon")
                        return mySearchIconPath;
                });
                

                and this from the docs, @d-healey do you have a video how to draw svg icons for the preset browser?

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

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

                  @Straticah I don't have a video about it, but it's exactly the same as drawing them in a panel's paint routine.

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

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

                    @d-healey i got it working thanks to your video :) i replaced the star and the search bar icon. I cand find how to size them tho.

                    // Search and Fav Icons
                    
                    browserLaf.registerFunction("createPresetBrowserIcons", function(id)
                    {
                        if (id == "favorite_on") {
                    	    return; g.fillPath(ICON_NO_4_path, [0, 2, 2, 2]);	    
                    
                    }      
                        
                        if (id == "favorite_off")
                            return ICON_NO_5_path;
                            
                        if (id == "searchIcon")
                            return ICON_NO_6_path;
                    });
                    

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

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

                      @Straticah you can size them by using the area parameter. See this example

                              var SIZE = 20;
                      	var a = obj.area;
                      
                      	if (obj.text == 'Add') {
                      		g.drawPath(Paths.icons['add'], [a[0], a[1], SIZE, SIZE);
                      		return;
                      	}
                      

                      this will place the icon left aligned with a fixed SIZE of 20. It's not recommended to just return them without specifying their bounds

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

                        @oskarsh i see, so the sizing of the favourite star icons and the search icon works the same way? I thought there might be a difference since the fav icon on top is not the same size like the one in front the presets :) I attached a screenshot below.

                        8b296f51-9e8b-406f-b665-bbf05189a5fe-image.png

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

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

                          @Straticah In the interface designer look in the floating tile's data property. You can change the search bar and favorite icon bounds there.

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

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

                            @d-healey oooh nice! tx

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

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

                              @d-healey there is no bounds for the search icon tho is there?

                              {
                               "ShowSaveButton": true,
                               "ShowExpansionsAsColumn": false,
                               "ShowFolderButton": true,
                               "ShowNotes": true,
                               "ShowEditButtons": true,
                               "EditButtonOffset": 10,
                               "ShowAddButton": true,
                               "ShowRenameButton": true,
                               "ShowDeleteButton": true,
                               "ShowFavoriteIcon": true,
                               "ButtonsInsideBorder": false,
                               "NumColumns": 2,
                               "ColumnWidthRatio": [
                                 0.3333333333333333,
                                 0.3333333333333333,
                                 0.3333333333333333
                               ],
                               "ListAreaOffset": [
                                 0,
                                 0,
                                 0,
                                 0
                               ],
                               "ColumnRowPadding": [
                                 0,
                                 0,
                                 0,
                                 0
                               ],
                               "SearchBarBounds": [],
                               "MoreButtonBounds": [],
                               "SaveButtonBounds": [],
                               "FavoriteButtonBounds": [
                                 75,
                                 6,
                                 28,
                                 28
                               ]
                              }
                              

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

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

                                @Straticah You don't need it. There is a whole laf function - drawPresetBrowserSearchBar

                                This is what mine looks like:

                                e8c39d7c-3110-4c25-bc90-04aed59c0a02-image.png

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

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

                                  @d-healey ah need to check on that. good job, looks very clean :)

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

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

                                    @d-healey got it to work :)
                                    375989d8-7098-4420-8551-d968af3c662e-image.png

                                    why does this colour on "favorite_on" cant be applied here? Is it because it is using an id and is different to the obj functions?

                                    // Search and Fav Icons
                                    
                                    browserLaf.registerFunction("createPresetBrowserIcons", function(id)
                                    {
                                        if (id == "favorite_on")	   
                                    	{ 
                                    	   
                                    	return ICON_NO_4_path; g.setColour(0xFF2EFFE9);       
                                        
                                    	}
                                       
                                       
                                        if (id == "favorite_off")
                                            return ICON_NO_4_path;
                                            
                                        if (id == "searchIcon")
                                            return ICON_NO_6_path;
                                    });
                                    

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

                                    LindonL orangeO 2 Replies Last reply Reply Quote 1
                                    • LindonL
                                      Lindon @Straticah
                                      last edited by Lindon

                                      @Straticah said in PresetBrowser LAF Scrollbar:

                                      @d-healey got it to work :)
                                      375989d8-7098-4420-8551-d968af3c662e-image.png

                                      why does this colour on "favorite_on" cant be applied here? Is it because it is using an id and is different to the obj functions?

                                      // Search and Fav Icons
                                      
                                      browserLaf.registerFunction("createPresetBrowserIcons", function(id)
                                      {
                                          if (id == "favorite_on")	   
                                      	{ 
                                      	   
                                      	return ICON_NO_4_path; g.setColour(0xFF2EFFE9);       
                                          
                                      	}
                                         
                                         
                                          if (id == "favorite_off")
                                              return ICON_NO_4_path;
                                              
                                          if (id == "searchIcon")
                                              return ICON_NO_6_path;
                                      });
                                      

                                      you appear to be setting the colour AFTER you have returned from the function - so it never happens...try it the other way round...

                                               g.setColour(0xFF2EFFE9);  
                                       	return ICON_NO_4_path;  
                                      

                                      You will need to specifically reset the colour back to the way you want it in the other if statements...

                                      HISE Development for hire.
                                      www.channelrobot.com

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

                                        @Straticah said in PresetBrowser LAF Scrollbar:

                                        why does this colour on "favorite_on" cant be applied here? Is it because it is using an id and is different to the obj functions?

                                        As you can see, other LAF functions have g and obj arguments, so we can use obj... and g... functions with them.

                                        But that createPresetBrowserIcons LAF uses only icon id's that means g and obj arguments won't work with it. Only icon id's to draw the paths.

                                        develop Branch / XCode 13.1
                                        macOS Monterey / M1 Max

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

                                          @orange ah thy, that is what i thought. At what place can i change the colour independent from item colour. Or is there no possible way to colour on and off differently? :)

                                          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 I don't think you can change the colour of the fav icon through LAF, all you can do is set the icon. The colour property is taken from the floating tile colours.

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

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

                                            16

                                            Online

                                            1.7k

                                            Users

                                            11.8k

                                            Topics

                                            103.2k

                                            Posts