How to listen to foreground color changes and pass a color object into Html DOM with csInterface.evalScript()?

Photoshop
,
1

I’m working on a palette plugin for Photoshop with CEP 11.0, not using UXP because canvas methods are crucial for this plugin, main features are:

  1. (?) listen to foreground color change, collect a few colors on change
  2. (?) pass collected colors into Html DOM
  3. (solved) mix colors on a canvas
  4. (solved) read mouse click position, get color from the pixel
  5. (solved) set chosen color as foreground color

File structure for this plugin is as follow (basically same as adobe’s github tutorial):
image
manifest.xml:

                 <Resources>
                    <MainPath>./index.html</MainPath> 
                    <ScriptPath>./jsx/main.jsx</ScriptPath>
                    <ScriptPath>./js/json2.js</ScriptPath>
                </Resources>

index.html:

        <script type="text/javascript" src="./js/CSInterface.js"></script>
        <script type="text/javascript" src="./js/main.js"></script>

The plugin is tested under Adobe\CEP\extensions, in developer mode.

Ideally (in my imagination), the method for listening to a foreground color change and get color would be something like:
main.js:

function getForeColor() {
    var foreColor = cs.evalScript("getForegroundColor()");
}
cs.addEventListener("THEME_COLOR_CHANGED_EVENT", getForeColor());

main.jsx:

getForegroundColor = function() {
    return app.foregroundColor;
}

This code didn’t work.
I tested THEME_COLOR_CHANGED_EVENT, and it’s not reading foreground color. But I found no other events related to color change in csInterface.js.

Is there an event to listen to Photoshop’s foreground color change from main.js?

Also, I looked up CEP documentary and figured that evalScript() function need a callback function to return value, the code sample in the documentary of passing value into Html DOM is as follow:

cs.addEventListener("documentCreated", function(event) {
    alert('Cool!' + event.data);
});

var extendScript = 'var externalObjectName = "PlugPlugExternalObject"; var mylib = new ExternalObject( "lib:" + externalObjectName ); app.document.add(); var eventObj = new CSXSEvent(); eventObj.type="documentCreated"; eventObj.data="blahblah"; eventObj.dispatch();'
cs.evalScript(extendScript);

It seems that an object has been passed. I tried:

data = cs.evalScript(extendScript);

and:

data = JSON.parse(cs.evalScript(extendScript));

and:

data = PlugPlugExternalObject.data;

and:

data = JSON.parse(PlugPlugExternalObject.data);

and:

data = this.PlugPlugExternalObject.data;

and:

data = JSON.parse(this.PlugPlugExternalObject.data);

and always failed to get the data.

I’m really struggling to understand what this sample is doing and how to get the dispatched object.

Could someone help me out with this?

Thank you in advance!

2

After some tries and errors I figured it out.

To get foreground color from photoshop:
main.js:

cs.evalScript(“app.foregroundColor.hsb.hue”, function(result) {
hue_value = Math.round(result);
});
cs.evalScript(“app.foregroundColor.hsb.saturation”, function(result) {
sat_value = Math.round(result);
});
cs.evalScript(“app.foregroundColor.hsb.brightness”, function(result) {
bri_value = Math.round(result);
});

To set photoshop’s foreground color:
also in main.js:

cs.evalScript(“setColorHSB(” + hue_value + “,” + sat_value + “,” + bri_value + “)”);

It’s a lot straightforward than I imagined. I’m just posting the solution in case someone else has the same question.

2 Likes