Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[le0]

Hallo zusammen,
dank @liv-in-sky in dem Thread "VIS Background Color mit Datenpunkt steuern" schaffe ich es nun, die Farbe eines Widgets Abhängig von zwei Werten wechseln zu lassen...

Ich versuche nun aber seit Stunden das ganze mit vier Werten hinzubiegen. Aber irgendwie komme ich nicht drauf...
Gewünscht wäre: 1=grün 2=gelb 3=rot 4=rot-blinken
Für das Blinken habe ich auch eine css-Klasse sollte diese irgendwie einzubauen sein

Für jegliche Hilfe wäre ich sehr dankbar :)

[OliverIO]

@le0

das würde dann so aussehen.
das ist der ternäre operator mehrfach verschachtelt.
erst der vergleich, wenn der zutrifft dann der wert und die abfrage des nächsten wertes im falschteil
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
leider nicht sehr lesbar und bei der notation muss man höllisch aufpassen, sonst funktioniert es nicht. aber hast du sicherlich gemerkt

a==1?"grün":a==2?"gelb":a==3?"rot":a==4?"blinken":"fehler"

hier das selbe nochmal mit klammern, das man besser die verschachtelung sieht. klammern brauch man nicht

(a==1?"grün":(a==2?"gelb":(a==3?"rot":(a==4?"blinken":"fehler"))))

ich rate dir diesen ausdruck in das vis-feld mit der css klasse zu schreiben
und für jeden fall dann eine selparate css-klasse zu schreiben.
ansonsten wird es komplizierter, da du den ausdruck im farbfeld und in der css-klasse schreiben musst

[le0]

@oliverio sagte in vis widget Farbe Datenpunktabhängig:

(a==1?"grün":(a==2?"gelb":(a==3?"rot":(a==4?"blinken":"fehler"))))

So hatte ich es Probiert, aber mit den Klammern ist es deutlich übersichtlicher und ich konnte meinen Fehler finden. Danke dir:) Jetzt wechseln schonmal die Farben, aber nur in HEX-Code. Versuche ich mit class="green" oder classNAME="green" die Farbe zu ändern geht das wieder nicht -.- . Die CSS-Klassen sind natürlich angelegt und Funktionieren sonst auch...

{val:Datenpunkt.ID; (val==1? classNAME="green" : "#f44336"}

Was übersehe ich?

[OliverIO]

@le0
du versuchst hier den wert einer variable zuzuweisen die es nicht gibt.
ausserdem funktioniert in diesem operator die zuweisen nicht so (es ist kein if ersatz)

im abschnitt generell gibt es das hier, dort eintragen

im reiter css trägst du dann deine css anweisungen ein so wie folgt

green {
   color:"green";
}
red {
   color:"red";
}
yellow {
   color:"yellow";
}
blinken {
  //hier deine css anweisungen für blinken
}

noch besser wäre den css selektor namen etwas spezifischer machen. wenn irgendwo sonst auf der html seite auch noch ein klassennamen green existiert, dann beeinflusst du diesen unter Umständen, besser wäre sowas zu verwenden.

meinAnwendungszweck-green [
}

oder ihn nur für dieses eine widget gültig zu machen. w00000 natürlich gegen die echte widgetnummer tauschen

#w00000 green {
}

[le0]

@oliverio
es Funktioniert!

musste den Css code bisschen anpassenund irgendwie wird es nicht akzeptiert wennich einfach nur

yellow {
   color:"yellow";
}

eingebe. Definiere ich die Farbe aber über Filter dann geht es... mein Css-code für Rot&Rot_Blinken ist z.B.

.rot_blinken {
filter: invert(20%) sepia(84%) saturate(4949%) hue-rotate(353deg) brightness(99%) contrast(131%);  animation: blinker 3s linear infinite;
}
.rot {
filter: invert(20%) sepia(84%) saturate(4949%) hue-rotate(353deg) brightness(99%) contrast(131%);}

und im Widget kommt dann bei "CSS-Klasse"

{val:Datenpunkt.ID; val=="1"?"rot_blinken": val==2?"rot":"fehler"}

Danke dir auf jedenfall für deine große und schnelle Hilfe ;)

[OliverIO]

@le0 sagte in vis widget Farbe Datenpunktabhängig:

                                                                                                                            .yellow {                                                                                                                                                                               color:"yellow";                                                                                                                                                                            }                                            

Ach, den Punkt vergessen, es wird ja eine css klasse adressiert und nicht ein tag mit Namen yellow