feat: add show weather humidity and temperature range options

ImmichFrame.Core/Helpers/WeatherExtensions.cs

@@ -1,6 +1,7 @@
 using OpenWeatherMap.Models;
 using ImmichFrame.Core.Models;
 using UnitsNet;
+using UnitsNet.Units;
 
 namespace ImmichFrame.Core.Helpers
 {
@@ -15,10 +16,18 @@ public static Weather ToWeather(this WeatherInfo? weatherInfo)
                 Location = weatherInfo.CityName,
                 Description = $"{string.Join(',', weatherInfo.Weather.Select(x => x.Description))}",
                 Temperature = weatherInfo.Main.Temperature.Value,
+                MinimumTemperature = GetOptionalTemperatureValue(weatherInfo.Main.MinimumTemperature),
+                MaximumTemperature = GetOptionalTemperatureValue(weatherInfo.Main.MaximumTemperature),
+                Humidity = weatherInfo.Main.Humidity.Value,
                 Unit = Temperature.GetAbbreviation(weatherInfo.Main.Temperature.Unit),
                 TemperatureUnit = weatherInfo.Main.Temperature.ToString(),
                 IconId = $"{string.Join(',', weatherInfo.Weather.Select(x => x.IconId))}"
             };
         }
+
+        private static double? GetOptionalTemperatureValue(Temperature temperature)
+        {
+            return temperature.Value == 0d && temperature.Unit == TemperatureUnit.Kelvin ? null : temperature.Value;
+        }
     }
 }

ImmichFrame.Core/Interfaces/IClientSettings.cs

@@ -23,6 +23,8 @@ public interface IClientSettings
         public string Style { get; }
         public string? BaseFontSize { get; }
         public bool ShowWeatherDescription { get; }
+        public bool WeatherShowHumidity { get; }
+        public bool WeatherShowTemperatureRange { get; }
         public string? WeatherIconUrl { get; }
         public bool ImageZoom { get; }
         public bool ImagePan { get; }

ImmichFrame.Core/Interfaces/IWeather.cs

@@ -4,6 +4,9 @@ public interface IWeather
     {
         public string Location { get; set; }
         public double Temperature { get; set; }
+        public double? MinimumTemperature { get; set; }
+        public double? MaximumTemperature { get; set; }
+        public double Humidity { get; set; }
         public string Unit { get; set; }
         public string TemperatureUnit { get; set; }
         public string Description { get; set; }

ImmichFrame.Core/Models/Weather.cs

@@ -6,6 +6,9 @@ public class Weather : IWeather
     {
         public string Location { get; set; } = "";
         public double Temperature { get; set; } = 0d;
+        public double? MinimumTemperature { get; set; } = null;
+        public double? MaximumTemperature { get; set; } = null;
+        public double Humidity { get; set; } = 0d;
         public string Unit { get; set; } = "";
         public string TemperatureUnit { get; set; } = "";
         public string Description { get; set; } = "";

ImmichFrame.WebApi.Tests/Controllers/ConfigControllerTests.cs

@@ -44,6 +44,8 @@ public void Setup()
                 Style = "blur",
                 BaseFontSize = "18px",
                 ShowWeatherDescription = false,
+                WeatherShowHumidity = true,
+                WeatherShowTemperatureRange = true,
                 WeatherIconUrl = "https://example.com/{IconId}.png",
                 ImageZoom = false,
                 ImagePan = true,

ImmichFrame.WebApi.Tests/Resources/TestV1.json

@@ -51,6 +51,8 @@
     "BaseFontSize": "BaseFontSize_TEST",
     "WeatherApiKey": "WeatherApiKey_TEST",
     "ShowWeatherDescription": true,
+    "WeatherShowHumidity": true,
+    "WeatherShowTemperatureRange": true,
     "WeatherIconUrl": "WeatherIconUrl_TEST",
     "UnitSystem": "UnitSystem_TEST",
     "WeatherLatLong": "WeatherLatLong_TEST",

ImmichFrame.WebApi.Tests/Resources/TestV2.json

@@ -30,6 +30,8 @@
     "Style": "Style_TEST",
     "BaseFontSize": "BaseFontSize_TEST",
     "ShowWeatherDescription": true,
+    "WeatherShowHumidity": true,
+    "WeatherShowTemperatureRange": true,
     "WeatherIconUrl": "WeatherIconUrl_TEST",
     "ImageZoom": true,
     "ImagePan": true,

ImmichFrame.WebApi.Tests/Resources/TestV2.yml

@@ -29,6 +29,8 @@ General:
   Style: Style_TEST
   BaseFontSize: BaseFontSize_TEST
   ShowWeatherDescription: true
+  WeatherShowHumidity: true
+  WeatherShowTemperatureRange: true
   WeatherIconUrl: WeatherIconUrl_TEST
   ImageZoom: true
   ImagePan: true

ImmichFrame.WebApi/Helpers/Config/ServerSettingsV1.cs

@@ -50,6 +50,8 @@ public class ServerSettingsV1 : IConfigSettable
     public string Style { get; set; } = "none";
     public string? BaseFontSize { get; set; }
     public bool ShowWeatherDescription { get; set; } = true;
+    public bool WeatherShowHumidity { get; set; } = false;
+    public bool WeatherShowTemperatureRange { get; set; } = false;
     public string? WeatherIconUrl { get; set; } = "https://openweathermap.org/img/wn/{IconId}.png";
     public bool ImageZoom { get; set; } = true;
     public bool ImagePan { get; set; } = false;
@@ -128,6 +130,8 @@ class GeneralSettingsV1Adapter(ServerSettingsV1 _delegate) : IGeneralSettings
         public string Style => _delegate.Style;
         public string? BaseFontSize => _delegate.BaseFontSize;
         public bool ShowWeatherDescription => _delegate.ShowWeatherDescription;
+        public bool WeatherShowHumidity => _delegate.WeatherShowHumidity;
+        public bool WeatherShowTemperatureRange => _delegate.WeatherShowTemperatureRange;
         public string? WeatherIconUrl => _delegate.WeatherIconUrl;
         public bool ImageZoom => _delegate.ImageZoom;
         public bool ImagePan => _delegate.ImagePan;

ImmichFrame.WebApi/Models/ClientSettingsDto.cs

@@ -25,6 +25,8 @@ public class ClientSettingsDto(IClientSettings settings) : IClientSettings
     public string Style => settings.Style;
     public string? BaseFontSize => settings.BaseFontSize;
     public bool ShowWeatherDescription => settings.ShowWeatherDescription;
+    public bool WeatherShowHumidity => settings.WeatherShowHumidity;
+    public bool WeatherShowTemperatureRange => settings.WeatherShowTemperatureRange;
     public string? WeatherIconUrl => settings.WeatherIconUrl;
     public bool ImageZoom => settings.ImageZoom;
     public bool ImagePan => settings.ImagePan;

ImmichFrame.WebApi/Models/ServerSettings.cs

@@ -58,6 +58,8 @@ public class GeneralSettings : IGeneralSettings, IConfigSettable
     public string Style { get; set; } = "none";
     public string? BaseFontSize { get; set; }
     public bool ShowWeatherDescription { get; set; } = true;
+    public bool WeatherShowHumidity { get; set; } = false;
+    public bool WeatherShowTemperatureRange { get; set; } = false;
     public string? WeatherIconUrl { get; set; } = "https://openweathermap.org/img/wn/{IconId}.png";
     public bool ImageZoom { get; set; } = true;
     public bool ImagePan { get; set; } = false;

Install_Web.md

@@ -76,6 +76,8 @@ services:
       # BaseFontSize: "17px"
       # WeatherApiKey: ""
       # ShowWeatherDescription: "true"
+      # WeatherShowHumidity: "false"
+      # WeatherShowTemperatureRange: "false"
       # WeatherIconUrl: "https://openweathermap.org/img/wn/{IconId}.png"
       # UnitSystem: "imperial"
       # WeatherLatLong: ""

docker/Settings.example.json

@@ -30,6 +30,8 @@
     "Style": "none",
     "BaseFontSize": "17px",
     "ShowWeatherDescription": true,
+    "WeatherShowHumidity": false,
+    "WeatherShowTemperatureRange": false,
     "WeatherIconUrl": "https://openweathermap.org/img/wn/{IconId}.png",
     "ImageZoom": true,
     "ImagePan": false,

docker/Settings.example.yml

@@ -28,6 +28,8 @@ General:
   Style: none
   BaseFontSize: 17px
   ShowWeatherDescription: true
+  WeatherShowHumidity: false
+  WeatherShowTemperatureRange: false
   WeatherIconUrl: 'https://openweathermap.org/img/wn/{IconId}.png'
   ImageZoom: true
   ImagePan: false

docker/example.env

@@ -43,6 +43,8 @@ ApiKey=KEY
 # BaseFontSize=17px
 # WeatherApiKey=
 # ShowWeatherDescription=true
+# WeatherShowHumidity=false
+# WeatherShowTemperatureRange=false
 # WeatherIconUrl=https://openweathermap.org/img/wn/{IconId}.png
 # UnitSystem=imperial
 # WeatherLatLong=

docs/docs/getting-started/configuration.md

@@ -92,6 +92,10 @@ General:
   BaseFontSize: '17px'  # string
   # Displays the description of the current weather.
   ShowWeatherDescription: true  # boolean
+  # Displays the current humidity.
+  WeatherShowHumidity: false  # boolean
+  # Displays the current minimum and maximum temperature.
+  WeatherShowTemperatureRange: false  # boolean
   # URL for the icon to load for the current weather condition
   WeatherIconUrl: 'https://openweathermap.org/img/wn/{IconId}.png'
   # Zooms into or out of an image and gives it a touch of life.

docs/docs/getting-started/configurationV1.md

@@ -33,6 +33,8 @@ sidebar_position: 4
 | [Weather](#weather)     | UnitSystem                 | imperial \| metric                  | imperial                                       | Imperial or metric system. (Fahrenheit or degrees)                                                                                    |
 | [Weather](#weather)     | Language                   | string                              | en                                             | 2 digit ISO code, sets the language of the weather description.                                                                       |
 | [Weather](#weather)     | ShowWeatherDescription     | boolean                             | true                                           | Displays the description of the current weather.                                                                                      |
+| [Weather](#weather)     | WeatherShowHumidity        | boolean                             | false                                          | Displays the current humidity.                                                                                                        |
+| [Weather](#weather)     | WeatherShowTemperatureRange | boolean                            | false                                          | Displays the current minimum and maximum temperature.                                                                                 |
 | [Weather](#weather)     | WeatherLatLong             | boolean                             | 40.730610,-73.935242                           | Set the weather location with lat/lon.                                                                                                |
 | [Weather](#weather)     | WeatherIconUrl             | string                              | https://openweathermap.org/img/wn/{IconId}.png | Sets the URL for an icon to display the weather conditions.                                                                           |
 | Clock                   | ShowClock                  | boolean                             | true                                           | Displays the current time.                                                                                                            |
@@ -111,4 +113,4 @@ volumes:
 ```
 
 [openweathermap-url]: https://openweathermap.org/appid
-[immich-api-url]: https://immich.app/docs/features/command-line-interface#obtain-the-api-key
+[immich-api-url]: https://immich.app/docs/features/command-line-interface#obtain-the-api-key

immichFrame.Web/src/app.css

@@ -84,9 +84,26 @@ div.weather-unit {
 	order: 4;
 }
 
+div.weather-stats {
+	display: flex;
+	justify-content: center;
+	gap: 0.75rem;
+}
+
+div.weather-stat {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+svg.weather-stat-icon {
+	width: 1em;
+	height: 1em;
+}
+
 img.icon-weather {
 	display: inline-block;
 	vertical-align: middle;
 	margin-top: -8px;	/* adjust icon top to line up with text */
 	order: 1;
-}
+}

immichFrame.Web/src/lib/components/elements/clock.svelte

@@ -5,6 +5,8 @@
 	import * as locale from 'date-fns/locale';
 	import { configStore } from '$lib/stores/config.store';
 	import { clientIdentifierStore } from '$lib/stores/persist.store';
+	import Icon from './icon.svelte';
+	import { mdiThermometer, mdiWaterPercent } from '@mdi/js';
 
 	api.init();
 
@@ -25,10 +27,22 @@
 	const timePortion = $derived(() => format(now, $configStore.clockFormat ?? 'HH:mm:ss'));
 
 	const primaryIconId = $derived(() => {
-        if (!weather?.iconId) return null;
-        const firstId = weather.iconId.split(',')[0].trim();
-        return firstId || null;
-    });
+		if (!weather?.iconId) return null;
+		const firstId = weather.iconId.split(',')[0].trim();
+		return firstId || null;
+	});
+
+	function formatTemperature(value?: number | null) {
+		return value?.toFixed(1);
+	}
+
+	function formatHumidity(value?: number | null) {
+		return value?.toFixed(0);
+	}
+
+	function isFiniteNumber(value?: number | null) {
+		return Number.isFinite(value);
+	}
 
 	onMount(() => {
 		const interval = setInterval(() => {
@@ -76,28 +90,49 @@
 		{timePortion()}
 	</p>
 	{#if weather}
-    <div id="clockweather">
-        <div
-            id="clockweatherinfo"
-            class="text-xl sm:text-xl md:text-2xl lg:text-3xl font-semibold text-shadow-sm weather-info"
-        >
-            {#if $configStore.weatherIconUrl && primaryIconId()}
-                <img 
-                    src="{$configStore.weatherIconUrl.replace('{IconId}', encodeURIComponent(primaryIconId()!))}" 
-                    class="icon-weather" 
-                    alt="{weather.description}"
-                >
-            {/if}
-
-            <div class="weather-location">{weather.location},</div>
-            <div class="weather-temperature">{weather.temperature?.toFixed(1)}°</div>
-        </div>
-
-        {#if $configStore.showWeatherDescription}
-            <p id="clockweatherdesc" class="text-sm sm:text-sm md:text-md lg:text-xl text-shadow-sm">
-                {weather.description}
-            </p>
-        {/if}
-    </div>
-{/if}
+		<div id="clockweather">
+			<div
+				id="clockweatherinfo"
+				class="text-xl sm:text-xl md:text-2xl lg:text-3xl font-semibold text-shadow-sm weather-info"
+			>
+				{#if $configStore.weatherIconUrl && primaryIconId()}
+					<img
+						src={$configStore.weatherIconUrl.replace(
+							'{IconId}',
+							encodeURIComponent(primaryIconId()!)
+						)}
+						class="icon-weather"
+						alt={weather.description}
+					/>
+				{/if}
+
+				<div class="weather-location">{weather.location},</div>
+				<div class="weather-temperature">{weather.temperature?.toFixed(1)}°</div>
+			</div>
+			<div class="weather-stats text-sm sm:text-sm md:text-md lg:text-xl text-shadow-sm">
+				{#if $configStore.weatherShowTemperatureRange && isFiniteNumber(weather.maximumTemperature) && isFiniteNumber(weather.minimumTemperature)}
+					<div id="clockweathertemperaturerange" class="weather-stat">
+						<Icon path={mdiThermometer} class="weather-stat-icon" />
+						<span
+							>{formatTemperature(weather.maximumTemperature)}° | {formatTemperature(
+								weather.minimumTemperature
+							)}°</span
+						>
+					</div>
+				{/if}
+				{#if $configStore.weatherShowHumidity && isFiniteNumber(weather.humidity)}
+					<div id="clockweatherhumidity" class="weather-stat">
+						<Icon path={mdiWaterPercent} class="weather-stat-icon" />
+						<span>{formatHumidity(weather.humidity)}%</span>
+					</div>
+				{/if}
+			</div>
+
+			{#if $configStore.showWeatherDescription}
+				<p id="clockweatherdesc" class="text-sm sm:text-sm md:text-md lg:text-xl text-shadow-sm">
+					{weather.description}
+				</p>
+			{/if}
+		</div>
+	{/if}
 </div>

immichFrame.Web/src/lib/immichFrameApi.ts

@@ -221,6 +221,8 @@ export type ClientSettingsDto = {
     style?: string | null;
     baseFontSize?: string | null;
     showWeatherDescription?: boolean;
+    weatherShowHumidity?: boolean;
+    weatherShowTemperatureRange?: boolean;
     weatherIconUrl?: string | null;
     imageZoom?: boolean;
     imagePan?: boolean;
@@ -232,6 +234,9 @@ export type ClientSettingsDto = {
 export type IWeather = {
     location?: string | null;
     temperature?: number;
+    minimumTemperature?: number | null;
+    maximumTemperature?: number | null;
+    humidity?: number;
     unit?: string | null;
     temperatureUnit?: string | null;
     description?: string | null;

openApi/swagger.json

@@ -1069,6 +1069,12 @@
           "showWeatherDescription": {
             "type": "boolean"
           },
+          "weatherShowHumidity": {
+            "type": "boolean"
+          },
+          "weatherShowTemperatureRange": {
+            "type": "boolean"
+          },
           "weatherIconUrl": {
             "type": "string",
             "nullable": true
@@ -1286,6 +1292,20 @@
             "type": "number",
             "format": "double"
           },
+          "minimumTemperature": {
+            "type": "number",
+            "format": "double",
+            "nullable": true
+          },
+          "maximumTemperature": {
+            "type": "number",
+            "format": "double",
+            "nullable": true
+          },
+          "humidity": {
+            "type": "number",
+            "format": "double"
+          },
           "unit": {
             "type": "string",
             "nullable": true
@@ -1527,4 +1547,4 @@
       }
     }
   }
-}
+}