Drawing in a ScriptUI window

undavide · Post by **undavide** » Sun Mar 03, 2013 5:31 pm

Hi,
I'm wondering whether there's a way to draw things inside a ScriptUI window.
As mentioned in another thread, it could be possible to use a Canvas within a panel's HTML component, but I'd like to know if something along these lines can be used in Extendscript as well.
For instance, let's say I'd like to graph a curve - what do you think are the actual possibilities? Write a temporary image to disk, read it and embed it as an Image?
(by the way, how could I programmatically create a synthetic image and save it, does JS provides any tool for that?)
Thanks in advance!

Davide

csuebele · Post by **csuebele** » Mon Mar 04, 2013 2:30 pm

Yes, you can draw in a UI. I've only tried it once, and ended up using a Flash movie instead, as it worked better. I don't recall how I did it, but I believe there are some threads here about using the drawing features.

undavide · Post by **undavide** » Mon Mar 04, 2013 2:46 pm

The only thing I came up with is bitmapData in Bridge (exporting a jpg, importing the jpg as an image), but gosh, it's bugged!
I couldn't find anything for drawing tout-court, but styling components like buttons, etc.
If you happen to find your old code, please share
Thanks

Davide

csuebele · Post by **csuebele** » Mon Mar 04, 2013 5:21 pm

I know I don't have the code any more, as it wasn't working the way I wanted it to. I was trying to create a preview that showed border size of an image and have it be adjustable with a slider. I sort of got it working, but it works much better with a Flash movie inserted into the UI. I believe Paul does a lot with drawing in UI, so I'm sure he could answer your question. There is some info in the SDK for the JavaScript Tool Guide. for the CS5 version it starts around page 162. I don't have a copy of the CS6 SDK right now. If you haven't all ready, you might want to post on the Adobe forums, as I know Paul looks at those frequently.

undavide · Post by **undavide** » Mon Mar 04, 2013 5:36 pm

Thanks!
The only thing that prevents me from using a swf component is that they must stick to Flex 3.4 (and communication between JS and Flex adds a bit of complexity - I had a project combining them some time ago and I moved to a JS-only approach).

I did look in the guide, but I stopped when I read:
These objects provide the ability to customize the appearance of user-interface controls before they are drawn
I assumed it means that only controls (sliders, text, buttons) can be styled - not "free-hand" drawing, so to speak (actually my needs are very basic, I've to graph 2D functions) - do you think it's possible, what control should I base on?
Thanks for your suggestions,

Davide

Paul MR · Post by **Paul MR** » Mon Mar 04, 2013 7:00 pm

I have never done any drawing in scriptUI but the first place to look is on your machine for the ColorPicker.jsx example.
From the script it states...
This script creates an example Color Picker floating palette to show how to use some
of the ScriptUI graphics properties and methods. Specifically, it demonstrates:

Defining a ScriptUIFont object and using it to set an element's graphics.font property.
Defining a ScriptUIBrush object and using it to set an element's graphics.backgroundColor property.
Dettaching an onDraw notify handler to a UI element and drawing the element in different ways.
Defining linear segment and rectangular paths.
Filling a path with a ScriptUIBrush created from a dynamic RGB color.
Stroking over paths with ScriptUIPen objects created from static colors (using partial transparency for some pens).

I am sure people would be interested if you can make something from this.

csuebele · Post by **csuebele** » Mon Mar 04, 2013 7:27 pm

I'm pretty sure you can draw a graph, you just need all the coordinates. As I mentioned, I was drawing two rectangles that showed the border size of an image that could be adjusted with a slider. It was so long ago, I don't really remember, but you can add an update to the UI that redraws it, so that you can update the graph after the ui is created.

Paul MR · Post by **Paul MR** » Tue Mar 05, 2013 11:11 pm

Would something like this work?

Code: Select allvar w = new Window('dialog','test');
g = w.graphics;
var myBrush = g.newBrush(g.BrushType.SOLID_COLOR, [0.99, 0.99, 0.99, 1]);
g.backgroundColor = myBrush;
w.p1 = w.add('panel', undefined, undefined, {borderStyle:"black"});
w.p1.preferredSize=[100,100];
w.b1 = w.add('button',undefined,'Cancel');
var gfx = w.p1.graphics;
w.p1.onDraw = function() {
var gfx = this.graphics;
pen = this.graphics.newPen (this.graphics.PenType.SOLID_COLOR, [1, 0, 0,1], 1);
gfx.newPath();
//start point
gfx.moveTo (0, 100);
//x,y point
gfx.lineTo (20,30);
gfx.lineTo (25,70);
gfx.lineTo (30,40);
gfx.lineTo (35,80);
gfx.lineTo (40,10);
gfx.lineTo (45,90);
gfx.lineTo (99,0);
gfx.strokePath(pen);
}
w.show();

undavide · Post by **undavide** » Tue Mar 05, 2013 11:22 pm

Yes, yes, yes!
Thank you sir
I'm going to explore that - so basically you're using a Panel as the canvas, I didn't know it was possible!
By the way, when I wrote that I just needed to draw functions I was referring to this kind of things.
Thanks again Paul!

Davide

undavide · Post by **undavide** » Wed Mar 06, 2013 2:03 pm

Paul,
could you please confirm that ScriptUIPath cannot be stored in variables?
That is, I can add / stroke / fill different paths, but I can't refer to anything (nor change/update) but the current Path, am I right?
Apparently, the ScriptUIPath object has no properties or methods (JS Tools Guide, p.162).

Anyway, I'm now operative with the project I was working on, thanks again!
Davide