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

                            14

                            Online

                            1.7k

                            Users

                            11.8k

                            Topics

                            103.1k

                            Posts