Skip to content

weather: add possibility to override njk's and css#4051

Merged
KristjanESPERANTO merged 2 commits intoMagicMirrorOrg:developfrom
khassel:weather
Mar 8, 2026
Merged

weather: add possibility to override njk's and css#4051
KristjanESPERANTO merged 2 commits intoMagicMirrorOrg:developfrom
khassel:weather

Conversation

@khassel
Copy link
Copy Markdown
Collaborator

@khassel khassel commented Mar 6, 2026

This is an approach for #2909

It adds 2 values to the config:

		themeDir: "./",
		themeCustomScripts: []

themeDir must be specified relative to the weather dir.

Example config:

		{
			module: "weather",
			position: "top_center",
			config: {
				weatherProvider: "openmeteo",
				type: "current",
				lat: 40.776676,
				lon: -73.971321,
				themeDir: "../../../modules/MyWeatherTemplate/",
				themeCustomScripts: [ "skycons.js", "weathertheme.js" ],
			}
		},

The themeDir must contain the 4 files

  • current.njk
  • forecast.njk
  • hourly.njk
  • weather.css

You can add more files (if needed) and add them to the themeCustomScripts so they are loaded as script.

There are 2 methods inserted which are called if defined:

  • initWeatherTheme: For doing special things when starting the module
  • updateWeatherTheme: For doing special things before updating the dom

I see this as a simple approach for overriding the default njk templates and css. I did already convert my MMM-WeatherBridge into a template.

@sdetweil
Copy link
Copy Markdown
Collaborator

sdetweil commented Mar 6, 2026

Weather doesn’t use njk in next release

@khassel
Copy link
Copy Markdown
Collaborator Author

khassel commented Mar 6, 2026

I used last develop as base, there are still njk's.

@sdetweil
Copy link
Copy Markdown
Collaborator

sdetweil commented Mar 6, 2026

Weird. I thought he removed them, we had that conversation..

@khassel
Copy link
Copy Markdown
Collaborator Author

khassel commented Mar 6, 2026

weather was moved from browser-only to using server-side but the "gui" was not touched

@KristjanESPERANTO
Copy link
Copy Markdown
Collaborator

KristjanESPERANTO commented Mar 6, 2026

Nice! I think it would be great to have this possibility 🙌

One question without digging into the changes: in the linked issue #2909, @sdetweil suggested a simpler approach – just adding config variables for the template file names and css, defaulting to the current values, something like:

currentNjk: "defaultmodules/weather/current.njk",
hourlyNjk: "defaultmodules/weather/hourly.njk",
forecastNjk: "defaultmodules/weather/forecast.njk",
weatherCss: "defaultmodules/weather/weather.css",

Users could then override only what they need with a path relative to the MM root, e.g.:

currentNjk: "config/mycurrent.njk",

That would already allow users to point to custom files without touching the module code.

Would that cover the main use case, or do you think the themeDir + themeCustomScripts + window.* hooks are genuinely needed for what you have in mind? Just want to understand your approach 🙂

@KristjanESPERANTO
Copy link
Copy Markdown
Collaborator

You can add more files (if needed) and add them to the themeCustomScripts so they are loaded as script.

Ah, that wouldn't be possible with the simpler approach... Right?

@khassel
Copy link
Copy Markdown
Collaborator Author

khassel commented Mar 6, 2026

I think to define another dir is a simpler approach instead of 4 variables.

You find my (testing) example here, I need 2 additional scripts skycons.js and weathertheme.js from that repo.

Can explain more tomorrow if needed (now too late) ...

@KristjanESPERANTO
Copy link
Copy Markdown
Collaborator

I think I'm starting to understand where you are going with this – looking at MMM-WeatherBridge it makes more sense and gives impressive flexibility 👍

One concern though: wouldn't window.initWeatherTheme and window.updateWeatherTheme cause problems when having multiple weather instances with different themes? The second instance would overwrite the globals defined by the first, wouldn't it?

@khassel
Copy link
Copy Markdown
Collaborator Author

khassel commented Mar 7, 2026

think so, had no better idea as window ...

Comment thread defaultmodules/weather/weather.js Outdated
@KristjanESPERANTO
Copy link
Copy Markdown
Collaborator

think so, had no better idea as window ...

Me neither, but maybe that's (multiple weather instances with different themes) an edge case that we don't need to support and should just accept as a known limitation.

@khassel
Copy link
Copy Markdown
Collaborator Author

khassel commented Mar 7, 2026

edge case that we don't need to support and should just accept as a known limitation.

yes, and the user can implement the multiple instances stuff inside the 2 procedures if needed.

Co-authored-by: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com>
@KristjanESPERANTO
Copy link
Copy Markdown
Collaborator

Looks good to me! 🙂

One thought: now that the infrastructure is in place, would it make sense to already ship some themes in core (e.g. under modules/default/weather/themes/)? The MMM-WeatherBridge layout would be a great candidate and would give users something to work with right away.

On the other hand, bundled themes also mean ongoing maintenance responsibility for us. Maybe better to merge this as-is and see if the community picks it up first?

@khassel
Copy link
Copy Markdown
Collaborator Author

khassel commented Mar 7, 2026

Maybe better to merge this as-is and see if the community picks it up first?

I think so. I didn't want to burden this repository with my weather setup as well.

The idea is to add a detailed example to the documentation after the merge.

@KristjanESPERANTO KristjanESPERANTO merged commit 35cd4d8 into MagicMirrorOrg:develop Mar 8, 2026
9 checks passed
@KristjanESPERANTO
Copy link
Copy Markdown
Collaborator

Nice! I'll definitely play around with it, as it has the potential to make many third-party weather modules unnecessary.

@khassel khassel deleted the weather branch March 8, 2026 21:34
KristjanESPERANTO pushed a commit that referenced this pull request Mar 9, 2026
Follow up for #4051 

- fix loading default weather.css (the construction with `./weather.css`
gave a 404)
- accept `themeDir` with and without trailing slash
@khassel khassel mentioned this pull request Apr 1, 2026
khassel added a commit that referenced this pull request Apr 1, 2026
## Release Notes
Thanks to: @angeldeejay, @in-voker, @JHWelch, @khassel,
@KristjanESPERANTO, @rejas, @sdetweil
> ⚠️ This release needs nodejs version >=22.21.1 <23 || >=24 (no change
to previous release)

[Compare to previous Release
v2.34.0](v2.34.0...v2.25.0)

> ⚠️ We introduced some internal changes with this release, please read
[this forum
post](https://forum.magicmirror.builders/topic/20138/upcoming-release-april-1-2026-breaking-changes-some-operational-changes)
before upgrading!

### [core]
- Prepare Release 2.35.0 (#4071)
- docs: add security policy and vulnerability reporting guidelines
(#4069)
- refactor: simplify internal `require()` calls (#4056)
- allow environment variables in cors urls (#4033)
- fix cors proxy getting binary data (e.g. png, webp) (#4030)
- fix: correct secret redaction and optimize loadConfig (#4031)
- change loading config.js, allow variables in config.js and try to
protect sensitive data (#4029)
- remove kioskmode (#4027)
- Add dark theme logo (#4026)
- move custom.css from css to config (#4020)
- move default modules from /modules/default to /defaultmodules (#4019)
- update node versions in workflows (#4018)
- [core] refactor: extract and centralize HTTP fetcher (#4016)
- fix systeminformation not displaying electron version (#4012)
- Update node-ical and support it's rrule-temporal changes (#4010)
- Change default start scripts from X11 to Wayland (#4011)
- refactor: unify favicon for index.html and Electron (#4006)
- [core] run systeminformation in subprocess so the info is always
displayed (#4002)
- set next release dev number (#4000)

### [dependencies]
- update dependencies (#4068)
- update dependencies incl. electron to v41 (#4058)
- chore: upgrade ESLint to v10 and fix newly surfaced issues (#4057)
- chore: update ESLint and plugins, simplify config, apply new rules
(#4052)
- chore: update dependencies + add exports, files, and sideEffects
fields to package.json (#4040)
- [core] refactor: enable ESLint rule require-await and handle detected
issues (#4038)
- Update node-ical and other deps (#4025)
- chore: update dependencies (#4021)
- chore(eslint): migrate from eslint-plugin-vitest to
@vitest/eslint-plugin and run rules only on test files (#4014)
- Update deps as requested by dependabot (#4008)
- update Collaboration.md and dependencies (#4001)

### [logging]
- refactor: further logger clean-up (#4050)
- Fix Node.js v25 logging prefix and modernize logger (#4049)

### [modules/calendar]
- fix(calendar): make showEnd behavior more consistent across time
formats (#4059)
- test(calendar): fix hardcoded date in event shape test (#4055)
- [calendar] refactor: delegate event expansion to node-ical's
expandRecurringEvent (#4047)
- calendar.js: remove useless hasCalendarURL function (#4028)
- fix(calendar): update to node-ical 0.23.1 and fix full-day recurrence
lookup (#4013)
- fix(calendar): correct day-of-week for full-day recurring events
across all timezones (#4004)

### [modules/newsfeed]
- fix(newsfeed): fix full article view and add framing check (#4039)
- [newsfeed] refactor: migrate to centralized HTTPFetcher (#4023)

### [modules/weather]
- fix(weather): fix openmeteo forecast stuck in the past (#4064)
- fix(weather): fix weathergov forecast day labels off by one (#4065)
- weather: fixes for templates (#4054)
- weather: add possibility to override njk's and css (#4051)
- Use getDateString in openmeteo (#4046)
- [weather] refactor: migrate to server-side providers with centralized
HTTPFetcher (#4032)
- [weather] feat: add Weather API Provider  (#4036)

### [testing]
- chore: remove obsolete Jest config and unit test global setup (#4044)
- replace template_spec test with config_variables test (#4034)
- refactor(clientonly): modernize code structure and add comprehensive
tests (#4022)
- Switch to undici Agent for HTTPS requests (#4015)
- chore: migrate CI workflows to ubuntu-slim for faster startup times
(#4007)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com>
Co-authored-by: Bugsounet - Cédric <github@bugsounet.fr>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: sam detweiler <sdetweil@gmail.com>
Co-authored-by: Veeck <github@veeck.de>
Co-authored-by: veeck <gitkraken@veeck.de>
Co-authored-by: Magnus <34011212+MagMar94@users.noreply.github.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: DevIncomin <56730075+Developer-Incoming@users.noreply.github.com>
Co-authored-by: Nathan <n8nyoung@gmail.com>
Co-authored-by: mixasgr <mixasgr@users.noreply.github.com>
Co-authored-by: Savvas Adamtziloglou <savvas-gr@greeklug.gr>
Co-authored-by: Konstantinos <geraki@gmail.com>
Co-authored-by: OWL4C <124401812+OWL4C@users.noreply.github.com>
Co-authored-by: BugHaver <43462320+bughaver@users.noreply.github.com>
Co-authored-by: BugHaver <43462320+lsaadeh@users.noreply.github.com>
Co-authored-by: Koen Konst <koenspero@gmail.com>
Co-authored-by: Koen Konst <c.h.konst@avisi.nl>
Co-authored-by: dathbe <github@beffa.us>
Co-authored-by: Marcel <m-idler@users.noreply.github.com>
Co-authored-by: Kevin G. <crazylegstoo@gmail.com>
Co-authored-by: Jboucly <33218155+jboucly@users.noreply.github.com>
Co-authored-by: Jboucly <contact@jboucly.fr>
Co-authored-by: Jarno <54169345+jarnoml@users.noreply.github.com>
Co-authored-by: Jordan Welch <JordanHWelch@gmail.com>
Co-authored-by: Blackspirits <blackspirits@gmail.com>
Co-authored-by: Samed Ozdemir <samed@xsor.io>
Co-authored-by: in-voker <58696565+in-voker@users.noreply.github.com>
Co-authored-by: Andrés Vanegas Jiménez <142350+angeldeejay@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants