MMM-WeatherGraph

This an extension for MagicMirror that displays current and forecasted weather.

This module started as a fork of 'MMM-forecast.io' by dmcinnes (https://github.com/dmcinnes/MMM-forecast-io), adding many new features and moving to a new data source since DarkSky discontinued API access. (Thanks Apple- so nice of you.)

My original goal was to know if I needed to get up early to shovel show before work- so there's an emphasis on precipitation type and timing. There's enough features to turn on & off that you can customize it to your liking.

Features:

-Current weather, including temp and wind

-Sunrise / sunset time

-7 day forecase with visual for temp ranges

-4 day precipation graph, with temp, wind, humidity, and cloudcover

-Lots of options to turn on/off any parts you want

-Impetial/metric and 12/24 hour time options

Installation:

-Get an API key from OpenWeatherMap.org. https://openweathermap.org/darksky-openweather

-Open a terminal window on your device

-Navigate to your MagicMirror's modules folder. If you are using the default installation directory, use the command:

cd ~/MagicMirror/modules

-Copy the module to your computer by executing the following command:

git clone https://github.com/FlatPepsi17/MMM-WeatherGraph

-If you're using a MagicMirror, you need to lookup your GPS coordinates. One way is to find your location is to open maps.google.com, and right-click on your location. Use these coordinates in the config file to ensure you get weather for your location.

-This module uses white icons by default. If you prefer color coded icons, merge the contents of the "Color-icons.md" file into the bottom of your "css\custom.css" file.

Example screen shots: Rain is the filled blue graph, snow is the filled white graph. Note that the graph always has current conditions as the far left, and future forecasts as the graph continues to the right. Tick marks at the bottom show 6 hour steps in the future.

Turn off features to make a simple display.

Want to see everything? Here's temp, wind, humidity, and cloud cover. Legend in the bottom right corner.

Metric is supported, and the precipation graph can be adjusted. THis one shows 24 hours.

Daily precipition totals in the week's list is now an option. Rain or snow totals for that day are shown. Can be turned on or off.

Using the module

To use this module, add it to the modules array in the config/config.js file. Minimal setup:

modules: [
  {
    module: 'MMM-WeatherGraph',
    position: 'top_right',  // This can be any of the regions.
    config: {
      // get your API key at:  https://openweathermap.org/home/sign_up
      // note that you will need to sign up for the "One Call API 3.0" plan. Set the "Calls per day" setting there to 1000 so you never get billed.
      apiKey: 'abcde12345abcde12345abcde12345ab',

      latitude:   37.2431,   // replace with your GPS location 
      longitude: -115.7930
    }
  }
]

If you want to customize the module, here's one with more options for easier use. Add it to this in the config/config.js file and change settings to your liking:

modules: [
  {
    module: 'MMM-WeatherGraph',
    position: 'top_right',  // This can be any of the regions.
    config: {
      // get your API key at:  https://openweathermap.org/home/sign_up
      apiKey: 'abcde12345abcde12345abcde12345ab',

      showForecast: true,            // 7 day forecast list
      showForecastPrecip: true,      // show precip totals in 7 day list
      showGraph: true,               // enable all graphing of weather
      graphLegendFont: '10px Arial', // Default '10px Arial' set the pixel size and font name
      precipitationGraphWidth: 400,  // width in pixels. Default=400
      precipitationGraphHeight: 150, // height in pixels. 0=auto-scales
      graphHourRange: 48,            // how many hours in the graph? Max 48
      showWind: true,                // current wind speed and icon at top
      showTemp: true,                // current temp and icon at top
      showGraphPrecip: true,         // on graph, show rain and snowfall
      showGraphTemp: true,           // on graph, show temp
      graphTempColor: 'white',       // on graph, color of temp line
      graphTempFont: '10px Arial',   // Default '10px Arial' set the pixel size and font. You can set it to '0px Arial' if you don't want numbers
      showGraphWind: true,           // on graph, show wind
      graphWindColor: 'grey',        // on graph, color of temp line
      graphWindFont: '10px Arial',   // Default '10px Arial' set the pixel size and font. You can set it to '0px Arial' if you don't want numbers
      showGraphHumid: true,          // on graph, show humidity
      humidWindColor: '#88CC88',     // on graph, color of humid line
      graphHumidFont: '10px Arial',  // Default '10px Arial' set the pixel size and font. You can set it to '0px Arial' if you don't want numbers
      showGraphCloud: true,          // on graph, show cloud cover %
      graphCloudColor: '#dedb49',    // on graph, color of cloud line
      graphCloudFont: '10px Arial',  // Default '10px Arial' set the pixel size and font. You can set it to '0px Arial' if you don't want numbers
      showSunrise: true,             // next sunrise or sunset at top
      showSummary: true,             // text of next hour's conditions
      showHotColdLines: true,        // blue line at freezing, red line at 80 F
      showGraphLegend: true,         // legend on bottom right of graph

      language: 'en', 
      units: 'imperial',             // or 'metric'
      time24hr: false,               // false for 12hr times, true for 24hr times

      updateInterval: 900000,        // 15 minutes ( 15 * 60 * 1000 )
      animationSpeed: 2000,          // 2 seconds (2*1000)
      initialLoadDelay: 0,           // 0 seconds (0*1000)
      retryDelay: 2500,              // 2.5 seconds (2*1000)

      latitude:   37.2431,           // replace with your GPS location 
      longitude: -115.7930
    }
  }
]

Configuration options

Option	Description
apiKey	The OpenWeatherMap API key, which can be obtained by creating an API account. This value is REQUIRED
units	What units to use. Specified by config.js Possible values: metric = Celsius, imperial =Fahrenheit Default value: imperial
language	The language of the weather text. Possible values: en, nl, ru, etc ... Default value: uses value of config.language
updateInterval	How often does the content needs to be fetched? (Milliseconds) The API enforces a 1,000/day request limit, so if you run your mirror constantly, anything below 90,000 (every 1.5 minutes) may require payment information or be blocked. Possible values: 1000 - 86400000 Default value: 300000 (5 minutes)
animationSpeed	Speed of the update animation. (Milliseconds) Possible values:0 - 5000 Default value: 2000 (2 seconds)
initialLoadDelay	The initial delay before loading. If you have multiple modules that use the same API key, you might want to delay one of the requests. (Milliseconds) Possible values: 1000 - 5000 Default value: 0
retryDelay	The delay before retrying after a request failure. (Milliseconds) Possible values: 1000 - 60000 Default value: 2500
latitude	The latitude location in decimal. Set this (and longitude) as the location for the forecast. If this is not set, the module will attempt to approximate using browser geolocation. Example value: 16.77532 Default value: null
longitude	The longitude location in decimal. Set this (and latitude) as the location for the forecast. If this is not set, the module will attempt to approximate using browser geolocation. Example value: -3.008265 Default value: null
showForcast	Toggles display of the seven-day weather forecast list. Default value: true
showPrecipitationGraph	Toggles display of the precipitation graph. Default value: true
precipitationGraphWidth	Width of the precipitation graph element in pixels. Scales height to 30 percent of width automatically. Default value: 400
showWind	Toggles display of current wind speed next. Default value: true
showTemp	Toggles display of current temperature. Default value: true
showSunrise	Toggles display of next sunrise or sunset time. Default value: true
showSummary	Toggles display of next hour's weather summary text. Default value: true
graphLegendFont	Set the pixel size and font name of the graph legend Default value: 10px Arial
graphTempFont	Set the pixel size and font name of the graph temperature. You can set it to '0px Arial' if you want just a line. Default value: 10px Arial
graphWindFont	Set the pixel size and font name of the graph wind. You can set it to '0px Arial' if you want just a line. Default value: 10px Arial
graphHumidFont	Set the pixel size and font name of the graph humidity. You can set it to '0px Arial' if you want just a line. Default value: 10px Arial
graphCloudFont	Set the pixel size and font name of the graph cloud coverage. You can set it to '0px Arial' if you want just a line. Default value: 10px Arial