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

                                16

                                Online

                                1.7k

                                Users

                                11.8k

                                Topics

                                103.1k

                                Posts