Changing a switch's colors according to its own value

Community Usage questions
1

I want to change a toggle’s background and front colors according to its own value (that is, the selected button).

I have tried this code but it doesn’t function:
.value.on {
margin:0;
border:0;
#{
my_bcolors = [“blue”, “violet”, “violet” , “violet”, “violet”, “green”, “green”, “green”, “green”, “yellow”];
my_fcolors = [“white”, “white”,“white”,“white”,“white”,“white”,“white”,“white”,“white”, “black”];
couleur = @{this.value};
color:my_fcolors(couleur);
background:my_bcolors(couleur);
}
}

What’s wrong with my code?

2

There are many issues here:

  • you are using invalid double quotes characters (maybe referred to as “smart quotes”, never ever use these in programmation languages, stick to the basic ")
  • your formula (the #{} block) doesn’t output anything because all lines end with semi-colons
  • my_fcolors(couleur) is not valid, you should write my_fcolors[couleur] using brackets instead of parenthesis
  • these statements are invalid:
color:my_fcolors(couleur);
background:my_bcolors(couleur);

You are mixing css and mathjs syntaxes here, mathjs syntax must be stricltly respected inside #{} blocks.

When your code is getting complicated, it can help to separate the calculation from the rendering:

#{
  my_bcolors = ["blue", "violet", "violet" , "violet", "violet", "green", "green", "green", "green", "yellow"];
  my_fcolors = ["white", "white","white","white","white","white","white","white","white", "black"];
  couleur = @{this.value};
  color = my_fcolors[couleur];
  bcolor = my_bcolors[couleur];
  # variables are computed but not printed
}
.value.on {
  margin:0;
  border:0;
  /* now we use them */
  color: #{color};
  background: #{bcolor};
}
3

Thanks a lot, it makes all this stuff much more clear to me!

4

Is this supposed to work with V1.7.3 ?
I put this example in the css property of a switch, but it doesn’t seem to do anything…

thanks…

5

No it’s not, it was for v0. In v1 it would look like this

JS{{
  var my_bcolors = ["blue", "violet", "violet" , "violet", "violet", "green", "green", "green", "green", "yellow"]
  var my_fcolors = ["white", "white","white","white","white","white","white","white","white", "black"]
  var c = @{this.value}
  locals.color = my_fcolors[c]
  locals.bcolor = my_bcolors[c]
}}
value.on {
  margin:0;
  border:0;
  /* now we use them */
  color: #{locals.color};
  background: #{locals.bcolor};
}
6

Thank you the css looks fine now, but the color doesn't change ?

i want to automatically color the buttons depending on the values

{
"off" : "00",
"wah": "01"
}

"00" means grean, "01" means red, etc... (standard switch widget)

7

The above codes uses arrays to store the colors, you can only access array items using integers. If you want to use arbitrary values (such as “01”), you’ll need to use an object instead.
Short generic example:

var colors = {
  "aa" : "red",
  "bb" : "blue"
}
var x = "aa"

console.log(colors[x]) // red
8

i use parseInt to get an integer.
In the css property under computed value:

.value.on {
color: red;
}

so everything seems fine, but no red color anywhere, sorry for being unclear..

9

A little mistake in my code, replace .value with value.

10

AWESOME, i thought it was a class hence “.” -> thank you!

11

Hi,

Just to learn a bit more, i try and it fails.

image
image835×540 28.3 KB

version 1.7.4
An idea

12

In the property values, you should have some Key-value pairs. value.on selects a tag “value” with class “on”. if you have just one switch, i am not sure if there is a class “on”, try more…

13

@Greenman the code was supposed to work with a switch widget. A button widget does not contain any html value element that would be affected by the css.

14

Ok my bad.
But except the fact that i’m dumb not to have see it was a switch, it would be nice if people publish a little json session file to allow others to learn how to use o-s-c.
O-s-c is a free software no ? So the philosophy is to share to learn together. Bref…

15

I’m not saying you’re dumb and I’m sorry if it sounded like it.

However I do believe the explanations above are far from cryptic and I’m not convinced providing a session file with every answer I give is the best solution.

Within O-S-C, css is a way to hack things around if you take the time to learn how it works, along with some general html logic which it’s tied to. I can’t possibly support every use case because there are just so many of them, and I find your answer a bit harsh considering the fact I actually try to give examples most of the time.

16

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

image

17

Good evening,

So thanks to your help, i propose this.

image
image842×732 36.9 KB

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)

18

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

fixed

19

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

20

Cool ! Merci !