HISE Logo Forum
    • Categories
    • Register
    • Login

    Preset Browser LAF Snippet?

    Scheduled Pinned Locked Moved General Questions
    lafpreset browsersnippethelp
    30 Posts 4 Posters 3.8k 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 Then I don't understand the issue.

      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 I want to have the select and deselect tabs having the same size, i guess adding a third rectangle that only shows a purple accent on select and making the dark one the same size as the select button would fix that. :)

        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 Yeah you can draw the accent separately, you'll need two rectangles to handle the rounding. One with a curve, one without for the flat side.

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

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

            You could also do something like this, but it won't be as bright:

            	if(obj.selected)
            	{
            		g.setColour(0x990C0C0C);
            		g.fillRoundedRectangle([a[0] + 4, a[1], a[2] - 4, a[3]], 2);
            
            		g.setColour(Colours.withAlpha(0xff5F5BFF, 0.2));
            		g.fillRoundedRectangle(a, 2.0);
            	}
            	else
            	{
            		g.setColour(0x990C0C0C); 
            		g.fillRoundedRectangle(a, 2.0);
            	}
            

            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 Straticah

              @d-healey thanks a lot, it works well now. two last things, how do i offset a left aligned text to the right in LAF and how would i approach rounding just two corners not all 4? Thanks for your time, much appreachiated :)

              HiseSnippet 1358.3ocsW80SabDDeOCWTuqMJMp8g73V+PjQ0w4LDRSBhVv.WjUAhkMMsRHTz56Vauky6Zs2d.VTdoJev5Go9MfN6sm8clXmlZ0b7.rye+syL6LCsjh.ZbrPhrbNY7HJx5qr6LlqFr2.BiiZtOx5araIowTUCo3xXpDeHoGpw3Qj3XZHxxZkWqEzxYUT52e+SMHQDd.MmDB8VAKfdHaHSkSs0N+LKJxmDROgMrfzOamlAB9dhHQB.pUr8PiHAmS5SOlnEqjMx5dGDxTBYGEQQiQVq1PDNty.wkbi7ukEy5FQ0Gpi5.FxP1WDEpQrlJZuArnvVSt7wHvJsxCEqXBEeq8QrP1T54gjuNkANWihwCqRyBuUlAd0KBOuBvaNPxp.jV0.oGZ2IPxFox4nwyWZ2jqnxdDHrWDJFYQkRV0dOAHAWUaH4bpuDNLUiJO2yqJ9Ya5s1VttPnOVg6ZR0PlFuM9.deFmVKPRg6yqiDcIQF6dnPb9t7PeJMphV2bspIo8Ywf88S3AJlfWobnjb4L0QGBBzTQGVtJt2Do5WEK596q4dsqqS+Zfr9.PqTtsnqPIvMUjHV.He80qoAqyEDIl.H7TPoZD.em5cVpELGpW7v5EOrwYmAp653fgOVObEMGE8JEd6swk2MLDLaCB+7xqkIi9KWFb4NzHZfBjJh0URjiKuUAAWjcmpDTbmLj+ua78f.dewhst9Vg+Q7Fdd3G+3bS7cfMVnwOVfaSiShTwk2xww008oOM.pAk3QoIGbbpyA5Nrdov2PfFBF7ZvlooEyqyJdW8xWto+lM780YCfUO3EcaQBGdm0FThv6GQqLIpWEmk1b9HlI6Ft.ScpNCi+dLTuZRuoQfmfq+hTJPZEbh1E23l9cm6FKLhNO2CAv8z+rrteVmCdMMXOGWO074d27q3ZWNfonYgQ8akciX84zvS.KMsJBbSUb4.3YrjFVV6J2aVaqIudvB9wBE8M7J5GPNt23huKqd8lKOcuAoHJhJmKac+Y4GSwJ7jgcoxp3KHQIzoBBMslsSn8h6DVrQcfoUUAAE7lbl5Min7E09Fk0eC9qeo49DEQ29LiFH2HpTwzPvZe5EvrHSyTG68owmqDiRkc3HAWaAq6qx59aZy4GIHJFu+IL.pLnu5CrKRpN5phi5FW7PF.Ld6AyNGE0s+jgbN26QO5Q2pU.pAFlS022+NTWWS91aSohRulkdeI6qcwPWCHb0gbAsQhRI3keEVISnUmv4fqFQ3wPVKd23r1OuB2iDEmKR57Q47UWW8D+A1DRtFwmgUNYndCtu.u5dSUBZtNeWzlxgA7ym29POH0B34StPHgHjdqgh7xPVS3VGRaHjvcalq7wICMABM32Hkj47uxBUCZC4WAv3TW8aVuZabmup+GoCjOK0G5wd6BcCmFax7P048qoZYPVawksHggPg2mpdcnDYvfFDYCcuL8M8TCiiDxr34c4jWCcWNShze.W2aPWpCZSK8+q+bmATV+A4q6g+icxqh2PWEiPlpXcis7Rdfv6MqG9Aq9.KcIBShHpY2DSu9YFCn7dl0ezq3.oe03hqm9+15YepP7g1sXpfAyGiklCFgVWeNvX1Rs229fd8fQZ4.bUa+e6yyFrHXDptO4QDkjAsIsgGccfLc.E7NmSizCErJo6TZN6oOqi.cn7vzCPytayXVWe1JiY8ILQCIARw6BLihzqM+EoT.LwS+OFbrOReFWGkNdBzy1qlGZHrA+6BBzW+m.STluNquD5rwRnyyVBc1bIz44KgN+vRnyK9n5n+mm1MQIFZdN.DZcP5vLKqC3DnxJsJD8ObhLDLN
              

              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 To change the text position you can left align it and adjust the x of the area.

                If you want to round just two corners you need to do as I was suggesting before. You draw two rectangles, one with rounded corners and one with straight corners. If you are using non-opaque colours though if might not work so well and you might need to use an SVG.

                5d9e574c-7cb8-4210-952d-5823f904866c-image.png

                HiseSnippet 810.3ocsUstSaCCE1tzfnciogzd.h3WAoRUJvXSBMMVuMUMtTQYnIgPHiiaiEI1QIN.US7Trmh81s2fsiiSosipNnRK+n0ma1e9b9NG2MVRYIIxXDtzoCiXH7Ks5MTn7a3S3BTmlH7qrNjjnXw1FU0GFQRRXdHLdoOqUfKUDk88qOVmDPDT1XUHzYRNkc.OjqFqs69egGDzl3wNkGNg26reGpTzPFHSA7rjkKJhPulLfcDQ6VAKDd4VdbkLtmhnXIfO0kdC64KuUX7+LdB+p.lVnFpGrQF0nF97.utitqIHDtX2w27kL272XcH2i+f9wYfWmYvdbDSlCvElGjp8LfDdBHUz.o0r5Qi4QpwVz34EVcDPAoOAR0SBEiunB+Da0PBdHTUCIWyZGCBODgytttUrge1Xuxkgzchx9FRrcWhfETy9C1ihb.S0PFFIEffy5FyqqiwrrZBS0ERPpSjoJtf4zOUPUbovYvFk+d4R58j.amxmmn2qCjTRPcYpvKwI6nKMPuElhsi4ujpwLOvVIsw9.E4Ds+LuSXTEQLHf4PpXuk6Td.lbNmb9VWXuIXphM47ZWTIe01WbA368ar2HrYKEGIUriENYXr78ks+aS86OSa5rRrLHfEOSyZdb77BzQjFdEKtBjqCRYO3HTnml8r7Si8PMEoIbTJ5H3piiX4xskAdZVgd8i4Zn7pLr5qcZRTDM8KWG3WDKVw0vA2jcCz+ZHikrZxRtVIix7MmZ.PVkYc0QTUM8.wgidEKCUAcGBag+AbVC0Kjvha4dJesvcffOiOvWokDYSGdTW.z+I8RCHpoaJ0SexM.45o5DzrcQBWMbxoSOiNU241o9Tg3ZVc4Jp+rwXgYfQnJ7+.i4y2V0pU+9P+xX.Vzp82VzgY+ii2LVXvgDULWW+OJMrGzhSYvoK.VQhtdWPyDMxtZYcFnGS3kI7a3K2XMsLN2XsQFQgDZr7RpoCSOAckLM.lDYOXTBd4Bjsqgx55f3rbq5hBgg4WRo5q+lPywriYqEHlsWfX1YAh4sKPL6t.w7tEHl2O2Xzui9oTkLzzN.J51Ja7CF2RP.lUFKD8GfUNNUz
                

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

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

                  I just noticed that you can pass a JSON object for the corner data of a rounded rectangle, so it's probably not necessary to do the two rectangle trick any more. I'll see if I can find more details.

                  292aeafd-8ee8-4721-8c7b-e93b65c68d1d-image.png

                  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 thats cool

                    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 Oh it is really cool, I just had a look in the source to find out how it works :) I need to make a video about this.

                      g.fillRoundedRectangle(a, {CornerSize: 20, Rounded:[1, 1, 0, 0]});

                      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 Straticah

                        @d-healey very nice! this would speed things up by a lot! Whats the best way to write the x offset of the text? Just placing it after "centered" did not work maybe i missed something.

                        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 g.drawAlignedText("text", put your area here, "left");

                          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 perfect this already looks like something :) Tomorrow i will try to remove the columns and style the search bar aswell as the fav icons. Lets see how this goes :) Tx again for your time.

                            05e70d56-256f-4e02-9599-aad896f08d9d-image.png

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

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

                              this thread has officially inspired me to stop being lazy and make a LAF for my preset browser :)

                              1 Reply Last reply Reply Quote 3
                              • S
                                Soundavid @d.healey
                                last edited by

                                @d-healey The expansion images are something that we can achieve within HISE or are something to do with custom CC+?

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

                                  @Soundavid Within HISE using look and feel, nothing special

                                  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 Good morning, i have seen that you made a video with a filmstrip button for hover which also used an image, is this made this way?

                                    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 Everything I'm doing with the preset browser is just laf. There is no method to assign film strips to the preset browser.

                                      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 ah got it. Will look into that in the future, seeing that it is bossible tho is very cool. Is there a way to x offset the favicon to the right in the tabs?

                                        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 I think the icon position is fixed

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

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

                                          22

                                          Online

                                          2.0k

                                          Users

                                          12.6k

                                          Topics

                                          109.7k

                                          Posts