Adding experimental UV Index support for weather module (#3108)

This pr adds (config.js toggleable) showUV_Index to the hourly and
current weather modules, with right now only openmeteo configured to
supply the data. Other providers could have support too by adding
`uv_index` to current and hourly.

For example the current weather looks like
![image](https://github.com/MichMich/MagicMirror/assets/124401812/00fdf5db-c0d5-4797-9a31-1d72dd970d26)
positioned after sunset in the top row.



The following "hacks" are included and could be fixed to make it
cleaner, but the functionality is wanted and it works without problem.
- To hide entries where the UV Index is 0 i added an if statement to the
`hourly.njk` which is not how precipitation is handled.
The following are minor things that might not need fixing:
- The forecast option does not have UV support. This might not be
relevant since UV changes throughout the day but i tried to implement a
"max_UV" to openmeteo.js, but am not confident enough in JS to
accomplish that.
- The UV Icon is wi-hot and manually added to the `.njk`'s. This could
be made changeable by a config but does not seem relevant since wi-hot
is not used by anything else as far as i can tell.

---------

Co-authored-by: veeck <michael@veeck.de>

CHANGELOG.md

@@ -11,6 +11,7 @@ _This release is scheduled to be released on 2023-07-01._
 
 ### Added
 
+- Added UV Index to hourly and current Weather, with support for Openmeteo
 - Added tests for serveronly
 - Set Timezone `Europe/Berlin` in unit tests (needed for new formatTime tests)
 - Added no-param-reassign eslint rule and fix warnings

modules/default/weather/current.njk

@@ -28,6 +28,12 @@
                     {% endif %}
                 </span>
             {% endif %}
+            {% if config.showUVIndex %}
+                    <td class="align-right bright uv-index">
+                    <div class="wi dimmed wi-hot"></div>
+                        {{ current.uv_index }}
+                    </td>
+            {% endif %}
         </div>
     {% endif %}
     <div class="large light">
@@ -61,12 +67,12 @@
                     {{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}
                 </span><br/>
             {% endif %}
-            {% if config.showPrecipitationAmount and current.precipitationAmount %}           
+            {% if config.showPrecipitationAmount and current.precipitationAmount %}
                 <span class="dimmed">
                     <span class="precipitationLeadText">{{ "PRECIP_AMOUNT" | translate }}</span> {{ current.precipitationAmount | unit("precip", current.precipitationUnits) }}
                 </span><br/>
             {% endif %}
-            {% if config.showPrecipitationProbability and current.precipitationProbability  %}           
+            {% if config.showPrecipitationProbability and current.precipitationProbability  %}
                 <span class="dimmed">
                     <span class="precipitationLeadText">{{ "PRECIP_POP" | translate }}</span> {{ current.precipitationProbability }}%
                 </span>

modules/default/weather/forecast.njk

@@ -32,6 +32,12 @@
                         {{ f.precipitationProbability | unit("precip", "%") }}
                     </td>
                 {% endif %}
+                {% if config.showUVIndex %}
+                    <td class="align-right dimmed uv-index">
+                        {{ f.uv_index }}
+                        <span class="wi dimmed weathericon wi-hot"></span>
+                    </td>
+                {% endif %}
             </tr>
             {% set currentStep = currentStep + 1 %}
         {% endfor %}

modules/default/weather/hourly.njk

@@ -10,6 +10,14 @@
                 <td class="align-right bright">
                     {{ hour.temperature | roundValue | unit("temperature") }}
                 </td>
+                {% if config.showUVIndex %}
+                    <td class="align-right bright uv-index">
+                        {% if hour.uv_index!=0 %}
+                            {{ hour.uv_index }}
+                            <span class="wi weathericon wi-hot"></span>
+                        {% endif %}
+                    </td>
+                {% endif %}
                 {% if config.showPrecipitationAmount %}
                     <td class="align-right bright precipitation-amount">
                         {{ hour.precipitationAmount | unit("precip", hour.precipitationUnits) }}

modules/default/weather/providers/openmeteo.js

@@ -76,8 +76,10 @@ WeatherProvider.register("openmeteo", {
 		"et0_fao_evapotranspiration",
 		// Total precipitation (rain, showers, snow) sum of the preceding hour
 		"precipitation",
-		//Precipitation Probability
+		// Precipitation Probability
 		"precipitation_probability",
+		// UV index
+		"uv_index",
 		// Snowfall amount of the preceding hour in centimeters. For the water equivalent in millimeter, divide by 7. E.g. 7 cm snow = 10 mm precipitation water equivalent
 		"snowfall",
 		// Rain from large scale weather systems of the preceding hour in millimeter
@@ -132,6 +134,8 @@ WeatherProvider.register("openmeteo", {
 		"winddirection_10m_dominant",
 		// The sum of solar radiation on a given day in Megajoules
 		"shortwave_radiation_sum",
+		//UV Index
+		"uv_index_max",
 		// Daily sum of ET₀ Reference Evapotranspiration of a well watered grass field
 		"et0_fao_evapotranspiration"
 	],
@@ -383,7 +387,8 @@ WeatherProvider.register("openmeteo", {
 		currentWeather.rain = parseFloat(weather.hourly[h].rain);
 		currentWeather.snow = parseFloat(weather.hourly[h].snowfall * 10);
 		currentWeather.precipitationAmount = parseFloat(weather.hourly[h].precipitation);
-		currentWeather.precipitationProbability = parseFloat(weather.precipitation_probability);
+		currentWeather.precipitationProbability = parseFloat(weather.hourly[h].precipitation_probability);
+		currentWeather.uv_index = parseFloat(weather.hourly[h].uv_index);
 
 		return currentWeather;
 	},
@@ -408,6 +413,7 @@ WeatherProvider.register("openmeteo", {
 			currentWeather.snow = parseFloat(weather.snowfall_sum * 10);
 			currentWeather.precipitationAmount = parseFloat(weather.precipitation_sum);
 			currentWeather.precipitationProbability = parseFloat(weather.precipitation_probability);
+			currentWeather.uv_index = parseFloat(weather.uv_index_max);
 
 			days.push(currentWeather);
 		});
@@ -442,6 +448,7 @@ WeatherProvider.register("openmeteo", {
 			currentWeather.snow = parseFloat(weather.snowfall * 10);
 			currentWeather.precipitationAmount = parseFloat(weather.precipitation);
 			currentWeather.precipitationProbability = parseFloat(weather.precipitation_probability);
+			currentWeather.uv_index = parseFloat(weather.uv_index);
 
 			hours.push(currentWeather);
 		});

modules/default/weather/weather.css

@@ -30,7 +30,8 @@
 }
 
 .weather .precipitation-amount,
-.weather .precipitation-prob {
+.weather .precipitation-prob,
+.weather .uv-index {
   padding-left: 20px;
   padding-right: 0;
 }

modules/default/weather/weather.js

@@ -27,6 +27,7 @@ Module.register("weather", {
 		showPeriodUpper: false,
 		showPrecipitationAmount: false,
 		showPrecipitationProbability: false,
+		showUVIndex: false,
 		showSun: true,
 		showWindDirection: true,
 		showWindDirectionAsArrow: false,