6 Replies Latest reply on Nov 27, 2017 12:59 AM by oneDegree

    Draw gradient in ScriptUI panel?

    oneDegree Level 1

      Hi all -

       

      I'm working on extending a script someone has made that assigns random colors (within user parameters) to the fill and/or stroke of selected objects.

       

      Currently, to set the parameters for the Hue, the script uses two input boxes to enter values from 0-255, indicating the range of hues the script uses. I'd like to have some way to visually indicate the hue range selected, to assist those who might not have the hue spectrum memorized. :-)

       

      First thought was to use a hue spectrum image, with two sliders underneath to select the range, but I couldn't find any documentation for using two indicators on the same slider (like in Photoshop's "Blend if" sliders in Layer options).

       

      Second thought was to use the input boxes, and draw a rectangle above them in the dialog that's filled with a gradient ranging from the start to end values (and update it by redrawing each time the values are changed)

       

      However, the latest ScriptUI documentation doesn't show a gradient as an option for drawing with ScriptUIPath, only solid fills of a rectangle with the Brush, for example.

       

      Anyone know of a way to create a gradient fill inside a ScriptUI window?  Failing that, I'm thinking my best bet is to generate a series of small rectangles in a line, and fill each with an appropriate hue to create a rough "gradient" effect, but that's not ideal.

       

      Thanks in advance!

        • 1. Re: Draw gradient in ScriptUI panel?
          Silly-V Adobe Community Professional
          First thought was to use a hue spectrum image, with two sliders underneath to select the range, but I couldn't find any documentation for using two indicators on the same slider (like in Photoshop's "Blend if" sliders in Layer options).

          Among any hacky workarounds for having a range slider, perhaps it could be possible to stack two sliders on top of each other and see if the indicator on the bottom slider is not completely blocked to allow a clickable area for changing it.

           

          But really, since ScriptUI does provide a basic canvas-drawing function, you can draw your entire slider and gradient with drawing functions. I wish I could provide a code sample which could even verify if this approach would work, but unfortunately too busy at the moment.

          • 2. Re: Draw gradient in ScriptUI panel?
            Silly-V Adobe Community Professional

            Okay I took a little break to do this exercise. Here's a function that makes the gradient array blend and then a couple of other functions to test that resulting array in an AI document as well as the ScriptUI canvas graphics.

             

            One difference is the pathItems.rectangle() function takes (y, x, width, height), the scriptUI .rectPath() function is actually (x, y, width, height)

             

            #target illustrator
            function test() {
            
            function makeRGBGradientArray(color_1, color_2, steps) {
              var arr = [];
              var thisArr;
            
              for (var i = 0; i < steps; i++) {
              thisArr = [];
              thisArr[0] = (((color_2[0] - color_1[0]) / steps) * i) + color_1[0];
              thisArr[1] = (((color_2[1] - color_1[1]) / steps) * i) + color_1[1];
              thisArr[2] = (((color_2[2] - color_1[2]) / steps) * i) + color_1[2];
              arr.push(thisArr);
              }
              return arr;
            };
            
            function drawGradientInAI(gradArr) {
              var thisArr;
              var thisColor;
              var doc = app.activeDocument;
              var yPos = 0;
              var xPos = 0;
              var width = 10;
              var height = 40;
              var newRect;
              for (var i = 0; i < gradArr.length; i++) {
              thisArr = gradArr[i];
              thisColor = new RGBColor();
              thisColor.red = Math.round(thisArr[0]);
              thisColor.green = Math.round(thisArr[1]);
              thisColor.blue = Math.round(thisArr[2]);
              newRect = doc.pathItems.rectangle(yPos, xPos, width, height);
              newRect.fillColor = thisColor;
              xPos += width;
              }
            };
            
            function drawGradientInScriptUI(gradArr, canvasArea) {
              var canvas = canvasArea.graphics;
              var yPos = 0;
              var xPos = 0;
              var width = 10;
              var height = 40;
              var thisArr;
              for (var i = 0; i < gradArr.length; i++) {
              thisArr = gradArr[i];
              thisArr[0] = (thisArr[0] / 255).toFixed(2) * 1;
              thisArr[1] = (thisArr[1] / 255).toFixed(2) * 1;
              thisArr[2] = (thisArr[2] / 255).toFixed(2) * 1;
              canvas.newPath();
              canvas.rectPath(xPos, yPos, width, height);
              var myBrush = canvas.newBrush(canvas.BrushType.SOLID_COLOR, [thisArr[0], thisArr[1], thisArr[2]]);
              canvas.fillPath(myBrush);
              canvas.closePath();
              xPos += width;
              }
            };
            
            var color_1 = [255, 0, 0];
            var color_2 = [255, 255, 0];
            
            // drawGradientInAI(makeRGBGradientArray(color_1, color_2, 20));
            var w = new Window("dialog", "Test");
            var p = w.add("panel");
            p.size = [200, 200];
            p.onDraw = function() {
              drawGradientInScriptUI(makeRGBGradientArray(color_1, color_2, 20), this);
            };
            w.show();
            
            };
            test();
            

             

             

            Screen Shot 2017-11-26 at 8.18.27 PM.png

            Screen Shot 2017-11-26 at 8.44.57 PM.pngScreen Shot 2017-11-26 at 8.45.13 PM.png

            Screen Shot 2017-11-26 at 8.50.33 PM.pngScreen Shot 2017-11-26 at 8.51.02 PM.png

            1 person found this helpful
            • 3. Re: Draw gradient in ScriptUI panel?
              Silly-V Adobe Community Professional

              And now if we add some code for the sliders, the result ends up pretty cool! I'd say exactly what you're looking for, if I am not mistaken! (well, the drawing and ScriptUI graphics updating part)

               

              var w = new Window("dialog", "Test");
              var p = w.add("panel");
              p.size = [200, 100];
              p.onDraw = function(){
              drawGradientInScriptUI(makeRGBGradientArray(color_1, color_2, 20), this);
              };
              var g_sliders = w.add("group");
              var g_sliders_1 = w.add("group");
              var g_sliders_2 = w.add("group");
              
              
              var slider_1_r = g_sliders_1.add("slider");
                slider_1_r.minvalue = 0;
                slider_1_r.maxvalue = 255;
              var slider_1_g = g_sliders_1.add("slider");
                slider_1_g.minvalue = 0;
                slider_1_g.maxvalue = 255;
              var slider_1_b = g_sliders_1.add("slider");
                slider_1_b.minvalue = 0;
                slider_1_b.maxvalue = 255;
              
              
              var slider_2_r = g_sliders_2.add("slider");
                slider_2_r.minvalue = 0;
                slider_2_r.maxvalue = 255;
              var slider_2_g = g_sliders_2.add("slider");
                slider_2_g.minvalue = 0;
                slider_2_g.maxvalue = 255;
              var slider_2_b = g_sliders_2.add("slider");
                slider_2_b.minvalue = 0;
                slider_2_b.maxvalue = 255;
              
              
                slider_1_r.onChanging = slider_1_g.onChanging = slider_1_b.onChanging = slider_2_r.onChanging = slider_2_g.onChanging = slider_2_b.onChanging = function(){
                color_1 = [slider_1_r.value, slider_1_g.value, slider_1_b.value];
                color_2 = [slider_2_r.value, slider_2_g.value, slider_2_b.value];
                p.hide();
                p.show();
                };
              
              
              w.show();
              

               

              Screen Shot 2017-11-26 at 9.07.42 PM.png

              • 4. Re: Draw gradient in ScriptUI panel?
                Silly-V Adobe Community Professional

                Obtain a finer display over the gradient strip by taking the width down to 1 pixel and the steps to over 200:

                Screen Shot 2017-11-26 at 9.12.26 PM.pngScreen Shot 2017-11-26 at 9.14.02 PM.png

                • 5. Re: Draw gradient in ScriptUI panel?
                  CarlosCanto Adobe Community Professional & MVP

                  Awesome!!

                  • 6. Re: Draw gradient in ScriptUI panel?
                    oneDegree Level 1

                    This is absolutely amazing, and exactly what I had in mind - appreciate your work on this tremendously!

                     

                    Will play with this, and share with the original script creator.

                     

                    Again, thanks!