HISE Logo Forum
    • Categories
    • Register
    • Login

    Dark and Bright UI Design

    Scheduled Pinned Locked Moved General Questions
    13 Posts 5 Posters 121 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.
    • ustkU
      ustk @d.healey
      last edited by

      @d-healey said in Dark and Bright UI Design:

      If you're using css you might just be able to swap out style sheets or component classes.

      or the colour variable maybe

      Hise made me an F5 dude, browser just suffers...

      1 Reply Last reply Reply Quote 1
      • ChazroxC
        Chazrox @ILIAM
        last edited by

        @ILIAM Grab all the elements you want to change, put them in arrays and apply setAttribute(Colours, Opacity) to them by saving "themes" as value strings in a combobox list or something. I did this exactly in one of my plugins already. You can script, predetermined colour schemes and background images and have them set by buttons or combobox items list. You can divide up your arrays by component type so you can separate what you're changing ie, all background panels go dark, but text goes opposite an vice versa. Good luck! This is the fun part. haha.

        1 Reply Last reply Reply Quote 1
        • ILIAMI
          ILIAM
          last edited by

          Are we good like this?

          Content.makeFrontInterface(300, 100);
          
          const var Panels = [Content.getComponent("Panel1"),
                              Content.getComponent("Panel2")];
          
          
          const var Labels = [Content.getComponent("Label1"),
                              Content.getComponent("Label2")];
          
          
          
          const var ThemeSwitch = Content.getComponent("ThemeSwitch");
          
          inline function onThemeSwitchControl(component, value)
          {
          	local col = value ? 0xFFFFFFFF : 0xFF000000;
          	local Invcol = value ? 0xFF000000 : 0xFFFFFFFF;
          
          
              //Panels
          	for (i = 0; i < Panels.length; i++) 
          	{
          		Panels[i].set("itemColour", col);
          		Panels[i].set("itemColour2", col);
          		Panels[i].repaint();
          	}
          	
          	
          	//Labels
          	for (i = 0; i < Labels.length; i++) 
          	{
          		Labels[i].set("bgColour", Invcol);
          		Labels[i].set("textColour", col);
          	}
          	
          };
          
          Content.getComponent("ThemeSwitch").setControlCallback(onThemeSwitchControl);
          
          
          HiseSnippet 1121.3oc0W8+SiaCE2AHHZt0S6j1e.Q7Ss6PPZKb.ic55QA1p1AW0J6zlNc5jahaqEI1UIt.cm3+48e.6Y6jFWHTfJseXVBj76K9ym26Y+xqch49jjDdLxx47IiHHquyt6DlXXqgXJC09Hj0KsOEmHHwtZQGNYDNIgDfrrV9WjBrJsBRs9m2cHNDy7I4hPnOwo9jOPinhbocZ9azvvSvAjyoQFVucy19bVKdHeLvmks8Piv9WfGPNCKMaIazuhSFhr9Q6c812qAY+cBH3F60XmZd382s+1MB7B5g2MXu5d824M81kzGYs5wATAOtq.KHIHqUNjGLo6P9ULM.ehlP6ERjapg5BHqEeBOLPFhRonVCogAcxRTIH3T5jm1VVm19A6SoAzoxySeeuRgatGlIPqklkdKOC8p8Pzq.JYYPoUzT5U1c8ioiD4Zj74E1sYP0rOFpSlTQaKZokWwtEGrfI1LBeA4jXXyTOpzvyaC2ZddUOnrSYGnZkHbuDG61AyHgItu08yYNOfHZwiFwYvlJqqzWa8paT1wsf0bbp95U+hBLS39.t2bgSo+4BmxIC3LA77gjHR2qnB+g.pE6ugMqqyOTVHkQb6Ol4KnblKmYXi7Ph4gU7yNgM.jBGSpV14akcJEx8wgt97P.Okb2245c8IoK2eRswSsNXp4sYWdeOzFk5gdAd3nSMasktzAGQedraEJ3r2AtT2eNsltYHgMPLDD85WW0ELSRtRZcel9kMSHPnSEjH86102PxYY3OGipWrUwjQvqFQEk7af+bJA+aqszU6BXnVQwLTqaJ38FLke5jjF76Xkfbs3dwgjIkctQUQeBUd4IkVaagCC6AsvpTTgu5AF2KNiKHejUopy2fn9FG26ppe+B0kdTgj3BUKauFOOGqvFG0iDmcyKyPnExr8kV8o0WxWmcLLjyZynhONhjte9MVQooWY+rTFBlJTcydYZ2rCGKDbFhBGRYairJREBle5A8GsOBKvYGFbt.ViHwBpLjrNhbI7oIcqxR1GQRtPvGgrrmVWgv9IB804vRaNwjCWQCDvWrrsBfMCIzACEY6PF.8BMPky5XKeRnvYMacmSSHPnGGhL0sal+pCjtJH5VEMyeKZJN6URpL0J+Mgozd73.RbW5eOaJ+YDS0Mio+p4+Kho0lMlTcORiI8mbdv5T6lOvUg52gh2BqBo3s2kLkdDxnRvZ3dpDQBpQv7L308G+.F7gGLNDKlcZH4LioJfVQyLBhbLCVBULwblxmwHRdycDomJEekcG4i5h43REvQnAy+EbLcvxx1G2uOwWjSvUrO4OWzoHeD3+c9XAkM3TrHlJu7b13ntPk1m.nyjelVdQYI40P8dO4dYFnKgEn1HuljprlbuUpxZYJQQX+X9W80s2kittlRBvIlZL+Rvu2.16V69czifIo+pu+rG08br9h5XiE0wsWTG2YQc7MKpi6tnNt2i6n7G579wBdj9YCBcZmiUeA1x5XFFtAptsh9WfpOVWG
          
          ChazroxC 1 Reply Last reply Reply Quote 0
          • ChazroxC
            Chazrox @ILIAM
            last edited by Chazrox

            @ILIAM without opening the snippet, looks good to me. Is it working? I myself use .sendRepaintMessage(); unless its real time. Also, I think 'for in' loops works too but its your preference.

            ILIAMI 1 Reply Last reply Reply Quote 0
            • ILIAMI
              ILIAM @Chazrox
              last edited by

              @Chazrox Thanks man
              Im working on a big project, and Lots of Painting.

              var BgColour = [];

              then inside an inline, Using
              if value = BgColour= Colour.Black
              else
              BgColour= Colour.White

              And Using BgColour on All Compnents and Sending Repaint message?

              Is This safe?

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

                @Chazrox and One thing
                sendRepaintMessage() works on Laf and All components? Panels?

                Example:
                AllPanels[i].sendRepaintMessage();
                AllKnons[i].sendRepaintMessage()

                It works like this?

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

                  @ILIAM said in Dark and Bright UI Design:

                  Sending Repaint message?

                  Probably don't need this for most components - test it though.

                  Use const instead of var

                  Free HISE Bootcamp Full Course for beginners.
                  YouTube Channel - Public HISE tutorials
                  My Patreon - HISE tutorials

                  ILIAMI 1 Reply Last reply Reply Quote 1
                  • ChazroxC
                    Chazrox @ILIAM
                    last edited by Chazrox

                    @ILIAM @d-healey I just double checked this just because.

                    and .sendRepaintMessage(); works for everything. Looks to be so in the api list.

                    .repaint(); // asynchronous
                    .repaintImmediately(); // synchronous / real time
                    .sendRepaintMessage(); // asynchronous
                    
                    d.healeyD 1 Reply Last reply Reply Quote 1
                    • ILIAMI
                      ILIAM @d.healey
                      last edited by

                      @d-healey @Chazrox Thank you Guys, Will try and report back 🙏

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

                        @Chazrox said in Dark and Bright UI Design:

                        sendRepaintMessage(); works for everything

                        Sure, but it it needed

                        Free HISE Bootcamp Full Course for beginners.
                        YouTube Channel - Public HISE tutorials
                        My Patreon - HISE tutorials

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post

                        14

                        Online

                        2.0k

                        Users

                        12.8k

                        Topics

                        111.4k

                        Posts