PhotoshopJSONCallback

HTML Panel Tips #18: Photoshop JSON Callback

Davide Barranca —  — 2 Comments

CC2015 previews a new Photoshop Event listening system and deprecates the "com.adobe.PhotoshopCallback", due to a bug that makes all the extension receiving the event – that is: if two panels are registered for the event “make”, then each panel sees the other panel’s “make” event, and must ignore it.

The solution implemented marks a break in retro-compatibility and is going to be the only one accepted from Photoshop CC2016 (version 17.x) onwards. Let’s have a look at what is that all about.

Please refer to HTML Panels Tips: #7 Photoshop Events, Take 1 to review how PS events listening works. Now, there are three different changes you must be aware of:

  1. "com.adobe.PhotoshopJSONCallback" is the replacement event – no more "com.adobe.PhotoshopCallback".
  2. The ExtensionID must be appended as a suffix.

So what used to be:

now becomes:

  1. The data property of the CSEvent that the PhotoshopCallbackUnique receives is a JSON string hidden inside a string.

As you see, there’s a ver1, that needs to be stripped. Also, as a bonus, extra information is provided as JSON (here a New Document’s been created).

I’ve uploaded a demo extension on my GitHub repo, which looks like:

PhotoshopJSONCallback

which basically let you switch on/off listeners to the corresponding events (“make”, “duplicate”, etc are the stringID). You can find the full code on GitHub, yet the relevant files are:

HTML

I’ve used Topcoat CSS (apparently not anymore maintained, but I love them), nothing too fancy.

JS

The init function starts the themeManager and then activate persistence (if you need a refresh on the topic, have a look at this older HTML Panel Tip). Be careful with persistence, since if it’s active it will constantly cache the extension in the Chrome Dev Tools (i.e. you change code, reboot the panel and changes aren’t loaded – you need to reboot Photoshop. This happens on OSX at least; knowing it will save some head scratching time).

Then you add a listener for the PhotoshopJSONCallback plus extensionID (line 24).

On line 26 PhotoshopCallbackUnique strips the “ver1” string in the event.data, then parse the JSON and puts it back as an Object.

Line 44, toggleEventRegistering: this is the unique switches onChange callback, which duty is to dispatch the com.adobe.PhotoshopRegisterEvent or com.adobe.PhotoshopUnRegisterEvent, corresponding to the on-the-fly-calculated typeID of the provided stringID.

I hope this help clarifying how things work now. I repeat, both PhotoshopCallback and PhotoshopJSONCallback are usable in Photoshop CC2015 (the first is “just” deprecated), while from CC2016 onwards only the latter will work. I’d like to thanks Tom Ruark who pointed me to the Adobe’s original code, that I’ve refactored a bit for this blogpost.

Also, I take the chance to tell you I’m working at a more comprehensive learning resource about Photoshop HTML Panels (ebook + video series), so stay tuned here. Ciao,

-Davide

Print Friendly
Share

2 responses to HTML Panel Tips #18: Photoshop JSON Callback

  1. Great post and examples!

    Will this function in other CC ’15 tools besides PS?

  2. I honestly don’t understand how these horrible callbacks work despite reading through all your blog posts about them. My problem is that old callback data seem to persist, so that I am unable to overwrite it with new data.

    This panel of yours for example: It worked great when I first tried it out. Then I started experimenting with changing the event.data and now the panel no longer works. Even if I remove the eventListener and unregister, this panel will simply no longer work for me. Now the issue is obviously not with your panel but with my management of these callbacks. Is there any neat way of figuring out what eventListeners are active for example?

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> 

*
*