A modern, elegant, simple and highly informative weather widget for ioBroker VIS2. This script processes data from the Open-Meteo Weather Adapter and generates a responsive HTML widget providing current weather data as well as a 7-day forecast.
- with clock
- Real-time Display: Current temperature, weather condition (text & icon), humidity, rain amount, and UV index.
- 7-Day Forecast: Compact overview of the coming days, including min/max temperatures and precipitation probability.
- 6-Hours Forecast: Display the next 6 hours (you must enable & set the forecast hours to min. 6 Hours ), supported from open-meteo-weather v2.2.3 onwards.
- Astronomical Data: Display of sunrise, sunset, and moon phases (icon & text).
- Wind Info: Wind direction and gust visualization using icons.
- Multi-language: Automatic detection of the ioBroker system language (supports 11 languages, including Ukrainian and Chinese).
- Modern Design: Dark glass-morphism design with gradients, optimized for modern dashboards.
- Important: This widget strictly requires the installed and configured Open-Meteo Weather Adapter. The script cannot retrieve weather data without this specific adapter.
- The JavaScript Adapter (Script Engine) must be installed in ioBroker.
- Adapter Settings: In the Open-Meteo Weather adapter settings, the forecast must be set to at least 7 days. Note that the widget displays a maximum of 7 days; if fewer days are configured, the remaining slots will stay empty.
-
Create a new script in the ioBroker JavaScript adapter.
-
Copy the entire code of the weather widget into the script.
-
Adjust Location: Change the
locationNamein line 4 to match the name of your location as defined in the Open-Meteo adapter:const locationName = 'locationName'; // <-- Enter your location name here
-
Since v0.1.0 you can adjust the font size
const fontSizeCurrentLabel = '1.3rem'; // "Aktuell" / Tagesname oben - "Current" label / day name at top const fontSizeTempBig = '3.8rem'; // Große Haupttemperatur - Big main temperature const fontSizeDescription = '1.1rem'; // Wetterbeschreibung (z.B. "Sonnig") - Weather description (e.g. "Sunny") const fontSizeInfoGrid = '0.85rem'; // Info-Items (Feuchtigkeit, Regen, UV, etc.) - Info items (humidity, rain, UV, etc.) const fontSizeSunMoon = '0.8rem'; // Sonnenauf-/untergang, Wind - Sun/Moonrise/set, Wind const fontSizeHourly = '0.75rem'; // Stündliche Vorhersage - Hourly forecast const fontSizeHourlyRain = '0.65rem'; // Regendetails in stündlicher Vorhersage - Rain details in hourly forecast const fontSizeForecastDay = '0.75rem'; // Tagesname in 6-Tage-Vorhersage - Day name in 6-day forecast const fontSizeForecastText = '0.65rem'; // Wettertext in 6-Tage-Vorhersage - Weather text in 6-day forecast const fontSizeForecastTempMax = '1rem'; // Maximaltemperatur in 6-Tage-Vorhersage - Maximal temperature in 6-day forecast const fontSizeForecastTempMin = '0.85rem'; // Minimaltemperatur in 6-Tage-Vorhersage - Minimal temperature in 6-day forecast const fontSizeForecastDetails = '0.65rem'; // Details in 6-Tage-Vorhersage - Details in 6-day forecast
-
Since v0.2.0 you can adjust the forecast Hours and Days
const hourlyForecastHours = 6; // Anzahl der Stunden in der stündlichen Vorhersage (max. 16) - Number of hours in hourly forecast (max. 16) const dailyForecastDays = 6; // Anzahl der Tage in der Tagesvorhersage (max. 24) - Number of days in daily forecast (max. 24)
Note: To ensure the widget looks right, experiment with the settings until it fits. The more hours or days you want to display, the wider the widget will be.
-
Wetter_HTML_Generator_with_clock.jsis identical toWetter_HTML_Generator.jsbut includes an additional clock (requested by a user on the ioBroker forum). The update interval is set to 1 minute to support the clock display.
After saving and starting the script, the datapoint 0_userdata.0.Wetter_Widget_HTML will be created automatically. The script updates the content every 5 minutes or immediately upon temperature changes.
Integration into VIS2 is done via a standard HTML widget:
-
Open the VIS2 Editor.
-
Select the "HTML" widget (Standard Widget) and place it on your view.
-
Enter the following binding into the HTML field in the property panel,
$\color{orange}{\text{ NOTE:}}$ enter your location name:{0_userdata.0.Wetter_Widget_HTML_yourLOCATIONname} -
Adjust the size of the widget (a width of approx. 600px - 800px is recommended for the forecast view).
The design can be adjusted directly within the script in the <style> section. You can modify colors, spacing, or font sizes according to your preferences.
Data point ... has been newly created.: Appears only during the initial setup.Weather widget: HTML successfully generated.: Confirmation of a successful update in the ioBroker log.
- (H5N1v2) added additional script
Wetter_HTML_Generator_with_clock.jsfeaturing an analog clock (user request) - (H5N1v2) add location and date display for multilocation support to
Wetter_HTML_Generator.js&Wetter_HTML_Generator_with_clock.jswidget (user request)
- (Homoran) add: update target data point to include location name for weather widget (multilocation support)
- (H5N1v2) feat: Added section for adjusting forecast hours and days
- (H5N1v2) change rain, rain_sum to precipitation & precipitation_sum (snow,rain,shower).
- (H5N1v2) feat. Added section for adjusting font size
- (H5N1v2) feat: enhance weather widget with hourly forecast and version display
- (H5N1v2) remove Moonphases description text
- (H5N1v2) fix: add unit to sunshine duration in weather widget
- 0.0.1 Initial Release
This project is licensed under the MIT License.