Option to show UV index, incl threshold

src/config/config.ts

@@ -110,13 +110,17 @@ export const DEFAULT_CONFIG: Types.Config = {
       show_conditions: true,
       show_high_temp: true,
       show_low_temp: false,
+      show_uvindex: true,
+      show_uvindex_threshold: 0,
       icon_size: '14px',
       font_size: '12px',
       color: 'var(--primary-text-color)',
     },
     event: {
       show_conditions: true,
       show_temp: true,
+      show_uvindex: true,
+      show_uvindex_threshold: 0,
       icon_size: '14px',
       font_size: '12px',
       color: 'var(--primary-text-color)',

src/rendering/editor.ts

@@ -1232,6 +1232,14 @@ export class CalendarCardProEditor extends LitElement {
                             'weather.date.show_low_temp',
                             this._getTranslation('show_low_temp'),
                           )}
+                          ${this.addBooleanField(
+                            'weather.date.show_uvindex',
+                            this._getTranslation('show_uvindex'),
+                          )}
+                          ${this.addTextField(
+                            'weather.date.show_uvindex_threshold',
+                            this._getTranslation('show_uvindex_threshold'),
+                          )}
                           ${this.addTextField(
                             'weather.date.icon_size',
                             this._getTranslation('icon_size'),
@@ -1255,6 +1263,14 @@ export class CalendarCardProEditor extends LitElement {
                             'weather.event.show_temp',
                             this._getTranslation('show_temp'),
                           )}
+                          ${this.addBooleanField(
+                            'weather.event.show_uvindex',
+                            this._getTranslation('show_uvindex'),
+                          )}
+                          ${this.addTextField(
+                            'weather.event.show_uvindex_threshold',
+                            this._getTranslation('show_uvindex_threshold'),
+                          )}
                           ${this.addTextField(
                             'weather.event.icon_size',
                             this._getTranslation('icon_size'),

src/rendering/render.ts

@@ -517,6 +517,7 @@ function renderDateColumn(
       const showConditions = dateConfig.show_conditions !== false;
       const showHighTemp = dateConfig.show_high_temp !== false;
       const showLowTemp = dateConfig.show_low_temp === true && dailyForecast.templow !== undefined;
+      const showUvIndex = (dateConfig.show_uvindex !== false) && (dailyForecast.uvindex >= dateConfig.show_uvindex_threshold); 
 
       // Get styling from config
       const iconSize = dateConfig.icon_size || '14px';
@@ -539,6 +540,13 @@ function renderDateColumn(
           ${showLowTemp
             ? html` <span class="weather-temp-low">/${dailyForecast.templow}°</span> `
             : nothing}
+          ${showUvIndex
+            ? html`<ha-icon icon="mdi:sun-wireless" style="--mdc-icon-size: ${iconSize};"></ha-icon>
+                   <span style="font-size: ${fontSize}; color: ${color};">
+                     ${dailyForecast.uvindex}
+                   </span>
+              `
+            : nothing}
         </div>
       `;
     }
@@ -1038,6 +1046,7 @@ function renderEventWeather(
   const eventConfig = config.weather?.event || {};
   const showConditions = eventConfig.show_conditions !== false;
   const showTemp = eventConfig.show_temp !== false;
+  const showUvIndex = eventConfig.show_uvindex !== false && forecast.uvindex >= eventConfig.show_uvindex_threshold;
 
   // Get styling from config
   const iconSize = eventConfig.icon_size || '14px';
@@ -1055,6 +1064,12 @@ function renderEventWeather(
             ${forecast.temperature}°
           </span>`
         : nothing}
+      ${showUvIndex
+        ? html`<ha-icon icon="mdi:sun-wireless" style="--mdc-icon-size: ${iconSize};"></ha-icon>
+               <span style="font-size: ${fontSize}; color: ${color};">
+                 ${forecast.uvindex}
+               </span>`
+        : nothing}
     </div>
   `;
 }

src/translations/languages/de.json

@@ -218,6 +218,8 @@
     "color": "Farbe",
     "event_row_weather": "Ereignisreihe Wetter",
     "show_temp": "Temperatur anzeigen",
+    "show_uvindex": "Zeige UV Index",
+    "show_uvindex_threshold": "Grenzwert ab dem der UV Index angezeigt werden soll",    
 
     "interactions": "Interaktionen",
     "tap_action": "Aktion antippen",

src/translations/languages/en.json

@@ -210,7 +210,9 @@
     "color": "Color",
     "event_row_weather": "Event Row Weather",
     "show_temp": "Show temperature",
-
+    "show_uvindex": "Show UV index",
+    "show_uvindex_threshold": "Threshold when to show UV index",        
+
     "interactions": "Interactions",
     "tap_action": "Tap Action",
     "hold_action": "Hold Action",

src/utils/weather.ts

@@ -97,6 +97,7 @@ function processForecastData(
       hour,
       precipitation: item.precipitation,
       precipitation_probability: item.precipitation_probability,
+      uvindex: item.uv_index !== undefined ? Math.round(item.uv_index) : undefined, 
     };
   });