HISE Logo Forum
    • Categories
    • Register
    • Login

    [feature request] Preset browser search bar text in LAF

    Scheduled Pinned Locked Moved Feature Requests
    search barpreset browserlook and feellaf
    30 Posts 9 Posters 2.1k 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.
    • HISEnbergH
      HISEnberg @d.healey
      last edited by

      @d-healey

      The documentation doesn't state that you can edit the text property of the search bar, but I doubt I am the only one who has tried to do this.

      Here is the snippet

      HiseSnippet 1435.3ocsW0uahaDDeMI9Tg1qsWUe.VgTaIUHN6P.tqmN0.DnEUxETH2cU5zonE60v1X1EsdIjzpH0mf9pz+suD8co+W+yqyZavX939.oZIvdmu1edlYmYbOovgFDHjHibWb6DJx3SL6eKWMp4HBii5bBx3SMOkDnnRbDoF2NgDDPcQFF68CZBFY2GEd8OeeChOg6PSHgPuPvbncYiYpDp8N9mX99sItzKXiWR5iNtiif2T3KlB3YOSKzDhyUjgzmQzhkwD8ijfQHiu07wUpXSb8p4YW19wCb8bnkqYU8nZGRp7HOuZV1GU1sl2Q.HuWKWlRH6qHJZ.XzFB2a6ORLiGsAufEvF3S0KrQ8gcNhLp4Hluau4Nm.DxX+dItp8hbUeo4oLW1B5ItrOOjANQikcZFYdaPx9C.RFKAo8ifzCL66HYSTIbz34iM6vgHnGAhMKCkHYQY968MaJ.I3pRiIWQaKgEKznPsCsJhO5QVG7jb4f3SfB27rtm87yureqtsZdQqSvOEacS61UqZY0p5Shk4ZhD2VcYOIMfpZHEyBfTnmhmuOCoplhwSDbXQg7qJX9CV1Lcq2dq1wQRA2XWgCwuqPbUctaaJ0ufFqqoVIIcHSmJ2dJ2QwD7B4ckjYojoOkHcF0fHyWD6MWrgEwhA+xA49sb3rZ.Q...DJQfMG1HLbMrTf9MRm5VH5VPoYL0n59SFQRnLhonEwVkpbvAOAGqnGbX3bwTtK08bpihvG5SKPJhssJYokZq1efOb7Hsc5QTiJngFCbeEwupRQbsRve1g+d8By8vGdA8FUtvmRYastJfUzRP9HIwNgqwr.b.EBKJANb2WCa5DAqvqPcw08CDXWAMf+MJ7LgbIMZKzg9lDe1.ICb2GF89BJo4f+5naArekhAGMlKznPJAWTtrCKoib08YC4TWM.KjGr.3zx6.YERpqNCRuS4tamSE5BBzQQGu4LgMkHjMUTJ8gDsqO61C1UJEd9ZqoR5DmjP8BuWcIi3C.ztZn9QbW00LOlF4f7odJs2Izwja0SdZSu1oo0beZUm6SvB9yDJ5Y7Bgtkb2kCuJKOuMxSeFVJ78oxMxV2bP91Tr.e53ATYQnHg+T5BAghgoqvdu2uJrNQkTVRPAuCmoNaBMdcaguqtxo940qGihqIAO87NmPTDcI5XZfbSnRESCGiSnWCMEiJXm07DZvUJwjPYiKHhLtuJtCSTI519BhhwGdACfMCPvWXtZfCcyhFo+t2w2tbO3YLWEz1zznpABMhxFNJoY7w2cbLDivymYl1pCFNueb16Ah+uZcfTwwITyjo6ekl5gZxFFe0enIG5Hx7mYLghm37Zmaex0zFSUJAO+2g8H9AzhyY05lIDd.DjCpG.1Z530EILFH2h95rsf0sJjMDoPZdIzgLT3cFXZasPq5ttaYWNmxgAR1BySn9T01X1lbsPBNJ8bNoXFCuNvKuKsgPBuho3+roii7G52.6PRQqeoN1dNjbH.FuJr.fUoxqbU7CjNP90g6gtDXcn11B+S7NTbS2VnUDxNWLqGw0ExZee0aQu2F5BjAKTqbrj1w2OzJ9gxI5dpPF6zSTN1pKR2Vky7nwZbycGJoGXbl+azIy5ht5yHvIUlCtOjqhOsOLP6ZygAS.Jbm5SToGKTOvbLCHIO0rX54sfnu51kGn9CXVQq25rhuuP7Al8XJmQaFiY1.FgZb+efw3IruuYKOOnMYB.22r8OuqiS+N1dnsrtF6oDkjAESMgyb8g3uCE1cNm5GnKglQWmOZskds1CzmxcCW7F3JlosdsQLS64LQiINRwkNQ8uzyv+QgT.LwC+FmrvGaAqw1nvdZK6mGCeRwkNNoM0ZJd3tpX4cUwi1UEqrqJVcWUr1tp3id2Jp+hu5SUhwQGaPnS60Jr2mgQKNAx.CyVQ+GKbCZRA
      
      HISEnbergH 1 Reply Last reply Reply Quote 0
      • HISEnbergH
        HISEnberg @HISEnberg
        last edited by

        @Christoph-Hart is it possible to change the text displayed in the search bar or the preset browser? Also the highlighting colour?

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

          @Christoph-Hart Maybe a job for CSS?

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

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

            @d-healey is it possible to mix and match? text entry is one thing that could benefit from it.

            I have been playing around with comboboxes lately and I caught up with your and Chris' talk on item height, which resulted in a unique function for LAF that just wants a return of the height instead of processing any graphics methods.

            So maybe this can be done for text entry: the function just wants a return of a JSON object with various properties much like the ModalTextInput method which can be customized.

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

              @aaronventure said in [feature request] Preset browser search bar text in LAF:

              is it possible to mix and match?

              CSS and LAF? Yeah.

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

              Christoph HartC 1 Reply Last reply Reply Quote 0
              • Christoph HartC
                Christoph Hart @d.healey
                last edited by

                Yes the preset browser is definitely a strong contender to be customized with CSS (everything from positioning the columns to styling the scroll bars is covered by the current feature set of the CSS renderer so I just have to hook it up and assign custom class selectors to the elements of the preset browser), but I'm not sure how much you can do with the current state.

                Christoph HartC 1 Reply Last reply Reply Quote 2
                • Christoph HartC
                  Christoph Hart @Christoph Hart
                  last edited by

                  Alright, here we go:

                  Link Preview Image
                  HISE | Docs

                  favicon

                  (docs.hise.dev)

                  d.healeyD HISEnbergH 3 Replies Last reply Reply Quote 4
                  • d.healeyD
                    d.healey @Christoph Hart
                    last edited by

                    @Christoph-Hart Oh nice!

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

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

                      @Christoph-Hart You know the parameter dump thing you added for modules, what about a css selector dump for components?

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

                      Christoph HartC 1 Reply Last reply Reply Quote 0
                      • Christoph HartC
                        Christoph Hart @d.healey
                        last edited by

                        @d-healey There's already a CSS debugger. If you've assigned a CSS LAF to a component you can right click and use Show CSS debugger, then you'll see this:

                        Current variable values:
                        {
                          "bgColour": "#55FFFFFF",
                          "itemColour": "#66333333",
                          "itemColour2": "#FB111111",
                          "textColour": "#FFFFFFFF"
                        }
                        ==============================
                        
                        /* CSS for component hierarchy: */
                        
                        div 
                         div 
                          div 
                           div 
                            div 
                             div 
                              div 
                               div 
                                div 
                                 div 
                                  div 
                                   div 
                                    div 
                                     div 
                                      div 
                                       div 
                                        div 
                                         div 
                                          div 
                                           div 
                                            div 
                                             button #b1 .scriptbutton
                        
                        /** Component stylesheet: */
                        button #b1 .scriptbutton {
                          background-color[]: 0xFFFF0000
                          color[]: 0xFFFFFFFF
                        }
                        
                        
                        /** Inherited style sheets: */
                        button {
                          background-color[]: 0xFFFF0000
                          color[]: 0xFFFFFFFF
                        }
                        
                        
                        d.healeyD 1 Reply Last reply Reply Quote 1
                        • d.healeyD
                          d.healey @Christoph Hart
                          last edited by d.healey

                          @Christoph-Hart said in [feature request] Preset browser search bar text in LAF:

                          you can right click

                          Where do I right click, on the component?

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

                          Christoph HartC 1 Reply Last reply Reply Quote 0
                          • Christoph HartC
                            Christoph Hart @d.healey
                            last edited by

                            @d-healey interface designer in edit mode.

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

                              @Christoph-Hart Perfect, thank you

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

                              1 Reply Last reply Reply Quote 0
                              • HISEnbergH
                                HISEnberg @Christoph Hart
                                last edited by

                                @Christoph-Hart nice thank you for adding this! Personally I'm a tad rusty on CSS but it's fantastic that this is now integrated.

                                I always tell myself that if I improve my skills I could be more useful to the community.

                                Best,

                                Hisenberg

                                HISEnbergH 1 Reply Last reply Reply Quote 1
                                • HISEnbergH
                                  HISEnberg @HISEnberg
                                  last edited by HISEnberg

                                  Apologies, that is low hanging fruit and my jokes are better, but I am quite excited to explore the CSS integration into HISE

                                  clevername27C 1 Reply Last reply Reply Quote 0
                                  • clevername27C
                                    clevername27 @HISEnberg
                                    last edited by

                                    @HISEnberg said in [feature request] Preset browser search bar text in LAF:

                                    my jokes are better

                                    …says 'HISEnberg". 🔥

                                    Christoph HartC 1 Reply Last reply Reply Quote 1
                                    • Christoph HartC
                                      Christoph Hart @clevername27
                                      last edited by

                                      but I am quite excited to explore the CSS integration into HISE

                                      yup, the more people play around with it the earlier I can remove the "experimental" warning message...

                                      HISEnbergH 1 Reply Last reply Reply Quote 1
                                      • HISEnbergH HISEnberg referenced this topic on
                                      • HISEnbergH
                                        HISEnberg @Christoph Hart
                                        last edited by

                                        HiseSnippet 1442.3ocsW0uaaaCDmJIJn1acaAXO.Dd+SZfcpbbSVqC1VhSh2LVRqQbW6.JFJnknrHhLo.EUbL156zdDFvdgFP+ishhgtihVVVNNosFXJeXy6ye73cGO0UJbowwBIxp7SGGQQVepcuwbUvQADFG04Xj0mYeFIVQkXCoViiHwwTOjk0peulfUo0PoO+020hDR3tzbRHzyDLW5orgLUN0tG7irvv1DO5SYCmQ5GbPGWA+HQnHAvyp1NnHh6EjAzGSzhshM5GHwAHqsr2YGe2G537vFM10gPZ3QHOnNswin9646tqyib75uqC7ydHq0OwioDxdJhhFirVqkvabu.wHtwAOiEy5GR0Kpi5Ad1PtsHzSuE0TQGEvB85lEnhQfU5lG1V0D19R6yXdrozyCeeQJCbtFyF.sVoH7Vs.7peSvaAPxZFHslARaX2yUxhT4bz34Sr6vgSSeBbNMKTLxhV4dqYej.jfq1dH4BZaIrXpFatmiSUL7u6se4xvYUrBeIQhCweCNSIhm2oj9zvMqj9Q8JUw0cz+ApjqQT+YTY.UcjXXjfCK1rRT+JEDMj3OirtRJDpNU3RBOUHt3PtWaJ3LMd.A2NlBfMjwo8TiCo8BnTvhkKuU4esboPpB1F0hgjJFePS7NQWse4R9fgqMhxFDnZh6Cm66W9UZaAXGq0pOjBNPJR3d0bgC.YSMn1rVs9CLIpfmKUfghdkJmUegzCbpj3wRhahaj5SsGt+Vag6QIR2.beXWFqwKdq6W9qhMDAeigm2u6wlmTouQffm6wX6Efsh9DhHgITC0byooBhre11niOdrHASgTYrJflJYULrXDTliShAJArXbLMj5BI6aq2lLdThpX7MyYkVfmRoUiDxFvahco57QfXDjrAGk0ThnlXms2MM3lQLj5qxNjcIRpJK.NPRo7ofOMQYJrm.RlfCfWEr.f2r4TQlG9RpWdxvn.lhp8RkzbScl40xZgLVfYT+agY4x9IbCfD7GKTzmv27dZGCVFOOKe+ExSW6HEggT4BYqaBKuME2jmLrOUVExqfCnoBBMZJ18Z8OrtWtlR4YDTv6vYpmDQmr91a+hlzK.91O04Xhhna+MgFHWDUpXZ3XcL8R3xGSyvR1GSiu.RTf6Ql1rAtsSMo6so8W6PAQAIOOkAvlAHXM6n9nqxuh5aOX7zE+g7fQLOEbgjs0uYgPAoMQzqpZMEjFu+41ckT3PtkTLJlJQYUufsV+Mu4MuSaNHcYXN0K+8+cNp6nsrlT5Vdk+bEacGhJ5vXOxkzVIJkfWoI1mDFSqlw5jqhH7X33L9vXvNICutHoQa4MnuNuJ95VEN2MJTjWNcHWD1u.Sn4elVG54cCd4bJGth+FXdLTuotIllVnsHRfiRlLythboPBQO8HEEzpcRXXWhJHSfh6fI6pNPLyi1JsAYA9ONYnILpUqdJIy5mqSENGxdD.iWj1wzY6Fy8T8ijNP9WR8worX0gvUeSCqS7P0E8wTsLH6bwntldhen5MMn1R2XSuSeggwYB4jCh44jmBNOmr3703V9Un7N85bdKqW+2oUVyTfVxTfd2IEnoyTjVYdGay7E5pSaqxfViy9RQqBDRqjlsl6s+yqSookT2afD64C+NWMX1LrEpAKs9FarwaMywdsQtfg8DdIgDUwI.0yIOgATIVXrK8nUPtlZ7ryQ+QLVnysNV3GJD2vtKS4FrXLtxBvHzx8+CLNYX56ZehuObGaN.Wyt8OurSN+db+4hDcK+yHJISmKAU38fiZWJ3cNmFFqSqVQmUZV6j0GtGk6kt3cvyDl00qslvrdFSzPhqT7RWy0o5w0uSJE.S7zWsoD7NVvZbcT5UryFmGBu8vKccKZpqo3NKqhMVVEevxp3tKqh6srJ90KqhO78qn9k6NLQIFZJaPny5dR5EzVVmvIPFXZ1J5+.35xjYD
                                        

                                        @Christoph-Hart @d-healey I am experimenting with this in order to edit the search bar in the preset browser but I am getting some inconsistent behaviour.

                                        As I understand it the search bar 's selector is label. However, its ID selector, which should take precedence, is #search. I don't see #search as a supported id type in the CSS example docs

                                        I pulled from the label stylesheet example and it works fine on a simple label, but not on the search bar.

                                        When I edit the text it does change the background colour so it seems to partly work, but clearly I am missing something or it is not completely implemented?

                                        Content.makeFrontInterface(600, 600);
                                        
                                        const var l = Content.addLabel("Label1", 10, 10);
                                        const var pb = Content.getComponent("pb");
                                        const var laf = Content.createLocalLookAndFeel();
                                        
                                        laf.setInlineStyleSheet("
                                        
                                        *
                                        {
                                        	letter-spacing: 2px;
                                        	font-weight: bold;
                                        }
                                        
                                        label 
                                        {
                                        	background-color: var(--bgColour);
                                        	color: var(--textColour);
                                        	border-radius: 3px;
                                        	
                                        }
                                        
                                        /** Search bar style */
                                        #search 
                                        {
                                            background-color: var(--bgColour);       
                                            color: var(--textColour);                
                                            border-radius: 3px;
                                            //background: blue;
                                            //textColour: black;
                                        }
                                        
                                        /** If you edit the text, it will use this selector. */
                                        input
                                        {
                                        	background: blue;
                                        	textColour: black;
                                        	text-align: center;
                                        	padding-top: 0.5px;
                                        	padding-left: 2px;
                                        	caret-color: green;
                                        }
                                        
                                        /** Style the text selection with this selector. */
                                        ::selection
                                        {
                                        	background: red;
                                        	color: white;
                                        }
                                        ");
                                        
                                        l.setLocalLookAndFeel(laf);
                                        pb.setLocalLookAndFeel(laf);
                                        
                                        HISEnbergH 1 Reply Last reply Reply Quote 0
                                        • HISEnbergH
                                          HISEnberg @HISEnberg
                                          last edited by

                                          @Christoph-Hart is the #search actually suppose to be a class selector here (.search)? That would make more sense to me and it seems to work.

                                          This is based on the preset browser documentation:
                                          https://docs.hise.dev/ui-components/floating-tiles/plugin/presetbrowser.html

                                          HISEnbergH 1 Reply Last reply Reply Quote 0
                                          • HISEnbergH
                                            HISEnberg @HISEnberg
                                            last edited by

                                            @HISEnberg Hmm and I suppose a follow up to this is if mixing and LAFs is possible here (HISE's traditional LAF and CSS)?

                                            1 Reply Last reply Reply Quote 0
                                            • d.healeyD d.healey referenced this topic on
                                            • First post
                                              Last post

                                            18

                                            Online

                                            1.7k

                                            Users

                                            11.8k

                                            Topics

                                            103.0k

                                            Posts