cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0
Upvote

Help Needed UI

32621919
Mar 07, 2018 Mar 07, 2018

Copy link to clipboard

Copied

Hey Everyone,

I'm writing my first script for Photoshop, it's a pretty big one for making a product for my shop. It has a lot of steps in it and it requires some inputs on the user 'me'. I've already done all the mathematics for my script and now I only need to write in the documentation for Photoshop. However, I'm really struggling with creating the UI and inputs from the UI which is my next step. I'm a new coder and I'm still trying to grasp a lot of concepts and trying to get better. I wanted to try making this task as a script, it will help a lot with my business and it will also help me improve my coding skill.

This is the UI I had in mind, this is the first iteration I've designed.

UI Example.jpg

I've currently been working with the UI documentation found in the JavaScript Tools Guide CC but it's hard to fully understand how to make it all. Currently all I've managed to successfully make is the Sizes Panel with A5-Mini text and check-boxes. However, I'm unable to put in set parameters for the Panel successfully. I've been putting in the parameters of pixels found exactly in Photoshop and it's just appearing strange. I'm not quite sure how to do it successfully and when I put in parameters for it all the groups within it fall apart.

var dlg = new Window("dialog", "Robin Printables - Binder Sticker Builder", [100, 100, 650, 390]);

// Panel to hold all of the Insert Size Checkboxes

dlg.sizePnl = dlg.add("panel", [494, 86, 126, 180], "Sizes");

// A5 Insert Size Checkbox

dlg.sizePnl.a5 = dlg.sizePnl.add("group", undefined, "A5 Checkbox");

dlg.sizePnl.a5.a5Cb = dlg.sizePnl.a5.add("checkbox", undefined, "A5:");

dlg.sizePnl.a5.a5Cb.value = true;

// Half Letter Insert Size Checkbox

dlg.sizePnl.halfLetter = dlg.sizePnl.add("group", undefined, "Half Letter Checkbox");

dlg.sizePnl.halfLetter.hlCb = dlg.sizePnl.halfLetter.add("checkbox", undefined, "Half Letter:");

dlg.sizePnl.halfLetter.hlCb.value = true;

// Personal Insert Size Checkbox

dlg.sizePnl.personal = dlg.sizePnl.add("group", undefined, "Personal Checkbox");

dlg.sizePnl.personal.plCb = dlg.sizePnl.personal.add("checkbox", undefined, "Personal:");

dlg.sizePnl.personal.plCb.value = true;

// Pocket Insert Size Checkbox

dlg.sizePnl.pocket = dlg.sizePnl.add("group", undefined, "Pocket Checkbox");

dlg.sizePnl.pocket.ptCb = dlg.sizePnl.pocket.add("checkbox", undefined, "Pocket:");

dlg.sizePnl.pocket.ptCb.value = true;

// Mini Insert Size Checkbox

dlg.sizePnl.mini = dlg.sizePnl.add("group", undefined, "Mini Checkbox");

dlg.sizePnl.mini.mCb = dlg.sizePnl.mini.add("checkbox", undefined, "Mini:");

dlg.sizePnl.mini.mCb.value = true;

I've tried adding a second panel to the window but it's not appearing at all. I'm not sure if I'm fully understanding and I would love a clarification on what I'm doing wrong. Here is the code for my second panel:

// Panel to hold all of the Sticker and Gap Inputs

dlg.stkrPnl = dlg.add("panel", undefined, "Stickers")

// Group for Gap input with Static Text and an Edit Box

dlg.stkrPnl.gapGrp = dlg.stkrPnl.add("group", undefined, "Gap Input")

dlg.stkrPnl.gapGrp.gapSt = dlg.strkPnl.gapGrp.add("statictext", undefined, "Target Gap:")

dlg.stkrPnl.gapGrp.gapEt = dlg.stkrPnl.gapGrp.add("edittext", undefined, "0.0")

// Group for Sticker input with Static Text and an Edit Box

dlg.stkrPnl.stkrGrp = dlg.stkrPnl.add("group", undefined, "Sticker Input")

dlg.stkrPnl.stkrGrp.stkrSt = dlg.stkrPnl.stkrGrp.add("statictext", undefined, "Sticker Size:")

dlg.stkrPnl.stkrGrp.stkrEt = dlg.stkrPnl.stkrGrp.add("edittext", undefined, "0.0")

If anyone can help or point me in the right direction on where to get help I'd love it.

Thanks

TOPICS
Actions and scripting

Views

545

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

r-bin
People's Champ , Mar 07, 2018 Mar 07, 2018

All this is in the documentation you found - JavaScript Tools Guide CC.

I do not know of any more recent documentation. I note that this file is from 2013, i.e. when the first Photoshop CC (CS7) ver.14.0 was released. Now the latest photoshop version 19.1.1 and no new documentation. And many things in it either do not work or work differently from those described in the old documentation.

The possibilities of UI in Photoshop are quite modest. You can not make a checkbox with the label to the left

...

Votes

Translate

Translate
Adobe

Explore related tutorials & articles

replies 6 Replies 6
latest latest Jump to latest reply
r-bin
People's Champ ,
Mar 07, 2018 Mar 07, 2018

Copy link to clipboard

Copied

Council. Try not to use the constructs dlg.sizePnl.a5.a5Cb

Try this style

var dlg = new Window("dialog", "Robin");
dlg.preferredSize = [400, 200];
dlg.alignChildren = 'left';
dlg.margins = [10, 20, 10, 10];
dlg.spacing = 10;
with (dlg.add("panel", undefined, "Sizes")) 
    {
    preferredSize = [100, 300];
    alignChildren = 'top';
    orientation = 'row';
    margins = 10
    spacing = 10;
    with (add("group"))
        {          
        orientation = 'column';
        alignChildren = 'left';
        margins = 0
        spacing = 10;
        var a5Cb = add("checkbox", undefined, "A5");
        a5Cb.value = true;
        var a4Cb = add("checkbox", undefined, "A4");
        a4Cb.value = true;
        }
    with (add("group"))
        {          
        orientation = 'column';
        alignChildren = 'left';
        margins = 0
        spacing = 10;
        var a5pCb = add("checkbox", undefined, "A5+");
        a5pCb.value = true;
        var a4pCb = add("checkbox", undefined, "A4+");
        a4pCb.value = true;
        }
    }            
dlg.show()

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
32621919
Mar 07, 2018 Mar 07, 2018

Copy link to clipboard

Copied

In Response To r-bin

Thanks r-bin.

I'll try using this code, it seems simple enough. Why should I use this method of coding instead of the other?

Also, I know this is being a bit fastidious but is there a way to make the check-mark boxes be on the right side of the text and not the left?

Where can I find all the documentation for the parameters you can put into the statement: preferredSize, alignChildren, orientation, margins etc. Cause I'd like to have one's like location to set [ x, y ] point of an element/window within it's parent and stuff.

Thanks for your help!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
r-bin
People's Champ ,
Mar 07, 2018 Mar 07, 2018

Copy link to clipboard

Copied

In Response To 32621919

All this is in the documentation you found - JavaScript Tools Guide CC.

I do not know of any more recent documentation. I note that this file is from 2013, i.e. when the first Photoshop CC (CS7) ver.14.0 was released. Now the latest photoshop version 19.1.1 and no new documentation. And many things in it either do not work or work differently from those described in the old documentation.

The possibilities of UI in Photoshop are quite modest. You can not make a checkbox with the label to the left of the checkbox.

Here is an example of your dialogue. It's made for CC2018. In other versions, it will look different. In CC2018 I do not work (because of bugs), to that there the most difficult to do the interface.

I hope Google translated correctly.

Untitled-1.png

var font1 = ScriptUI.newFont("Tahoma", 0, 14);
var font2 = ScriptUI.newFont("Tahoma", 0, 16);
var b_ico = new Array();
var a_txt = new Array();
var s_txt = new Array();
var dlg = new Window("dialog", "Robin Printables - Binder Sticker Builder", undefined, {closeButton: true});
dlg.preferredSize = [650, 390];  
dlg.orientation = "row";  
dlg.alignChildren = "left";  
dlg.margins = [10, 20, 10, 10];  
dlg.spacing = 10;  
// dlg.graphics.font = font1; // does not work in CC2018 ???!!!!! WTF!!!!
with (dlg.add("group")) 
    {  
    preferredSize = [295, 370];  
    orientation = "column";  
    alignChildren = "top";  
    margins = 0  
    spacing = 9;  
    var b_img = add("button", undefined, "Images");  
    b_img.preferredSize = [125, 34];            
    b_img.graphics.font = font2;     
    with (add("panel"))   
        {
        preferredSize = [295, 304];  
        orientation = "column";  
        margins = [13,15,13,15];  
        spacing = 9;  
        for (var i = 0; i < 3; i++)
            {
            with (add("group"))   
                {
                preferredSize = [269, 83];  
                orientation = "row";  
                margins = 0;  
                spacing = 7;  
                for (var n = 0; n < 3; n++)
                    {
                    b_ico.push(add("iconbutton", undefined, undefined, {style:"button"}));
                    b_ico[b_ico.length-1].preferredSize = [85,85];            
                    }
                }                    
            }
        }
    }      
with (dlg.add("group"))  
    {  
    preferredSize = [295, 370];  
    orientation = "column";  
    alignment = "top";
    alignChildren = "top";  
    margins = 0  
    spacing = 9; 
    with (add("group"))   
        {
        orientation = "row";  
        margins = 0;  
        spacing = 0;  
        add("statictext", undefined, "Set Name:").graphics.font = font1; 
        var t_name = add("edittext", undefined, "")
        t_name.preferredSize.width = 207;  
        t_name.graphics.font = font1;            
        }      
    with (add("group"))   
        {
        orientation = "row";  
        margins = 0;  
        spacing = 0;  
        with (add("group"))   
            {
            preferredSize.width = 150;  
            alignChildren = "top";  
            orientation = "column";  
            margins = 0;  
            spacing = 4;  
            with (add("group"))   
                {
                alignChildren = "right";  
                orientation = "row";  
                margins = 0;  
                spacing = 0;  
                with (add("group"))   
                    {
                    alignChildren = "right";  
                    orientation = "column";  
                    margins = 0;  
                    spacing = 10;  
                    add("statictext", undefined, "Target Gap:").graphics.font = font1; 
                    add("statictext", undefined, "Stiker Size:").graphics.font = font1; 
                    }      
                with (add("group"))   
                    {
                    alignChildren = "right";  
                    orientation = "column";  
                    margins = 0;  
                    spacing = 10;  
        
                    t_gap = add("edittext", undefined, ""); 
                    t_siz = add("edittext", undefined, ""); 
                    t_gap.preferredSize.width = 60;
                    t_siz.preferredSize.width = 60;
                    t_gap.graphics.font = font1;
                    t_siz.graphics.font = font1;
                    }      
                }
            with (add("group"))   
                {
                orientation = "row";  
                margins = [0,4,0,0];  
                spacing = 4;  
                with (add("group"))   
                    {
                    alignChildren = "left";  
                    orientation = "column";  
                    margins = 0;  
                    spacing = 6;  
                    add("statictext", undefined, "")
                    add("statictext", undefined, "A5:")
                    add("statictext", undefined, "Half Letter:")
                    add("statictext", undefined, "Personal:")
                    add("statictext", undefined, "Pocket:")
                    add("statictext", undefined, "Mini:")
                    }
                with (add("group"))   
                    {
                    alignChildren = "left";  
                    orientation = "column";  
                    margins = 0;  
                    spacing = 6;  
                    add("statictext", undefined, "APS:")
        
                    for (var i = 0; i < 5; i++)
                        {
                        var tmp;
                        with (tmp = add("statictext", undefined, ""))
                            {
                            preferredSize.width = 30;            
                            justify = "center";
                            a_txt.push(tmp)
                            }
                        }
                    }
                with (add("group"))   
                    {
                    alignChildren = "left";  
                    orientation = "column";  
                    margins = 0;  
                    spacing = 6;  
                    add("statictext", undefined, "Sheets:")
                    for (var i = 0; i < 5; i++)
                        {
                        var tmp;
                        with (tmp = add("statictext", undefined, ""))
                            {
                            preferredSize.width = 30;            
                            justify = "center";
                            s_txt.push(tmp)
                            }
                        }
                    }
                }
            }
        with (add("panel", undefined, "Sizes"))   
            {
            alignment = "top";
            alignChildren = "left";  
            preferredSize = [128, 191];  
            graphics.font = font1;    
            orientation = "row";  
            margins = [10,30,0,28];  
            spacing = 10;  
            with (add("group"))   
                {
                orientation = "column";  
                alignChildren = "left";  
                margins = 0;  
                spacing = 10;  
                add("statictext", undefined, "A5:").graphics.font = font1;
                add("statictext", undefined, "Half Letter:").graphics.font = font1;
                add("statictext", undefined, "Personal:").graphics.font = font1;
                add("statictext", undefined, "Pocket:").graphics.font = font1;
                add("statictext", undefined, "Mini:").graphics.font = font1;
                }
            with (add("group"))   
                {
                orientation = "column";  
                alignChildren = "left";  
                margins = 0;  
                spacing = 10;  
                add("checkbox", undefined, "");
                add("checkbox", undefined, "");
                add("checkbox", undefined, "");
                add("checkbox", undefined, "");
                add("checkbox", undefined, "");
                }
            }
        }
    with (add("group"))   
        {
        orientation = "row";  
        margins = [20,46,0,0];  
        spacing = 15;  
        var b1 = add("button", undefined, "Start");
        var b2 = add("button", undefined, "Cancel");
        b1.preferredSize = b2.preferredSize  = [125, 35]; 
        }      
    }
a_txt[0].text = 11;
a_txt[1].text = 11;
a_txt[2].text = 4;
a_txt[3].text = 4;
a_txt[4].text = 3;
s_txt[0].text = 1;
s_txt[1].text = 1;
s_txt[2].text = 3;
s_txt[3].text = 3;
s_txt[4].text = 4;
dlg.cancelElement = null;
dlg.show();

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
32621919
Mar 08, 2018 Mar 08, 2018

Copy link to clipboard

Copied

In Response To r-bin

Mate that's awesome and thank you so much for writing all that code for me. It has helped me out a huge amount in understanding how to tackle problems like this. I'm going over all of it and learning a lot about ScriptUI and how it functions.

Again, thanks a lot!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
r-bin
People's Champ ,
Mar 08, 2018 Mar 08, 2018

Copy link to clipboard

Copied

In Response To 32621919

Council. When you develop and debug your interface temporarily replace
add ("group") to add ("panel"). Then you can see the boundaries of the group and aligning the elements in the group.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Kukurykus
LEGEND ,
Mar 08, 2018 Mar 08, 2018

Copy link to clipboard

Copied

LATEST
In Response To r-bin

Your english translator is amanzigly good. Really I have impression that it is all wrote by human (but perhaps because my english is not so good too). It is first time (atually second in this theard) I see it transeted something wrong. You probably meant TIP, not COUNCIL. Council is a group of people who meet together to discuss something to see what they should decide about. I guess your (russian?) and my polish languages got one word for different english words 'tip' / 'council'.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Quick links - Photoshop
Get to know Photoshop
Handy Photoshop Links you will want to bookmark
Inspiring tutorials
User Guide - Photoshop
System Requirements
Download and Install
Quick links - Photoshop Mobile
Get to know workspace
User Guide
Common Questions
Photoshop Cloud Documents
Have a feature request - Submit here
Troubleshoot & Learn new things
Troubleshoot Crash & Freeze issues
Troubleshoot - Scratch disk are full error
Work with Photoshop files in InDesign
Photoshop Monthly Newsletter
Pattie-F
Photoshop Quick tips
Pattie-F
Move artwork between Photoshop & Illustrator
Pattie-F
Copyright © 2024 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices