HISE Logo Forum
    • Categories
    • Register
    • Login

    PresetBrowser LAF Scrollbar

    Scheduled Pinned Locked Moved General Questions
    lafpreset browsergraphics
    30 Posts 6 Posters 3.5k 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.
    • oskarshO
      oskarsh
      last edited by

      @d-healey thanks David looks much better know!

      47db49f6-02a7-4a7c-922d-59d712fd38e5-image.png

      @Straticah yes for the buttons I use drawDialogButton it looks something like this

      laf.registerFunction("drawDialogButton", function(g, obj){	
      	var WIDTH = 20;
      	var PADDING = 2;
      	var a = obj.area;
      	var pa = [
      		(a[2] / 2 - WIDTH / 2) + PADDING,
      		(a[3] / 2 - WIDTH / 2) ,
      		WIDTH,
      		a[3] - PADDING * 2
      	];
      	if (obj.text == 'Add') {
      		g.drawPath(Paths.icons['add'], pa, 3);
      		return;
      	}
      	
      	if (obj.text == 'Rename') {
      		g.fillPath(Paths.icons['edit'], pa);
      		return;
      	}
      	
      	if (obj.text == 'Delete') {
      		g.drawPath(Paths.icons['delete'], pa, 2);
      		return;
      	}
      
      d.healeyD StraticahS 2 Replies Last reply Reply Quote 2
      • d.healeyD
        d.healey @oskarsh
        last edited by

        @oskarsh Here's a shortcut.

            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);
            }
        

        Free HISE Bootcamp Full Course for beginners.
        YouTube Channel - Public HISE tutorials
        My Patreon - HISE tutorials

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

          @oskarsh said in PresetBrowser LAF Scrollbar:

          @d-healey thanks David looks much better know!

          47db49f6-02a7-4a7c-922d-59d712fd38e5-image.png

          oh this looks amazing can you share how you used the drawScrollbar ? Havent tried myself and i am fairly new and a complete noob but i will try when i get home :)

          creating user interfaces: www.vst-design.com
          founder @prototype.audio https://www.prototype.audio/

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

            @Straticah Almost all look and feel functions are the same. Use Console.print(trace(obj)); within the function to see what data it provides. Once you know one you pretty much know all (there are some exceptions).

            Free HISE Bootcamp Full Course for beginners.
            YouTube Channel - Public HISE tutorials
            My Patreon - HISE tutorials

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

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

              creating user interfaces: www.vst-design.com
              founder @prototype.audio https://www.prototype.audio/

              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

                    creating user interfaces: www.vst-design.com
                    founder @prototype.audio https://www.prototype.audio/

                    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?

                        creating user interfaces: www.vst-design.com
                        founder @prototype.audio https://www.prototype.audio/

                        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.

                          https://www.youtube.com/watch?v=ZjRRcOmTtqI

                          Free HISE Bootcamp Full Course for beginners.
                          YouTube Channel - Public HISE tutorials
                          My Patreon - 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;
                            });
                            

                            creating user interfaces: www.vst-design.com
                            founder @prototype.audio https://www.prototype.audio/

                            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

                                creating user interfaces: www.vst-design.com
                                founder @prototype.audio https://www.prototype.audio/

                                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.

                                  Free HISE Bootcamp Full Course for beginners.
                                  YouTube Channel - Public HISE tutorials
                                  My Patreon - HISE tutorials

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

                                    @d-healey oooh nice! tx

                                    creating user interfaces: www.vst-design.com
                                    founder @prototype.audio https://www.prototype.audio/

                                    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
                                       ]
                                      }
                                      

                                      creating user interfaces: www.vst-design.com
                                      founder @prototype.audio https://www.prototype.audio/

                                      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

                                        Free HISE Bootcamp Full Course for beginners.
                                        YouTube Channel - Public HISE tutorials
                                        My Patreon - 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 :)

                                          creating user interfaces: www.vst-design.com
                                          founder @prototype.audio https://www.prototype.audio/

                                          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;
                                            });
                                            

                                            creating user interfaces: www.vst-design.com
                                            founder @prototype.audio https://www.prototype.audio/

                                            LindonL orangeO 2 Replies Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            22

                                            Online

                                            2.0k

                                            Users

                                            12.7k

                                            Topics

                                            110.5k

                                            Posts