Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Marschel]

@ubecker Ich weiß nicht warum, aber jetzt klappt es. Ich hab nichts mehr verändert. Es einfach mal ruhen lassen .... 🤷🏼‍♂️🥳

[OliverIO]

@marschel

neben der skriptlösung würde das auch über reine css gehen.
das einzige was du machen musst ist eine css klasse setzen.
das kann ebenfalls mittels binding auf basis des status eines datenpunkts passieren.

die erste css klasse würde das einblenden übernehmen und dann gesetzt werden, wenn die lampe eingeschaltet wird

die zweite css klasse würde über die css animationsfunktion das proberty visible oder display nach einer gewissen zeit auf none setzen.

das folgende css definiert einmal die beiden css klassen, sowie eine animation,
in 8/10 der Zeit macht die nix. in der css klasse ist die zeit auf 10 Sekunden gesetzt, kann aber angepasst werden.
im letzten beiden 10tel der zeit wird dann die opacity von 1 auf 0, also sichtbar auf voll durchscheinend transformiert. daher sollte das widget nicht einfach weg sein, sonder langsam ausgeblendet werden. visibility hidden, macht dann das widget voll funktionsunfähig. sonst wäre es noch da, aber halt nicht sichtbar.

.lampean {
  visibility: visible;
  opacity: 1;
}
.lampeaus {
  animation: widgetausblenden  10s;
}

@keyframes widgetausblenden  {
  0% {
    visibility: visible;
  }  
  80% {
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}

die css klasse per binding könnte man so setzen, wie die vielen beispiele für farben, wenn bestimmte zustände von datenpunkten erreicht sind.

ps
ich habe das blind zusammengetippt ohne konkreten test. es könnte noch der ein oder andere fehler enthalten. falls ja, dann schreiben

[Marschel]

@oliverio Hört sich auch spannend an. Teste ich mal 👍🏻