3 Replies Latest reply on Feb 3, 2014 2:56 AM by Pedro Cortez Marques

    How to assign the event onClick to the panel?

    Andy_Bat1 Level 1

      Hi everyone!

      Now I choose the color by pressing the button and show it through the painting of the panel. I want to remove the button and clicking on the colored rectangles only - panels. This can be done?

      color1.jpg

        • 1. Re: How to assign the event onClick to the panel?
          Pedro Cortez Marques Level 3

          ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////

          // Color on Iconbutton and on edittext button

          ////////////////////////////////////////////////////////////////////////////////////////// ///////////////////

          #target photoshop

          //

          // choose your 2 colors here:

          var color1 = [0.30, 0.00, 0.80, 1] ; // myIconButton color has alpha chanel (1 = opaque)

          var color2 = [1.00,0.85,0.70];

          var dialogBackgroundColor = [0.55,0.55,0.45];

          var selectedColor = "You must select a color";

           

           

          var w = new Window('dialog','Example', undefined, {borderless: false, closeButton: false}); // {borderless: true, closeButton: false}

          w.orientation="column";

          w.margins = [0,20,0,0];

          w.size = {width:320, height:160};

          w.graphics.backgroundColor = w.graphics.newBrush(w.graphics.BrushType.SOLID_COLOR, dialogBackgroundColor, 1); // cor fundo

           

           

           

           

          // iconbutton (OPTION 1)

          var p = w.add('group');

          var myIconButton = p.add('iconbutton', [0,0, undefined,undefined], undefined, {style:"toolbutton"}); // <x , ^y , x> , vy

          myIconButton.size = [20,20];

          myIconButton.fillBrush = myIconButton.graphics.newBrush(myIconButton.graphics.BrushType.SOLID_COLOR, color1 ); // iconbutton color

          myIconButton.text = ""; // didn't use text on iconbutton

          myIconButton.textPen = myIconButton.graphics.newPen(myIconButton.graphics.PenType.SOLID_COLOR,[0.8,0.6,0.3,1], 1); // text iconbutton color (not used here)

          myIconButton.helpTip = "Select your color here."

          myIconButton.onDraw = customDraw;  // function bellow (a must have on any iconbutton so it is drawn correctly

          // text next to iconbutton

          var myIconButtonStatictext = p.add('statictext', undefined);

          myIconButtonStatictext.text = "color 1";

          myIconButtonStatictext.preferredSize=[200,20];

           

           

          // edittext button (OPTION 2)

          var m = w.add('group');

          var myEditText = m.add('edittext', undefined, {borderless: false});

          myEditText.graphics.backgroundColor = myEditText.graphics.newBrush(myEditText.graphics.BrushType.SOLID_COLOR, color2, 1); //  edittext color

          myEditText.graphics.foregroundColor = myEditText.graphics.newPen(myEditText.graphics.PenType.SOLID_COLOR,[0.5,0.4,0.35], 1); // text color of edittext (not used here)

          myEditText.graphics.font = ScriptUI.newFont ("Arial", 'BOLD', 16)

          myEditText.helpTip = "Select your color here.";

          myEditText.text = "";

          myEditText.preferredSize = {width:20, height:20};

          // text next to edittext button

          var myEditTextStatictext = m.add('statictext', undefined);

          myEditTextStatictext.text = "color 2";

          myEditTextStatictext.preferredSize=[200,20];

           

           

           

           

          // Done button

          var doneBT = w.add('button',undefined,'Done');

          doneBT.preferredSize=[50,20];

           

           

          // close/cancel button

          var closeBT = w.add('button',undefined,'Cancel');

          closeBT.preferredSize=[50,20];

           

           

          // Define event listeners that implement behavior for the UI components

          myIconButton.onClick = function() {

              myIconButtonStatictext.text = "Color 1 selected !";

              myEditTextStatictext.text = "color 2";

              selectedColor = "Chosen color was " + color1;

          }

          myEditText.onClick = function() {

              myEditTextStatictext.text = "Color 2 selected !";

              myIconButtonStatictext.text = "color 1";

              selectedColor = "Chosen color was " + color2;

          }

          doneBT.onClick = function() {

              alert(selectedColor );

          }

           

           

          w.show();

           

           

          ///////////////////////////// It is important to have this when drawing an iconbutton

          function customDraw() {

              with( this ) {

                  graphics.drawOSControl();

                  graphics.rectPath(0, 0, size[0], size[1]);

                  graphics.fillPath(fillBrush);

                  // affects only text if exist inside iconbutton (if you don't use text inside iconbutton, you don't need this)

          //~         if ( text ) {

          //~             graphics.drawString(text,textPen,(size[0]-graphics.measureString(text,graphics.font, size[0])[0])/2, 3,graphics.font);

          //~         }

              }

          }

          • 2. Re: How to assign the event onClick to the panel?
            Andy_Bat1 Level 1

            I don't can used Colorpicker :-(

            Help me !

             

             

            myIconButton.onClick = function() {

                myIconButtonStatictext.text = "Color 1 selected !";

                myEditTextStatictext.text = "color 2";

                selectedColor = "Chosen color was " + color1;

            app.showColorPicker();

                with( myIconButton ) {

                    graphics.drawOSControl(); - // ERROR !!!!

                    graphics.rectPath(0, 0, size[0], size[1]);

                    graphics.fillPath(fillBrush);

                }

             

            }

            • 3. Re: How to assign the event onClick to the panel?
              Pedro Cortez Marques Level 3

              For ScriptUI a color is an Array of Number String:

               

              1. If type is SOLID_COLOR, the color expressed as an array of three or four values, in the form [R, B, G, A] specifying the red, green, and blue values of the color and, optionally, the opacity (alpha channel). All values are numbers in the range [0.0..1.0]. An opacity of 0 is fully transparent, and an opacity of 1 is fully opaque.
              2. If the type is THEME_COLOR, the name string of the theme. Theme colors are defined by the host application.

               

              When getting the new RGB value from showColorPicker(), you must convert the color value to UIscript color format using a function like this:

               

               

              getColorUIvalues_fromPicker()

              function getColorUIvalues_fromPicker() {

                  app.showColorPicker();

                  var UIred = app.foregroundColor.rgb.red/255;

                  var UIgreen = app.foregroundColor.rgb.green/255;

                  var UIblue = app.foregroundColor.rgb.blue/255;

                  return [UIred, UIgreen, UIblue];

              }

               

               

              // Then it is just to run the redraw function I sent before to that element

               

              The there is some more info info regarding scriptUI in here:

              http://jongware.mit.edu/scriptuihtml/Sui/index_1.html