Lastfluss, Energie animierte Gif

Balisto · Beitrag von **Balisto** » 21.05.2023, 08:40

Hallo zusammen,

ich bin dabei mir mit mediola eine Grafik für die Photovoltaik Darstellung zu erstellen.
Nun suche ich noch nach passenden bewegten linien um den Lastfluss darzustellen.
Habe aber noch nicht so das passende gefunden, was sich ggf. auch anpassen lässt.

Es sollten so grüne und rote bewegte linien sein wie z.b. auf dieser Seite zu sehen:
https://forum.iobroker.net/topic/47912/ ... erte-gif/3

Und hier will ich diese mit einbinden

Gruß Thomas

Fonzo · Beitrag von **Fonzo** » 21.05.2023, 10:52

Balisto hat geschrieben: ↑
21.05.2023, 08:40
Habe aber noch nicht so das passende gefunden, was sich ggf. auch anpassen lässt.

Hängt ja davon ab was Du persönlich an Software besitzt. Eine Möglichkeit das individuell anzupassen, wäre eine individuelle Animation in Powerpoint zu erstellen und das abschließend dann als animiertes GIF Bild zu speichern. Das GIF Bild kannst Du dann anschließend im AIO CREATOR NEO im Bilderkatalog importieren.

Ansonsten wenn Du Dich mit CSS auskennst kannst Du auch CSS nutzen, dann brauchst Du halt ein Webseitenelement und fügst das CSS im HTML Gerüst ein, ein Beispiel findest Du unter CSS Loader with dots.
Was Du dann mit CSS als Layout setzt, ist komplett individuell Dir überlassen.

Das CSS trägst Du im HTML Gerüst ein und kannst das dort dann individuell anpassen

Als Beispiel grün:
Dokument-Beginn

Code: Alles auswählen

<!DOCTYPE html><html><head><meta charset="utf-8" /><style>
html{background:transparent;}

:root {
  --background: rgba(255, 255, 255, 0.0);
  --main-color: #ecf0f1;
  --point-color: #21822e;
  --size: 5px;
}

.loader {
  background-color: var(--background);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  align-content: center; 
  justify-content: center;  
	z-index: 100000;
}

.loader__element {
  border-radius: 100%;
  border: var(--size) solid var(--point-color);
  margin: calc(var(--size)*2);
}

.loader__element:nth-child(1) {
  animation: preloader .6s ease-in-out alternate infinite;
}
.loader__element:nth-child(2) {
  animation: preloader .6s ease-in-out alternate .2s infinite;
}

.loader__element:nth-child(3) {
  animation: preloader .6s ease-in-out alternate .4s infinite;
}

.loader__element:nth-child(4) {
  animation: preloader .6s ease-in-out alternate .6s infinite;
}

.loader__element:nth-child(5) {
  animation: preloader .6s ease-in-out alternate .8s infinite;
}

@keyframes preloader {
  100% { transform: scale(2); }
}

</style></head><body>

Hauptbereich

Code: Alles auswählen

<div class="loader">
  <span class="loader__element"></span>
  <span class="loader__element"></span>
  <span class="loader__element"></span>
  <span class="loader__element"></span>
  <span class="loader__element"></span>
</div>

Dokument-Ende

Code: Alles auswählen

</body></html>

Für das Beispiel in rot musst Du dann eben die point-color anpassen:

Code: Alles auswählen

  --point-color: #8c1223;

Den Autorefresh unter Eigenschaften des Webseitenelements musst Du in dem Fall ausschalten.

HomeMatic-Forum / FHZ-Forum

Lastfluss, Energie animierte Gif

Lastfluss, Energie animierte Gif

Re: Lastfluss, Energie animierte Gif