toggle button

Photoshop Script Snippets - Note: Full Scripts go in the Photoshop Scripts Forum

Moderators: Tom, Kukurykus

Patrick

toggle button

Post by Patrick »

I am making a menu that will have several icon buttons, and I wanted to have it so the user can interact with several buttons, like form checkbox elements. Every icon has 2 images, a off state (raised) and a on state (sunken) to give them a visual reference to what the current state is for that option.

It is more work than the checkbox type, but it looks nicer and allows me to have pictures to choose from instead of just text.

Code: Select all// sample dialog with 2 icon buttons
var win = new Window("dialog{text:'Script Interface',bounds:[100,100,264,410],\
    ico0:IconButton{bounds:[10,10,154,154] , icon:'/c/off.png',properties:{style:'button'}},\
    ico1:IconButton{bounds:[10,160,154,304] , icon:'/c/off.png',properties:{style:'button'}},\
};");

// start both buttons as off
ico0state = 0;
ico1state = 0;

// ico0 button
win.ico0.onClick = function() {
    // if it is currently off
    if (ico0state == 0) {
        // change it to on
        ico0state = 1;
        this.icon = '/c/on.png';       
    }
    // if it is current on
    else if (ico0state == 1) {
        // change it to off
        ico0state = 0;
        this.icon = '/c/off.png';       
    }       
}

// ico1 button
win.ico1.onClick = function() {
    // if it is currently off
    if (ico1state == 0) {
        // change it to on
        ico1state = 1;
        this.icon = '/c/on.png';       
    }
    // if it is current on
    else if (ico1state == 1) {
        // change it to off
        ico1state = 0;
        this.icon = '/c/off.png';       
    }       
}

// show dialog
win.center();
win.show();

// after you close the dialog, the status is available in the state variables
// 0 = off
// 1 = on
alert("ico0: "+ ico0state +"\nico1: "+ ico1state);

I attached the code and sample PNG images.