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.
    • 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

                              12

                              Online

                              1.7k

                              Users

                              11.8k

                              Topics

                              103.1k

                              Posts