Creating Photoshop HTML5 Extensions

Adobe is  dropping Flash support and switching to HTML5 for their extensions.  YIKES!   This is big news.   So,  I dusted off the old’ HTML side of my brain and started coding.  I haven’t done HTML development since early 2000. The code below may not be good practice, or even current standard practice.  But its functioning code that I’m hoping you’ll find helpful.   I believe the best way to learn is by doing.  step 1. Get things happening. step 2.  Play!

Beginners Guide to creating Photoshop HTML5 Extensions.

Download the Sample HTML Eclipse project archived Zip file HERE
And the ZXP extension file: HERE

  • Setup the Basics.
    • Install Eclipse.
    • Install Extension Builder 3.
    • Do the ” Create HTML5 Extension In 5 Minutes”  tutorial.
  • Setup jQuery-UI.
    • Download jquery-ui.
    • Import JQuery-ui Resources.
    • Import JQuery-ui Library.
    • Add libraries to HTML extension.
  • Update extension with new look and controls.
    • Update “run ps code” button.
    • Add Radio buttons based on jqery-ui example demo.
    • Photoshop communication with Extension.
      • Getting data from extension into Photoshop.
      • Getting data from Photoshop into the extension.

*This tutorial does not go into Extend Script functionality details.  Just the basics to show communication between your extension and Photoshop.

1. Setup the Basics:  Install and Create your first Photoshop Extension.

  • Install Eclipse.
    • I had better luck when I installed the web developers version here:  http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr1    It comes loaded with the software you’ll need to do web.
    • Eclipse does not have an installer.  Just unzip eclipse into your system (application directory would be a good spot.)  and make a shortcut of the exe so you can get to it easier.
    • You will need to have a JVE (Java Virtual Environment) installed. If you don’t have one, when you try to run eclopse it will error with a “missing JVM” message.    If this happens, go here and install the appropriate version.  http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads-1880261.html
    • Once your JRE is installed, restart eclipse, select a workspace directy location where you will want to save your extension projects.
    • In the Welcome screen, you can look at the tutorials, or go directly to the Workbench.

eclipseInstall

  • Complete the ” Create HTML5 Extension In 5 Minutes”  tutorial.  (we’ll be expanding on the files created by this exercise.)
    • You can find it Through the Help > Adobe Extension Builder 3 Start Page.  Or through the Help-Eclipse menu.   Help > Help contents > Adobe Extension Builder > Getting Started> Create You Own HTML5 Extension
5 minute Extension

Eclipse Help Menu

On completion you’ll have an extension that is a single button that calls the name of your open application.

image003

 Just one button?  Commonnn…. We need more! 

2. Setup jQuery-UI

  • Download Jquery-ui.  (I know there are a lot of other library options here… but  jquery is all I knew, and ya gotta start somewhere.)
    • Go here: http://jqueryui.com/download/
    • Select all the options. (why not get everything!  more to play with.)
    • Select a theme and press the Download button.
    • You’ll get a  Zip file includes:
      • A minimized version of JQuery 1.9.1.js
      • A copy of JQuery-UI
      • A jQuery UI CSS framework library

… demo’s and more…

image007

    • Click on “Configure User Libraries…”. That will open the Preferences for User Libraries.
    • Click the New… button.

New Library button

    • On the New User Library dialog, give the library a name and click OK.
    • Click on the “Add .js File” button to add files separately, or on the “Add folder” to add all the .js files in a folder at once.
    • Click OK to close the User Libraries Preferences dialog.
    • Back n the New User Library dialog, click the checkbox beside the new library and click Finish to add it to the JS Build Path.

image011

    • You should now see those libraries added to your Resources folder in your project.

image013

  • Add jquery-ui JS and CSS Library’s into Eclipse.
    • Open the Extension Content folder, Right-click the Lib folder in the Project Explorer and select Import.
    • Go to >General > Archive File > click Next.
    • Click the Browse button on the right side of the window to select your files.
    • Go to and Select the same jquery-ui-1.10.3.custom.zip file you downloaded from the jquery-UI website. image015
    • Deselect the top level “/”  directory. (you only need the main library files.)
    • Click on the JS folder to reveal the files on the right side, and select these 2 js libraries:

image017

    • Click CSS  theme you selected on download, and choose the custom.css file.

image019

    • Click finish, and you should see those JS libraries added to your lib folder.

image021

  • Add libraries to HTML extension.
    • Open your index.html file that you setup when you ran the original Adobe tutorial.
    • Update the <head> area to link to all the new libraries.
  • <head>
    <meta charset="utf-8">
    <title>JqueryUISampler</title>
     
    <!-- Always load libraries FIRST, before other included stuff. -->
    <script src="./lib/CSInterface-4.0.0.js"></script>
    <script src="./lib/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script src="./lib/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js">"></script>
    <link rel="stylesheet" href="./lib/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css">
    <script src="./ext.js"></script>
    </head>

Thats all the setup you’ll need.  lets start USING this! 

3. Update “5 minute” extension with new look and UI options.

Lets tell Photoshop to use the new jquery-ui look for the button that was created in the initial Demo.

    • Add a little jquery code to the bottom of  the ext.js file.

$(function() {
         $( “button” ).button();
});

Run your extension, just to make sure everything is in order. The button should look different.

run PS

But it will NOT work.  ??!!  Why did Adobe set the button to be “Disabled” in their example?  

    • Remove the  disabled=”true”  code from your index.html.   The button description should reads like this:

<li><button class="default" id="btn_PHXS" onClick="onClickButton('PHXS')">Run ps code</button></li>

    • Run it again…

image025

If your button looks like this and alerts “Hello Photoshop”  Its time to get up and do a Happy Dance!

HappyDance

NOW the real fun stuff can begin!   Did you see all those demo’s on the jquery-ui website?   http://jqueryui.com/demos/  We can do all that in our extension!!
Pick one you like, and look at the source code.

    • Add the <Body> code to your html file
    • Add the Javascript code to your ext.js file
    • Add any Style code your CSS file.

Thats all!

For Example:  I’ll add some radion buttons based on the demo here: http://jqueryui.com/button/#radio.

  • Add javascript code to the bottom of ‘ext.js’ inside the  jquery function.

$(function() {
         $( "button" ).button();
         $( "#radio" ).buttonset();
});

  • Add the button html  to the </body of your index.html file:

<body onLoad="onLoaded()">
<div id="content">
<ul>
<li><button class="default" id="btn_PHXS" onClick="onClickButton('PHXS')">Run ps code</button></li>
</ul>
</div>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
</body>

There is no special CSS settings for this, so you’re done.

Save your files, and run the extension.

image027

Ok… fine, you have new buttons, but they don’t DO anything.  Lets fix that. 

**I’m assuming you’re familiar with ExtendScript and creating scripted Photoshop functionality, so I won’t go into too many details.**

Here is a quick demonstration on getting 2 way communications between your Extension and Photoshop.

Getting data from extension into Photoshop.  Simplified!

  • You’ll notice in your project’s Extension Conetent folder, there is a JSX folder that contains a Photoshop.jsx file.  This is where you’ll be doing your custom ExtendScript  work.

image029

    • Open this file and you’ll see your starter photoshop code that got that “run ps code” button working.

$._ext_PHXS={
    run : function() {
    /**********  Replace below sample code with your own JSX code  **********/
        var appName;        
        appName = "Hello Photoshop";          
        alert(appName);
      /************************************************************************/
        return appName;
    },
};

I don’t like how this is setup. To me it seems overly complex. So I simplified things.
Here is a function that will have photoshop alert whatever text is placed into it, and return a text string. (We’ll use it for those Radio buttons.)

ext_radioButtonInfo = radioButtonInfo; 
function radioButtonInfo(inRadio)
{
         alert("Photoshop says: The Selected Radio button is: " + inRadio );
         var returnString = ("Data out of photoshop : \"Hello, "+ inRadio +" !!\"");
         return  returnString;
}

Its a lot easier to understand (In my opinion) and it will work just the same.
Add a little more javascript to the extension ext.js file, so the UI knows what to do.

This JS function sends the ID name of the radio button over to photoshop and then runs the photoshop function with that input.

function radioPSexample(inRadio)
{
         var getSelectedRadio = $(inRadio).attr("id");
         var PSradioButtonInfo = "ext_radioButtonInfo('" + getSelectedRadio +"')";
         evalScript(PSradioButtonInfo);   
}

Then I call that function inside my jquery whenever a radio button is clicked.

$(function() {
         $( "button" ).button();
         $( "#radio" ).buttonset();
        
    $( "#radio1" ).click(function()  {  radioPSexample(this); });
    $( "#radio2" ).click(function()  {  radioPSexample(this); });
    $( "#radio3" ).click(function()  {  radioPSexample(this); });
});

Now when you click a button, you’ll get a photoshop alert message, with the ID of the clicked button!

image031

   But…One way communication is never a good thing.

  • Getting data from Photoshop into the extension.

    • The scripts that came when you setup your initial extension project, include language that attaches any photoshop “result” to  the evalScript functions callback. To get data out of photoshop, we simply add a callback inside the evalScript.

function radioPSexample(inRadio)
{
var getSelectedRadio = $(inRadio).attr("id");
var PSradioButtonInfo = "ext_radioButtonInfo('" + getSelectedRadio +"')";
evalScript(PSradioButtonInfo, callbacktoExt);
}

    • Add a spot to put some feedback into our HTML so the Photoshop txt string has a place to go.  I’ll add an empty header and give it an ID so its easy to find.

<h2id="putPSfeedbackHere"</h2>

    • Add a callback function to our ext.js that tells the Extension what to do with the result data it received from Photoshop.

function callbacktoExt(result)
{
           document.getElementById("putPSfeedbackHere").innerHTML=(result);
}

Run it. and you should see Photoshop adding Text to your Extension window.

image033

Its that easy!  Your done! 

IF you completed this tutorial successfully, you now have all those UI options available from the jquery-ui page, a way to pass data between the extension and photoshop, and all kinds of HTML magic in between.

You can find a complete “jquerryUISampler” Eclipse Project Archived Zip file that has all the code work, and a ZXP you can install into Photoshop using your CC Extension Manager.

HERE

downloadFiles

Go nuts!  Have fun, and feel free to email me with  feedback.

Thanks for your time.

** BONUS**

Thankyou for getting this far…

As a Bonus, you’ll also see included in the “jquerryUISampler” download  a “TabbedUIExample.html” page.  It has lots of other examples for different types of UI features you may want to include in your applications.

image035image039

 

  •  You’ll need to update your Manifest to use TabbedUIExample.html as your extension instead of the Index.html.  Here’s how to do it.
    • In Eclipse, Right Click on the jquerryUISampler project and select “Adobe Extension Builder” > “Bundle Manifest Edior”
    • Click on the “Extension” tab on the bottom, then the “Startup” tab on the right side.
    • Click on Browse under the main path and select the TabbedUIExample.html file.

image041

    •   Save, close Photoshop, and re-run your extension (which will re-open Photoshop for you.)

Push the buttons, Check out the code, and make great things!  

Enjoy playing!  

 

HanSolo

“YAhhoooo! You’re all clear, kid. Now let’s blow this thing and go home!”

 

 

in: Demonstrations, Examples, Scripts · tagged: , , , , , , ,