ioBroker VIS – CSS – Animationen in der Visualisierung

In diesem Artikel zeige ich Dir verschiedene Animationsmöglichkeiten in VIS.

Für meine Visualisierung wollte ich gewisse Zustände und Informationen auf der Visualisierung besonders hervorheben. Wichtige Hinweis z.B. Störungsmeldungen oder wichtige Ereignisse wollte ich blinkend anzeigen. Zudem wollte ich einen Lüfter rotierend darstellen. Die folgende Animation zeigt drei verschiedene Animationen, welche wir nun im Artikel gemeinsam erstellen.

Inhaltsverzeichnis

1. Blinkender Text
2. Blinkendes Icon
3. Rotierendes Icon

1. Blinkender Text

Im ersten Schritt müssen wir nun die CSS-Definiton erweitern. Dazu habe ich das entsprechende Projekt in VIS geöffnet und die Lasche CSS angeklickt. Auf der Lasche CSS können wir unsere eigene CSS-Definition hinterlegen.

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blinkingtext {
  animation: blink 2s step-start 0s infinite;
  -webkit-animation: blink 2s step-start 0s infinite;
}

Im nächsten Schritt wählen wir in der View das zu animierende Widget aus. In meinem Beispiel möchte ich ein „String Widget“ blinkend bzw. pulsierend darstellen. In der Konfiguration des Widgets im Bereich „Generell“ findest Du das Eingabefeld „CSS Klasse“. Hier geben wir nun z.B. „blink“ ein.

2. Blinkendes Icon

In meiner Visualisierung wollte ich ein Warnungs-Icon blinkend bzw. pulsierend darstellen. Im Artikel zeige ich Dir, wie ich dies über CSS gelöst habe.

Im ersten Schritt müssen wir nun die CSS-Definiton erweitern. Dazu habe ich das entsprechende Projekt in VIS geöffnet und die Lasche CSS angeklickt. Auf der Lasche CSS können wir unsere eigene CSS-Definition hinterlegen.

.blink {
  animation: blinker 2s linear infinite;
}
 
@keyframes blinker {
  40% {
    opacity: 0;
  }
}

Im nächsten Schritt wählen wir in der View das zu animierende Widget aus. In meinem Beispiel möchte ich ein „Image Widget“ blinkend bzw. pulsierend darstellen. In der Konfiguration des Widgets im Bereich „Generell“ findest Du das Eingabefeld „CSS Klasse“. Hier geben wir nun z.B. „blink“ ein.

3. Rotierendes Icon

Wie schon in der Einleitung erwähnt, wollte ich in meiner Visualisierung die eingeschaltete Belüftung entsprechend als drehendes Symbol darstellen. Dazu habe ich zunächst aus dem Adapter „icons-material“. Das Ventilator-Icon als normales Image auf die View gesetzt. Im nächsten Schritt müssen wir nun die CSS-Definiton erweitern. Dazu selektieren wir die Lasche CSS. Auf der Lasche CSS können wir unsere eigene CSS-Definition hinterlegen. Wir hinterlegen hier die neue Klasse „rotateanimation“ mit den entsprechenden Definitionen. Über die rotation „2s“ kann die Geschwindigkeit verändert werden. Je größer der Wert, desto langsamer dreht sich das Icon. In der Keyframe-Definition wird zudem die Drehung von 0 bis 360 Grad definiert, hier kann die Drehbewegung geändert werden.

.rotateanimation {
  -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  } to {
     -webkit-transform: rotate(359deg);
  }
}

Im nächsten Schritt wählen wir in der View das zu animierende Widget aus. In meinem Beispiel möchte ich ein „Image Widget“ drehend darstellen. In der Konfiguration des Widgets im Bereich „Generell“ findest Du das Eingabefeld „CSS Klasse“. Hier geben wir nun die CSS-Klasse „rotateanimation“ ein.

Ich hoffe Dir gefällt der Artikel 🙂 Ich freue mich über Deinen Kommentar!