[cosmetic] Weather module humidity positioning (#3330)

This PR adds an option to tweak the layout of the weather module. When
set, the humidity appears alongside the temperature:

![Screenshot from 2024-01-03
11-56-55](https://github.com/MagicMirrorOrg/MagicMirror/assets/551990/2a9fdf9a-21e4-49f5-8a48-68ea21902592)

CHANGELOG.md

@@ -13,6 +13,7 @@ _This release is scheduled to be released on 2024-04-01._
 
 - Output of system information to the console for troubleshooting (#3328 and #3337), ignore errors under aarch64 (#3349)
 - [chore] Add `eslint-plugin-package-json` to lint the `package.json` files (#3368)
+- weather: `showHumidity` config is now a string describing where to show this element. Supported values: "wind", "temp", "feelslike", "below", "none". (#3330)
 
 ### Updated
 

modules/default/weather/current.njk

@@ -1,3 +1,8 @@
+{% macro humidity() %}
+    {% if current.humidity %}
+        <span class="humidity"><span>{{ current.humidity | decimalSymbol }}</span><sup>&nbsp;<i class="wi wi-humidity humidity-icon"></i></sup></span>
+    {% endif %}
+{% endmacro %}
 {% if current %}
     {% if not config.onlyTemp %}
         <div class="normal medium">
@@ -16,8 +21,8 @@
                     </sup>
                 {% endif %}
             </span>
-            {% if config.showHumidity and current.humidity %}
+            {% if config.showHumidity === "wind" %}
-                <span>{{ current.humidity | decimalSymbol }}</span><sup>&nbsp;<i class="wi wi-humidity humidity-icon"></i></sup>
+                {{ humidity() }}
             {% endif %}
             {% if config.showSun %}
                 <span class="wi dimmed wi-{{ current.nextSunAction() }}"></span>
@@ -40,6 +45,9 @@
     <div class="large light">
         <span class="wi weathericon wi-{{ current.weatherType }}"></span>
         <span class="bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
+        {% if config.showHumidity === "temp" %}
+            <span class="medium bright">{{ humidity() }}</span>
+        {% endif %}
     </div>
     <div class="normal light indoor">
         {% if config.showIndoorTemperature and indoor.temperature %}
@@ -59,6 +67,9 @@
         <div class="normal medium feelslike">
             {% if config.showFeelsLike %}
                 <span class="dimmed">
+                    {% if config.showHumidity === "feelslike" %}
+                        {{ humidity() }}
+                    {% endif %}
                     {{ "FEELS" | translate({DEGREE: current.feelsLike() | roundValue | unit("temperature") | decimalSymbol }) }}
                 </span>
                 <br />
@@ -76,6 +87,9 @@
             {% endif %}
         </div>
     {% endif %}
+    {% if config.showHumidity === "below" %}
+        <span class="medium dimmed">{{ humidity() }}</span>
+    {% endif %}
 {% else %}
     <div class="dimmed light small">{{ "LOADING" | translate }}</div>
 {% endif %}

modules/default/weather/weather.js

@@ -14,7 +14,7 @@ Module.register("weather", {
 		updateInterval: 10 * 60 * 1000, // every 10 minutes
 		animationSpeed: 1000,
 		showFeelsLike: true,
-		showHumidity: false,
+		showHumidity: "none", // this is now a string; see current.njk
 		showIndoorHumidity: false,
 		showIndoorTemperature: false,
 		allowOverrideNotification: false,
@@ -80,6 +80,10 @@ Module.register("weather", {
 			Log.warn("Your are using the deprecated config values 'useBeaufort'. Please switch to windUnits!");
 			this.windUnits = "beaufort";
 		}
+		if (typeof this.config.showHumidity === "boolean") {
+			Log.warn("[weather] Deprecation warning: Please consider updating showHumidity to the new style (config string).");
+			this.config.showHumidity = this.config.showHumidity ? "wind" : "none";
+		}
 
 		// Initialize the weather provider.
 		this.weatherProvider = WeatherProvider.initialize(this.config.weatherProvider, this);

tests/configs/modules/weather/currentweather_default.js

@@ -7,6 +7,7 @@ let config = {
 			position: "bottom_bar",
 			config: {
 				location: "Munich",
+				showHumidity: "feelslike",
 				mockData: '"#####WEATHERDATA#####"'
 			}
 		}

tests/configs/modules/weather/currentweather_options.js

@@ -9,7 +9,7 @@ let config = {
 				windUnits: "beaufort",
 				showWindDirectionAsArrow: true,
 				showSun: false,
-				showHumidity: true,
+				showHumidity: "wind",
 				roundTemp: true,
 				degreeLabel: true
 			}

tests/configs/modules/weather/currentweather_units.js

@@ -9,7 +9,7 @@ let config = {
 				location: "Munich",
 				mockData: '"#####WEATHERDATA#####"',
 				decimalSymbol: ",",
-				showHumidity: true
+				showHumidity: "wind"
 			}
 		}
 	]

tests/e2e/modules/weather_current_spec.js

@@ -23,7 +23,11 @@ describe("Weather module", () => {
 			});
 
 			it("should render feels like temperature", async () => {
-				await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "Feels like -5.6°")).resolves.toBe(true);
+				// Template contains   which renders as \xa0
+				await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed", "93.7\xa0 Feels like -5.6°")).resolves.toBe(true);
+			});
+			it("should render humidity next to feels-like", async () => {
+				await expect(weatherFunc.getText(".weather .normal.medium.feelslike span.dimmed .humidity", "93.7")).resolves.toBe(true);
 			});
 		});
 	});
@@ -53,8 +57,8 @@ describe("Weather module", () => {
 			expect(elem.outerHTML).toContain("transform:rotate(250deg)");
 		});
 
-		it("should render humidity", async () => {
+		it("should render humidity next to wind", async () => {
-			await expect(weatherFunc.getText(".weather .normal.medium span:nth-child(3)", "93.7")).resolves.toBe(true);
+			await expect(weatherFunc.getText(".weather .normal.medium .humidity", "93.7")).resolves.toBe(true);
 		});
 
 		it("should render degreeLabel for temp", async () => {