7 Replies Latest reply on May 27, 2016 9:08 AM by Scorpio17523

    Allow user to pick dialog/palette background colour

    Scorpio17523

      Hi all,

       

      So basically I'm trying to give the user the ability to customise a toolbar I've developed for work by allowing them to pick their own colour. I don't want to have to keep jumping into the script each time someone wants a different colour so thought this would be a fun extra.

       

      I've looked around and found code for a colour picker, and adapted it for what I want, but being a complete noob, I've

      a) clearly done it wrong because it doesn't work and

      b) there is probably a better way of doing it.

       

      Below you'll see my script for a dummy dialog window.

      Any help would be greatly appreciated.

       

      var box = new Window("dialog", "Just Digital Toolbar");  
        
      box.panel1 = box.add('panel', undefined);  
      box.panel1.group = box.panel1.add('group', undefined );  
      box.panel1.group.orientation='row';  
        
      box.panel1.group.finalBtn = box.panel1.group.add('button',undefined, "Dummy 1", {name:'dummy1'});  
      box.panel1.group.binderBtn = box.panel1.group.add('button',undefined, "Dummy 2", {name:'dummy2'});
      box.panel1.group.bocBtn = box.panel1.group.add('button',undefined, "Dummy 3", {name:'dummy3'});
      
      
      box.panel2 = box.add('panel', undefined);  
      box.panel2.group = box.panel2.add('group', undefined, );  
      box.panel2.group.orientation='row';  
        
      box.panel2.group.colourPickBtn = box.panel2.group.add('button',undefined, "Colour Picker", {name:'colourPick'});
      box.panel2.group.closeBtn = box.panel2.group.add('button',undefined, "Close", {name:'close'});
      
      
      box.location = [1850, 40];
      
      
      box.panel2.group.colourPickBtn.onClick = function(){  
          
      var hexToRGB = function(hex) {
        var r = hex >> 16;
        var g = hex >> 8 & 0xFF;
        var b = hex & 0xFF;
        return [r, g, b];
      };
      
      var color_decimal = $.colorPicker();
      $.writeln(color_decimal);
      
      var color_hexadecimal = color_decimal.toString(16);
      $.writeln(color_hexadecimal);
      
      var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
      $.writeln(color_rgb);
      
      var color_that_ae_add_solid_understands = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];
      $.writeln(color_that_ae_add_solid_understands);
      
      box.graphics.backgroundColor = color_rgb;
      }
      
      //===================TEMP CLOSE FUNCTION=====================//
      box.panel2.group.closeBtn.onClick = function(){  
        box.close();
      }
      //===================TEMP CLOSE FUNCTION END=====================//
      
      box.show ();
      
        • 1. Re: Allow user to pick dialog/palette background colour
          UQg Level 4

          You can't set backgroundColor directly like this, myStuff.graphics.backgroundColor = [r,g,b,a];

          You must create a brush first:

           

          var g = box.graphics;
          g.backgroundColor = g.newBrush(g.BrushType.SOLID_COLOR, color_that_ae_add_solid_understands);
          

           

          The first argument to newBrush is the brushType (in practice, always BrushType.SOLID_COLOR, the other one, THEME_COLOR, is hazardous) and the second the rgba value of the color (entries in 0-1 range, the alpha entry can be omitted - then it is 1).

           

          Xavier

          • 2. Re: Allow user to pick dialog/palette background colour
            Scorpio17523 Level 1

            Hi Xavier,

             

            Thanks for your reply.

             

            So how would I get this so that on clicking a button it opens the colour wheel and takes the colour selected to change the background colour?

             

            Sorry but I'm a complete noob when it comes to scripting. I understand it in principle, and I understand what you typed, but I'm not sure how to implement it. Your help would be greatly appreciated.

            • 3. Re: Allow user to pick dialog/palette background colour
              UQg Level 4

              The bit of code i posted was meant to replace box.graphics.backgroundColor = color_rgb;

              Full code (without the $.writeln):

               

              function hexToRGB(hex) {
                  var r = hex >> 16;
                  var g = hex >> 8 & 0xFF;
                  var b = hex & 0xFF;
                  return [r, g, b];
                  };
              
              var box = new Window("palette", "Just Digital Toolbar");    
                  
              box.panel1 = box.add('panel', undefined);    
              box.panel1.group = box.panel1.add('group', undefined );    
              box.panel1.group.orientation='row';    
                  
              box.panel1.group.finalBtn = box.panel1.group.add('button',undefined, "Dummy 1", {name:'dummy1'});    
              box.panel1.group.binderBtn = box.panel1.group.add('button',undefined, "Dummy 2", {name:'dummy2'});  
              box.panel1.group.bocBtn = box.panel1.group.add('button',undefined, "Dummy 3", {name:'dummy3'});  
                
                
              box.panel2 = box.add('panel', undefined);    
              box.panel2.group = box.panel2.add('group', undefined, );    
              box.panel2.group.orientation='row';    
                  
              box.panel2.group.colourPickBtn = box.panel2.group.add('button',undefined, "Colour Picker", {name:'colourPick'});  
              box.panel2.group.closeBtn = box.panel2.group.add('button',undefined, "Close", {name:'close'});  
                
                
              box.location = [1850, 40];  
                
                
              box.panel2.group.colourPickBtn.onClick = function(){
                  var g = box.graphics;
                  var color_decimal = $.colorPicker();
                  if (color_decimal>=0){
                      var color_hexadecimal = color_decimal.toString(16);
                      var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
                      var color_that_ae_add_solid_understands = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];    
                        
                      g.backgroundColor = g.newBrush(g.BrushType.SOLID_COLOR, color_that_ae_add_solid_understands);
                      };
                  }  
                
              //===================TEMP CLOSE FUNCTION=====================//  
              box.panel2.group.closeBtn.onClick = function(){    
                box.close();  
              }  
              //===================TEMP CLOSE FUNCTION END=====================//  
                
              box.show ();
              

               

              Xavier

              • 4. Re: Allow user to pick dialog/palette background colour
                Scorpio17523 Level 1
                var box = new Window("dialog", "Just Digital Toolbar");
                
                box.panel1 = box.add('panel', undefined);
                box.panel1.group = box.panel1.add('group', undefined );
                box.panel1.group.orientation='row';
                
                box.panel1.group.finalBtn = box.panel1.group.add('button',undefined, "Dummy 1", {name:'dummy1'});
                box.panel1.group.binderBtn = box.panel1.group.add('button',undefined, "Dummy 2", {name:'dummy2'});
                box.panel1.group.bocBtn = box.panel1.group.add('button',undefined, "Dummy 3", {name:'dummy3'});
                
                
                
                
                
                
                box.panel2 = box.add('panel', undefined);
                box.panel2.group = box.panel2.add('group', undefined, );
                box.panel2.group.orientation='row';
                
                box.panel2.group.colourPickBtn = box.panel2.group.add('button',undefined, "Colour Picker", {name:'colourPick'});
                box.panel2.group.closeBtn = box.panel2.group.add('button',undefined, "Close", {name:'close'});
                
                
                
                
                box.location = [1850, 40];
                
                
                
                
                
                
                box.panel2.group.colourPickBtn.onClick = function(){
                
                var hexToRGB = function(hex) {
                  var r = hex >> 16;
                  var g = hex >> 8 & 0xFF;
                  var b = hex & 0xFF;
                  return [r, g, b];
                };
                
                
                
                
                var color_decimal = $.colorPicker();
                $.writeln(color_decimal);
                
                
                var color_hexadecimal = color_decimal.toString(16);
                $.writeln(color_hexadecimal);
                
                
                var color_rgb = hexToRGB(parseInt(color_hexadecimal, 16));
                $.writeln(color_rgb);
                
                
                var color_that_ae_add_solid_understands = [color_rgb[0] / 255, color_rgb[1] / 255, color_rgb[2] / 255];
                $.writeln(color_that_ae_add_solid_understands);
                
                
                var g = box.graphics;
                g.backgroundColor = g.newBrush(g.BrushType.SOLID_COLOR, [0.2, 0.6, 0.2]);
                }
                
                
                
                
                
                
                //===================TEMP CLOSE FUNCTION=====================//
                
                
                box.panel2.group.closeBtn.onClick = function(){
                  box.close();
                }
                
                
                //===================TEMP CLOSE FUNCTION END=====================//
                
                
                
                
                box.show ();
                

                 

                So I know how to actually set the background colour via the script, but I want any person using the interface (the dialog box) to be able to set the colour themselves via the colour picker.

                 

                g.backgroundColor = g.newBrush(g.BrushType.SOLID_COLOR, [0.2, 0.6, 0.2]);
                

                 

                Now while [0.2, 0.6, 0.2] sets a green colour... what do I replace that with so that it takes the value that is picked each time the colour wheel is used?

                • 5. Re: Allow user to pick dialog/palette background colour
                  Scorpio17523 Level 1

                  I used tried the code you provided and when I click the colour picker button, select a colour and close the window I get the following error:

                   

                  hexToRGB is not a function.

                  • 6. Re: Allow user to pick dialog/palette background colour
                    UQg Level 4

                    Hmm sorry, i had moved the hexToRGB function out of the onClick handler.

                    If you copy/paste the second code i provided (entirely, including the hexToRGB function at the beginning), everytime the user clicks the Color Picker button, the color picker is shown and the backgroundColor is updated accordingly. Isnt it what you wanted ?

                     

                    Xavier

                    • 7. Re: Allow user to pick dialog/palette background colour
                      Scorpio17523 Level 1

                      Sorry, hadn't noticed that the top section had changed.

                       

                      Yes! That's perfect!!

                       

                      Thank you so much for your help.