Photoshop UI button toggle (scripting)

[Polycontrast]

When using a Photoshop dialog the application functionality is suspended until the dialog revolves.

At the same time, while the dialog is open, can a UI button toggle a script function on/off?

[Akash Sharma]

Hi there,

Not sure if I understand correctly, could you please elaborate and provide some more details about the issue?

Also, which version of Photoshop and the operating system you're working with? In Photoshop, you can check that by going to Help > System Info

A screenshot illustrating the issue would help us better to diagnose the issue.

Thanks,

Akash

[Polycontrast]

Trying to find out if it is possible to create a toggle button in a script UI dialog.  The idea is to have the dialog open and use the toggle button to switch on/off the visibility of a specific layer in a layer group.  In the example below the toggle button turns on the visibility of the adjustment layer Hue/Sat and closes the UI.

Environment

Photoshop 2020

OSX Catalina

[jazz-y]

How can Scriptui SnpCreateDialog.jsx be changed to make "palette" that doesn't disappear?

[Charu Rajput]

Hi,

Please try below snippet if this helps you. You can add or change functionality on click of "Toggle" button as required.

var dialog = new Window("dialog");
dialog.text = "Dialog";

dialog.orientation = "column";
dialog.alignChildren = ["center", "center"];
dialog.spacing = 10;
dialog.margins = 16;
var panel = dialog.add('panel', undefined, 'Panel');
var toggleButton = panel.add('button', undefined, 'Toggle', {
    name: 'Toggle'
});

toggleButton.onClick = function () {
    app.activeDocument.activeLayer.visible =  !app.activeDocument.activeLayer.visible;
    // Add more or change code as required.
};

var exitButton = panel.add('button', undefined, 'Exit', {
    name: 'Exit'
});

exitButton.onClick = function () {
    dialog.close();
}

dialog.show();

Let us know if this helps you

[Polycontrast]

Thank you for considering my question. The UI button toggle only turns the layer eye on/off while the UI is open. When the UI collapses the layer content turns on/off. This might be a limitation of the UI dialog which suspends Phosotshop activity. Is there a workaround that allows the toggle button to turn the layer visibility content on/off while the UI dialog is open?  

TURNS THE LAYER EYE ON/OFF WHILE THE UI IS OPEN

toggleButton.onClick = function () {

app.activeDocument.activeLayer.visible = !app.activeDocument.activeLayer.visible;

// Add more or change code as required.

};

TURNS THE LAYER VISIBILITY ON/OFF AND COLLPASES THE DIALOG

toggleButton.onClick = function () {

app.activeDocument.activeLayer.visible = !app.activeDocument.activeLayer.visible;

dialog.close();

// Add more or change code as required.

};

[jazz-y · Accepted solution]

(this decision was at the link above)

#target photoshop
var bt = new BridgeTalk(),
    ph = BridgeTalk.getSpecifier('photoshop'),
    buildWindow = function () {
        var z = Window.find('palette', 'Toggle visiblity');
        if (z) {
            z.show();
            return;
        }

        var dialog = new Window("palette");
        dialog.text = "Toggle visiblity";

        dialog.orientation = "column";
        dialog.alignChildren = ["center", "center"];
        dialog.spacing = 10;
        dialog.margins = 16;
        var panel = dialog.add('panel', undefined, 'Panel');
        var toggleButton = panel.add('button', undefined, 'Toggle', {
            name: 'Toggle'
        });

        toggleButton.onClick = function () {
            app.activeDocument.activeLayer.visible = !app.activeDocument.activeLayer.visible;
        };

        var exitButton = panel.add('button', undefined, 'Exit', {
            name: 'Exit'
        });

        exitButton.onClick = function () {
            dialog.close();
        }

        dialog.show();
    }
bt.target = ph;
bt.body = "var f=" + buildWindow.toSource() + ";f();";
bt.send();

[Polycontrast]

Here is a sequence of screenshots that illustrate the process with the palette UI. 

Wondering if it is possible to achieve a toggle effect with a Photoshop HTML panel?

1-Run script

2- Toggle button

3- Close palette button

4-Change application focus

4- Return application focus to Photoshop.

Palette UI persists.

Close button does not work.

5- Force quit Photoshop to close palette.

[Charu Rajput]

Hi,

Sorry for the late response. Yes, you can deveop the the panel (extension) for Photoshop using HTML, CSS and Javascript. That can do same functionality. Creating CEP panel will allow you to interact with the Photoshop as well when the panel is open.

For CEP panel development, please follow following links

A SHORT GUIDE TO HTML5 EXTENSIBILITY

Starting Photoshop HTML5 Extension development

All limitations will be removed in HTML extensions.

Let us know if this helps you.

[jazz-y · Accepted solution]

@Polycontrast use

 exitButton.onClick = function () {
            dialog.hide();
        }

instead

 exitButton.onClick = function () {
            dialog.close();
        }​

[Polycontrast]

Awesome, that works great thank you! I have not seen these hybrid Bride/Photoshop UI palettes in Photoshop before. Is there a way to have the palette active when the script runs? At the moment, the palette is inactive and needs to be activated.

[jazz-y]

try to add before line with dialog.show () function:

 dialog.onShow  = function (){
            this.active = true;
        }

(this will not make the window title active, but its contents will be active). The problem is relevant only in OSX.

The 'palette' mode is an artifact from the past, the grandfather of modern html panels.

[Polycontrast]

Yes, that enables the palette when the script runs. Many thanks again! 

The idea that I am investigating is to have a list of toggle buttons in a palette. To make this, I added additional buttons, variables, functions, function-call, and switch statements to the script. When I test it outside the UI palette the switch and functions work. When I test it in the UI palette it does not work.

Is this possible with the palette UI? What am I doing wrong?

#target photoshop

var bt = new BridgeTalk(),

ph = BridgeTalk.getSpecifier('photoshop'),

buildWindow = function () {

var z = Window.find('palette', 'Toggle visiblity');

if (z) {

z.show();

return;

}

var dialog = new Window("palette");

dialog.text = "Toggle visiblity";

dialog.orientation = "column";

dialog.alignChildren = ["center", "center"];

dialog.spacing = 10;

dialog.margins = 16;

var panel = dialog.add('panel', undefined, 'Panel');

var toggleButton1 = panel.add('button', undefined, undefined, { name: 'toggleButton1' });

toggleButton1.text = "Layer 1";

toggleButton1.onClick = function () {

var toggleLayer = toggleButton1.text;

main(toggleLayer);

};

var toggleButton2 = panel.add('button', undefined, undefined, { name: 'toggleButton2' });

toggleButton2.text = "Layer 2";

toggleButton2.onClick = function () {

var toggleLayer = toggleButton2.text;

main(toggleLayer);

};

var toggleButton3 = panel.add('button', undefined, undefined, { name: 'toggleButton3' });

toggleButton3.text = "Layer 3";

toggleButton3.onClick = function () {

var toggleLayer = toggleButton3.text;

main(toggleLayer);

};

var toggleButton4 = panel.add('button', undefined, undefined, { name: 'toggleButton4' });

toggleButton4.text = "Layer 4";

toggleButton4.onClick = function () {

var toggleLayer = toggleButton4.text;

main(toggleLayer);

};

var toggleButton5 = panel.add('button', undefined, undefined, { name: 'toggleButton5' });

toggleButton5.text = "Layer 5";

toggleButton5.onClick = function () {

var toggleLayer = toggleButton5.text;

main(toggleLayer);

};

var exitButton = panel.add('button', undefined, 'Exit', {name: 'Exit'});

exitButton.onClick = function () {

dialog.hide();

}

dialog.onShow = function (){

this.active = true;

}

dialog.show();

}

bt.target = ph;

bt.body = "var f=" + buildWindow.toSource() + ";f();";

bt.send();

function main(toggleLayer) {

if (app.documents.length > 0) {

var layerName = toggleLayer;

// switch

var toggleLyr = layerName;

switch (toggleLyr) {

case 'Layer 1':

toggleSwitch(layerName);

break;

case 'Layer 2':

toggleSwitch(layerName);

break;

case 'Layer 3':

toggleSwitch(layerName);

break;

case 'Layer 4':

toggleSwitch(layerName);

break;

case 'Layer 5':

toggleSwitch(layerName);

break;

default:

alert ("The layer "+toggleLyr+" was NOT found.");

}

}

}

function toggleSwitch(layerName){

app.activeDocument.activeLayer.visible = !app.activeDocument.activeLayer.visible;

}

[jazz-y]

Bridge talk executes a completely independent instance of a function. That is, the code that you send to bt.body does not have access to other functions and variables of the main script. This also imposes restrictions on debugging - you cannot use breakpoints in this code, so you need to use alert () and a try ... catch block in problem places.
To solve this problem, you need to either put all the necessary functions and variables inside bt.body, or by pressing the buttons in the standalone window, call the main script again with certain arguments that will allow it to perform the necessary functions.

[Polycontrast]

It makes sense but still lost with Bridge scripting. How would you wrap the functions and variables in the bt.body? The following codes creat an undefined alert.

////////////////////////////////////////////

var toggleButton1 = panel.add('button', undefined, undefined, { name: 'toggleButton1' });

toggleButton1.text = "Layer 1";

toggleButton1.onClick = function () {

var theLayer = toggleButton1.text;

lyrToggle(theLayer);

};

bt.target = ph;

bt.body = lyrToggle(theLayer);

bt.body = "var f=" + buildWindow.toSource() + ";f();";

bt.send();

function lyrToggle(theLayer) {

alert(theLayer);

}

[jazz-y]

Unfortunately, I do not have now much time to help you in detail. Try to output the text bt.body to file:

 f = File(Folder.desktop + "/independentlyExecutableFunction.jsx");
    f.open('w');
    f.encoding = 'text';
    f.write(bt.body);
    f.close();

This will help you understand exactly what code is using BridgeTalk and what needs to be added to it so that it can do whatever you want.

[Polycontrast]

Thank you Jazz-y. I will investigate it. I really appreciate your help!

[Polycontrast]

Interesting to see the palette UI. They do allow interaction with Photoshop which is great. The issue is that the close button does not terminate the palette. It closes the palette temporarily. The next time the focus is on the Photoshop application the palette UI returns and Photoshop must force quit to close the palette UI.

[jazz-y]

Yes. It is because of this feature that when you re-run the script, the palette is not created again, but the previously created one is called.