Dynamic UI

Anyone, especially newbies, asking for help with Photoshop Scripting and Photoshop Automation - as opposed to those contributing to discussion about an aspect of Photoshop Scripting

Moderators: Tom, Kukurykus

zachm

Dynamic UI

Post by zachm »

Hey everyone, I'm about to start making a UI here for my script, and before I start, I wanted to ask anyone here if they spot any forseeable problems inherent with what I am setting out to do. Here's a picture of what I propose to make,



The basic Idea behind it is that when a function is called from another menu, this window will be dynamically generated and populated based on the layer sets in the PSD. Then the idea is to be able to select all from one column, and or select individual components. I already have a function set to run in the case of either checkbox, but I'm not sure if it's possible to even generate an interface dynamically..

Any help is greatly appreciated.

Professional AI Audio Generation within Adobe Premiere Pro - Download Free Plugin here

Paul MR

Dynamic UI

Post by Paul MR »

You might be able to build on this example...

Code: Select all#target photoshop
function main(){
if(!documents.length) return;
var doc = app.activeDocument;
if(!doc.layerSets.length){
    alert("There are no Layersets!");
    return;
    }
var dlg = new Window ('dialog', 'Auto Checkboxs');
dlg.pnl1 = dlg.add('panel', undefined, 'layersets', {borderStyle:"black"});
dlg.pnl1.alignChildren='left';
var Checkbox = new Array();
   for (var i = 0; i <doc.layerSets.length; i++) {
         Checkbox= dlg.pnl1.add("checkbox", undefined, doc.layerSets.name);
   }
dlg.OK = dlg.add("button", undefined, "OK");
dlg.add("button", undefined, "Cancel");
dlg.alignChildren='fill';
dlg.OK.onClick=function(){
   dlg.close(1);
    for(var a in Checkbox){
    alert(Checkbox[a].text + " Selected = " + Checkbox[a].value);
    }
}
dlg.center();
dlg.show();
}
main();
zachm

Dynamic UI

Post by zachm »

That bit of code from earlier is perfect, but I am struggling to figure out how to get it to populate the sections of UI that I have. I'm not really sure where to put it in the code I have is all. I've tried inserting a snippet all over the place in here but I'm sort of confused, do I need to turn the panels within the interface into variables? Here's the code I have that is generating my interface so far.

Code: Select all    function layerWindow(){
    if(!documents.length) return;
    var doc = app.activeDocument;
    if(!doc.layerSets.length){
        alert("There are no Layersets!");
        return;
        }

var wndowdlg=
"dialog{text:'Script Interface',bounds:[100,100,500,770],"+
"mainGroup:Group{bounds:[10,10,390,610],"+
"panel1:Panel{bounds:[10,20,80,110] , text:' COLOR' ,properties:{borderStyle:'black',su1PanelCoordinates:true},"+
"radiobutton0:RadioButton{bounds:[10,20,111,41] , text:'ALL' },"+
"radiobutton1:RadioButton{bounds:[10,50,111,71] , text:'NONE' },"+
"},"+
"panel5:Panel{bounds:[90,20,160,110] , text:' MATTE' ,properties:{borderStyle:'black',su1PanelCoordinates:true},"+
"radiobutton2:RadioButton{bounds:[10,20,111,41] , text:'ALL' },"+
"radiobutton3:RadioButton{bounds:[10,50,111,71] , text:'NONE' },"+
"},"+
"panel6:Panel{bounds:[10,120,80,590] , text:'' ,properties:{borderStyle:'black',su1PanelCoordinates:true},"+
"},"+
"panel7:Panel{bounds:[90,120,160,590] , text:'' ,properties:{borderStyle:'black',su1PanelCoordinates:true},"+
"},"+
"panel8:Panel{bounds:[180,120,370,590] , text:'' ,properties:{borderStyle:'black',su1PanelCoordinates:true},"+
"},"+
//"image0:Image{bounds:[180,20,370,110] , icon:'/C/Documents and Settings/user/Desktop/New Folder/resources/logo_01.png'},"+
"},"+
"button0:Button{bounds:[30,630,180,650] , text:'OK' },"+
"button1:Button{bounds:[220,630,370,650] , text:'CANCEL' },"+
"};"
var win = new Window(wndowdlg,'LAYER WINDOW');


win.center();
win.show();
}

layerWindow()

Thanks again! You guys rule.
Paul MR

Dynamic UI

Post by Paul MR »

Does this help....
Code: Select all#target photoshop
function main(){
if(!documents.length) return;
var doc = app.activeDocument;
if(!doc.layerSets.length){
    alert("There are no Layersets!");
    return;
    }
var colorCheckbox = new Array();
var matteCheckbox = new Array();
var layerName = new Array();
var win = new Window('dialog','Layer Window');
win.alignChildren='left';
win.g0 = win.add('group');
win.p1 = win.g0.add('panel',undefined,'Color', {borderStyle:"black"});
win.p1.preferredSize=[100,100];
win.p1.orientation='column';
win.p1.alignChildren='left';
win.p1.rb1 = win.p1.add('radiobutton',undefined,'ALL');
win.p1.rb2 = win.p1.add('radiobutton',undefined,'None');
win.p1.rb2.value=true;
win.p2 = win.g0.add('panel',undefined,'Matte', {borderStyle:"black"});
win.p2.preferredSize=[100,100];
win.p2.orientation='column';
win.p2.alignChildren='left';
win.p2.rb1 = win.p2.add('radiobutton',undefined,'ALL');
win.p2.rb2 = win.p2.add('radiobutton',undefined,'None');
win.p2.rb2.value=true;
win.g5 = win.add('group');
win.p3 = win.g5.add('panel',undefined,'', {borderStyle:"black"});
win.p3.preferredSize=[100,100];
//win.p3.alignChildren='left';
win.p4 = win.g5.add('panel',undefined,'', {borderStyle:"black"});
win.p4.preferredSize=[100,100];
//win.p4.alignChildren='left';
win.p5 = win.g5.add('panel',undefined,'', {borderStyle:"black"});
win.p5.preferredSize=[300,100];
win.p5.alignChildren='left';
   for (var i = 0; i <doc.layerSets.length; i++) {
         colorCheckbox= win.p3.add("checkbox", undefined, '');
         matteCheckbox= win.p4.add("checkbox", undefined, '');
         layerName = win.p5.add("statictext", undefined, doc.layerSets.name);
   }
win.g10 = win.add('group');
win.g10.alignChildren='center';
win.g10.bu1 = win.g10.add('button',undefined,'Process');
win.g10.bu1.preferredSize=[250,30];
win.g10.bu2 = win.g10.add('button',undefined,'Cancel');
win.g10.bu2.preferredSize=[250,30];
win.g10.bu1.onClick=function(){
win.close(1);
    for( var i in colorCheckbox){
        if(colorCheckbox.value){
            alert(layerName.text + " Color selected");
            }
        }
        for( var m in matteCheckbox){
        if(matteCheckbox[m].value){
            alert(layerName[m].text + " Matte selected");
            }
        }
}
win.center();
win.show();
}
main();
zachm

Dynamic UI

Post by zachm »

Awesome, that worked out perfectly, I ended up changing the UI a bit, but this is what I have and it's working perfectly how I need it. Thanks again!

Code: Select all           #target photoshop
    function layerExporter((){
    if(!documents.length) return;
    var doc = app.activeDocument;
    if(!doc.layerSets.length){
        alert("There are no Layersets!");
        return;
        }
    var colorCheckbox = new Array();
    var matteCheckbox = new Array();
    var layerName = new Array();
    var win = new Window('dialog','LAYER SLAYER')
    win.alignChildren='center';
   
    win.g0 = win.add('group');
    win.p1 = win.g0.add('panel',undefined,'COLOR', {borderStyle:"black"});
    win.p1.preferredSize=[100,100];
    win.p1.orientation='column';
    win.p1.alignChildren='left';
    win.p1.rb1 = win.p1.add('radiobutton',undefined,'ALL');
    win.p1.rb2 = win.p1.add('radiobutton',undefined,'NONE');
   //win.p1.rb3 = win.p1.add('radiobutton',undefined,'CUSTOM');
    win.p1.rb1.value=true;
    win.p2 = win.g0.add('panel',undefined,'MATTE', {borderStyle:"black"});
    win.p2.preferredSize=[100,100];
    win.p2.orientation='column';
    win.p2.alignChildren='left';
    win.p2.rb1 = win.p2.add('radiobutton',undefined,'ALL');
    win.p2.rb2 = win.p2.add('radiobutton',undefined,'NONE');
   //win.p2.rb2 = win.p2.add('radiobutton',undefined,'CUSTOM');
    win.p2.rb1.value=true;
    win.g5 = win.add('group');
    win.p3 = win.g5.add('panel',undefined,'', {borderStyle:"black"});
    win.p3.preferredSize=[100,100];
    win.p3.alignChildren='left';
    win.p4 = win.g5.add('panel',undefined,'', {borderStyle:"black"});
    win.p4.preferredSize=[100,100];
    win.p4.alignChildren='left';
       for (var i = 0; i <doc.layerSets.length; i++) {
             colorCheckbox= win.p3.add("checkbox", undefined, doc.layerSets.name);
         colorCheckbox.value = true;
             matteCheckbox= win.p4.add("checkbox", undefined, doc.layerSets.name);
         matteCheckbox.value = true;
       }
    win.g10 = win.add('group');
    win.g10.alignChildren='center';
    win.g10.bu1 = win.g10.add('button',undefined,'Process');
    win.g10.bu1.preferredSize=[230,30];
    win.g11 = win.add('group');
    win.g11.alignChildren='center';
    win.g11.bu2 = win.g11.add('button',undefined,'Cancel');
    win.g11.bu2.preferredSize=[230,30];
    win.g10.bu1.onClick=function(){
    win.close(1);
   
        for( var i in colorCheckbox){
            if(colorCheckbox.value){
                alert(doc.layerSets.name + " Color selected");
                }
            }
            for( var m in matteCheckbox){
            if(matteCheckbox[m].value){
                alert(doc.layerSets.name + " Matte selected");
                }
            }
    }
/////////////////////Radio Buttons/////////////////////////////////
     win.p1.rb1.onClick = function() {
      dlgResult = '1';
       setColVal(dlgResult);
      };
     win.p1.rb2.onClick = function() {
      dlgResult = '2';
       setColVal(dlgResult);
      };
   win.p2.rb1.onClick = function() {
      dlgResult = '3';
      setColVal(dlgResult);
      };

   win.p2.rb2.onClick = function() {
      dlgResult = '4';
      setColVal(dlgResult);
      };
/////////////////////Radio Button Results/////////////////////////////////
    function setColVal(dlgResult) {
       
    if (dlgResult == '1'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       colorCheckbox.value = true;
      }
       };

    if (dlgResult == '2'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       colorCheckbox[i].value = false;
      }
       };
   
    if (dlgResult == '3'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       matteCheckbox[i].value = true;
      }
       };
   
    if (dlgResult == '4'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       matteCheckbox[i].value = false;
      }
     };
   
    };
    win.center();
    win.show();
    }
    layerExporter();
   
   
   
   
zachm

Dynamic UI

Post by zachm »

Hey all, I am still piecing this thing together, and have made it along further than I had expected (with your help this would not have been possible.) I fear that I am more of an artist than a coder, and I think the scope of this task may be a bit advanced for my skill level. That being said, it's almost to the point I want it, and I am struggling with the implementation of a couple of basic concepts. Here's the script in full as it exists,

Code: Select all    #target photoshop
   
    function layerExporter(){
    if(!documents.length) return;
    var doc = app.activeDocument;
    if(!doc.layerSets.length){
        alert("There are no Layersets!");
        return;
        }
    var colorCheckbox = new Array();
    var matteCheckbox = new Array();
    var layerName = new Array();
    var win = new Window('dialog','layerExporter')
    win.alignChildren='center';
   
    win.g0 = win.add('group');
   win.p0 = win.g0.add
    win.p1 = win.g0.add('panel',undefined,'COLOR', {borderStyle:"black"});
    win.p1.preferredSize=[100,100];
    win.p1.orientation='column';
    win.p1.alignChildren='left';
    win.p1.rb1 = win.p1.add('radiobutton',undefined,'ALL');
    win.p1.rb2 = win.p1.add('radiobutton',undefined,'NONE');
   //win.p1.rb3 = win.p1.add('radiobutton',undefined,'CUSTOM');
    win.p1.rb1.value=true;
    win.p2 = win.g0.add('panel',undefined,'MATTE', {borderStyle:"black"});
    win.p2.preferredSize=[100,100];
    win.p2.orientation='column';
    win.p2.alignChildren='left';
    win.p2.rb1 = win.p2.add('radiobutton',undefined,'ALL');
    win.p2.rb2 = win.p2.add('radiobutton',undefined,'NONE');
   //win.p2.rb2 = win.p2.add('radiobutton',undefined,'CUSTOM');
    win.p2.rb1.value=true;
    win.g5 = win.add('group');
    win.p3 = win.g5.add('panel',undefined,'', {borderStyle:"black"});
    win.p3.preferredSize=[100,100];
    win.p3.alignChildren='left';
    win.p4 = win.g5.add('panel',undefined,'', {borderStyle:"black"});
    win.p4.preferredSize=[100,100];
    win.p4.alignChildren='left';
       for (var i = 0; i <doc.layerSets.length; i++) {
             colorCheckbox= win.p3.add("checkbox", undefined, doc.layerSets.name);
         colorCheckbox.value = true;
             matteCheckbox= win.p4.add("checkbox", undefined, doc.layerSets.name);
         matteCheckbox.value = true;
       }
    win.g10 = win.add('group');
    win.g10.alignChildren='center';
    win.g10.bu1 = win.g10.add('button',undefined,'Process');
    win.g10.bu1.preferredSize=[230,30];
    win.g11 = win.add('group');
    win.g11.alignChildren='center';
    win.g11.bu2 = win.g11.add('button',undefined,'Cancel');
    win.g11.bu2.preferredSize=[230,30];
/////////////////////Run Color and Matte functions/////////////////////////////////
    win.g10.bu1.onClick=function(){
    win.close(1);


        for( var i in colorCheckbox){
            if(colorCheckbox.value){
                RGBMain()
                }
            }
            for( var m in matteCheckbox){
            if(matteCheckbox[m].value){
                alphaMain()
                }
            }
    }
/////////////////////Radio Buttons/////////////////////////////////
   win.p1.rb1.onClick = function() {
      dlgResult = '1';
       setColVal(dlgResult);
      };
   win.p1.rb2.onClick = function() {
      dlgResult = '2';
       setColVal(dlgResult);
      };
   win.p2.rb1.onClick = function() {
      dlgResult = '3';
      setColVal(dlgResult);
      };

   win.p2.rb2.onClick = function() {
      dlgResult = '4';
      setColVal(dlgResult);
      };
/////////////////////Radio Button Results/////////////////////////////////
    function setColVal(dlgResult) {
       
    if (dlgResult == '1'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       colorCheckbox.value = true;
      }
       };

    if (dlgResult == '2'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       colorCheckbox.value = false;
      }
       };
   
    if (dlgResult == '3'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       matteCheckbox.value = true;
      }
       };
   
    if (dlgResult == '4'){
      for (var i = 0; i <doc.layerSets.length; i++) {
       matteCheckbox[i].value = false;
      }
     };
   
    };
    win.center();
    win.show();
    }

    layerExporter();
/////////////////////Color and Matte functions/////////////////////////////////   
             function RGBMain(){
        if(!documents.length) return;
        var doc = activeDocument;
        var oldPath = activeDocument.path;
      var fileNamePrefix = activeDocument.name;
        var renderDir = new Folder(oldPath+"/"+"renders");
        var archDir = new Folder(oldPath+"/"+"archive");

        if(!renderDir.exists) renderDir.create();
        if(!archDir.exists) archDir.create();
        var fileList= archDir.getFiles("*.exr").sort();
        var LastVersion=0;
        try{
        LastVersion = decodeURI(fileList.pop().name).replace(/\.[^\.]+$/, '').match(/\d+$/);
        }catch(e){LastVersion=0;}
        fileList=[];
        LastVersion = zeroPad((Number(LastVersion) +1),2);
      activeDocument.activeLayer = activeDocument.layers.getByName(doc.layerSets[0].name);
        dupLayers();
        activeDocument.mergeVisibleLayers();
        //floatLayer ();
        //doAction('makeEXR', 'JG');
              if(activeDocument.bitsPerChannel != BitsPerChannelType.THIRTYTWO){
           activeDocument.bitsPerChannel = BitsPerChannelType.THIRTYTWO;
        }
      var archiveFile= File(archDir +"/"+ fileNamePrefix + "_" + doc.layerSets[0].name +"_v"+LastVersion+".exr");
        var saveFile= File(renderDir +"/"+ fileNamePrefix + "_" + doc.layerSets[0].name +".exr");
        saveEXR(archiveFile)
        saveEXR(saveFile);
        app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
        }
       // RGBMain();
 
       
        function alphaMain()
      {
        if(!documents.length) return;
       var doc = activeDocument;
       var oldPath = activeDocument.path;
      var fileNamePrefix = activeDocument.name;
        var renderDir = new Folder(oldPath+"/"+"renders");
        var archDir = new Folder(oldPath+"/"+"archive");

        if(!renderDir.exists) renderDir.create();
        var fileList= renderDir.getFiles("*.exr").sort();
        var LastVersion=0;
        try{
        LastVersion = decodeURI(fileList.pop().name).replace(/\.[^\.]+$/, '').match(/\d+$/);
        }catch(e){LastVersion=0;}
        fileList=[];
        LastVersion = zeroPad((Number(LastVersion) +1),2);
        for(var a=0;a<doc.layerSets.length;a++){
        activeDocument.activeLayer = activeDocument.layers.getByName(doc.layerSets[a].name);
        dupLayers();
        activeDocument.mergeVisibleLayers();
       createAlpha ();
               if(activeDocument.bitsPerChannel != BitsPerChannelType.THIRTYTWO){
           activeDocument.bitsPerChannel = BitsPerChannelType.THIRTYTWO;
        }
       var archFile= File(archDir +"/"+ fileNamePrefix + "_" + doc.layerSets[a].name + "_matte_v"+LastVersion+".exr");
       var saveFile= File(renderDir +"/"+ fileNamePrefix + "_" + doc.layerSets[a].name + "_matte" +".exr");
        saveEXR(archFile);
        saveEXR(saveFile);
        app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
            }
        }
     
       
        function floatLayer()
      {
    var layersNum = activeDocument.layers.length;
    for (var x = 1; x <= 10; x++)
    {
    app.activeDocument.activeLayer.duplicate();
    if(layersNum >10){break;}
    activeDocument.mergeVisibleLayers()
    app.activeDocument.activeLayer.duplicate();
    if(layersNum >10){break;}
    activeDocument.mergeVisibleLayers()
    app.activeDocument.activeLayer.duplicate();
    if(layersNum >10){break;}
    activeDocument.mergeVisibleLayers()
   
}
    var layerRef = app.activeDocument.layers[0]
    var newLayerRef = app.activeDocument.artLayers.add()
    app.backgroundColor.rgb.hexValue = '000000';
    app.activeDocument.selection.fill(app.backgroundColor);
    app.activeDocument.selection.deselect();
    newLayerRef.move(layerRef,ElementPlacement.PLACEAFTER)
    activeDocument.mergeVisibleLayers();
return;
           }

        function dupLayers()
      {
            var desc143 = new ActionDescriptor();
                var ref73 = new ActionReference();
                ref73.putClass( charIDToTypeID('Dcmn') );
            desc143.putReference( charIDToTypeID('null'), ref73 );
            desc143.putString( charIDToTypeID('Nm  '), activeDocument.activeLayer.name );
                var ref74 = new ActionReference();
                ref74.putEnumerated( charIDToTypeID('Lyr '), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );
            desc143.putReference( charIDToTypeID('Usng'), ref74 );
            executeAction( charIDToTypeID('Mk  '), desc143, DialogModes.NO );
        };

        function saveEXR(saveFile)
      {
        var idsave = charIDToTypeID( "save" );
            var desc6 = new ActionDescriptor();
            var idAs = charIDToTypeID( "As  " );
            desc6.putString( idAs, "OpenEXR" );
            var idIn = charIDToTypeID( "In  " );
            desc6.putPath( idIn, saveFile );
        executeAction( idsave, desc6, DialogModes.NO );
        };
        function zeroPad(n, s)
      {
           n = n.toString();
           while (n.length < s)  n = '0' + n;
           return n;
        };

        function createAlpha ()
      {
        var desc = new ActionDescriptor();
        var ref = new ActionReference();
        ref.putProperty( charIDToTypeID( "Chnl" ), charIDToTypeID( "fsel" ) );
        desc.putReference( charIDToTypeID( "null" ), ref );
        var ref1 = new ActionReference();
        ref1.putEnumerated( charIDToTypeID( "Chnl" ), charIDToTypeID( "Chnl" ), charIDToTypeID( "Trsp" ) );
        desc.putReference( charIDToTypeID( "T   " ), ref1 );
        executeAction( charIDToTypeID( "setd" ), desc, DialogModes.NO );

        app.activeDocument.artLayers.add()
        activeDocument.activeLayer.name = "newmatte";
        app.foregroundColor.rgb.hexValue = 'FFFFFF';
        app.activeDocument.selection.fill(app.foregroundColor);
        app.activeDocument.selection.deselect();

        var layerRef = app.activeDocument.layers[0]
        var newLayerRef = app.activeDocument.artLayers.add()
        app.backgroundColor.rgb.hexValue = '000000';
        app.activeDocument.selection.fill(app.backgroundColor);
        app.activeDocument.selection.deselect();

        newLayerRef.move(layerRef,ElementPlacement.PLACEAFTER)
        activeDocument.mergeVisibleLayers();

       };
   


The two things I am struggling with at this point are as follows:

1. The whole decodeURI thing doesn't make sense to me really, and so I'm having problems figuring out how to name each exported layerSet properly. The code I have currently is as follows:

line 158:
Code: Select allvar saveFile= File(renderDir +"/"+ fileNamePrefix + "_" + doc.layerSets[0].name +".exr");

while it's doing the right thing, basically I just want it to remove the version number off the filename Prefix, so that something currently exported as

test_01.psd_red_v01.exr

would run out as

test_red_v01.exr


2. The second problem (made obvious from the last snippet) is that I am having trouble figuring out how to call up the array for the layersets I have selected in the checkboxes. Right now when I run the script, the checkboxes run the functions they are supposed to, but the problem exists in that the array is set to 0 and my mind is having trouble grasping how to plug the doc.layerSets[0] into a variable that corresponds with the name of the layerset in the checkbox.

Thanks again in advance!