[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)
This commit is contained in:
Ross Younger 2024-01-29 19:45:49 +13:00 committed by GitHub
parent 431bf22adb
commit 57de389e01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 32 additions and 8 deletions

View File

@ -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) - 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) - [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 ### Updated

View File

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

View File

@ -14,7 +14,7 @@ Module.register("weather", {
updateInterval: 10 * 60 * 1000, // every 10 minutes updateInterval: 10 * 60 * 1000, // every 10 minutes
animationSpeed: 1000, animationSpeed: 1000,
showFeelsLike: true, showFeelsLike: true,
showHumidity: false, showHumidity: "none", // this is now a string; see current.njk
showIndoorHumidity: false, showIndoorHumidity: false,
showIndoorTemperature: false, showIndoorTemperature: false,
allowOverrideNotification: false, allowOverrideNotification: false,
@ -80,6 +80,10 @@ Module.register("weather", {
Log.warn("Your are using the deprecated config values 'useBeaufort'. Please switch to windUnits!"); Log.warn("Your are using the deprecated config values 'useBeaufort'. Please switch to windUnits!");
this.windUnits = "beaufort"; 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. // Initialize the weather provider.
this.weatherProvider = WeatherProvider.initialize(this.config.weatherProvider, this); this.weatherProvider = WeatherProvider.initialize(this.config.weatherProvider, this);

View File

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

View File

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

View File

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

View File

@ -23,7 +23,11 @@ describe("Weather module", () => {
}); });
it("should render feels like temperature", async () => { 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 &nbsp; 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)"); 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 () => { it("should render degreeLabel for temp", async () => {