Photoshop HTML Panels Tips - tutorial series

Hello,
I've been putting together a series of tips on HTML Panels creation - both from personal experiments and collecting information around. Each tip focuses on a particular topic, it's quite short and provides the code for a demo panel.
You can find the whole series here, so far I've covered:
Tip #1 - Debugging
Tip #2 - Including multiple JSX
Tip #3 - Get data from JSX and send it to HTML
Tip #4 - Passing Objects from HTML to JSX
Tip #5 - Passing Objects from JSX to HTML
Tip #6 - Integrating Topcoat CSS library
Tip #7 - Photoshop Events, Take 1
Tip #8 - Photoshop Events, Take 2
Tip #9 - Panel Persistence (to be published asap)
Tips are about Photoshop panels, but general principles apply to other apps too.
I'll share more as soon as... I have new finding to share!
Best,
Davide Barranca
www.davidebarranca.com

Update (December 5, 2014)
Two new tips, #15 and #16 have been added, enjoy :-)
Recently added/updated Tips in bold - You can find the whole series here, so far the topic list is:
Tip #16 - AngularJS Binding bug patch
Tip #15 - Asynchronous vs. Synchronous
Tip #14 - Flyout Menu
Tip #13 - Automate ZXP Packaging with Gulp.js
Tip #12 - CEP Application Events
Tip #11 - CEP Events (ExternalObject)
Tip #10 - Packaging / ZXP Installers
Tip #9 - Panel Persistence
Tip #8 - Photoshop Events, Take 2
Tip #7 - Photoshop Events, Take 1
Tip #6 - Integrating Topcoat CSS library
Tip #5 - Passing Objects from JSX to HTML
Tip #4 - Passing Objects from HTML to JSX
Tip #3 - Get data from JSX and send it to HTML
Tip #2 - Including multiple JSX
Tip #1 - Debugging

Similar Messages

Photoshop HTML Panel mit Button auf JSX

Hallo,
ich habe aktuell noch ein Photoshop-Panel laufen, was mit dem Configurator erstellt wurde.
In CC 2014 funktionieren die Flash-Panels nicht mehr. Also will ich das Panel in HTML umbauen, allerdings habe ich noch nicht rausgefunden, wie ich eine Skript-Datei (JSX) über einen Button oder Link ausführen kann.
Gibt es dafür ein simples Tutorial?

I need a HTML extension for Photoshop and/or InDesign CC 2014 with several buttons to run JSX files.
Can anybody help me?

Evaluate Script in HTML panel in Tooltip

I have tried this question in another thread and got some help from Ben but still can't quite get it to work.
I am trying to embed an HTML panel, which comtains spry xml data, into a tooltip but cannot get the scripts in the panel to run once they are in the tool tip. The example is the middle of the three line on this page: http://www.edwardshephard.net/caravanclub/tooltiptest.html which should call data in from this page: http://www.edwardshephard.net/caravanclub/clubtooltippanel.html.
I have added a {evalScripts:true} line as suggested by Ben, which looks like a good solution, but still no joy. Having looked at other threads I wonder if it needs some sort of post-loading observer thing to run the scripts, but I'm not sure and not experienced enought to work out the syntax. Would welcome any further help please. thanks, Edward

Because you are also importing a spry:region and not only Spry Data, you need to manally call:
Spry.Data.initRegions();
Once the tooltip has loaded its HTML panel contents.

.prototype in html panel JSX

Hello all,
I'm used to add new methods to photoshop DOM in jsx scripts with .prototype, i.e.
var Document = function(){};
Document.prototype.activate = function()
app.activeDocument = this;
but when I add this to Photoshop.jsx in html panel, these methods are not added/defined. Is there correct way to do it? I'm currently converting prototypes to functions for workaround, i.e.
function activateDoc(docRef)
app.activeDocument = docRef;
but it's a pain. and it worked fine for flex extensions..
I looked through some samples, but seems like no one is using this technique.
Please advise. Thanks a lot!

What u could do is add an observer to your html panel that
monitors the onPostUpdate. On each update loop through your
<a> tags (could be done with
document.getElementsByTagName('a') ) check if they start with
/wiki/ if it does, just replace or change the href.

Pass an argument from external jsx to html panel?

Hi everyone,
Can you please tell me if it's possible somehow to listen to event from the external jsx in html panel? What I'm trying to do is to pass an argument from JSX to HTML Panel and to update
the panel with it.
Many thanks,
Sergey

Hi Sergey!
What I was suggesting privately to you (I report this here for the others' sake) is to use soon-to-be-released CEP5 technology: http://blogs.adobe.com/cssdk/2014/04/introducing-cep-5.html
Chiefly, the part that says:
Call from ExtendScript into HTML DOM: Most of the currently supported Adobe apps (including but not only Photoshop CC and Illustrator CC) will include a new ExternalObject which provides an API that allows developers to dispatch events from ExtendScript to the JavaScript/HTML5
But we have to wait for the next update of CC apps to support it!
Regards
Davide Barranca
www.davidebarranca.com
www.cs-extensions.com

Return focus from html panel?

Hey everyone,
can you please tell me if there's a way to return focus from the html panel back to Photoshop? I've tried app.activate() but no luck
Many thanks!

Hi,
let's take this
sample.
On the main file: html_panel_sample.html go and change the
first panel to support java script code adding the preventScript
option on false: var mine = new Spry.Widget.HTMLPanel("me",
{preventScripts:false});
On the file that is loaded, frag-0.html make a link to load a
new panel like this:
<a href="#"
onclick="mine.loadContent('frag-1.html');return false;">load
frag-1.html file</a>
Please let us know if you have other questions,
Diana

New Camera RAW Tutorial Series

John Nack has just blogged about a new Camera RAW tutorial series by George Jardine.
http://blogs.adobe.com/jnack/2013/12/25-new-video-tutorials-on-camera-raw.html
It cost $30 which does not sound much, but I'd love to hear feedback from anyone who has seen it.
You can read more details at
http://mulita.com/blog/?page_id=6934
Including a link to a 17 minute free chapter.

Thank you, Trevor.
I've been waiting and hoping that George would do a series on the latest Camera Raw to match his tutorials on Lightroom, which he always does first.
I purchased his series on ACR 6 and they were excellent, so I have every faith that his new series on ACR 8.3 in CC (which also covers ACR 8.3 and ACR 7.x in CS6) will be just as good.
So far I have watched the first 6 tutorials (ending with the one on the Basic Tab) and they are pretty good.
One of the bonuses is that along the way he gives you links to further in-depth totorials on his Website regarding particular topics: eg, the interaction of, and different ways of manipulating, the Highlights/Shadows and Whites/Blacks sliders for particular types of images. Looking forward to viewing those.
Message was edited by: Andrew_Hart

HTML Panel Sample

Hi,
I tried out the HTML panel sample, which worked fine when I tried to load a simple html page. However, when I tried to load a page in which I had incorporated a XML table, I could not see the content of the table. Do you have any tips?
Thanks.

Set the option evalScripts:true in the constructor of the HTML panel.
Move all linked scripts in the main file, as html panels only executes
inline scripts.

Adobe Photoshop Elements 11 french tutorial

I`m searching for a Adobe Photoshop Elements 11 french tutorial to download

Then I suggest you ask in the Elements forum:
http://forums.adobe.com/community/photoshop_elements?view=discussions

Images not loading in Spry HTML Panel

Hallo everyone
I am using links to load html fragments in a Spry HTML Panel, just like in the example page
http://labs.adobe.com/technologies/spry/widgets/htmlpanel/SpryHTMLPanel.html
The whole structure is inside a Spry Tabbed Panel.
All works ok if the target html pages are in the same directory as the mother page.
Images are standard in the "images" folder
The problem starts when I try to organise all the html fragments in a separate directory.
Updating links in all the html files is of course done correctly, images included.
Then the problem starts.
The html fragments load but with no images.
When I open the html fragments directly by the browser all is ok.
Any ideas would be appreciated
Thanks!

Can you upload your pages to a server and give us a link?
If your images are in your site folder (no matter which directory), but they are not showing up in your fragments, it is likely that the paths are wrong. The images (it seems to me) should exist on the fragment and be linked from there.
I won't have a chance to fiddle around with this right now, but if your images are linked to the fragment locations and that does NOT work, try linking them as if they were on the page that is showing the fragments. I'm not familiar (yet) with this widget.
Beth

HTML Panel into HTML Panel

Hello,
I know this topic has been seen a lot, but I still can't find
the answer for me...
Well, it's easy, I use html panels to load content into my
website (I have a SPRYMenu wich loads content into the
"main" div)
But, when I load content including another HTML Panel, it
doesn't work...
I've set the evalscripts to true, but it doesn't work...
here is a small portion of code coming from the exaples, wich
looks like what i want to do, even if in this code, it loads a
slidingPanel, not a HTLMPanel, but I think if I can make it work,
I'll be able to do what I want then !
here is the main file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
hr, .clearAll {
clear: both;
.SlidingPanels {
width: 300px;
height: 300px;
.SlidingPanelsContent {
width: 300px;
height: 300px;
.p1 {
background-color: #CCCC66;
.p2 {
background-color: #FFFFCC;
.p3 {
background-color: #6699FF;
.p4 {
background-color: #99CCCC;
.p5 {
background-color: #FF99CC;
.p6 {
background-color: #339933;
.p7 {
background-color: #9933FF;
.p8 {
background-color: #669966;
.p9 {
background-color: #00FFCC;
#example2.SlidingPanels {
float: left;
#example2 .SlidingPanelsContentGroup {
float: left;
width: 10000px;
#example2 .SlidingPanelsContent {
float: left;
</style>
<script src="inc/SpryHTMLPanel.js"
language="javascript"
type="text/javascript">
Spry.Widget.HTMLPanel.evalScripts =
true;</script>
<link href="inc/SpryHTMLPanel.css"
rel="stylesheet"
type="text/css" />
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
<div id="panelSpry"
style="">text de base</div>
<div><a
href="essai1.html"
onclick="panelWidget.loadContent(this.href);return
false;">changement</a></div>
<script>
var panelWidget = new
Spry.Widget.HTMLPanel("panelSpry", { evalScripts:
true });
</script>
</body>
</html>
and here is the loaded file (essai1.html) :
<link
href="inc/SprySlidingPanels.css"
rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="inc/SprySlidingPanels.js"></script>
<p>
Navigate by index:
<a href="#"
onclick="sp2.showPanel(0); return
false;">1</a> |
<a href="#"
onclick="sp2.showPanel(1); return
false;">2</a> |
<a href="#"
onclick="sp2.showPanel(2); return
false;">3</a> |
<a href="#"
onclick="sp2.showPanel(3); return
false;">4</a> |
<a href="#"
onclick="sp2.showPanel(4); return
false;">5</a> |
<a href="#"
onclick="sp2.showPanel(5); return
false;">6</a> |
<a href="#"
onclick="sp2.showPanel(6); return
false;">7</a> |
<a href="#"
onclick="sp2.showPanel(7); return
false;">8</a> |
<a href="#"
onclick="sp2.showPanel(8); return
false;">9</a>
</p>
<p>
Navigate by id:
<a href="#"
onclick="sp2.showPanel('ex2_p1'); return
false;">p1</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p2'); return
false;">p2</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p3'); return
false;">p3</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p4'); return
false;">p4</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p5'); return
false;">p5</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p6'); return
false;">p6</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p7'); return
false;">p7</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p8'); return
false;">p8</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p9'); return
false;">p9</a>
</p>
<p>
Other navigation methods:
<a href="#"
onclick="sp2.showFirstPanel(); return
false;">First</a> |
<a href="#"
onclick="sp2.showPreviousPanel(); return
false;">Previous</a> |
<a href="#"
onclick="sp2.showNextPanel(); return
false;">Next</a> |
<a href="#"
onclick="sp2.showLastPanel(); return
false;">Last</a>
</p>
<p>&nbsp;</p>
<div id="example2"
class="SlidingPanels"
tabindex="0">
<div
class="SlidingPanelsContentGroup">
<div id="ex2_p1"
class="SlidingPanelsContent p1">Panel
1</div>
<div id="ex2_p2"
class="SlidingPanelsContent p2">Panel
2</div>
<div id="ex2_p3"
class="SlidingPanelsContent p3">Panel
3</div>
<div id="ex2_p4"
class="SlidingPanelsContent p4">Panel
4</div>
<div id="ex2_p5"
class="SlidingPanelsContent p5">Panel
5</div>
<div id="ex2_p6"
class="SlidingPanelsContent p6">Panel
6</div>
<div id="ex2_p7"
class="SlidingPanelsContent p7">Panel
7</div>
<div id="ex2_p8"
class="SlidingPanelsContent p8">Panel
8</div>
<div id="ex2_p9"
class="SlidingPanelsContent p9">Panel
9</div>
</div>
</div>
<script
type="text/javascript">
var sp2 = new Spry.Widget.SlidingPanels('example2');
</script>
I hope somebody can help....
Thanks !

Thank you for your quick reply.
I still have a problem here.
Would you please see my 3 files for my problems.
Thank you very much for your time.
1. index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test for Spry HTML Panel</title>
<script src="../spry/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
<link href="../spry/SpryHTMLPanel.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="button" value="Click Here to Load Document Level 2" onclick="body_content_area.loadContent('doc_level_2.php');" />
    <div id="body_content_area" style="clear:both; width:100%;">
        
        <div class="HTMLPanelLoadingContent">Loading ...</div>
    </div>
<script type="text/javascript" language="javascript1.2">

</script>
</body>
</html>
2. doc_level_2.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="../spry/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
<link href="../spry/SpryHTMLPanel.css" rel="stylesheet" type="text/css">
</head>
<body>
<H1>Here is a content of document level 2</h1>
<br /><br />
<input type="button" value="Click Here to Load Document Level 3" onclick="body_content_area_2.loadContent('doc_level_3.php');" />
    <div id="body_content_area_2" style="float:left; width:100%;">
        
        <div class="HTMLPanelLoadingContent">Loading ...</div>
    </div>
<script type="text/javascript" language="javascript1.2">

</script>
</body>
</html>
3. doc_level_3.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="float:left;">
<h2>Here is the content of document level 3</h2>
</div>
</body>
</html>

Have Photoshop remember panel size

My panel has dynamic content so its size need to be adjusted by the user after it has loaded.
However, whenever I restart Photoshop the panel resizes to the dimensions set in Configurator.
Is it possible to have Photoshop remember its last size?
My panel is created with Configurator 4.

This should already be possible if the "Persistent" option is set to "Yes". In Configurator, you can find this setting on the righthand side, in the "Basic Attributes" section.
If you have already exported a panel, you can modify it without re-exporting by modifying your panel's xml file. This should be located within its "content" folder, and would be named after the project, as: "<ProjectName>.xml". Inside that file, usually about 5 lines down, is a line that contains the property setting "persistent=" (either "true" or "false"). Set that to true, and the panel size should be maintained between sessions.
I just tested with a project of mine to make sure I wasn't full of it, and it worked even after shutting down and restarting PS.

Getting a sliding panel loaded into an html panel to work.

Hi. This is my first post on the forum.
I've been using Spry a little here and there. Today I ran
into a situation where I want to load an external page, that has a
sliding panel in it, into an html panel. So far I have not had luck
and I suppose it has to do with loading the js file. At the moment
I have a right column that already has a sliding panel (working).
But it would appear that the loaded external html file (in the left
"main" column) is not picking that up. Any suggestions for a noob
as to what to do next? Viewing the external page by itself allows
the sliding panel to work (that is when I add the js file import to
the head of the external html file... but that head section does no
good when loaded into an html panel)
Anyway, any help at all is greatly appreciated.
Thanks,
Eric

Thank you very much! I found the topic
here.
It will require a bit of a small learning curve for me as html
panel and sliding panels are my first interaction with js... even
my rollovers are css driven. Thanks!

Spry Data in HTML Panel

I'd like to load a page w/ dynamic data content through an
HTML Panel. Can it be done?

Hi,
There is some problem in Spry where in if the loaded content
has any spry:regions or dataset objects, those are not executed as
expected. You need to replace the Spry.Utils.setInnerHTML function
with the following code
Spry.Utils.setInnerHTML = function(ele, str, preventScripts)
if(!ele)
return;
ele = Spry.$(ele);
var scriptExpr =
"<script[^>]*>(.|\s|\n|\r)*?</script>";
ele.innerHTML = str.replace(new RegExp(scriptExpr, "img"),
if (preventScripts)
return;
var matches = str.match(new RegExp(scriptExpr, "img"));
if (matches)
var numMatches = matches.length;
for (var i = 0; i < numMatches; i++)
var s = matches
.replace(/<script[^>]*>[\s\r\n]*(<\!--)?|(-->)?[\s\r\n]*<\/script>/img,
var oScript = document.createElement("script");
oScript.text = s;
ele.appendChild(oScript);
Spry.Data.initRegions(Spry.$(ele));
It should work fine.
-JV

Controlling a Spry HTML panel with a Jump Menu

Hi, I wonder if anyone can help.
I've implemented a HTML panel within a page to display different page elements and have it working no problem with a simple href and an onClick event but I would like to control what is displayed by using a jump menu (drop down list) - any idea how I can control that to populate the necessary DIV?
eg: <select name="site" size=1 onChange="hpanel.loadContent(this.href); return false;"> (obviously this doesn't work!)
Thanks in advance
Neil

It works fine, but your pages arent found;
http://www.thedesignforge.co.uk/clients/elsevier/laure/v2/dollar_rates.html
See its missing.
But
http://www.thedesignforge.co.uk/clients/elsevier/laure/v2/dollar_rate.html
Exists. So it seems to me you are linking to a incorrect file.

Photoshop HTML Panels Tips - tutorial series

Similar Messages

Maybe you are looking for