So funktioniert’s
Die Kachel-Visualisierung (TileVisu) von Symcon bringt ein helles und ein dunkles Design mit. Wer seine Visualisierung an die eigenen Farben anpassen will, kann ein eigenes Design als JSON-Datei hinterlegen. Symcon erzeugt diese Datei zwar auch selbst, zeigt dabei aber keine Vorschau. Genau dafür ist dieser Generator da.
- Vorlage wählen: Über die Farbkreise oberhalb der Vorschau eine Vorlage laden, etwa die eingebauten Designs „Symcon hell“ und „Symcon dunkel“, oder eine vorhandene Design-Datei über „Datei laden“ öffnen.
- Farben anpassen: Jede der 13 Farben lässt sich per Farbwähler oder als Hex-Wert ändern. Bezeichnungen und Reihenfolge entsprechen dem Designeditor der TileVisu, aufgeteilt in die Hauptfarben und die erweiterten Einstellungen. Die Vorschau aktualisiert sich sofort.
- Titel und Ecken festlegen: Die Titelgröße wählt die TileVisu automatisch pro Kachel oder einheitlich pro Kategorie, alternativ fest in Groß, Mittel oder Klein. Der Eckenradius der Kacheln reicht von 0 bis 10 Pixel.
- Prüfen: Über die Geräteauswahl die Wirkung auf Desktop, Tablet und Smartphone ansehen. Die Kontrastprüfung bewertet jedes Paar aus Schrift und Hintergrund nach den Stufen der WCAG, von „zu gering“ bis „AAA“.
- Exportieren: „JSON herunterladen“ speichert die Design-Datei.
Das Textfeld zeigt das Design immer als JSON. Wer dort Werte ändert oder ein Design einfügt, sieht das Ergebnis sofort in der Vorschau. Mit „Link teilen“ landet das komplette Design in der Adresse, zum Weitergeben oder als Lesezeichen. Alles läuft im Browser, es werden keine Daten übertragen.
Design in Symcon einbinden
In der Konfiguration der Kachel-Visualisierung unter Verwendetes Design die Option Eigenes Design bereitstellen wählen und die heruntergeladene Datei als Design-Datei auswählen. Nach dem Übernehmen nutzen alle Geräte dieser Visualisierung das neue Design.
Gut zu wissen
- Der Generator ist ein privates Projekt und kein offizielles Werkzeug von Symcon. Die Vorlagen „Symcon hell“ und „Symcon dunkel“ entsprechen den eingebauten Designs der Kachel-Visualisierung.
- Die Vorschau ist ein Nachbau der TileVisu und nicht pixelgenau. Für die Wirkung der Farben reicht sie aber gut aus.
- Einige Farben gibt die TileVisu fest vor oder sie werden pro Variable eingestellt und hängen nicht vom Design ab, zum Beispiel der Glow eingeschalteter Schalter, das Grau ausgeschalteter Schalter oder die Farben der Energieverteilung.
- „Inhalt auf heller Kachel“ und „Inhalt auf dunkler Kachel“ greifen, wenn eine Kachel eine eigene Hintergrundfarbe hat, etwa durch die Statusfarbe einer Variable oder das Cover im Mediaplayer. Die „Fehler Farbe“ nutzt die TileVisu für Fehlermeldungen.
- Raster und Kachelgrößen entsprechen den Standard-Kachelkonfigurationen der TileVisu: Desktop und Tablet mit 12 Zellen in der Breite (Querformat), Smartphone mit 6 (Hochformat). Einige Kacheln sind wie in einer echten Visualisierung größer oder kleiner gezogen, damit alle Inhalte hineinpassen und das Raster ohne Lücken aufgeht. Wer die Kachelkonfiguration in Symcon angepasst hat, sieht dort eine andere Aufteilung.