Javascript - setting radio button values when visibility of panels toggled

[BobDotS]

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!

[jazz-y · Accepted solution]

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

[BobDotS]

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!

[r-bin]

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.

[BobDotS]

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

[r-bin]

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

[jazz-y]

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

[BobDotS]

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

[jazz-y]

No, Photoshop does not support treeview

[r-bin]

In CS6 and up to CC2015 it supports.