Skip to main content
3
32621919
Participating Frequently
March 7, 2018
Answered

Help Needed UI

  • March 7, 2018
  • 1 reply
  • 864 views

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.

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

This topic has been closed for replies.
Correct answer r-bin

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.

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();

1 reply

R
r-bin
Legend
March 7, 2018

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()
3
32621919Author
Participating Frequently
March 7, 2018

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!

Kukurykus
Kukurykus
Legend
March 8, 2018

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.


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'.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices