Changing a switch's colors according to its own value

of course you are not included into my 'people' (évidemment).
Evidemment je ne parlais pas de toi ! :slight_smile: vu le boulot et les réponses que tu fournis, je ne me permettrai pas. Je dis simplement qu'on aurait tous à y gagner si, sur ce forum, une fois la solution trouvée, les intervenants concluaient par une explication, si possible, et un fichier json de leur session. C'est en voyant du code propre à o-s-c qu'on apprendra à s'en servir. Même si ce sont des cas particuliers, des installations propres à l'utilisateur, c'est toujours intéressant. voilà voilà et t'inquiète je ne l'ai pas mal pris. J'ai passé l'âge -:slight_smile:
ps : ah oui lorsqu'on arrive sur le site du projet aucun lien visible vers ce forum


Good evening,

So thanks to your help, i propose this.

A little bug to consider. If i put colorFill to false (is it the good way ?) instead of using auto not to fill the button (it works) then finally, change my mind and click on the color selector square, choose a color, the color is not applied.
switch-values-colors.json (3.8 KB)

false is not a valid color (there's an error in the console when trying to submit this value). What happens next is that the color picker starts with alpha of 0, hence your change not being visible.

ps : ah oui lorsqu’on arrive sur le site du projet aucun lien visible vers ce forum


Yes of course. To get the colorFill not appear when on, use AlphaFillOn to 0.

Cool ! Merci !

A little question : let’s say we want to set colorFill to a value when click on. How can we do have access to the propriety colorFill, colorStroke etc. ?

In the css property’s help, the css variables associated to colorFill and similar properties are listed.

ok so i go further on button and syntax :slight_smile:

I manage to set an image as a background but 2 questions:

  • is it possible to use the font awesome volume up button as a background-image ? What syntax ?
  • is it possible to insert this icon before the text.

the idea would be to increase the icon size for each button to illustrate the volume up normal, loud etc. by increasing the size of this icon. A bit challeging for now…

As someone has an idea ?

I don't think so.

is it possible to insert this icon before the text.

Yes with the same syntax you used in the button. Maybe I'm missing the issue here though.

the idea would be to increase the icon size for each button to illustrate the volume up normal, loud etc. by increasing the size of this icon. A bit challeging for now…

There's an example for this use case here Feature demo : property inheritance, scripting, clones

ah ! i catch it
but no space between the icon and the text.
a way via html to do that ?

css: white-space: pre;
It should be the default though, will fix

i think about using the css ::before


  • but how to sibling the good element ?
  • can we use font-awesome icon ?
    An idea ?

edit : yes an idea

next step :slight_smile:

Finally it works with svg too :slight_smile:

Now the idea would be to get the base64 value for the font awesome volume-up icon…

Get this



Now have to find a way to change the size. But i fear that the color is coded into the base64 string. No ?

edit : probably a way to go further.

If you stick to using the ^icon syntax, you could change the icon’s size with

i {
  font-size: /*etc*/;

well the i “system”, no chance to let appear the icon only when value.on ? How to change the value of the text dynamically if the button is on ? a test on the class value.on. Stop here for today :slight_smile:

value.on i {/* etc */}

Yep you were right as usual to advice to tick to the i solution.

So it works as wished with different sizes on icons


In the css field:

  var myFontColors = ["white", "rgb(0,0,0)","#ddd", "white" ] 
  var myBgColors = ["green", "hsl(45, 95%, 50%)", "hsl(2, 90%, 40%)", "hsl(2, 95%, 50%)"]
  var sizes = ["1", "1.75", "2", "2.2"]
  var c = @{this.value}

/* locals to store variables to be reused into the css part */
  locals.fontColor = myFontColors[c]
  locals.bgColor = myBgColors[c]
  locals.iconSize = sizes[c]

  locals.couleur = "hsl(5, 50%, 90%)"
// fin de javascript
/* Start of css */

value.on {
padding: 40;
margin: 20;
color: #{locals.fontColor};  
/*  color: #{locals.couleur}; */
background: #{locals.bgColor}; 

/* use the syntax --color-fill for the propriety colorFill */
--color-fill : white;
--alpha-fill-on: 0.25;
/* font-size: 1.25em; */

/* font-size icons + text */
  font-size: #{locals.iconSize}em;


/* icon not displayed */
i { display:none; }

value.on i {
  display: block;
  margin-right: 0.5em;
  font-size: #{locals.iconSize}em;


So it’s cool no ?
By the way, talking about button, let say we want a single button with 3 states :

  • off > first state, a text is displayed with a background color green
  • first tap > second state another text is displayed with a background color orange
  • second tap > third state another text is displayed with a background color red
  • then one more tap, back to the state off, green color.

a kind of circular button. Is it possible ? une piste ?

1 Like

thanks for sharing!

1 Like

There's a little example for incrementing a variable widget with a button in Feature demo : property inheritance, scripting, clones (scripting.json), seems like a good starting point.