Legend

Answered

Replace image in UI

Forum|Forum|11 years ago
August 27, 2014
2 replies
1420 views

Hi guys.

I am building (trying to) custom checkbox. For that I have two images: imgON and imgOFF that represent the checkbox value - if checkbox is ON the imgON is displayed, if checkbox is OFF imgOFF is displayed.

But I cannot figure out how to switch those images, once user press the button (checkbox), any ideas?

var win = new Window("palette", "Settings", undefined);

var imgON = "/Users/renderTom/Desktop/Custom\ Checkbox/checkON.jpg";

var imgOFF = "/Users/renderTom/Desktop/Custom\ Checkbox/checkOFF.jpg";

var button = win.add("iconbutton", undefined, ScriptUI.newImage(imgON, undefined, imgOFF, imgON), {style:'toolbutton'});

win.show();

button.onClick = function() {

// if current button is imgON -> change it to imgOFF

// if current button is imgOFF -> change it to imgON

}

Thanks in advance,

Scripting

This topic has been closed for replies.

Correct answer Paul Tuersley

In my quick test I found that if you just replaced:

{style:'toolbutton'}

in your first example (where you add the button), with:

{style:'toolbutton', toggle:true}

it would do what you want. The icon button would 'turn on' and the icon would switch.

P

Paul Tuersley

Inspiring

It's not entirely clear what you're trying to do. When you refer to checkbox do you mean the iconbutton is your checkbox?

You've defined both images so you should see it changing when you click the button, but for it to work as a checkbox you need to enable its toggle mode:

{style:'toolbutton', toggle:true}

Otherwise, if you wanted to change the icon based on a separate checkbox control you could just change it in that checkbox's onClick function using:

button.image = someOtherImage;

but that only changes the "off" icon, I'm not sure how you would access the other one.

Tomas SinkunasAuthor

Legend

Sorry for not being clear. I am having difficult times explaining what I mean:)

To be honest, all I need (under the hood) is an button-image, that changes to another image once it's clicked on. Visually this button looks as a checkbox. So once you press on it, it changes to OFF state, then to ON state, then to OFF state and so on.

Image talks a million words, so I attach two images to show what I mean about "checkbox".

My last reply works great, two buttons (images) are on top of each other. And their visibility is toggled once one button is pressed. Hope that makes any sense.

However, have no idea how to use {toggle:true}, or is it irrelevant now?

P

Paul TuersleyCorrect answer

Inspiring

In my quick test I found that if you just replaced:

{style:'toolbutton'}

in your first example (where you add the button), with:

{style:'toolbutton', toggle:true}

it would do what you want. The icon button would 'turn on' and the icon would switch.

Tomas SinkunasAuthor

Legend

So I figured it out, after spending more time on forum.

I ended up adding buttons to Group that's orientation is Stack.

And once button is clicked, I just toggle visibility.

var win = new Window("palette", "Settings", undefined);

var imgON = "/Users/renderTom/Desktop/Custom\ Checkbox/checkON.jpg";

var imgOFF = "/Users/renderTom/Desktop/Custom\ Checkbox/checkOFF.jpg";

var myGrp = win.add("group");

myGrp.orientation = "stack";

var button = myGrp.add("iconbutton", undefined, ScriptUI.newImage(imgON, undefined, imgOFF, imgON), {style:'toolbutton'});

var buttonOFF = myGrp.add("iconbutton", undefined, ScriptUI.newImage(imgOFF, undefined, imgON, imgOFF), {style:'toolbutton'});

win.show();

button.onClick = function() {

button.visible = false;

buttonOFF.visible = true;

}

buttonOFF.onClick = function() {

buttonOFF.visible = false;

button.visible = true;

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded