CS-Lab Support Forum for CNC Community

Help to run this brand-new forum and stay with us.
Ask your questions, we are here to help!

ForumCSMIO/IP controllers and Software - discussion forum: CSMIO/IP with simCNC softwarecheckbox as toggle switch

You need to log in to create posts and topics.

checkbox as toggle switch

#1 · 7 October 2024, 12:10

Hi CS-Lab Support,

I want to use a checkbox as a selection switch for two options. I wrote it in the CSS file as follows:

[group="chBoxToggle"]:indicator {
width: 30px;
height: 30px;
margin-bottom: 5px;
}

[group="chBoxToggle"]::indicator:unchecked {
image: url("C:/Program Files/simCNC/screens/carbonkid_vertical_de_v018_2/Icons/Icons_white/toggle_X.png");
}

[group="chBoxToggle"]::indicator:checked {
image: url("C:/Program Files/simCNC/screens/carbonkid_vertical_de_v018_2/Icons/Icons_white/toggle_Y.png");

Unfortunately, that doesn't work. Now the question is why, did I make a mistake or is that not something you have planned for yet? What options do I have for implementing this? Can you please help, thanks.

#2 · 8 October 2024, 07:58

As far as I remember this checkbox does not support any changes.

#3 · 8 October 2024, 12:39

I have a solution now. I just did it with a color gradient, that's enough. Unfortunately you can't position the text for the checkbox differently, maybe you can integrate it at some point so that you can position the text below, above and to the left of the box. CSS is enough.

Uploaded files:

#4 · 9 September 2025, 11:22

Could you tell me how you created the toggle switch?

Thanks

reazor

#5 · 21 September 2025, 11:43

Quote from reazor on 9 September 2025, 11:22

Hi

Could you tell me how you created the toggle switch?

Thanks

reazor

Hello, sorry for the late reply, but I was on vacation. Cooleyomar4 already described it correctly; this is how I did it. I created a checkbox in the style.css that visually reflects the state. The script then queries the checkbox's state.

[group="chBox_your checkbox name"]:indicator {
width: 50px;
height: 30px;
margin-bottom: 5px;
border-radius: 5px;
}

[group="chBox_your checkbox name"]::indicator:checked {
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #7CFC00, /* 30% green */
stop: 0.3 #7CFC00, /* 30% green */
stop: 0.3 #808080, /* 70% grey */
stop: 1 #808080); /* Endpoint grey */;
}

[group="chBox_your checkbox name"]::indicator:unchecked {
background: qlineargradient(x1: 1, y1: 0, x2: 0, y2: 0,
stop: 0 #7CFC00, /* 70% grey */
stop: 0.3 #7CFC00, /* 70% grey */
stop: 0.3 #808080 , /* 30% green */
stop: 1 #808080 ); /* Endpoint green */;
}

Evaluation of the checkbox in the script:
if not gui.chBox_your checkbox name.getCheckboxState():
if gui.chBox_your checkbax name.getCheckboxState():

I hope this helps you.