Show color picker dialog JSX / CSAW

[Dominik Guzei]

Can someone guide me on how to show the color picker dialog in Illustrator programmatically?

In photoshop that's really easy, just:

     app.showColorPicker(true);

In Illustrator I couldn't find any reference to such a method or other possibility to show the dialog programmatically, that you would normally get when double clicking on the fill color square within Illustrator.

Is that possible by using app.executeMenuCommand or some other method?

I am writing a script that opens the color picker dialog in reaction to a click on a button. I want to be able to get the chosen color and use it within the script.

thanks for the help!

Dominik

[CarlosCanto · Accepted solution]

I'm not sure if you can bring up Illustrator's color picker, in the mean time you can play with JS color picker

alert($.colorPicker ());

[Dominik Guzei]

Hey Carlos, thanks for the fast answer!

Yeah I already saw that it's possible to bring up the native color picker via JSX, is there an easy way to execute the same from an ActionScript environment / or can I execute a jsx script function and get the result from AS?

[CarlosCanto]

sorry I'm not familiar with AS

[Dominik Guzei]

No worries, now I found out how to call any jsx function from AS:

CSXSInterface.instance.evalScript('$.colorPicker')

it works, the picker opens but I don't know how to get the result yet 😉

[CarlosCanto]

var color = $.colorPicker ();
alert(color);

color may be as 0xRRGGBB

if you preselect a color, according to the documentation,

The color to be preselected in the dialog, as 0xRRGGBB, or -1 for the platform default.

[Dominik Guzei]

I got the solution now … how can I post code here in the forum like you did?

[CarlosCanto]

in your reply window, click on the "Use advanced editor" button, you'll get an additional toolbar, select your code and use the Insert->Syntax Hightlighting->Java command, the button is the blue double "chevron"

[Dominik Guzei]

Thanks for the help with the editor 😉

Here is the complete solution to invoke the JSX color picker from AS and use the return value:

JSX: you have to wrap the return value in a special xml format:

function colorPicker() {
    var color = $.colorPicker();
    return '<object><property id="color"><number>' + color + ' </number></property></object>';
}

ActionScript: call the function via evalScript and extract the data from the requestResult object

var jsxRequest:SyncRequestResult = CSXSInterface.instance.evalScript('colorPicker');
if((jsxRequest.status == SyncRequestResult.COMPLETE) && jsxRequest.data)
{
    var result:Object = jsxRequest.data as Object;
    var pickedColor:uint = result.color;
}

[W_J_T]

Dominik,

Nice job (whoa, cool to see strong typing again). Are you using Scripting Listener plugin with Illustrator? Does the PS one work with Illustrator? I am asking as I saw you posted at the link below and it mentions Illustrator however the link for the install is for Photoshop, so I was curious about the workflow/process for Illustrator?

http://thirdroute.com/blog/2013/7/6/jsx-scripting-with-creative-suite-extensions-in-practice

The Workflow

First, install the Scripting Listener plugin. With it installed, whenever you do something in Photoshop/Illustrator/etc, it will write the code needed to perform those steps to ScriptingListenerJS.log on your desktop.

[Dominik Guzei]

Actually I just followed the guidance of Brian Reavis blog article (the one you mentioned) in combination with the Adobe reference of the CSXS api for actionscript (shipped with the extension builder 2.1).

I used the scriptlistener plugin a lot for Photoshop and it really helps for the cryptic action manager magic that's happening there. I don't know if there is something similar within illustrator since I just started developing for it yesterday. That's also the reason for my question here, I couldn't believe that something that's unbelievably easy in photoshop could be so hard (or not even possible) with the illustrator api.

If you are interested, you can follow my work at Code Adventure where I am working on Adobe creative suite extension to simplify basic workflows for designers. My goal is also to release a lot of the stuff I coded in hours of trial and error as open source on github

A real eye opener to extension development was the great blog post by Creative Market on how they built their extension with a mixture of Html, Javascript, css embedded within a custom Flex HTML component.

I also forked their amazing CSXS build tool they built to generate the extension packages. With this you can actually circumvent the commercial extension builder and come really close to a great development environment 😉

A possible future might be a online service where you can configure your basic extension information like the name, icons etc. and download a complete build, based on the opinionated infrastructure mentioned above!

[CarlosCanto]

fantastic post!!! thanks for sharing Dominik, how hard would it be for a novice to get started with Extensions?

for someone that knows nothing about all those technologies, can we find all we need to make an extension in the Github page?

[Dominik Guzei]

Hey Carlos, at the moment it's pretty tough – althought the hard part is not necessary the setup mentioned above but trying to teach Photoshop / Illustrator what you want to do or getting specific information and events from the apps.

I am still fleshing out the infrastructure for my own extensions and will gradually improve it to a point where you don't need to touch the ActionScript part of the extension and can just work with the web application (UI) and communicate with Photoshop etc. via Extendscript (JSX).

Eventually we can get to the point that making an extension that works for CS5 - CC in all Creative Suite apps is as easy as making a website. But the interaction with Photoshop or other programs is still pretty complicated and not well documented. Of course it's possible to build a simpler abstraction layer step by step, but that's a huge undertaking – I am doing it at the moment for my extensions, but they just use a very tiny subset of functionality of their host applications.

[W_J_T]

Whoa, that is awesome indeed.

Dominik Guzei wrote:

I am still fleshing out the infrastructure for my own extensions and will gradually improve it to a point where you don't need to touch the ActionScript part of the extension

As far as the Actionscript portion, does that aspect of this framework get effected by the looming depreciation later this year of Flash based extension Support?

Few references about it being mid 2014:

http://forums.adobe.com/message/6107511

http://forums.adobe.com/thread/1298733

Or is that irrelevant to this framework?

Dominik Guzei wrote:

A possible future might be a online service where you can configure your basic extension information like the name, icons etc. and download a complete build, based on the opinionated infrastructure mentioned above!

If someone would take this framework to the point of a turnkey front-end GUI to build and develop HTML based extensions based upon complete user input, etc, that would be incredible, if possible.

[W_J_T]

This is pretty sweet as well, have you seen this Dominik Guzei ?

Creative Cloud Extension Builder for Brackets

http://davidderaedt.github.io/CC-Extension-Builder-for-Brackets/

http://davidderaedt.github.io/ccext-website/

http://brackets.io/

[Dominik Guzei]

Haven't seen it before, nice idea indeed! 🙂

There is a lot of stuff going on in the CC world, finally Adobe seems to realize that giving power to 3rd party developers is benefitial for them too. Clapping hands for that!

[W_J_T]

Any feedback on the Actionscript comment above that one? 😉

[Dominik Guzei]

The deprication of Flash based extensions by Adobe was the initial reason why I decided to rebuild my architecture to mostly web technologies (Javascript / Extendscript + Html) and only use ActionScript as the middleman between the UI (a web application running in a customized Flex 3.4 HTML component) and the Extendscript within Photoshop, Illustrator etc.

For HTML-Based extensions (in CC) you can simply exchange the ActionScript part with an Javascript based API that does the same thing. So basically its all about abstractions, if everything changes your application must treat every part of the system as exchangable 😉 yeah, I know … Adobe is really horrible. I don't know why they are doing it, but it seems as they only want software architects to be able to build simple extensions that work everywhere. Or better said, they probably want you to ditch the older versions (CS5-CS6) and only build for CC products.

The good news is, that this is actually a much better way to build these extensions, because you don't need to re-compile the Flex application everytime you change something, Extendscript is loaded dynamically everytime the extension is closed/opened. The UI can be changed completely independently, I work with Meteor.js for the UI / webapp / Server integration and just call methods on the ExtendScript side via my ActionScript communication channel (think: JSON based RPC calls). The Extendscript part that interacts with Photoshop/Illustrator will still be supported in the future (only flash is depricated). Since Extendscript is essentially just Javascript I develop in Javascript / Coffeescript and let gulp or grunt combine all the classes etc. to a single MyApp.jsx file that is referenced by the extension.

One improvement to this architecture could be (in the future) that you can create completely auto-updating extensions by pushing updates to the MyApp.jsx file via the web application to the file system of the user. This would make it possible to have a google chrome like experience, where everything is always on the latest version and you as product developer don't have tell your users to download the next version of your plugin.

I just released my Code Adventure blog, where I will write a lot more about these topics and the architecture I created for my extensions.

hope this helped,

Dominik

[W_J_T]

Thanks so much for the feedback and thoughts concerning the Actionscript aspect of this framework, I appreciate your input.

Dominik Guzei wrote:

Or better said, they probably want you to ditch the older versions (CS5-CS6) and only build for CC products.

I hope that's not the case, and they will support back to CS5/CS6 for the foreseeable future. But yeah they are certainly trying to make CC a compelling or rather a forced exclusive  "members only" club hoping to get more monthly payments for people who want even the littlest CC "only" feature(s).

Yes, I saw previously about your blog/github above and will certainly keep close eyes on both of them. Your posts #10 , #12 , #17 were filled with great nuggets of information, thanks for sharing. Sorry to bomb your thread with other conversation, this was just such an interesting topic. Thanks again, keep up the great work, really looking forward to read your blog and to keep track of your ongoing progress on these topics.

[CarlosCanto]

would it be possible in the future to write a detail step-by-step for the complete novice about making an extension using these technologies?...I can help with the Illustrator Javascript part of it.

like my attempt to introduce newcomers to vba here, since it is mostly undocumented

http://forums.adobe.com/message/4273563#4273563

thanks for sharing

[W_J_T]

.

   That is a great idea CarlosCanto and would provide a wonderful resource for everyone.

[Dominik Guzei]

Yeah I bought the domain extensionfabric.com last week, my plan was to start a community / open source project there about building extension using these technologies with guides / screencasts etc. 😉 Would welcome any help / ideas for that!

[isaiahdavis.com]

Hello Dominick,

I am really interested in your exploration into coding extensions and the existing extension known as "Prism" I wanted to know if there was any version for the CC edition as i think this would greatly increase my workflow

[bodich]

Hi Carlos. When I am launching colorPicker(), it returns incorrect value and in decimal. For example when I am choosing 0000FF in color picker, it returns 254. When 0009FF, it returns 254 too. When FFFFFF, it returns 16776958 (FFFEFE). I just don't know what to do, can you help with that?

[schroef]

It does show the picker, issue is. When I link this to a button for say a dialog window. Closing the colorpicker also closes the dialog window. I wanted to use this method to let user refine a color.