HTML Panels Tips: #5 passing Objects from JSX to HTML | Davide Barranca

This tip covers how to pass Objects from Photoshop (the JSX file) to the HTML Panel. Panels technology doesn’t allow (for the moment) to communicate from the JSX to the HTML except via function return (see Tip #3). In order to successfully pass Objects, you need to include json2.js in the JSX and stringify the Object as a JSON Object. Then, in the HTML Panel you must parse the JSON Object in the callback.

Example

This panel has just one button: it triggers a function in the JSX that returns an Object, which is then parsed and logged in the console. In order to follow the demo code, you’d better know how to debug a panel (Tip #1), evaluate external JSX code (Tip #2) and have a good grasp on how primitive data is passed from JSX to HTML (Tip #3).

HTML

The usual bare code stripped from boilerplate by David Deraedt.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css"/>
<link id="hostStyle" rel="stylesheet" href="css/theme.css"/>
<title></title>
</head>
<body>
  <div id="content">
    <h1>Object communication</h1>
    <button id="btnSend">JSX -> HTML</button>
  </div>

  <script src="js/libs/CSInterface-4.0.0.js"></script>
  <script src="js/libs/jquery-2.0.2.min.js"></script>
  <script src="js/themeManager.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

Main.js

In the Javascript it is first declared the loadJSX() function (hardwired to look in the jsx/ folder), called in the init() in order to evaluate in the Photoshop context the json2.js library. Mind you, ExtendScript doesn’t support JSON natively so the original library must be included. I’ve used the commented version by Douglas Crockford, beware that minification in ExtendScript can be tricky. I’ve provided to the CSInterface.evalScript() a callback as an anonymous function, which parses the result as a JSON Object (see next section).

(function() {
  'use strict';
  var csInterface = new CSInterface();

  function loadJSX(fileName) {
    var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/jsx/";
    csInterface.evalScript('$.evalFile("' + extensionRoot + fileName + '")');
  }

  function init() {
    themeManager.init();
    loadJSX("json2.js");

    $("#btnSend").click(function() {
      csInterface.evalScript('sendObjToHTML()', function(result) {
        var o = JSON.parse(result);
        var o = result;
        var str = "";
        for (var prop in o) {
          str += prop + " \[" + typeof o\[prop\] + "\]: " + o\[prop\] + ".\\n";
        }
        console.log(str);
      });
    });
  }

  init();
}());

JSX

Here the sendObjToHTML() is declared: it first builds an Object literal with arbitrary data (you’ll fill it with useful, actual stuff: Photoshop active Document’s width, height, ecc.); then the Object is returned as a JSON (stringified) Object. This very Object is the result argument in the anonymous callback in the main.js above.

function sendObjToHTML() { var obj = { str: “Love your job!”, num: 38, today: new Date(), nestedObj: { nestedStr: “Even if nothing works”, nestedNum: 8, nestedDate: new Date() } } return JSON.stringify(obj); }

When the panel is open in Photoshop - provided you’ve set things according to Tip #1 - open Chrome (or Safari, or Firefox) and go to localhost:8088 or whatever port you’ve opened in the .debug file.

The Photoshop HTML Panels Development Course

If you’re reading here, you might be interested in my Photoshop Panels development – so let me inform you that I’ve authored a full course:

300 pages PDF
3 hours of HD screencasts
28 custom Panels with commented code

Check it out! Please help me spread the news – I’ll be able to keep producing more exclusive content on this blog. Thank you!