MMM-OpenWeatherForecast

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. This is a replacement module for MMM-DarkSkyForecast, now that Dark Sky no longer allows free API access. This maintains much of the same functionality and adds a few new features.

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.

Installation

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

Configuration

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

• apikey
• latitude
• longitude

apikey needs to be specified as a String, while latitude and longitude can be specified as either a String or a Number. Both work fine.

e.g.,

  {
    module: "MMM-OpenWeatherForecast",
    position: "top_right",
    header: "Forecast",
    config: {
      apikey: "a1b2c3d4e5f6g7h8j9k0", //only string here
      latitude: 51.490230,            //number works here
      longitude: "-0.258810"          //so does a string
    }
  },

You need to create a free account with OpenWeather in order to get an API key: https://home.openweathermap.org/users/sign_up.

Free tier is fine -- this module will not make anywhere near 60 calls per minute / 1,000,000 requests per month.

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

Other optional parameters

Extras

For each of current conditions, hourly forecast and daily forecast, there are additional data that can be optionally displayed. Set the corresponding value for each key to either true or false to show or hide the item respectively.

Valid options for extraCurrentConditions

This shows all available options:

  extraCurrentConditions: {
    highLowTemp: true,
    precipitation: true,
    sunrise: true,
    sunset: true,
    wind: true,
    barometricPressure: true,
    humidity: true,
    dewPoint: true,
    uvIndex: true,
    visibility: true
  },

This shows just Hi/Low temp display and precipitation:

  extraCurrentConditions: {
    highLowTemp: true,
    precipitation: true,
    sunrise: false,
    sunset: false,
    wind: false,
    barometricPressure: false,
    humidity: false,
    dewPoint: false,
    uvIndex: false,
    visibility: false
  },

Valid options for hourlyExtras

  hourlyExtras: {
    precipitation: true,
    wind: true,
    barometricPressure: true,
    humidity: true,
    dewPoint: true,
    uvIndex: true,
    visibility: true
  },

Valid options for dailyExtras

  dailyExtras: {
    precipitation: true,
    sunrise: true,
    sunset: true,
    wind: true,
    barometricPressure: true,
    humidity: true,
    dewPoint: true,
    uvIndex: true
  },

Sample Configuration

  {
    module: "MMM-OpenWeatherForecast",
    position: "top_right",
    header: "Forecast",
    config: {
      apikey: "********************", //SUPER SECRET
      latitude: 43.653225,
      longitude: -79.383186,
      units: "metric",
      iconset: "3c",
      colored: true,
      concise: true,
      requestDelay: "2000",
      showFeelsLikeTemp: true,

      showCurrentConditions: true,
      showSummary: true,
      showExtraCurrentConditions: true,
      extraCurrentConditions: {
        highLowTemp: true,
        precipitation: true,
        sunrise: true,
        sunset: true,
        wind: true,
        barometricPressure: false,
        humidity: true,
        dewPoint: false,
        uvIndex: true,
        visibility: false
      },

      forecastLayout: "table",
      forecastHeaderText: "",

      hourlyForecastTableHeaderText: "By the hour",
      showHourlyForecast: true,
      showHourlyTableHeaderRow: true,
      hourlyForecastInterval: 1,
      maxHourliesToShow: 10,
      hourlyExtras: {
        precipitation: true,
        wind: true,
        barometricPressure: false,
        humidity: false,
        dewPoint: false,
        uvIndex: false,
        visibility: false
      },

      dailyForecastTableHeaderText: "Throughout the week",
      showDailyForecast: true,
      showDailyTableHeaderRow: true,
      maxDailiesToShow: 5,
      dailyExtras: {
        precipitation: true,
        sunrise: false,
        sunset: false,
        wind: true,
        barometricPressure: false,
        humidity: false,
        dewPoint: false,
        uvIndex: false
      },

    }
  },

Icon Sets

Layouts

Styling

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

.MMM-OpenWeatherForecast .module-content {
  width: 500px; /* adjust this as desired */
}

Most important elements of this module have one or more class names applied. Examine the MMM-OpenWeatherForecast.css, mmm-openweather-forecast.njk, or inspect elements directly with your browser of choice to determine what class you would like to override (Pro tip: If you start MagicMirror with npm start dev you'll get Chrome dev tools that will allow you to directly inspect any HTML element in the mdoule).

For Module Developers

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