Hallo Community,
ich habe mich von WeawÖw - Wettervorhersage inspirieren lassen und wollte die Darstellung der Wetterdaten auch für Symcon bereitstellen 
WeatherWidget
Konfigurierbares Wetter-Vorhersage-Widget für IP-Symcon
Überblick
Das WeatherWidget zeigt eine mehrtägige Wettervorhersage im modernen WaWö-Stil an. Es ist optimiert für WebFront und IPSView mit voller Transparenz-Unterstützung. Die Darstellung basiert auf animierten SVG-Icons (Bas Milius Weather Icons), responsivem CSS und automatischer Skalierung.
Features
Anzeige & Design
- 1–7 Tage Vorhersage (ab heute oder ab morgen konfigurierbar)
- Temperaturbalken mit Min/Max-Werten und globaler Skalierung
- Niederschlag mit mm-Angabe, Wahrscheinlichkeit in % und vertikalem Balken
- Windgeschwindigkeit mit vertikalem Balken
- Animierte Wetter-Icons (Bas Milius Weather Icons, SVG-basiert)
- Optionaler kompakter Icon-Header als separate HTMLBox-Variable
- Frei konfigurierbare Zeilen-Reihenfolge (Temperatur, Regen, Wind, Icons, Wochentage)
- 12 individuell einstellbare Farben + Hintergrundfarbe mit Deckkraft-Slider (0–100%)
- Volle Transparenz-Unterstützung für IPSView
- Vollständig responsive – skaliert automatisch auf jede Bildschirmgröße
- Dynamische Skalierung via JavaScript – gleiches Aussehen auf allen Geräten unabhängig von DPI/Auflösung
- Regen und Wind einzeln ein-/ausblendbar
Unterstützte Datenquellen
- OpenWeatherMap OneCall – automatische Variablen-Erkennung
- Weather Underground – automatische Variablen-Erkennung
- MET Norway – direkte API-Anbindung (Latitude, Longitude, Altitude)
- Manuelle Zuordnung – funktioniert mit jedem beliebigen Wettermodul
Technisches
- Auto-Konfiguration: Variablen werden automatisch aus dem Quell-Modul erkannt und zugeordnet
- Diagnose-Tool: Alle verfügbaren Identifiers im Quell-Modul anzeigen lassen
- Responsive CSS mit clamp()-Funktionen und dynamischem Scale-Faktor
- Google Fonts (Inter) für moderne Typografie
Installation
Voraussetzungen
- IP-Symcon 5.0 oder höher
- Ein Wetter-Modul (OpenWeatherMap, Weather Underground, MET Norway) oder manuelle Variablen
Schritte
- Über den Module Store das Modul „Weather Widget“ installieren
- Alternativ über das Module Control die entsprechende Repository-URL hinzufügen
- Instanz hinzufügen: Gerät hinzufügen → WeatherWidget
- Wetter-Modul-Typ und Quell-Instanz auswählen
- Button „Variablen automatisch zuordnen“ klicken
- Fertig – die HTMLBox-Variable im WebFront oder IPSView platzieren
Konfiguration
Allgemein
| Eigenschaft | Beschreibung | Standard |
|---|---|---|
| Anzahl Tage | Vorhersage-Tage (1–7) | 6 |
| Update-Intervall | Automatische Aktualisierung in Minuten | 5 Min |
| Niederschlag | Regen-Zeile ein-/ausblenden | ✓ |
| Wind | Wind-Zeile ein-/ausblenden | ✓ |
| Icon-Header | Kompakten Header als separate Variable | ✗ |
Darstellung
| Eigenschaft | Beschreibung | Standard |
|---|---|---|
| Zeilen-Reihenfolge | Reihenfolge von Temp, Regen, Wind, Icons, Tage | Temp → Tage |
| Regenbalken Höhe | Höhe in Pixeln | 30px |
| Regenbalken Breite | Breite in % der Spalte | 70% |
| Windbalken Höhe | Höhe in Pixeln | 30px |
| Windbalken Breite | Breite in % der Spalte | 70% |
| Icon-Größe | Größe der Wetter-Icons | 50px |
| Hintergrundfarbe | Farbe der Widget-Box | transparent |
| Deckkraft | Transparenz 0–100% | 0% |
Farben (12 konfigurierbar)
| Farbe | Beschreibung |
|---|---|
| Temp Max / Min | Farbe für Max- und Minimaltemperatur |
| Temp Balken | Farbe der Temperaturbalken |
| Heute | Akzentfarbe für den aktuellen Tag |
| Regen Label / Label (0) | Beschriftung Niederschlag (mit/ohne Regen) |
| Regen Chance / Balken | Wahrscheinlichkeit und Balkenfarbe |
| Wind Label / Balken | Beschriftung und Balkenfarbe |
| Wochentag | Farbe der Tagesbezeichnung |
Transparenz in IPSView
Das Widget unterstützt volle Transparenz für die Einbettung in IPSView:
- html und body sind immer transparent – der IPSView-Hintergrund scheint durch
- Die Widget-Box hat eine eigene Hintergrundfarbe mit einstellbarer Deckkraft (0–100%)
- 0% Deckkraft: Vollständig transparent (Wallpaper scheint durch)
- 50% Deckkraft: Halbtransparent (Farbe + Wallpaper mischen sich)
- 100% Deckkraft: Voll deckend in der gewählten Farbe
Dynamische Skalierung
Das Widget enthält ein intelligentes Skalierungssystem, das für konsistente Darstellung auf allen Bildschirmen sorgt:
- Ein JavaScript-Snippet misst die tatsächliche Containergröße
- Berechnet einen Skalierungsfaktor relativ zu einer Referenzgröße (800×480)
- Alle festen Pixelwerte (Schriftgrößen, Abstände, Icon-Größen) skalieren proportional
- Funktioniert unabhängig von DPI-Skalierung und Bildschirmauflösung
- Passt sich automatisch bei Größenänderung des Containers an (Resize-Event)
Unterstützte Wetter-Codes
Das Widget mappt automatisch verschiedene Wetter-Codes auf animierte Bas Milius Weather Icons:
- OpenWeatherMap: 01d–50n Icon-Codes (Sonne, Wolken, Regen, Schnee, Nebel, etc.)
- MET Norway: Symbol-Codes (clearsky_day, rain, heavysnow, etc.)
- Text-basiert: 60+ Schlüsselwörter in Deutsch und Englisch (sonnig, Gewitter, cloudy, snow, etc.)
Öffentliche Funktionen
| Funktion | Beschreibung |
|---|---|
| WTR_Update($id) | Widget manuell aktualisieren |
| WTR_AutoConfigure($id) | Variablen automatisch zuordnen |
| WTR_ScanIdents($id) | Alle Identifiers im Quell-Modul anzeigen |
| WTR_FetchMETNorway($id) | MET Norway API manuell abrufen |
Ausgabe-Variablen
| Variable | Typ | Beschreibung |
|---|---|---|
| WeatherHTML | ~HTMLBox | Vollständiges Wetter-Widget |
| WeatherIconHeader | ~HTMLBox | Kompakter Icon-Header (optional) |
Credits
Wetter-Icons: Bas Milius Weather Icons (GitHub - basmilius/meteocons: Beautiful, hand-crafted animated weather icons that feel alive. · GitHub)
Schriftart: Inter (Google Fonts)
Inspiriert von der WeawÖw Wetter-App