I have discovered a cool ScriptUI snippet on the illustrator fora, but it only works flawlessly when ESTK is targeted, not when Ps is targeted. So far, I haven't find a way to make the ui to redraw on request ( onChange or onChanging). I have tried to use "notify" or "layout.layout" but my tries were unsuccessfull.
If someone wants to have a look, here is the original code :
// Panel dialog with drawGradientInScriptUI
// Author: Silly-V and Schroef
// Source: https://community.adobe.com/t5/illustrator/draw-gradient-in-scriptui-panel/m-p/9517915
// function is actually(x, y, width, height)
// #target illustrator
#target photoshop
function callDialog() {
var color_1 = [255, 0, 0];
var color_2 = [255, 255, 0];
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[i][0]);
thisColor.green = Math.round(thisArr[i][1]);
thisColor.blue = Math.round(thisArr[i][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 = 13;
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 spacing = 8;
var margins = [0,10,0,0];
// This the second example, showing a dialog the gradient and interactive sliders
var w = new Window("dialog", "Gradient Dialog");
var p = w.add("panel");
p.size = [200, 50];
// p.orientation = "row";
// p.alignChildren = ["left","center"];
p.spacing = spacing;
p.margins = margins;
p.alignment = ["fill","top"];
p.onDraw = function() {
drawGradientInScriptUI(makeRGBGradientArray(color_1, color_2, 20), this);
};
// Group sldiers 1 and 2
var g_sliders = w.add("group");
g_sliders.orientation = "row";
// g_sliders.alignChildren = ["left","center"];
g_sliders.alignment = ["fill","top"];
// Group sliders 1
var g_sliders_1 = g_sliders.add("group");
g_sliders_1.orientation = "column";
g_sliders_1.alignChildren = ["left","center"];
g_sliders_1.spacing = spacing;
g_sliders_1.margins = margins;
g_sliders_1.alignment = ["fill","top"];
var colOneLabel = g_sliders_1.add("statictext", undefined, undefined, {name: "colOneLabel"});
colOneLabel.alignment = ["fill","top"];
colOneLabel.text = " Color 1";
// Group sliders 2
var g_sliders_2 = g_sliders.add("group");
g_sliders_2.orientation = "column";
g_sliders_2.alignChildren = ["left","center"];
g_sliders_2.spacing = spacing;
g_sliders_2.margins = margins;
g_sliders_2.alignment = ["fill","top"];
var colTwoLabel = g_sliders_2.add("statictext", undefined, undefined, {name: "colTwoLabel"});
colTwoLabel.alignment = ["fill","top"];
colTwoLabel.text = " Color 2";
// Sliders color_1
var slider_1_rGrp = g_sliders_1.add("group");
slider_1_rGrp.orientation = "row";
slider_1_rGrp.alignment = ["fill","top"];
var colOneRlabel = slider_1_rGrp.add("statictext", undefined, undefined, {name: "colOneRlabel"}
);
colOneRlabel.text = "R";
var slider_1_r = slider_1_rGrp.add("slider");
slider_1_r.minvalue = 0;
slider_1_r.maxvalue = 255;
slider_1_r.value = color_1[0];
var slider_1_gGrp = g_sliders_1.add("group");
slider_1_gGrp.orientation = "row";
slider_1_gGrp.alignment = ["fill","top"];
var colOneGlabel = slider_1_gGrp.add("statictext", undefined, undefined, {name: "colOneRlabel"}
);
colOneGlabel.text = "G";
var slider_1_g = slider_1_gGrp.add("slider");
slider_1_g.minvalue = 0;
slider_1_g.maxvalue = 255;
slider_1_g.value = color_1[1];
var slider_1_bGrp = g_sliders_1.add("group");
slider_1_bGrp.orientation = "row";
slider_1_bGrp.alignment = ["fill","top"];
var colOneBlabel = slider_1_bGrp.add("statictext", undefined, undefined, {name: "colOneRlabel"}
);
colOneBlabel.text = "B";
var slider_1_b = slider_1_bGrp.add("slider");
slider_1_b.minvalue = 0;
slider_1_b.maxvalue = 255;
slider_1_g.value = color_1[2];
// Sliders color_2
var slider_2_rGrp = g_sliders_2.add("group");
slider_2_rGrp.orientation = "row";
slider_2_rGrp.alignment = ["fill","top"];
var colOneRlabel = slider_2_rGrp.add("statictext", undefined, undefined, {name: "colOneRlabel"}
);
colOneRlabel.text = "R";
var slider_2_r = slider_2_rGrp.add("slider");
slider_2_r.minvalue = 0;
slider_2_r.maxvalue = 255;
slider_2_r.value = color_2[0];
var slider_2_gGrp = g_sliders_2.add("group");
slider_2_gGrp.orientation = "row";
slider_2_gGrp.alignment = ["fill","top"];
var colOneRlabel = slider_2_gGrp.add("statictext", undefined, undefined, {name: "colOneRlabel"}
);
colOneRlabel.text = "G";
var slider_2_g = slider_2_gGrp.add("slider");
slider_2_g.minvalue = 0;
slider_2_g.maxvalue = 255;
slider_2_g.value = color_2[1];
var slider_2_bGrp = g_sliders_2.add("group");
slider_2_bGrp.orientation = "row";
slider_2_bGrp.alignment = ["fill","top"];
var colOneRlabel = slider_2_bGrp.add("statictext", undefined, undefined, {name: "colOneRlabel"}
);
colOneRlabel.text = "B";
var slider_2_b = slider_2_bGrp.add("slider");
slider_2_b.minvalue = 0;
slider_2_b.maxvalue = 255;
slider_2_b.value = color_2[2];
// Interactive sliders
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();
};
callDialog();
1 Correct answer
3
Replies
AdChoices