Photoshop scripting UI image or icon

[photogyulai]

Hey There!

Im trying to getting familiar with photoshop script UI but i have some issues:

I guess it is pretty simple but i did not have any example so i have got no idea!

My goal is to use an image or icon in a window, during script.

So here is this code:

var dlg = new Window('dialog', 'Alert Box Builder',[100,100,480,245]); 
dlg.btnPnl = dlg.add('panel', [15,50,365,115], '');
dlg.btnPnl.cancelBtn = dlg.btnPnl.add('button', [235,15,335,45], 
'Cancel', {name:'cancel'}); 
dlg.show();

Just a window with a Cancel button.

I want to add icon and/or image to this window.

Any help would be appreciated!

ps: I looked the http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/photoshop/pdfs/JavaScriptRefere...   but i guess this part is missing the examples.

[Chuck Uebele]

Use something like:

var imageFile = new File([path&filename]);
//.... inside of dialog code
dlg.imageYouWant = dlg.add('image',[undefined or placement],imageFile);

I'm hearing jpgs aren't working, so use png.

[photogyulai]

Dear Chuck!
Thank You!
My main problem is the lack of examples ... programing is pretty syntax sensitive!

I came up with this and it worked 🙂
dlg.kep = dlg.msg1.add('image', {x:100, y:50, width:70, height:70}, '~/desktop/Photoshop%20scripting/photo_60x60_icon.png');

I hope with your description and this line above the next googler will find a solution 🙂

I still wondering if i want to send/share my extension, than how to set the filepath (as you see above is kind of absolute or pc specific.

I tried relative path but didnt worked...

I guess the "starting point" of the path was not the directory where i had start my .jsx/script

Any thought's on that anybody?!

[Chuck Uebele]

I like to think of scripting as a massive combination lock - one typo and it doesn't open. Yes, the lack of examples makes things difficult. I've been dabbling at this since PS CS, and I still have trouble with the SDK. For assets, I would create a folder in the personal folder rather than the desktop. People don't like clutter for other people there.

[Pedro Cortez Marques]

// from the desktop (Mac or PC)
File(Folder.desktop + "/Photoshop scripting/photo_60x60_icon.png");
// from the script file location itself (Mac or PC)
File(File($.fileName).path + "/Photoshop scripting/photo_60x60_icon.png");

[photogyulai]

Pedro Thanks again! I definetly Try that!

And the link/pdf is really great, informative, examples etc.!

I have another clue for today 🙂

I designed a ui window... just s simple "Ok we are ready, enjoy the result" message. At the end of the script.
But in my country Hungary we have some special karakters as we write >> é á ö  stuff like that.
And the window, with the same code somethimes looks as it should be, and sometimes this characters didnt recognized...

see examples:

And again... this two window is the result of the same code!!! 🙂

Any thoughts? 

[Pedro Cortez Marques]

I think you should have the javascript toolguide PDF manual. Many of the answers you want are there and also those you will have soon.

http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/scripting/pdfs/javascript_tools_guide.pdf

On page 226, you have the solution you want.

Shortly, each app on Adobe has a variable $.locale

this is the language that directs the characters within your windows.

But you can force them to be presenting the laguage you choose.

For example

$.locale = "hu"; // this works for Hungary messages

$.locale = null; // restore to the native locale of the app

If you want to give the posibility of letting the user read your windows in its own languages, you can give that chance like this:

btnText = { en: "Yes", de: "Ja", fr: "Oui" };

b1 = w.add ("button", undefined, localize(btnText)); // In this case, if any computer has installed other language than 'en', 'de' or 'fr', the language chosen will be the native one (could be any, and you don't know)

[photogyulai]

Pedro thank You!

I was worried a bit becose 99,9% Hungarian users use photoshop in English

But i tried and it works (of course i had put the hungarian text after the  "{ en:" stuff

and i put an

$.localize = true;

at the beginning of the script

thanks again! 🙂

[photogyulai]

Okay im officialy confused! 🙂

As i wrote up here, after i refreshed the code it was working again >> the special characters was displayed correctly

but X minutes later it was wrong again!  Okay i thought maybe becose the text part of the code is in a function {} section.

So i took out from the function >> it was okay again >> im testing/tested multiple files and it was okay again

X minutes later it is wrong again!

I swear to god it is the same code whats working and not!

Any ideas?!?

[Pedro Cortez Marques]

Hi

I think it is easier than that.

If you really want to give access only to one language "hu_HU", use only $.locale and you don't need $.localize = true;

Just do this:

$.locale = "hu";

and then when you create text strings over UI, use only:

localize({hu:"[sometext]"})

You even don't need to make this: localize({hu:"[sometext]",en:"[sometext]"}), because you have forced the script to be "hu" only.

Attention: In this case "hu" will be on only during the script execution. When it finish, photoshop will return to the native whatever language it had before. But this is OK if you just put $.locale = "hu"; in the beginning of all your scripts.

[photogyulai]

Thanks again Pedro!

I tried more than several setup, but did not work.

I guess -as i mentioned before- my PS and the target audience PS isnt set to "hu" we use the Photoshop in english

If i try use correctly the code and leave the "en: "  section empty/ or didnt make one, as You suggested. The window will be empty as well

But still here is the code... i use it the end of two (CTRL+C/CTRL+V same code!!) simple jsx file, one of tham is working and one of tham it isnt.

$.locale = "hu";

var box = new Window('dialog', 'Uzenet:',undefined);
box.bounds = {x:300, y:300, width:300, height:300};

box.panel = box.add('panel', {x:10, y:10, width:280, height:280},);

btnText = { hu: "Kiválasztottuk neked az ecset eszközt.\rKezdj el festeni vele ahol szeretnéd az élesítést viszont látni!", en: "Kiválasztottuk neked az ecset eszközt.\rKezdj el festeni vele ahol szeretnéd az élesítést viszont látni!", fr: "Oui" };
box.msge = box.panel.add('statictext', {x:40, y:60, width:200, height:70}, localize(btnText), {multiline: true});

box.show();

with this code at the end in one file:

and the SAME CODE 🙂 at the end another file:

i guess this is some bug... and the solution will be somewhere else 🙂

[Pedro Cortez Marques]

Hi

What photoshop version have you? I'm using 15.2.2 (CS2014)

If you use only {hu:"igen",en:"yes",fr:"oui"} directly without localize(), then you need to set in the begining $.localize=true

Where is why on Page 104:

//Only works if the $.localize=true

b1 = w.add ("button", undefined, btnText);

//Always works, regardless of $.localize value

b1 = w.add ("button", undefined, localize (btnText));

Regarding the other problem you have, I haven't been able to detect it on my computers.

It seams to be an encoding problem I had 2 or 3 years ago with CS6 version and it desapear when we have installed the creative cloud but keeping CS6.

The only thing about that I can give advice is to build your UI layout using Automatic layout. Adobe suggest it on page 104 (Automatic layout on page 86/87).

"When your script uses localization to provide language-appropriate strings for user-interface elements, it

should also take advantage of the << Automatic layout >> feature. The layout manager can determine the best

size for each user-interface element based on its localized text value, automatically adjusting the layout

of your script-defined dialogs to allow for the varying widths of strings for different languages."

I will use this to build your window with automatic layout, but if you have more questions regarding automatic layout, please create another new post, because it is another new different subject:

If you test this changing $.locale to each language at a time, the width and height of the panel will automatically adapt it self. $  .locale = "en";

$.locale = "en";

var box = new Window('dialog', 'Uzenet:',undefined);
box.margins = 0; // if not used, default = [15,15,15,15]
box.spacing = 10; // space between children elements -  if not used, default = 15

var G1 = box.add('group', undefined);
G1.margins = [10,10,10,20]; // if not used, default = [0,0,0,0] = 0
G1.spacing = 20; // group space between children elements - if not used, default = 10
G1.orientation="column";

btnText = { hu: "Kiválasztottuk neked az ecset eszközt.\
Kezdj el festeni vele ahol szeretnéd az élesítést viszont látni!", en: "Kiválasztottuk neked az ecset eszközt.\
Kezdj el festeni vele\
ahol szeretnéd az \
élesítést \
viszont látni!", fr: "Oui" };

G1.msge = G1.add('statictext', undefined, localize(btnText), {multiline: true});

G1.bt = G1.add('button', undefined, localize({hu:"zár",en:"close",fr:"terminer"}));
G1.bt.onClick = function() {
    box.close();
}

box.show();

[photogyulai]

okay Pedro thanks again!

I guess i give it up >> i tried this very last code of you.

i worked perfectly until i put the "main script" above it.

Than it goes again like >> @]ĐFed&x ... jibberish

I use ps cc2014.  I dont understand, but i will test it on other computers!

All my best!

[Pedro Cortez Marques]

Try this manual that has the examples you want and much more. The PDF link is there.

ScriptUI for dummies | Peter Kahrel

I have to note that there are some scriptUI bugs that are not working on photoshop.

[photogyulai]

Pedro thanks!

It looks pretty detalied, and i see some examples... so i hope the best!