<FLAME>Photoshop development</FLAME>

I’ve been trying to follow along with the various tutorials for setting up a simple extension for photoshop cc 2014, but I am not having any luck.

http://aphall.com/2014/08/cep-5-getting-started-en/
this tutorials says “C:\Program Files\Common Files\Adobe\CEP\extensions” for 64 bit but there is no CEP folder. In “Program Files (x86)”, I did find a “CEPServiceManager4” folder, but not a “CEP” folder.

Is CEP something that needs to be installed separately from Creative Cloud?


this link says “CEPServiceManager4” has been replaced with “CEP”.

I did update my registry to set “PlayerDebugMode” to “1”.

Which codebase would scare you the most to look at photoshop, maya, or max?

Oh photoshop is the worst, max is pretty bad, and maya is so-so. It’s got some wierd stuff (the whole MFN thing) but on the whole it’s the best of a bad lot.

I looked at my Creative Cloud installation at home, it has a slightly different structure than at work.

At home I have a CEP folder in the “Program Files (x86)”, but I don’t have one in the 64 bit “Program Files” folder.

Maxx, are you running your extensions in 64 bit photoshop or 32 bit photoshop?

double post

Still no luck, I have tried Eclipse, Configurator 4, a couple of bare bones tutorials, can’t get PS CC 2014 64 Bit to see a custom extension. Not sure what piece of the puzzle I am still missing.

I downloaded the CDInterface.js (both 5 and 5.2) and included it with my extension. I set PlayerDebugMode in my registry, I scoured through the project settings in Eclipse to ensure my paths are correct, I double checked all the version numbers in my manifest.xml… no dice…

Here are the tutorials I have tried so far with no luck…


http://adobe-cep.github.io/CEP-Resources/
http://www.adobe.com/devnet/creativesuite/articles/a-short-guide-to-HTML5-extensions.html
http://aphall.com/2014/08/cep-5-getting-started-en/

64

copy that into users/you/appdata/roaming/adobe/cep/extensions
make the dirs if needed. i used this as a template.

i tried the eclipse thing, but soon realized it was shit. you can do all of the extension stuff with notepad if you want.

ok that example is working for me - thanks!

Have you tried to strip it down to a bare-bones “hello world” example?

I finally got my Hello World, bare-bones HTML5 Panel to appear in Photoshop. Turns out this was my problem:


<Host Name="PHXS" Version="[15.0, 15.9]"/>

I had a space between the version range limits… the correct syntax is:


<Host Name="PHXS" Version="[15.0,15.9]"/>

:sick:

i was lazy and didnt trim it down too far so i’m sure i have extra crap in there. Care to post your hello world?

here is my HelloWorld Photoshop Panel for Creative Cloud 2014.

first off, I put the extension here:

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions

Note: Even though I am running 64-bit PS CC 2014, I had to put the extension in “Program Files (x86)”. I dunno why, seems backwards to me, but this is also how it is explained in the Docs for the SDK (page 6).

My extension folder structure looks like so:


HelloWorld
    CSXS
        manifest.xml
    index.html

index.html


<!doctype html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>

manifest.xml


<?xml version="1.0" encoding="UTF-8"?>

<ExtensionManifest Version="5.0"
                   ExtensionBundleId="com.rgk.helloworld"
                   ExtensionBundleVersion="1.0.0"
                   ExtensionBundleName="Hello World">
    <ExtensionList>
        <Extension Id="com.rgk.helloworld" Version="1.0"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <Host Name="PHXS" Version="[15.0,15.9]"/>
        </HostList>
        <LocaleList>
            <Locale Code="All"/>
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="5.0"/>
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="com.rgk.helloworld">
            <DispatchInfo>
                <Resources>
                    <MainPath>./index.html</MainPath>
                </Resources>
                <UI>
                    <Type>Panel</Type>
                    <Menu>Hello World</Menu>
                    <Geometry>
                        <Size>
                            <Height>300</Height>
                            <Width>300</Width>
                        </Size>
                    </Geometry>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

awesome, thanks for putting this together.

To get node moudles in, first install node or use the one with PS. cd into your panel dir and then

$ npm install request

It will put everything into a node_modules folder in your panel, then just reference it in your index.html page with a <scirpt> tag. The use it as you normally would.

where does the adobe installed version of “node” reside?

I see a “node.exe” in the photoshop program folder…

are you using a windows command prompt to do the install request?

actually, i think i installed node proper and just copied over the npm stuff manually. haha, i guess there is a lot more hackery than i remembered :slight_smile:

I think im just using the installed node and not photoshops though. I would actually copy the npm.cmd and node_modules dir over to Ps and use their node.exe as there may be version issues on some modules. Like trying to pip install things, you need to use the right pip.

just out of curiosity, why not use the version of node that comes with Photoshop?

another question, does NPM come with the version of node installed alongside Photoshop?

I’ve gone through this pain when the stuff first came out, and can offer some advice (some of which has already been brought up)

Getting the manifest right is indeed one of the trickier parts to getting started.

There are 3(?!) javascript interpreters at play. Node, CEP (chrome), and extendscript (es1.3).

Any manipulation of the DOM is still handled through extendscript, and is still slow. Programming through the COM interface is still much faster, but isn’t as portable and is harder to debug. It’s also using an old implementation of javascript, so you’ll have to use shims for a lot of newer language constructs.

Events from the host application can signal scripts running inside CEP through CSInterface.js (which you need to include in your CEP js)

Set up your .debug file- this defines the port that CEP uses to enable remote debugging for your panel. From chrome, you can then browse to http://localhost:8088 (default for photoshop) and use the developer tools when testing your panel.

i used the installed one because its on the path, but shoudl probably use the version with ps. i do not believe npm comes with it, but the one from the installed version will work with it

yes, get a .debug file!


<?xml version="1.0" encoding="UTF-8"?>
<ExtensionList>
    <Extension Id="EXTENSION_ID">
        <HostList>
            <Host Name="PHXS" Port="8001"/>
        </HostList>
    </Extension>
</ExtensionList>

I download the “open” node module off git hub and just copied the “open.js” file into a “node_module” subfolder and was able to use it… is the NPM installer just a convenient command-line tool for downloading and installing packages off the internet?

yeah, like pip

So, one of the things I’m working on that people around here might find useful, is a bridge between python and a CEP panel. I’m using https://www.npmjs.com/package/python-shell, so my CEP js has:


python_shell = require('python-shell')

        $scope.helloPython = function() {
            var myExtID = csInterface.getExtensionID();
            var basePath = undefined;
            var extensions = csInterface.getExtensions();
            for (var i = 0; i<extensions.length; i++) {
                if(extensions[i].id === myExtID) {
                    basePath = extensions[i].basePath;
                }
            }
            console.log(basePath);
            var pythonPath = node_path.join(basePath, 'python');
            var options = {
             mode: 'json',
              // pythonPath: 'path/to/python',
              // pythonOptions: ['-u'],
              scriptPath: pythonPath,
              args: ['value1', 'value2', 'value3']
            };


            myurl = node_url.parse($scope.curDoc);
            mypath2 = myurl.path;
            console.log(mypath2);
            mypath = node_path.normalize($scope.curDoc).split(node_path.sep);
            console.dir(mypath);
            var pyshell = new python_shell('test_connection.py', options);


            // sends a message to the Python script via stdin
            pyshell.send($scope.curDoc);
            pyshell.send(mypath);

            pyshell.on('message', function (message) {
              // received a message sent from the Python script (a simple "print" statement)
              console.log(message);
              handlePyMessage(message);
            });

            // end the input stream and allow the process to exit
            pyshell.end(function (err) {
              if (err) throw err;
              console.log('finished');
            });


        };

This in turn calls a simple python script (included in a python folder in my extension)


import P4
p4 = P4.P4()
p4.connect()

print json.dumps(p4.run_info())

I can clean up the code and release a small demo if people are interested, but that’s the gist of the workflow

that sounds really awesome! we are using Python+COM to do our exporting and source control and it works just fine, even if it is a bit hacky.

but combining python with CEP5 sounds even better!