MMM-WeatherHero

A MagicMirror² hero weather card: a big current temperature with a large weather icon that overlaps the reading, an optional wind / humidity / feels-like row, and a one-row horizontal forecast. Powered by the built-in MagicMirror² weather module. Put the town name in the module header (it renders right-aligned).

The weather icons are Meteocons by Bas Milius, bundled under the permissive MIT license (free for commercial use) — no external icon fonts, no non-free assets, no runtime downloads.

Installation

cd ~/MagicMirror/modules
git clone https://github.com/ago1776/MMM-WeatherHero

Add two built-in weather instances and WeatherHero to config/config.js. The weather instances do not need a position: they fetch and broadcast data without rendering. This Open-Meteo example needs no API key:

{
  module: "weather",
  config: {
    weatherProvider: "openmeteo",
    type: "current",
    lat: YOUR_LAT,
    lon: YOUR_LON
  }
},
{
  module: "weather",
  config: {
    weatherProvider: "openmeteo",
    type: "forecast",
    lat: YOUR_LAT,
    lon: YOUR_LON,
    maxNumberOfDays: 5
  }
},
{
  module: "MMM-WeatherHero",
  position: "top_right",
  header: "Weather",
  config: {
    forecastDays: 5,
    showMetrics: false
  }
}

WeatherHero listens for the normalized WEATHER_UPDATED notification. Provider choice, coordinates, API keys, refresh intervals, provider-specific parsing, and unit conversion belong in the built-in weather instances. Replace openmeteo with any compatible MagicMirror² weather provider and configure it as documented by MagicMirror².

Because WeatherHero consumes MagicMirror's normalized weather objects, it is not tied to OpenWeather or Open-Meteo. It should work with the other providers supported by the built-in weather module, including Buienradar, Environment Canada, OpenWeatherMap, Pirate Weather, SMHI, the UK Met Office, WeatherAPI, Weatherbit, WeatherFlow, Weather.gov, and Yr. It has been tested with a configured default provider; reports from users of other providers are welcome.

Migrating from version 1.x

Version 2.0.0 no longer fetches OpenWeather data directly. Remove appid, locationID, and updateInterval from the WeatherHero configuration. For example, replace the old configuration:

{
  module: "MMM-WeatherHero",
  position: "top_right",
  header: "Weather",
  config: {
    appid: "YOUR_OPENWEATHER_API_KEY",
    locationID: "2950159",
    updateInterval: 10 * 60 * 1000
  }
}

with two built-in weather providers and the simplified WeatherHero configuration:

{
  module: "weather",
  config: {
    weatherProvider: "openmeteo",
    type: "current",
    lat: YOUR_LAT,
    lon: YOUR_LON
  }
},
{
  module: "weather",
  config: {
    weatherProvider: "openmeteo",
    type: "forecast",
    lat: YOUR_LAT,
    lon: YOUR_LON,
    maxNumberOfDays: 5
  }
},
{
  module: "MMM-WeatherHero",
  position: "top_right",
  header: "Weather",
  config: {
    forecastDays: 5,
    showMetrics: false
  }
}

The two built-in weather instances intentionally have no position, so they provide data without displaying the standard weather interface. Existing users may keep their current provider instead of openmeteo; move its provider name, location, credentials, and refresh settings into both built-in weather configurations as required by that provider. WeatherHero's node_helper.js is no longer used and is removed in version 2.0.0.

Configuration options

Option	Type	Default	Description
locale	string	null	Locale for weekday names (e.g. "en-GB", null = browser).
units	string	MagicMirror default	Used only to label wind as m/s or mph; match the weather instances.
feelsLikeLabel	string	"feels"	Label under the feels-like chip.
showMetrics	bool	false	Show the wind / humidity / feels-like chip row.
forecastDays	number	5	Number of days in the forecast row.
iconPack	string	null	Bring your own icon set — see below. Overrides the bundled SVGs.

Custom icon packs

The bundled Meteocons look great and need nothing. If you'd rather use your own artwork (e.g. a photorealistic PNG set), point iconPack at a folder of PNGs — a module-relative path, an absolute path, or a URL:

config: { iconPack: "myicons" }   // modules/MMM-WeatherHero/myicons/

Provide one PNG per condition key (drop the .png in config, the module appends it):

sun  moon  cloud  partly-day  partly-night  rain  storm  snow  fog

⚠️ Licensing is on you. Only bundle or ship icon sets you are allowed to. Many beautiful weather sets (e.g. VClouds) are non-commercial — fine for your own private mirror, but not for a public/commercial distribution. The default Meteocons are MIT and safe everywhere.

Dependencies

No module dependencies. MagicMirror²'s built-in weather module supplies the data.

Credits & License

Module code: MIT © Andreas Göpfert.

Weather icons: Meteocons — MIT © Bas Milius. The full icon license text is bundled in ICONS-LICENSE.