HISE Logo Forum
    • Categories
    • Register
    • Login

    Colour accent on preset select, laf fix?

    Scheduled Pinned Locked Moved General Questions
    22 Posts 3 Posters 1.2k 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 @Straticah
      last edited by

      @Straticah You can use the new preset broadcasters to check if the favourite button is active (seems to be inverted though at the moment, so on = 0)

      Link Preview Image
      [feature request] Preset Browser broadcasters

      Am I being silly or is the favourite button state obj.buttonState inverted? Aha! It triggers on mouse up not mouse down :)

      favicon

      Forum (forum.hise.audio)

      Also you titles (Category, Instrument). You can do this in a single panel, just take the panel width and divide by 2 to get the correct width for each text area.

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

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

        @d-healey sounds good is this broadcaster thing hard to do and do i need to build a newer version of hise for that?

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

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

          @d-healey also, is there another solution to have the red accent the same width all the time (like starting from left aligned and adding pixels to the right on x axis? If i make the colums same size it is bigger on one side. as you can see.

          HiseSnippet 1767.3ocwX0maiiaEmJSzfXs6zsKvb.HLVT3o0iWI4j3jLXv5333EAMyLFwS2snYBVPKQayFYRWJ5j3Nc.J5EnWgdT5Qo+c+qdCZeTT1RxQY1rY2EUAHV78A4u2iuOHUeoHfFGKjHqJucwLJx5SsGrfqlbzDBiiNoKx5o18kzXpB2QJtNlJwmdXOTmEyHwwzPjk0i9ZsjVU1Dk77e9pNjHBOflQBg9FAKfdJaJSkQse6eKKJpGIj9V1zbRuc6SBD7iDQh4.pdjsKZFI3RxX5qIZw1vFY83iCYJgbfhnnwHqM6HBWLXh3ZtQ9ugEyFFQ0C7PCfIxPtmHJTiXMUzQSXQg8WZ8wHXV5m4KdjwW7T6WwBYqnm4S9kILvYZj2eXsQQ38nBvyKO7byAuRfjUNHsoARet8f.IalJiiFOeh8IbEUNh.t87PwHKZia1z9HAHAW0XJ4RZOILXkF0100sNd6cbe1Kbb.WerBOzrUeJYD9k3i4iYbZi.IErmuNRLjDYl2SEhKOjG1iRipo0MSqFR5XVLL+8lyCTLAuV0PI4ZSfTZbzof.mnnSqVGOZoTiqiEC+iOy48NNUF2.jsG.zZUeyMKFS4ffda2PixJWQjXB.syAoaP.fct6EIpZF3kefe9AMu3BPcmJUvvCaDtllihdiB+xWhqdXXHLscH7Kq9rTYzOYxfqNfFQCTfTQrgRhbQ0WjSv6ZdWoDDUOeJ+6exOB7ziEkO65mJUbbb9xuL.Bdj3Ylzy3DkA5UXiRVdCAZHrZuGzMweZRqp4dy96uiuWOees2DXMBREOSLmCIHmAJQ3iin0V50pi8Sb6vJJofGJH.Bj.0JYROtaS+lsd1KRw6cLwma1uLaT5cH7yw965peG1fpie+QBImJGv9yzCv90woSvAm6UGCRo++EePi7O3j7rlmfEFQKCdtttGo+6dAO7uA6tFDy.nuwajruUxRuZ5yVcyOwMtdBSQSc55ThCiXi4zv2ByzpXl53kHnYQHrZ8qFQGoppAgi1O3rLABK3uVnnugWSmCUw4CN30YMZTo7zkGjhnHprT15RzxOlh03ymNjJqiuhDMmtRPntUwhg12cwv70pCLUqxInfeBmodyLJ+tpfiRKwAu86NoKQQzUPSoAxMiJULMDr5RuBZGYpmVwtKM9RkXFzU4HwzYBtdFrbTIbexxpsDNMBwB0sG6.ciFK0wLnax2iaQ9AWyBUSVQ3e92ZOgxFOIq6G9uzd33k839T6s8as+tM2qoqOBBOl98vveMNCExPS1RdHftely.JQFLAJ5IyYN+UR6blyWztn4fkqaNnVsKGDFpmQBYyiynuU6aakdsZ42b2xrxTN4smegJs+rwd5EIHJFe7aYPjj1r9L67j79HaTowGlfgOytPGJT1Vjis2ts.b3sSgMnRImB782deWuV65hRBE230aX+dGLTiGBoGPth1YtRI3UO.qjyo0Wx43alQ3wPlU7gwoMKN.OhDEmIRxwXjkqtNCO9VyIj.ZDu.qLxPMAvnAddtqTBZEV9RbFkCmCqbdcgNNp6fWOxUBI3jzGtKOuTjcBX0gzNIgKEL4WOepwQnAueBIy3uUGSdFrIK.Fm6nq451Xm5KeA98hDo0my3PnK1JqLU15k8yJsLqwYhq6SBCg3n6qdlzIHapitBgFymaX7JgL0yrNmrng04rzmcKtNe39TgIKjrYZtzd9dauumGRerJj0V1lCVgzMcxxFa5tcq8Z46uyNvosykz8I2UQjsrSduPZ1SyW.oa6Yv4H3pbS15YnqYN+oaUgo6OxJL6smm+NMat+sSTWwA8CvX8yYr8k+nL1+k7+2F6SJZrmRFtxXSduvN6WTzX0wN5oN8Hq5NrEMOnWxsMOh9XOSSV7GaqOLCZDDRZtg2pvRJTghr5lRZAJ5O7aWLvU2rn0tPWwTgUKz59X3HGQg+fr27at+CYY16SfKbEC0vzlvOcFbYlXQmvCzf2pnAexT35zoFbx642fwA4MX21vQjSu58ux9Obv65BmHCBlCiemtRNlbMMVLk973j5dMlwGul2.hWV2a7qAuwrIjTB3282+2eE512zEtisHbdDQU7h25u1PJCnMYga6puQKzFQsH+Wi3mraieeg3ma2moBlTNF2nDLBGS8mCLl9MLdh8wiFAWsICfaZ262+yyGr.AWkRWk6UDkjAQT1Py6APrZ.EVcNT0TeA.qMzG6xL1UOV6AFP4gIC9uvSJSO8XqTldKYhlRBjhuKvbsC8WIYqDJ.l3IQoUrekdL1CkbUDPOa2FtnorP12EDnM+mC2dnbc7e.5z7Any1O.c14AnytO.cZ8.zYuOpN5uU1gyUholzAfP+iSNTrk0wbcssjnPz+CPAEilN
          

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

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

            @Straticah said in Colour accent on preset select, laf fix?:

            @d-healey sounds good is this broadcaster thing hard to do

            Not for me, maybe for you ;) I posted the code in that other thread.

            and do i need to build a newer version of hise for that?

            You'll need a build from yesterday or today.

            there another solution to have the red accent the same width

            Can't you just use the same width for the rectangle?

            Also this var a = [obj.area[0], obj.area[1], obj.area[2], obj.area[3]]; can just be var a = obj.area;

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

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

              @Straticah said in Colour accent on preset select, laf fix?:

              Hey there, i am trying to have a colour accent on the front of a selected preset tab. This styles my tabs inside the favourite window aswell which does not look great. Can the red offset be coded differently so it is always the same size independent from the tab length?

              HiseSnippet 1769.3ocwX8taaajDeoiYfEaR6Uf7.rPn3fROEERJYKaGDTYYYUXTmDAqzzhywnXE4JoslZW0kqrstz.Tbu.2qPeTtGk6y2mt2fqyRRIRJSm35lfRCXwcmY182L67uk8jBOZXnPhLJ8x4SoHi6Y1eNWMd+wDFGcXGjwCL6IogTEtsTbQHUhOZutn1ymRBCo9HCi670ZNMJsNJ54+8UsIADtGMcJD5UBlG8H1DlJc1ds9FVPPWhO8krIY3tQqC8D78EAhY.ptioMZJw6LxH5yIZ1VyDYb2C7YJgruhnngHi0aK7m2er3BdL+uhExFDP0CbP8gEJd5th.eMh0yh1eLKvu2BsODAqRuTawchsEOv7YLe1x4SsI+kHB3TIxZOLVKO7tSN34jEd1YfWAPxHCjVOFRetYeOIapJkhFOeh4gbEUNj.l8rPIlWzZWtt49BfCtp1DxYztRXvRIprkscUbiMse3Srr.SenBOH9n9HxP7SwGvGw3zZdRJnOecfX.IHdcORHNaOteWJMnhV1TopIoiXgv52cF2SwD7Jk8kjKhcjR7iNBX3PEcR4p3gK3ZTUrXvO9Pq2XYUZTMf2t.PqT9EWNeDkCL5znlFkkNmHwD.Zm.bWi..6D6SiDMdfS1AtYGT+zSAwsJUBCOrg3JZJJ5kJ7SeJt7d99vx1lvOq7CS3Q+jxCtbeZ.0SAbEvFHIx4keRFFut0coPfW8rI72+huOXoGIJd00OkJYYY83G6ANOR7z3vyvHgg4KwFFs8wSP8gc6MfrQ1y3vpJ1WtyNa55z00UaMARCgPwiEy3P.xwfPD9n.ZkEVspX2HyNriRJXg77.GIPrBVzC5T2sdyG9jD7dMK7IwmWwGT5SH7ivtMqqeGNfphey9BImJ6y9GzcwtUwIKvtm3TECtp5+e5a0H+sVQOqXIX9Azhfmss895+tQvC+2zaUNHZuDftwVinysB15kKe5tG+SXsKFyTzDitNjXu.1HN0+kvJszmoJdABpmGBK2+xAzgpxZPXosCVKBfvB9yEJ5K3UzwPkrdqEdURCGVHMc5AoHHfJKjrNEs7cIXE9rICnxp3yIAynKYDxakOYn40mLLatZu3rUYXTvOjyTuXJkecYvQIo3f291C6PTDcFzj4.9lRkJlFBFcnmCkihymVxrCM7LkXJTUYewjoBtdELrTQTu+hrsDNM.w70kGaCUiFI09LnKyViad1AWv7UiWNw+9e1ZLkMZbZ0O7O2ZvnE03tmYC2l6rU8sqa6h.2iIuGBtqPYfP5GGsjEBnal5zmRjdigjdxLpyuPZkQc9hV4UGrbU0A0rUwfHd1iI9rYgoyuQqqpkNMa5VeqhzxDJY0mOUkTeNVe5FHHJFezKYfmjVs9LyrS47NNnR7OhcF9LybUnPoGQVlNa0Dvgyl4NfJb5DfuSicrcZtkMJxUbsdqY9FKLjiGbo6SNm1dlRI3k2EqjynUWP4fKmR3gPjU3dgIEK1EOjDDlxRTaLxhEWGgGdk0DB.iYOGozogbBfRCzbrWJDTJr3s3XJG5CqXZcfJNpqgVWx4BIXjzM2kkVBxNDzZeZ6H2kbp7ymMI1PnAuazTwi+NsO4wvgr.HbhkNmqcsFaWM4sMcfWNMhecmF6A0wVpmIbWsneVJU7tbr3hdDeevS5lJWb.EDO0VmiPi5ShI7LgLw1rJkT+gUorvpcEpVu8ljiI0ordRzz1tNM1wwAoarBYrgYbqUHcYmz3w51MZtcSW2M2D52NSX2mbcoQ1vL58bAZOHaJjNslBcRvUYVrUiQWQc9oqjioyevbLausi6l0quyUCUWRA86PYcynr8j+gT1+i7Oak894U1iHCVprQum6j8KxqrZeGcpvEMsthxA0RtpxQzs8LIZquqotYFzPvgL9FdKcJoPFJxxaJoYHu0vsUd2VcwhlaAUESXVMWK6cgVNB7+cosYOZ+UYQZ68fKbEB4vhTgOT5aQZXdavsTe2Hu9d3D31zI5az6YOcwdY0W6VPGxI279uZ92280cfFx.OY+vWqSjiIWPCESnOJLJoWso7QqXM.mkUsFeIXMlNljLA90+q+6Wgt5EcgqXK7mEPT4u2s9iMjP.pRl6xt5KzBUQTyy9wH9fcY7aJD+bydLk23hw3ZEfQnK0OFXL4SXbeyCFNDtYSJ.W2r62+w46UffaRoSw8LhRx.OJSn1cevW0iB6NGRYp6+2XMcWWwis0i0Vf9Ttezf+O7jPzQO1HgnyBhnIDOo3G7hu0g9ijrQzL.l3QdokLeldL1AEcSDPNS6Z1nILe1O34oU+GAWdnXYbuExT+VHSiagLadKjYqagLMuExr86TF8mJauYJwj3vAXhdGD0SrgwAbctsHuPzuATTxmoF
              

              yes this was my attempt to make them same size but the scrolling bar makes it different in size sometimes so i thought maybe there is a more elegant way to create the same effect. Like making it left aligned or something :D Its a bit strange because of the scrolling bar on the right.
              Can i assign width to a rectangle? maybe this fixes the issue of different sizes on different sized columns if you have an idea let me know otherwise ill use "same" column sizes for now and dont use favourites tab.

              4364ada9-5657-42e7-bee8-2f17534f3624-image.png

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

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

                @Straticah thats with same size 16b43662-6fe6-4b59-9345-62d29d7e8923-image.png

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

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

                  You probably need to change the width in your paint routine.

                  g.fillRoundedRectangle([a[0], a[1], a[2] - 273, a[3]], {CornerSize: 2, Rounded:[1, 0, 1, 0]});

                  a[2] - 273 is the width. You'll want to change it depending on the state of the favourite button (probably).

                  I like the accent idea. Can I steal it? 🐶

                  d47da9df-c143-4254-a627-f75c5f3ba459-image.png

                  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 haha sure! 🙌 if you let me steal the image buttons soon? ^^ i guess you will make a video about that, you can also show how to make only selected corners round, ppl need to know :)

                    There are not many tutorials targeting the hise browser i think. Tx for your help, really apprechiated.

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

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

                      @Straticah Good deal. I'll post a video about loading images into look and feel on Saturday.

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

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

                        @Straticah I'm guessing this bit didn't work for you?

                        		    if (obj.text == "Add a Bank")
                        		        obj.text = "Select a library";
                        		        
                        		    if (obj.text == "Select a Column")
                        		        obj.text = "Select a Category";
                        

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

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

                          @DanH Should do, that's the code I'm using :) Oh you're right, he's put it in the wrong place. It needs to be in the drawPresetBrowserColumnBackground function.

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

                          DanHD 2 Replies Last reply Reply Quote 1
                          • DanHD
                            DanH @d.healey
                            last edited by

                            @d-healey ah yes just seen in the docs too, thanks!

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

                            1 Reply Last reply Reply Quote 0
                            • DanHD
                              DanH @d.healey
                              last edited by

                              @d-healey so you're just using that? Mine goes blank, do you not have to specify colours, fonts etc?

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

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

                                @DanH Yes that's only a tiny bit of the code.

                                    presetBrowser.registerFunction("drawPresetBrowserColumnBackground", function(g, obj)
                                    {
                                	    var a = obj.area;
                                
                                	    if (obj.text == "Add a Bank")
                                	        obj.text = "Select a Library";
                                	        
                                	    if (obj.text == "Select a Column")
                                	        obj.text = "Select a Category";
                                	        
                                	    if (a[2] > 300 && obj.text != "")
                                	        obj.text = "No Results";		
                                
                                		g.setColour(style.presetBrowser.columnBg);
                                	    g.fillRoundedRectangle([a[0], a[1], a[2], a[3]], 10);
                                	    
                                	    g.setColour(obj.textColour);
                                	    g.setFont("bold", 20);
                                	    g.drawAlignedText(obj.text, a, "centred");
                                    });
                                

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

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

                                  @d-healey perfect, thanks!

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

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

                                    @d-healey can width of the rectangle be written in % of the maximum length? For being responsive?

                                    //colour accent
                                    		   
                                    		g.setColour(0x99ED3237);    
                                    		g.fillRoundedRectangle([a[0], a[1], a[2] - 100, a[3]], {CornerSize: 2, Rounded:[1, 0, 1, 0]});
                                    	}
                                    

                                    100 in this example

                                    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 Sure, just multiply a[2] by 0.5 for 50%, or 0.75 for 75%, etc.

                                      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 this finally fixed my issue the accent is now the same size on each tab, independent of tab length :) ty for your help. I have learned a lot in only a week.

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

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

                                          @Straticah snippet! 😂

                                          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 haha i have too much going on in my project to share, maybe this will help? :)

                                            //color preset select
                                            
                                            	if(obj.selected)
                                            	{
                                            		g.setColour(0x99521F22);
                                            		g.fillRoundedRectangle(obj.area, 3.0);
                                            
                                            //red accent
                                            		   
                                            		g.setColour(0x99ED3237);    
                                            		g.fillRoundedRectangle([a[0], a[1], a[2] / 1000 + 3, a[3]], {CornerSize: 2, Rounded:[1, 0, 1, 0]});
                                            	}
                                            
                                            

                                            did you mean that?

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

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

                                            18

                                            Online

                                            1.7k

                                            Users

                                            11.8k

                                            Topics

                                            103.2k

                                            Posts