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

                          16

                          Online

                          1.7k

                          Users

                          11.8k

                          Topics

                          103.1k

                          Posts