iconButton that behaves like a checkBox

[RedyCode]

Hey,

I was just wondering, is there a way to have an iconButton that behaves like a checkBox in the UI of a script?

Thanks in advance,
Redy

[Mrtn Ritter]

Should be doable, it you add a bool to the button function. 

On init, the bool is false. On click, use a if statement to do the switch:

if bool true 

   bool false

else 

   bool true

*Martin

[RedyCode]

Why didn't I think about that 🤦‍:male_sign:

That technically works just fine but the button doesn't stay clicked in the UI

Video go for example at 7:00, as you can see the blue buttons on his script stay clicked, that's pretty much what I want to do

Thank you so much,
Redy

[Mrtn Ritter]

The button don't stay clicked, technically spoken. But like you apply the bool, you just switch the color of the button, so it appears highlighted.

*Martin

[RedyCode]

Excatly what I thought! What would be the best way to change the color tho? By changing the image?

[Mrtn Ritter]

I never used image buttons before, but from what I have seen in the source folders of other script, this is the workflow. They use a normal button image and a highlight button image.

*Martin

[RedyCode]

Thank you so much for all of those answers! Works just fine

[RedyCode · Accepted solution]

For anyone wondering, this is the code I ended up using ( I'm really not a coder, so this might not be the best way to do it, the best way is probably with an object or an array including all of the images )

It's basically an image, that by default is clicked and you can click on it to turn it on or off. It also detects when the mouse is over the button to put an image that looks like it's selected.



* Make sure you use the actual path to the image, not a binary string because it won't work *

var thisFolder = File($.fileName).path

// MY STYLES
var myStylesNotClicked = File(""+thisFolder+"/Styles/Images/MyStylesNotClicked.png");
var myStylesMouseOver = File(""+thisFolder+"/Styles/Images/MyStylesMouseOver.png");
var myStylesClicked = File(""+thisFolder+"/Styles/Images/MyStylesClicked.png");
var myStylesClickedMouseOver = File(""+thisFolder+"/Styles/Images/MyStyleClickedMouseOver.png");

var bool = true;

var image2 = group1.add("image", undefined, File.decode(myStylesClicked), {name: "image2"}); 
    image2.addEventListener("mouseover", image2MouseOver, false);
    image2.addEventListener("mouseout", image2MouseOut, false);
    image2.addEventListener("click", image2Click, false);

    function image2MouseOver() {
        if (bool == true) {
            updateImage(image2, myStylesClickedMouseOver);
        } else {
            updateImage(image2, myStylesMouseOver);
        }
    }
    function image2MouseOut() {
        if (bool == true) {
            updateImage(image2, myStylesClicked);
        } else {
            updateImage(image2, myStylesNotClicked);
        }
    }
    function image2Click() {
        if (bool == true) {
            bool = false;
            updateImage(image2, myStylesMouseOver);
        } else {
            updateImage(image2, myStylesClickedMouseOver);
            bool = true;
        }
    }

function updateImage(icon, state) {
    icon.image = ScriptUI.newImage(state);
}

[Mrtn Ritter]

Nice!

Indeed, using an array can simplify this. You can name your files like 0,1,2,3, knowing that 0 is notclicked, 1 is mouseover and so on. Than you just increase or decrease a counter which work as array index to point to the imagefile path. On the other hand: if it works, it works 🙂

You should not name a variable "bool". I used "bool" in my example code to show you the data type. You won't know what your "bool" is for in a few weeks. I wouldn't use "image2" or "group1" either. This will be hard to manage in the future or for others.

I think instead of "if (bool == true)" you can write "if (bool)", because bool is true or false already. This way, you can create good to ready code like: "if (button_activated)". I don't know what your "bool" actualy does, so this is just an example.

*Martin

[RedyCode]

Hey,

This "bool" was just tempopary ( it's already changed, of course )

Thank you so much for all those tips, this is really gonna help me!

RedyMotion