I've been really digging into using JavaScript with Photoshop in the last few months. Today I made a wonderful, mysterious discovery.
Discovering the Photoshop Scripting UI
Until now, the only user interaction I've been able to add to my scripts is popping up a JavaScript alert, confirm, or prompt or showing a 'select a file' dialog. These were better than nothing, but I really wanted a panel with buttons or a big textarea.
Begin theme music for page 187 of the 2005 Photoshop CS2 JavaScript Reference Guide (PDF, 3.4MB). This guide discusses ScriptUI, which is mysteriously never mentioned in the CS3, CS4, or CS5 guides. It goes into great depth demonstrating how you can build complex user interfaces complete with sliders, textareas, checkboxes, dropdowns, and more! And guess what… it all works in CS5!
Here's a simple example of popping up a blank window:
var dlg = new Window('dialog', 'Alert Box Builder', [100, 100, 400, 300]);
dlg.show();
What You See Is What You Get
Building a complex interface isn't for the faint of heart (it reminds me of my flash developing days), but it is possible and reasonable. I was super excited to discover this CSUIB thread discussing a WYSIWYG for ScriptUI by Jakub Kozniewski where you drag/resize panels & inputs and it generates the code for your UI. Pretty sweet, huh? Here's a UI I built in a few seconds (code then screenshot):
var dlg = new Window("dialog{text:'Script Interface',bounds:[100,100,561,269],
iwtfkhamhc:EditText{bounds:[16,16,444.95,94] , text:'Your text goes here' ,properties:{multiline:false,noecho:false,readonly:false}},
button0:Button{bounds:[17,102,117,122] , text:'Save' },
button1:Button{bounds:[236,101,336,121] , text:'Cancel' },
button2:Button{bounds:[345,101,445,121] , text:'Whatever' },
slider0:Slider{bounds:[18,138,173,148] , minvalue:0,maxvalue:100,value:0},
checkbox0:Checkbox{bounds:[190,133,261,154] , text:'Checkbox Text' },
dropdown0:DropDownList{bounds:[299,134,443,149],properties:{items:['Select One']}}
};");
dlg.show();
