Große Buttons für Schalter

[MaJu]

Wer sich, wie ich, mit css etwas schwer tut, dem bleibt auch die Möglichkeit, einfach die Bilder anzupassen.

Ich habe für alles png-Bilder mit durchsichtigem Hintergrund. Aktuell bin ich dabei, den Floorplan neu einzurichten, den aktuellen Stand habe ich mal angehangen. Hier passt vor allem die Verteilung auf die Felder im Hintergrund nicht, weil ich es nicht hinbekomme, dass die ReadingsGroups auch tatsächlich ganz links beim ersten Pixel anfangen (hier bitte ich um Hilfe!).

Die Farben sind auch noch nicht final, das war nur ein erster Schnellschuss mit dem Hintergrundbild, um es auszutesten.

Zum Verständnis: Links oben die rot/grünen Dinger zeigen an, ob das jeweilige Fenster offen oder geschlossen ist. Das Fernseher-Symbol lässt sich anklicken und schaltet entweder die Aktion "Fernsehen" ein oder schaltet über die Harmony alles aus wenn nicht gerade "aus" aktiv ist (dafür gibt es auch 2 unterschiedliche Bilder). Rechts daneben die Lampen-Symbole steuern zum Einen eine Gruppe aus HUEs und Schaltsteckdosen und daneben eine separate Hue, das Symbol darunter führt zu einer definierten Dimmung bzw. Abschalten eines Teils der Funksteckdosen.
Unten die aktuelle Wetterinfo, lediglich das "aktuelle" Bild kommt auch vom Wettermodul, daneben die Vorhersagen vom Wettermodul.

Was man hier nicht sieht: Mit dem Scrollen um eine Seite befindet sich direkt darunter die TV-Vorschau und rechts daneben Status-Infos (Batterie-Anzeige, FHEM-Uptime, Speicherauslastung, Temperatur des RPi etc.).

Fazit: Auch wenn svg aufgrund der einfachen Skalierung klar im Vorteil ist, geht es für die Anfänger auch ohne oder mit weniger Ahnung in den css-Dateien indem die Icons einfach passend erstellt werden.