Skip to content

Magic Mirror module to display weather information using the AccuWeather API.

Notifications You must be signed in to change notification settings

maxbethge/MMM-AccuWeatherForecastDeluxe

 
 

Repository files navigation

MMM-AccuWeatherForecastDeluxe

This is a MagicMirror² module that displays current, hourly and daily forecast information using data from the AccuWeather.

Tiled Layouts Bars Layout (daily forecast only)
Tiled Layouts Bars Layout (daily forecast only)

Installation

  1. Navigate into your MagicMirror's modules folder and execute git clone https://github.com/maxbethge/MMM-AccuWeatherForecastDeluxe.
  2. Enter the new MMM-AccuWeatherForecastDeluxe directory and execute npm install.

Configuration

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

  • apikey
  • locationKey

You can request an API key to access data here: https://developer.accuweather.com/packages

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. However, if the updateInterval is more frequent, create another Accuweather account to get a second API key and add to apiKey2.

Find the locationKey using the Accuweather search API http://dataservice.accuweather.com/locations/v1/cities/search?apikey={apiKey}&q={cityName}

Sample Configuration

{
  module: "MMM-AccuWeatherForecastDeluxe",
  header: "Tiled Layouts",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    apikey2: "SUPER SECRET!!!",
    locationKey: "337209",
    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 accuweather api; a free subscription with a limited quota and can be used with http://dataservice.accuweather.com

Type String
Defaults to http://dataservice.accuweather.com
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 MagicMirror².
See also: details on units.
language The language to be used for display.

Type String
Defaults to the language set for MagicMirror², 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

Accuweather supports imperial and metric units. Be aware of the unit option above, which defaults to the units set for MagicMirror².

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

Icon Sets

Layouts and Configs

Table Layouts

{
  module: "MMM-AccuWeatherForecastDeluxe",
  header: "Table Layouts",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    apikey2: "SUPER SECRET!!!",
    locationKey: "123456",
    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: "",
  }
},

Bars Layout (daily forecast only)

{
  module: "MMM-AccuWeatherForecastDeluxe",
  header: "Bars Layout (daily forecast only)",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    apikey2: "SUPER SECRET!!!",
    locationKey: "123456",
    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: "",
  }
},

Bars Layout (colored; false)

{
  module: "MMM-AccuWeatherForecastDeluxe",
  header: "Bars Layout (colored: false)",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    apikey2: "SUPER SECRET!!!",
    locationKey: "123456",
    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: "",
  }
},

Tiled Layouts

{
  module: "MMM-AccuWeatherForecastDeluxe",
  header: "Tiled Layouts",
  position: "top_right",
  classes: "default everyone",
  disabled: false,
  config: {
    apikey: "SUPER SECRET!!!",
    apikey2: "SUPER SECRET!!!",
    locationKey: "123456",
    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-AccuWeatherForecastDeluxe .module-content {
  width: 500px; /* adjust this to taste */
}

Most important elements of this module have one or more class names applied. Examine the MMM-AccuWeatherForecastDeluxe.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 ACCUWEATHER_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://www.accuweather.com

About

Magic Mirror module to display weather information using the AccuWeather API.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 62.5%
  • Nunjucks 24.9%
  • CSS 10.7%
  • HTML 1.9%