onClick event not working when trying to open an image in Photoshop CC2015 extension panel

[Chris_G_1975]

Hi,

I'm currently writing an extension for CC2015 that opens a panel containing some tab layouts and some buttons.

I want the buttons to perform an onClick function that opens a PNG file in Photoshop but I cannot seem to get this to function to work as expected.

The main parts of my index.html for the extension that defines one of the buttons is:

<button class="BUTTON CLASS" id="BUTTON ID" role="BUTTON">BUTTON NAME</button>

I've then added an event listener function for the button (shown below) that works on finding the id name of the button:

<script type="text/javascript">

document.getElementById('BUTTON ID').addEventListener('click', onClickButton, false);

function onClickButton()

{

    var imageFile = new File("C:/FOLDER/FILENAME.png");

    docRef = app.open(imageFile);  

}

</script>

This piece of Javascript above falls over at this part here:

{

    var imageFile = new File("FILENAME.png");

    docRef = app.open(imageFile);  

}

For some reason the image will not open on button click with the above bit of script, however if I run this snippet in isolation by running the following in the ESTK the PNG file opens perfectly fine in Photoshop

     #target photoshop

    var imageFile = new File("FILENAME.png");

    docRef = app.open(imageFile);

I've tested the event listener and the onClick and everything appears to be fine here because if I replace the app.open portion of the script with a simple alert shown below the button returns a new window with the alert text present:

<script type="text/javascript">

document.getElementById('BUTTON ID').addEventListener('click', onClickButton, false);

function onClickButton()

{

     alert ("You Pressed Me");

}

</script>

If anyone has any pointers as to where I've gone wrong here that would be great as I can't see the wood for the trees right now.

Thanks.

[Chris_G_1975]

I've managed to connect the debugger to this using Chrome and the error I get back is:

Uncaught TypeError: Illegal Constructor

If this helps any.

Thanks.

[DBarranca · Accepted solution]

Hi Chris,

you are mixing JSX and JS, and this won't work.

The Virtual Machine that interprets JS is the Google V8 engine, belonging to CEF (Chromium Embedded Framework - the HTML panel's container).

The Virtual Machine that interprets JSX (Extendscript) belongs to Photoshop.

If you tell the V8 engine "app.open(imageFile)" he just doesn't understand.

Relevant JSX code should belong to the JSX file, like:

function openImage(imageName){
    app.open(new File(imageName));  
}

and in the JS you have to:

function onClickButton() {
  var csInterface = new CSInterface();
  csInterface.evalScript("openImage('C:/FOLDER/FILENAME.png')", function(res) { console.log(res); } 
}

Hope this helps.

Davide Barranca

---

www.davidebarranca.com

www.cs-extensions.com

[Chris_G_1975]

Hi Davide,

Thanks for your response, your website has been a great help in getting me up and running with HTML panels in Photoshop CC.

I've only ever written JSX for Photoshop CS so moving to CC is a bit of a learning curve for myself having not done any JS before so you'll have to forgive me for mixing the 2 up 🙂

I've done HTML and CSS stuff before though so to me this is fairly easy in terms of setting up the UI for the panel etc, it's the script commands I'm struggling with 😞

Your pointers above have helped but I still can't get the image file to open 😞

When I click the UI button the function is called and I can step through the entire process in the Chrome Debugger and no errors are thrown but also no image is opened at the end of it, might it be that the function from the JSX file is not getting called? Not sure.

So in my index.html I've sourced the js files and the jsx files etc:

<script src="./lib/CSInterface.js"></script>

<script src="./jsx/PBRTool.jsx" type="text/javascript"></script>

Then also in index.html I've added:

<script type="text/javascript">

document.getElementById('Albedo').addEventListener('click', onClickButton_A, false);

function onClickButton_A()

{

    var csInterface = new CSInterface();

    csInterface.evalScript("openImage('C:/TTGames/Photoshop/scripts/Master_PBR_Templates/AlbedoChart.png')"), function(res) { console.log(res); }

}

</script>

The event listener works fine and the function onClickButton_A() is called on button click, I can then step through the functions in the debugger.

In my JSX I have added:

function openImage(imageName)

{

    app.open(new File(imageName));

}

and in my ext.js file which is referenced in manifest.xml <ScriptPath>./js/ext.js</ScriptPath>

I have added:

function loadJSX()

{

    var csInterface = new CSInterface();

    var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/jsx/";

    csInterface.evalScript('$._ext.evalFiles("' + extensionRoot + '")');

}

function onLoaded()

{

    var csInterface = new CSInterface();

    var appName = csInterface.hostEnvironment.appName;

    if(appName == "PHXS")

    {

        loadJSX();

    }

}

Plus I also have this in my main jsx file:

if(typeof($)=='undefined')

    $={};

$._ext = {evalFiles : function(path)

        {

            try

            {

            $.evalFiles(path);

        }

        catch (e) {alert("Exception:" + e);}

        },

    evalFiles: function(jsxFolderPath)

    {

        var folder = new Folder(jsxFolderPath);

        if (folder.exists)

        {

            var jsxFiles = folder.getFiles("*.jsx");

            for (var i = 0; i < jsxFiles.length; i++)

            {

                var jsxFile = jsxFiles;

                $._ext.evalFiles(jsxFile);

            }

        }

    }

};

This should hopefully load all JSX files in the jsx folder if the host app is Photoshop CC. The JSX code above is purely from Extension Builder 3 in Eclipse so I'm hoping it's ok.

Sorry for the long response but this is all a new learning curve for me and I cannot see where it's falling over at the minute.

Any more pointers appreciated.

Thanks Again.

[Chris_G_1975]

Hi,

I've tracked this down now, it just wasn't sourcing the JSX files correctly, I've altered the loadJSX function to the below, taken from your website Davide:

function loadJSX(fileName)

{

    var csInterface = new CSInterface();

    var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/jsx/";

    csInterface.evalScript('$.evalFile("' + extensionRoot + fileName + '")');

}

And then explicitly called the JSX file in the onLoaded function:

function onLoaded()

{

    var csInterface = new CSInterface();

    var appName = csInterface.hostEnvironment.appName;

    if(appName == "PHXS")

    {

        loadJSX("PBRTool.jsx");

    }

}

Along with changing the script path in manifest.xml to the jsx folder and all is working as expected.

I can't thank you enough for the help 😉

[DBarranca]

Great 🙂

I know myself HTML Panel are quite a bit of a learning curve - I'm currently writing an ebook on them, if it doesn't kill me (max respect for books authors - it's a hell of a work!) I'll let you know when it's ready.

Best regards

Davide