6 Replies Latest reply on Mar 8, 2018 3:07 AM by Kukurykus

    Help Needed UI

    32621919 Level 1

      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

        • 1. Re: Help Needed UI
          r-bin Level 4

          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()
          
          • 2. Re: Help Needed UI
            32621919 Level 1

            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!

            • 3. Re: Help Needed UI
              r-bin Level 4

              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();
              
              2 people found this helpful
              • 4. Re: Help Needed UI
                32621919 Level 1

                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!

                • 5. Re: Help Needed UI
                  r-bin Level 4

                  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.

                  • 6. Re: Help Needed UI
                    Kukurykus Adobe Community Professional

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