HTML Panels Tips: #7 Photoshop Events, Take 1

Davide Barranca —  — 18 Comments

This tip shows you the first way to make an HTML Panel listen and react to Photoshop Events: via PhotoshopRegisterEvent.

Back in the Flash land, there were two ways to register callbacks for Photoshop Events: using either a PSHosttAdapter library, or an ExternalInterface object and PhotoshopCallback. Today’s tip is about the latter (see Tip #8 for the PSHostAdapter libraries).

What we used to write in ActionScript was something like:

Things are slightly different now in Javascript. and are based on CSInterface and the dispatching of a custom Event. As follows the mechanism in a nutshell, then I’ll show you an actual example:


PSEventsThis Panel has a switch to turn ON/OFF the listener for few PS Events (cut, copy, paste). When the listener is active and the user cuts, copies or pastes, the Event’s StringID is written in the text area. In case you need a refresh of HTML Panels related topics to go through this one, here’s the whole list.

You might need a refresh because this example uses Topcoat CSS (see HTML Panels Tip #6) and communication between HTML and JSX (Tip #4).


The Panel uses boilerplate code by David Deraedt with the addition of Topcoat CSS (refer to HTML Panels Tip #6 for the details). I’ve set up a Topcoat Switch and a Text Area:


In main.js it’s defined the Register() function that attaches (or remove) the listener, dispatching a CSEvent as you’ve already seen.

A jQuery function binds the switch to Register() and finally a PSCallback function is defined: there, the Event data String is split and passed for evaluation to JSX (see Tip #4 for details about HTML to JSX data exchange). The evalScript callback (that is, the JSX return value) is displayed in the Text Area.


In the JSX file there’s just a function, that converts the TypeID to StringID and returns it.



Print Friendly

18 responses to HTML Panels Tips: #7 Photoshop Events, Take 1

  1. Hi David,

    Can you suggest how to register for indesign events?


  2. Hi David,

    Thank you for your articles about Photoshop Events, I according to the way you did (tried both ways), events that did not work, COPY/CUT/… without any response, I don’t know where is the problem.

    My environment:
    photoshop 14.2.1 x64
    Eclipse Version: Kepler Service Release 2,Build id: 20140224-0627
    Extension Builder 3



  3. Hi David,

    Do you have a list of the event names mapped to the charIDToTypeID? Or how would you recommend I go about finding them?

    I’m especially interested in listening to a foregroundColor/backgroundColor change.


  4. Hi Davide

    Thank you for this article and the rest re CS html extensions, they are very helpful.

    Do you know if its also possible to trigger custom events from the JSX and catch them in the applications JS ?

    Thanks a bunch …

  5. Hi
    What is the use of descID, the number after ‘,’ as in 31800 in 1 936483188, 31800 ?


  6. Sergey Kritskiy June 16, 2014 at 12:07 PM

    Hi (again) Davide,
    Do you know if it’s possible to listen to color change and/or ‘paint with brush’ events? I think color change is borrowed within SET event but I’m not sure if it’s possible to distinguish color events and other Set events

  7. I have problems with PhotoshopCallback function, the problem is that when I open a document, function receives ,in theory, one event, but the functions that are inside ‘if (eventID == 1332768288)’ are executing twice, or three times.. or only once (the correct)… You know a solution?
    I will be crazy
    function PhotoshopCallback(eventDesc) {
    var dataArray =“,”);
    var eventID = dataArray[0];
    var descID = dataArray[1];

    if (eventID == 1332768288) { //eventOpen=1332768288
    callReadResource(“photoshopcallback open”);


  8. I’m having troubles too – I’m investigating Sergio.
    Callback fires each time you close/reopen the panel one extra time (you close/reopen the panel 9 times, you get 9 callback calls). Strangely enough, Chrome Dev Tools seem to prevent the callback from firing altogether. I’m quite puzzled.

  9. Thanks, this was great!

Trackbacks and Pingbacks:

  1. HTML Panel Tips #18: Photoshop JSON Callback | Photoshop, etc. - September 3, 2015

    […] 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 […]

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="">