Skip to main content
O
oneDegree
Inspiring
November 24, 2017
Answered

Draw gradient in ScriptUI panel?

  • November 24, 2017
  • 1 reply
  • 2722 views

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!

This topic has been closed for replies.
Correct answer Silly-V

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;
  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;
  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();

1 reply

Silly-V
Silly-V
Legend
November 26, 2017
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.

Silly-V
Silly-VCorrect answer
Legend
November 27, 2017

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;
  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;
  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();

    Silly-V
    Silly-V
    Legend
    November 27, 2017

    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();

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices