MMM-OpenWeatherForecastDeluxe

This a module for MagicMirror.
https://magicmirror.builders/
https://github.com/MichMich/MagicMirror

A weather module that displays current, hourly and daily forecast information using data from the OpenWeather One Call API.

Tiled Layouts	Bars Layout (daily forecast only)

Installation

NOTE: This module uses the Nunjucks templating system introduced in version 2.2.0 of MagicMirror. If you're seeing nothing on your display where you expect this module to appear, make sure your MagicMirror version is at least 2.2.0.

Navigate into your MagicMirror modules folder and execute
git clone https://github.com/luxiouronimo/MMM-OpenWeatherForecastDeluxe.git.
Enter the new MMM-OpenWeatherForecastDeluxe directory and execute npm install.

Configuration

At a minimum you need to supply the following required configuration parameters:

apikey
latitude
longitude

You can request an API key to access data here: https://openweathermap.org/api/one-call-api

Free tier is fine -- by itself, a single instance of this module will not make any where near 1000 request on one day with the default updateInterval of 10.

Find out your latitude and longitude here: https://www.latlong.net/

Sample Configuration

{
  module: "MMM-OpenWeatherForecastDeluxe",
  header: "Tiled Layouts",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    latitude: "51.506130",
    longitude: "-0.090270",
    hourlyForecastInterval: 2,
    maxDailiesToShow: 3,
    ignoreToday: true,
    showDayAsTomorrowInDailyForecast: true,
    showPrecipitationProbability: false,
    showWindDirection: false,
    showWindGust: false,
    iconset: "4c",
    useAnimatedIcons: false,
    label_high: "",
    label_low: "",
  }
},

More example configurations below in Layouts and Configs

Using Multiple Instances

Using increasingly larger requestDelay values can help prevent the API calls of multiple instances from being too close together, but ultimately each instance will make it's own api calls, which when combined with other modules that might use the same API, can threaten your rate limit.

You can use the listenerOnly option with multiple instances, so that only a primary one makes API calls, and other listenerOnly instances strictly do not, and instead receive notifications broadcasted with the api's payload whenever the primary instance gets its data. listenerOnly instances will not use/do not need the apikey, latitude, longitude, endpoint, updateInterval or requestDelay paremeters.

Optional Parameters

Option	Description
`endpoint`	The URL of the onecall api; v2.5 is free, v3.0 requires a subscription and can be used with `https://api.openweathermap.org/data/3.0/onecall` Type `String` Defaults to `https://api.openweathermap.org/data/2.5/onecall`
`updateInterval`	How frequently, in minutes, to poll for data. Be careful not to set this too frequent so that you don't exceed the 1000 free requests per day cap. (†SEE NOTE ABOUT MULTIPLE INSTANCES) Type `Number` Defaults to `10`
`requestDelay`	In milliseconds, how long to delay the request. If you have multiple instances of the module running, set one of them to a delay of a second or two to keep the API calls from being too close together. Type `Number` Defaults to `250`
`listenerOnly`	For use with multiple instances of this module; set this to `true` on subsequent instances and they will not make any api calls. They will receive updated weather payloads when an instance of this module with the default `listenerOnly: false` value makes an api call. Type `Boolean` Defaults to `false`
`updateFadeSpeed`	How quickly in milliseconds to fade the module out and in upon data refresh. Set this to `0` for no fade. Type `Number` Defaults to `500` (i.e.: 1/2 second).
`units`	One of the following: `imperial`, `metric`. Type `String` Defaults to units set for Magic Mirror. See also: details on units.
`language`	The language to be used for display. Type `String` Defaults to the language set for Magic Mirror, but can be overridden with any of the available language codes.
`colored`	Whether to present module in colour or black-and-white. Note, if set to `false`, the monochramtic version of your chosen icon set will be forced if it exist. Type `Boolean` Defaults to `true`
`highColor`	The color to use for the current and daily forecast high temperatures. Type `String/hex color` Defaults to `'#F8DD70'`
`lowColor`	The color to use for the current and daily forecast low temperatures. Type `String/hex color` Defaults to `'#6FC4F5'`
`relativeColors`	If set to `true`, the daily forecast high and low temps (and bars) will be colored relative to the overall high and low for the range of days. Type `Boolean` Defaults to `false`
`showCurrentConditions`	Whether to show current temperaure and current conditions icon. Type `Boolean` Defaults to `true`
`showExtraCurrentConditions`	Whether to show additional current conditions such as high/low temperatures, precipitation and wind speed. Type `Boolean` Defaults to `true`
`showSummary`	Whether to show the forecast summary. See the full list. Type `Boolean` Defaults to `true`
`hourlyForecastHeaderText`	Show a header above the hourly forecast display. Type `String` Defaults to `""`
`showForecastTableColumnHeaderIcons`	Whether to show icons column headers on the forecast table. Type `Boolean` Defaults to `true`
`showHourlyForecast`	Whether to show hourly forecast information. when set to `true` it works with the `hourlyForecastInterval` and `maxHourliesToShow` parameters. Type `Boolean` Defaults to `true`
`hourlyForecastLayout`	Can be set to `table` or `tiled`. How to display hourly and forecast information. See below for screenshot examples of each. Type `String` Defaults to `tiled`
`hourlyForecastInterval`	How many hours apart each listed hourly forecast is. Type `Number` Defaults to `3`
`maxHourliesToShow`	How many hourly forecasts to list. Type `Number` Defaults to `3`
`dailyForecastHeaderText`	Show a header above the daily forecast display. Type `String` Defaults to `""`
`showDailyForecast`	Whether to show daily forecast information. when set to `true` it works with the `maxDailiesToShow` parameter. Type `Boolean` Defaults to `true`
`dailyForecastLayout`	Can be set to `bars`, `table` or `tiled`. How to display hourly and forecast information. See below for screenshot examples of each. Type `String` Defaults to `tiled`
`maxDailiesToShow`	How many daily forecasts to list. Type `Number` Defaults to `3`
`ignoreToday`	If set to `true`, today's weather will not be displayed in daily forecast. Type `Boolean` Defaults to `false`
`showDailyLow`	Show the day's low temperature in the daily forecast and current conditions. Type `Boolean` Defaults to `true`
`showDailyHiLowSeparator`	Show the `label_hi_lo_separator` between the daily forecast's high and low temperatures. Type `Boolean` Defaults to `true`
`showDayAsTodayInDailyForecast`	Show today's day as `label_today` in daily forecast. Type `Boolean` Defaults to `false`
`showDayAsTomorrowInDailyForecast`	Show tomorrow's day as `label_tomorrow` in daily forecast. Type `Boolean` Defaults to `false`
`showFeelsLike`	Whether to show the temperature parameter that accounts for human perception of weather in the current conditions. (More info) Type `Boolean` Defaults to `true`
`showPrecipitationProbability`	Whether to show precipitation probability. This affects current conditions, hourly and daily forecasts Type `Boolean` Defaults to `true`
`showPrecipitationSeparator`	Whether to show `label_precip_separator` between the probability and the amount. This affects current conditions, hourly and daily forecasts Type `Boolean` Defaults to `true`
`showPrecipitationAmount`	Whether to show precipitation accumulation. This affects current conditions, hourly and daily forecasts Type `Boolean` Defaults to `true`
`showWindSpeed`	Whether to show wind speed. This affects current conditions, hourly and daily forecasts Type `Boolean` Defaults to `true`
`showWindDirection`	Whether to show wind direction. This affects current conditions, hourly and daily forecasts Type `Boolean` Defaults to `true`
`showWindGust`	Whether to show wind gust information. This affects current conditions, hourly and daily forecasts Type `Boolean` Defaults to `true`
`iconset`	Which icon set to use. See below for [previews of the icon sets](README.md#icon-sets). Type `String` Defaults to `1c`
`mainIconset`	Which icon set to use for current weather. See below for (previews of the icon sets)[#Icon Sets]. Type `String` Defaults to `iconset value`
`useAnimatedIcons`	* LEGACY, please use icon set '6fa' or '6oa' for animated icons * Whether to use the Dark Sky's own animated icon set. When set to true, this will override your choice for `iconset`. However, flat icons will still be used in some instances. For example if you set the `animateMainIconOnly` parameter to true, daily and hourly forecasts will not be animated and instead will use your choice for `iconset`. Inline icons (i.e. used to prefix precipitation and wind information) will always be flat. A good `iconset` match for the animated set is `1c`. Type `Boolean` Defaults to `true`
`animateMainIconOnly`	When set to `true`, only the main current conditions icon is animated. The rest use your choice for `iconset` (`1c` is a good match for the animated icon). If you are running on a low-powered device like a Raspberry Pi, performance may suffer if you set this to `false`. In my testing on a Pi 3b, enabling this ramped up CPU temperature by 15° - 20°, and fade transitions were not smooth. Type `Boolean` Defaults to `true`
`showInlineIcons`	Whether to prefix wind and precipitation information with an icon. Only affects the `tiled` layout. Type `Boolean` Defaults to `true`
`mainIconSize`	The square pixel size of the weather icon in the current conditions. Type `Number` Defaults to `100`
`forecastTiledIconSize`	The square pixel size of the weather icon in the `tiled` layouts. Type `Number` Defaults to `70`
`forecastTableIconSize`	The square pixel size of the weather icon in the `table` and `bars` layouts. Type `Number` Defaults to `30`
`showAttribution`	Whether to include attribution at the bottom of the module for the data source (Powered by OpenWeather) Type `Boolean` Defaults to `true`

Units & Labels

While OpenWeather supports other units, thus far this module has focussed on imperial and metric. Be aware of the unit option above, which defaults to the units set for Magic Mirror.

If you want a space before or after the label, include it here.

Option	Description
`label_temp_i`	The label you wish to display following imperial/fahrenheit temperatures. Type `String` Defaults to `"°"`
`label_temp_m`	The label you wish to display following metric/celcius temperatures. Type `String` Defaults to `"°"`
`label_maximum`	The label you wish to display for prefixing wind gusts. Type `String` Defaults to `"max "`.
`label_high`	The label you wish to display for prefixing high temperature. Type `String` Defaults to `"H "`
`label_low`	The label you wish to display for prefixing low temperature. Type `String` Defaults to `"L "`
`label_hi_lo_separator`	The label between high and low temperatures. Type `String` Defaults to `" / "`
`label_feels_like`	The label that preceeds the "feels like" temperature. Type `String` Defaults to `"Feels like "`
`label_timeFormat`	How you want the time formatted for hourly forecast display. Accepts any valid moment.js format. For example, specify short 24h format with `"k[h]"` (e.g.: `14h`) Type `String` Defaults to `"h a"` (e.g.: `9 am`)
`label_days`	How you would like the days of the week displayed for daily forecasts. Assumes index `0` is Sunday. Type `Array of Strings` Defaults to `["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]`
`label_today`	The label you wish to use for today in daily forecast when `showDayAsTodayInDailyForecast` is `true`. Type `String` Defaults to `"Today"`
`label_tomorrow`	The label you wish to use for tomorrow in daily forecast when `showDayAsTomorrowInDailyForecast` is `true`. Type `String` Defaults to `"Tomorrow"`
`label_ordinals`	How you would like wind direction to be displayed. Assumes index `0` is North and proceeds clockwise. Meteorological wind direction is defined as the direction from which it originates. Hence, a wind coming from the south has a wind direction of 180 degrees; one from the east is 90. Type `Array of Strings` Defaults to `["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"]`
`label_rain_i`	The imperial unit label for rain accumulation. Type `String` Defaults to `" in"`
`label_rain_m`	The metric unit label for rain accumulation. Type `String` Defaults to `" mm"`
`label_snow_i`	The imperial unit label for snow accumulation. Type `String` Defaults to `" in"`
`label_snow_m`	The metric unit label for snow accumulation. Type `String` Defaults to `" mm"`
`label_wind_i`	The imperial unit label for wind speed. Type `String` Defaults to `" mph"`
`label_wind_m`	The metric unit label for wind speed. Type `String` Defaults to `" m/s"`
`label_gust_i`	The imperial unit label for wind gust. Type `String` Defaults to `" mph"`
`label_gust_m`	The metric unit label for wind gust. Type `String` Defaults to `" m/s"`
`label_no_precip`	The value to show instead of 0% precipitation. Type `String` Defaults to `"—"`
`label_no_wind`	The value to show instead of 0(wind units). Type `String` Defaults to `"—"`
`label_precip_separator`	The label to show between precipitation probability and amount. Type `String` Defaults to `" "`
`label_gust_wrapper_prefix`	The label that preceeds the wind gust. Type `String` Defaults to `" ("`
`label_gust_wrapper_suffix`	The label that follows the wind gust. Type `String` Defaults to `")"`

Decimal Precision

Options for specifying the decimal precision for various measurements. OpenWeather's data is typically up to 2 decimal places, so the useful integer values are from 0 to 2.

Option	Description
`dp_precip_leading_zero`	Whether to include the leading zero for precipitation amount. Type `Boolean` Defaults to `false`
`dp_wind_leading_zero`	Whether to include the leading zero for wind measurements. Type `Boolean` Defaults to `false`
`dp_rain_i`	Decimal precision for imperial rain accumulation (in inches) Type `Integer` Defaults to `2`
`dp_rain_m`	Decimal precision for metric rain accumulation (in millimeters) Type `Integer` Defaults to `0`
`dp_snow_i`	Decimal precision for imperial snow accumulation (in inches) Type `Integer` Defaults to `2`
`dp_snow_m`	Decimal precision for metric snow accumulation (in millimeters) Type `Integer` Defaults to `0`
`dp_temp_i`	Decimal precision for imperial/fahrenheit temperatures Type `Integer` Defaults to `0`
`dp_temp_m`	Decimal precision for metric/celcius temperatures Type `Integer` Defaults to `0`
`dp_wind_i`	Decimal precision for imperial wind speeds (in miles per hour) Type `Integer` Defaults to `0`
`dp_wind_m`	Decimal precision for metric wind speds (in meters per second) Type `Integer` Defaults to `0`

Icon Sets

Layouts and Configs

{
  module: "MMM-OpenWeatherForecastDeluxe",
  header: "Table Layouts",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    latitude: "51.506130",
    longitude: "-0.090270",
    relativeColors: true,
    hourlyForecastLayout: "table",
    maxHourliesToShow: 5,
    dailyForecastLayout: "table",
    maxDailiesToShow: 5,
    ignoreToday: true,
    showPrecipitationProbability: false,
    showPrecipitationSeparator: false,
    showWindGust: false,
    iconset: "4c",
    useAnimatedIcons: false,
    label_ordinals: ['↓', '↙', '←', '↖', '↑', '↗', '→', '↘'],
    label_high: "",
    label_low: "",
  }
},

{
  module: "MMM-OpenWeatherForecastDeluxe",
  header: "Bars Layout (daily forecast only)",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    latitude: "51.506130",
    longitude: "-0.090270",
    relativeColors: true,
    showCurrentConditions: false,
    showExtraCurrentConditions: false,
    showSummary: false,
    showForecastTableColumnHeaderIcons: false,
    showHourlyForecast: false,
    dailyForecastLayout: 'bars',
    maxDailiesToShow: 8,
    showPrecipitationProbability: false,
    showPrecipitationSeparator: false,
    showPrecipitationAmount: false,
    showWindSpeed: false,
    showWindDirection: false,
    showWindGust: false,
    iconset: "4c",
    useAnimatedIcons: false,
    label_high: "",
    label_low: "",
  }
},

{
  module: "MMM-OpenWeatherForecastDeluxe",
  header: "Bars Layout (colored: false)",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    latitude: "51.506130",
    longitude: "-0.090270",
    colored: false,
    showCurrentConditions: false,
    showExtraCurrentConditions: false,
    showSummary: false,
    showForecastTableColumnHeaderIcons: false,
    showHourlyForecast: false,
    dailyForecastLayout: 'bars',
    maxDailiesToShow: 8,
    showPrecipitationProbability: false,
    showPrecipitationSeparator: false,
    showPrecipitationAmount: false,
    showWindSpeed: false,
    showWindDirection: false,
    showWindGust: false,
    iconset: "3m",
    useAnimatedIcons: false,
    label_high: "",
    label_low: "",
  }
},

{
  module: "MMM-OpenWeatherForecastDeluxe",
  header: "Tiled Layouts",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    latitude: "51.506130",
    longitude: "-0.090270",
    hourlyForecastInterval: 2,
    maxDailiesToShow: 3,
    ignoreToday: true,
    showDayAsTomorrowInDailyForecast: true,
    showPrecipitationProbability: false,
    showWindDirection: false,
    showWindGust: false,
    iconset: "4c",
    useAnimatedIcons: false,
    label_high: "",
    label_low: "",
  }
},

Styling

This module is set to be 300px wide by default. If you wish to override it, you can add the following to your custom.css file:

.MMM-OpenWeatherForecastDeluxe .module-content {
  width: 500px; /* adjust this to taste */
}

Most important elements of this module have one or more class names applied. Examine the MMM-OpenWeatherForecastDeluxe.css or inspect elements directly with your browser of choice to determine what class you would like to override.

For Module Developers

This module broadcasts a notification when it recieves a weather update. The notification is OPENWEATHER_ONE_CALL_FORECAST_DATA and the payload contains OpenWeather's JSON weather forecast object. For details on the weather object, see https://openweathermap.org/api/one-call-api.

Attributions

This module has a heritage; learn more!

Skycons - Animated icon set by Dark Sky
http://darkskyapp.github.io/skycons/
(using the fork created by Maxime Warner that allows individual details of the icons to be coloured
https://github.com/maxdow/skycons)

Climacons by Adam Whitcroft
http://adamwhitcroft.com/climacons/

Free Weather Icons by Svilen Petrov
https://www.behance.net/gallery/12410195/Free-Weather-Icons

Weather Icons by Thom
(Designed for DuckDuckGo)
https://dribbble.com/shots/1832162-Weather-Icons

Sets 4 and 5 were found on Graphberry, but I couldn't find the original artists.
https://www.graphberry.com/item/weather-icons
https://www.graphberry.com/item/weathera-weather-forecast-icons

Some of the icons were modified to better work with the module's structure and aesthetic.

Weather data provided by OpenWeather
https://openweathermap.org

Name		Name	Last commit message	Last commit date
Latest commit History 126 Commits
icons		icons
screenshots		screenshots
.gitignore		.gitignore
MMM-OpenWeatherForecastDeluxe.css		MMM-OpenWeatherForecastDeluxe.css
MMM-OpenWeatherForecastDeluxe.js		MMM-OpenWeatherForecastDeluxe.js
MMM-OpenWeatherForecastDeluxe.njk		MMM-OpenWeatherForecastDeluxe.njk
README.md		README.md
node_helper.js		node_helper.js
package-lock.json		package-lock.json
package.json		package.json
skycons.js		skycons.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

MMM-OpenWeatherForecastDeluxe

Installation

Configuration

Sample Configuration

Using Multiple Instances

Optional Parameters

Units & Labels

Decimal Precision

Icon Sets

Layouts and Configs

Styling

For Module Developers

Attributions

About

Releases 2

Languages

luxiouronimo/MMM-OpenWeatherForecastDeluxe

Folders and files

Latest commit

History

Repository files navigation

MMM-OpenWeatherForecastDeluxe

Installation

Configuration

Sample Configuration

Using Multiple Instances

Optional Parameters

Units & Labels

Decimal Precision

Icon Sets

Layouts and Configs

Styling

For Module Developers

Attributions

About

Resources

Stars

Watchers

Forks

Releases 2

Languages