Javascript - setting radio button values when visibility of panels toggled

Community Beginner ,
Mar 05, 2021 Mar 05, 2021

Copy link to clipboard

Copied

I have a dialog which has two panels, each with a group containing radio buttons :

 

dlgPrefs.pnlControls1.grpOptions.rbt1
dlgPrefs.pnlControls1.grpOptions.rbt2
dlgPrefs.pnlControls1.grpOptions.rbt3

 

dlgPrefs.pnlControls2.grpOptions.rbt1
dlgPrefs.pnlControls2.grpOptions.rbt2
dlgPrefs.pnlControls2.grpOptions.rbt3

dlgPrefs.pnlControls2.grpOptions.rbt4
dlgPrefs.pnlControls2.grpOptions.rbt5

 

I use another button to 'toggle' the visibility of the two panels :

 

dlgPrefs.btnToggleVis.onClick = function() {

     if (dlgPrefs.pnlControls1.visible) {
          dlgPrefs.pnlControls1.visible = false;
          dlgPrefs.pnlControls2.visible = true;
          dlgPrefs.pnlControls2.grpOptions.rbt4.value = true; // default when pnlControls2 is visible
     } else {
          dlgPrefs.pnlControls1.visible = true;
          dlgPrefs.pnlControls1.visible = false;
          dlgPrefs.pnlControls1.grpOptions.rbt3.value = true; // default when pnlControls1 is visible
     };

};

 

When I toggle the visibility of the panels I want to 'set' a radio button to be 'on' in the newly visible panel (in the example above it is rbt4 if pnlControls2 is visible, or rbt3 if pnlControls1 is visible).

My problem is that no matter what I've tried, whenever the visibility toggles I always get the last values that were manually set by the user (ie last clicked remains 'on').

 

Any advice would be greatly appreciated, following which you will probably hear me loudly going 'Doh!' from afar.

PS I've hunted high and low for a solution online and in these forums and read the Photoshop Scripting Guide and Photoshop Javascript Reference from start to finish. If anyone can recommend other resources that are more appropriate/comprehensive I'd appreciate that info too!

TOPICS
Actions and scripting, How to, Windows

Views

195

Likes

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

Enthusiast , Mar 06, 2021 Mar 06, 2021
dlgPrefs.pnlControls1.visible = true; dlgPrefs.pnlControls1.visible = false;??? Most likely the problem is in the code that you have not posted. How do you create dialog? #target photoshop var dlgPrefs = new Window("dialog"); dlgPrefs.pnlControls1 = dlgPrefs.add("panel"); dlgPrefs.pnlControls1.grpOptions = dlgPrefs.pnlControls1.add("group"); dlgPrefs.pnlControls1.grpOptions.rbt1 = dlgPrefs.pnlControls1.grpOptions.add("radiobutton"); dlgPrefs.pnlControls1.grpOptions.rbt2 = dlgPrefs.pnlControls1....

Likes

Translate

Translate
Enthusiast ,
Mar 06, 2021 Mar 06, 2021

Copy link to clipboard

Copied

dlgPrefs.pnlControls1.visible = true;
dlgPrefs.pnlControls1.visible = false;

???

 

Most likely the problem is in the code that you have not posted. How do you create dialog?

 

#target photoshop

var dlgPrefs = new Window("dialog");
dlgPrefs.pnlControls1 = dlgPrefs.add("panel");
dlgPrefs.pnlControls1.grpOptions = dlgPrefs.pnlControls1.add("group");
dlgPrefs.pnlControls1.grpOptions.rbt1 = dlgPrefs.pnlControls1.grpOptions.add("radiobutton");
dlgPrefs.pnlControls1.grpOptions.rbt2 = dlgPrefs.pnlControls1.grpOptions.add("radiobutton");
dlgPrefs.pnlControls1.grpOptions.rbt3 = dlgPrefs.pnlControls1.grpOptions.add("radiobutton");

dlgPrefs.pnlControls2 = dlgPrefs.add("panel");
dlgPrefs.pnlControls2.grpOptions = dlgPrefs.pnlControls2.add("group");
dlgPrefs.pnlControls2.grpOptions.rbt1 = dlgPrefs.pnlControls2.grpOptions.add("radiobutton");
dlgPrefs.pnlControls2.grpOptions.rbt2 = dlgPrefs.pnlControls2.grpOptions.add("radiobutton");
dlgPrefs.pnlControls2.grpOptions.rbt3 = dlgPrefs.pnlControls2.grpOptions.add("radiobutton");
dlgPrefs.pnlControls2.grpOptions.rbt4 = dlgPrefs.pnlControls2.grpOptions.add("radiobutton");
dlgPrefs.pnlControls2.grpOptions.rbt5 = dlgPrefs.pnlControls2.grpOptions.add("radiobutton");

dlgPrefs.btnToggleVis = dlgPrefs.add("button{text:'Toggle vis'}");

dlgPrefs.btnToggleVis.onClick = function () {

    if (dlgPrefs.pnlControls1.visible) {
        dlgPrefs.pnlControls1.visible = false;
        dlgPrefs.pnlControls2.visible = true;
        dlgPrefs.pnlControls2.grpOptions.rbt4.value = true; // default when pnlControls2 is visible
    } else {
        dlgPrefs.pnlControls1.visible = true;
        dlgPrefs.pnlControls2.visible = false;
        dlgPrefs.pnlControls1.grpOptions.rbt3.value = true; // default when pnlControls1 is visible
    };

};

dlgPrefs.show();

 

P.S. it is better to use a separate object or variables to store interface elements - it is easier to access them and there will be less confusion.

 

#target photoshop

var dlgPrefs = new Window("dialog"),
pnlControls1 = dlgPrefs.add("panel");
grpOptions1 = pnlControls1.add("group"),
rbt11 = grpOptions1.add("radiobutton"),
rbt12 = grpOptions1.add("radiobutton"),
rbt13 = grpOptions1.add("radiobutton"),

pnlControls2 = dlgPrefs.add("panel"),
grpOptions2 = pnlControls2.add("group"),
rbt21 = grpOptions2.add("radiobutton"),
rbt22 = grpOptions2.add("radiobutton"),
rbt23 = grpOptions2.add("radiobutton"),
rbt24 = grpOptions2.add("radiobutton"),
rbt25 = grpOptions2.add("radiobutton"),

btnToggleVis = dlgPrefs.add("button{text:'Toggle vis'}");

btnToggleVis.onClick = function () {
    if (pnlControls1.visible) {
        pnlControls1.visible = false;
        pnlControls2.visible = true;
        rbt24.value = true; // default when pnlControls2 is visible
    } else {
        pnlControls1.visible = true;
        pnlControls2.visible = false;
        rbt13.value = true; // default when pnlControls1 is visible
    };
};

dlgPrefs.show();

 

 

Likes

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
Community Beginner ,
Mar 06, 2021 Mar 06, 2021

Copy link to clipboard

Copied

Thanks jazz-y, I like the way you have used objects to store the interface elements - it makes such good sense but I was not really aware that this was possible. I had some 'confused' ideas but until now the ability to do this in JS was not really clear to me. I like the way it simplifies the 'readability' of the code and will now go back and clean up my existing work.

 

I've tested your code and it exhibits exactly the behaviour that I want (and expected of my own code 😛 ). I hope that cleaning up my own work will fix some hard to track error that I've introduced. On the last part of the original post I also asked if there were any decent/good reference works that you could recommend? At the moment I am struggling along with books targetted at JS integration with browsers - nothing specific for Photoshop...

 

Thanks again for the assistance and pointers - they are truly appreciated as they relieve the frustration of going around in circles. Cheers!

 

Likes

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
Adobe Community Professional ,
Mar 06, 2021 Mar 06, 2021

Copy link to clipboard

Copied

it is better to use a separate object or variables to store interface elements - it is easier to access them and there will be less confusion.


By @jazz-y

 

I noticed that assigning pointers to controls to ordinary variables (especially complex ones, such as listboxies) leads to memory leaks in Photoshop CC. If possible, it is best to assign them as properties of the dialog object, IHMO.

Likes

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
Community Beginner ,
Mar 06, 2021 Mar 06, 2021

Copy link to clipboard

Copied

Thanks for the heads up r-bin, I'll keep that in mind. Is this problem something that can be manually controlled - say by reassigning the pointers to 'null' after I've finished using them? (I hope this makes sense, please pardon me if it doesn't).

Likes

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
Adobe Community Professional ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

LATEST
In CC, this does not always help and may even be harmful, because they broke something with the garbage collection.
 

Likes

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
Enthusiast ,
Mar 06, 2021 Mar 06, 2021

Copy link to clipboard

Copied

If we use {name} in creation parameters, then the desired property is created in the parent object - in this case, one variable (to strore parent object) is enough to access all controls by name.

 

var dlgPrefs = new Window('dialog'), u;
dlgPrefs.add('panel',u,u,{name:'pnlControls1'});
dlgPrefs.pnlControls1.add('group',u, {name:'grpOptions'});
dlgPrefs.pnlControls1.grpOptions.add('radiobutton',u,u,{name:'rbt1'});
dlgPrefs.pnlControls1.grpOptions.add('radiobutton',u,u,{name:'rbt2'});
dlgPrefs.pnlControls1.grpOptions.add('radiobutton',u,u,{name:'rbt3'});

dlgPrefs.add('panel',u,u,{name:'pnlControls2'});
dlgPrefs.pnlControls2.add('group',u, {name:'grpOptions'});
dlgPrefs.pnlControls2.grpOptions.add('radiobutton',u,u,{name:'rbt1'});
dlgPrefs.pnlControls2.grpOptions.add('radiobutton',u,u,{name:'rbt2'});
dlgPrefs.pnlControls2.grpOptions.add('radiobutton',u,u,{name:'rbt3'});
dlgPrefs.pnlControls2.grpOptions.add('radiobutton',u,u,{name:'rbt4'});
dlgPrefs.pnlControls2.grpOptions.add('radiobutton',u,u,{name:'rbt5'});

dlgPrefs.add('button',u,'toggle vis', {name:'btnToggleVis'});

dlgPrefs.btnToggleVis.onClick = function () {

    if (dlgPrefs.pnlControls1.visible) {
        dlgPrefs.pnlControls1.visible = false;
        dlgPrefs.pnlControls2.visible = true;
        dlgPrefs.pnlControls2.grpOptions.rbt4.value = true; // default when pnlControls2 is visible
    } else {
        dlgPrefs.pnlControls1.visible = true;
        dlgPrefs.pnlControls2.visible = false;
        dlgPrefs.pnlControls1.grpOptions.rbt3.value = true; // default when pnlControls1 is visible
    };

};

dlgPrefs.show();

 

I only encountered memory leaks when used closures (that is, when a function containing an object with a control returned another (reusable) function that had access to the internal variables of the original function).

 

@BobDotS

good reference: https://creativepro.com/files/kahrel/indesign/scriptui.html

 

Likes

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
Community Beginner ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

Thanks again @jazz-y  - the reference document that you linked to is *exactly* what I've needed. I've already tried out several of the example scripts and they work very nicely. I've also found elegant solutions that will replace several 'kludges' that I've built (where I didn't know the elegant solutions already existed). This is the sort of thing that Adobe should keep pined somewhere at the top of these forums. I think it would immediately weed out a lot of queries like mine. Once again thank you for taking the time to lend me your expertise - it is greatly appreciated.


One question if I may - does Javascript in Photoshop include the Treeview? I've used it previously when working with VB, but when I tried the example from the reference it failed to run - I got a window but no Treeview (which may be because the example was specific to InDesign, or perhaps due to an error on my part...)

Likes

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
Enthusiast ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

No, Photoshop does not support treeview

Likes

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
Adobe Community Professional ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

In CS6 and up to CC2015 it supports.

Likes

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