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

How do you pass complex Objects from the HTML Panel to a Photoshop’s ExtendScript function in a JSX file? You may want to pack different information from the HTML Panel (for instance all the values in the GUI) in a single Object, and pass just it as a parameter to a JSX function - that the Photoshop interpreter will eventually execute. For primitive, multiple parameters this is easily done via CSInterface.evalScript(), in the main.js:

var csInterface = new CSInterface();
csInterface.evalScript('sayHello("Ciao", 2014)');

…and providing a corresponding function in the JSX file:

function sayHello(str, num) {
  alert("Photoshop says " + str + "! Have a great " + num);
}

How do you deal with Objects? Stringify them as JSON objects first. No need to parse them afterwards.

Example

I use as always the boilerplate code by David Deraedt.

HTML

This is a minimal index.html with just a button.

<!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">HTML -> JSX</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

Here I’ve hardcoded an Object literal (feel free to fill it with actual values from the HTML GUI), which is stringified as a JSON object in order to pass it as a parameter:

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

  function init() {
    themeManager.init();
    var obj = {
      str: "Love your job!",
      num: 38,
      today: new Date(),
      nestedObj: {
        nestedStr: "Even if nothing works",
        nestedNum: 8,
        nestedDate: new Date()
      }
    }
    $("#btnSend").click(function() {
      csInterface.evalScript('parseObj(' + JSON.stringify(obj) + ')');
    });
  }
  init();
}());

JSX

In the ExtendScript file I’ve provided a logging function to actually verify that the Object is interpreted correctly.

function parseObj(o) {
  var str = "";
    for (prop in o) {
      str += prop + " \[" + typeof o\[prop\] + "\]: " + o\[prop\] + ".\\n";
    }
  alert(str);
}

Object

Mind you: I’ve experimented importing a JSON library in the ExtendScript code (which doesn’t natively support it) and tried to var obj=JSON.parse(o); to no avail. Apparently the code is OK as it is, without it.

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!