Merge pull request #1488 from fewieden/weather

Weather refactoring

CHANGELOG.md

@@ -7,7 +7,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [2.6.0] - Unreleased
 
-*This release is scheduled to be released on 2018-10-01.*
+*This release is scheduled to be released on 2019-01-01.*
+
+### Experimental
+- New default [module weather](modules/default/weather).
 
 ### Added
 - Possibility to add classes to the cell of symbol, title and time of the events of calendar.

modules/default/defaultmodules.js

@@ -16,7 +16,8 @@ var defaultModules = [
 	"helloworld",
 	"newsfeed",
 	"weatherforecast",
-	"updatenotification"
+	"updatenotification",
+	"weather"
 ];
 
 /*************** DO NOT EDIT THE LINE BELOW ***************/

modules/default/weather/README.md

@@ -0,0 +1,94 @@
+# Weather Module
+
+This module is aimed to be the replacement for the current `currentweather` and `weatherforcast` modules. The module will be configurable to be used as a current weather view, or to show the forecast. This way the module can be used twice to fullfil both purposes. 
+
+The biggest cange is the use of weather providers. This way we are not bound to one API source. And users can choose which API they want to use as their source.
+
+The module is in a very early stage, and needs a lot of work. It's API isn't set in stone, so keep that in mind when you want to contribute.
+
+## Example
+
+![Current Weather Screenshot](current.png) ![Weather Forecast Screenshot](forecast.png)
+
+## Usage
+
+To use this module, add it to the modules array in the `config/config.js` file:
+
+````javascript
+modules: [
+	{
+		module: "weather",
+		position: "top_right",
+		config: {
+			// See 'Configuration options' for more information.
+			type: 'current'
+		}
+	}
+]
+````
+
+## Configuration options
+
+The following properties can be configured:
+
+### General options
+
+| Option                       | Description
+| ---------------------------- | -----------
+| `weatherProvider`            | Which weather provider should be used. <br><br> **Possible values:** `openweathermap` and `darksky` <br> **Default value:** `openweathermap`
+| `type`                       | Which type of weather data should be displayed. <br><br> **Possible values:** `current` and `forecast` <br> **Default value:** `current`
+| `units`                      | What units to use. Specified by config.js <br><br> **Possible values:** `config.units` = Specified by config.js, `default` = Kelvin, `metric` = Celsius, `imperial` =Fahrenheit <br> **Default value:** `config.units`
+| `roundTemp`                  | Round temperature value to nearest integer. <br><br> **Possible values:** `true` (round to integer) or `false` (display exact value with decimal point) <br> **Default value:** `false`
+| `degreeLabel`                | Show the degree label for your chosen units (Metric = C, Imperial = F, Kelvins = K). <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
+| `updateInterval`             | How often does the content needs to be fetched? (Milliseconds) <br><br> **Possible values:** `1000` - `86400000` <br> **Default value:** `600000` (10 minutes)
+| `animationSpeed`             | Speed of the update animation. (Milliseconds) <br><br> **Possible values:**`0` - `5000` <br> **Default value:** `1000` (1 second)
+| `timeFormat`                 | Use 12 or 24 hour format. <br><br> **Possible values:** `12` or `24` <br> **Default value:** uses value of _config.timeFormat_
+| `showPeriod`                 | Show the period (am/pm) with 12 hour format <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
+| `showPeriodUpper`	           | Show the period (AM/PM) with 12 hour format as uppercase <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
+| `lang`                       | The language of the days. <br><br> **Possible values:** `en`, `nl`, `ru`, etc ... <br> **Default value:** uses value of _config.language_
+| `decimalSymbol`              | The decimal symbol to use.<br><br> **Possible values:** `.`, `,` or any other symbol.<br> **Default value:** `.`
+| `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) <br><br> **Possible values:** `1000` - `5000` <br> **Default value:**  `0`
+| `retryDelay`                 | The delay before retrying after a request failure. (Milliseconds) <br><br> **Possible values:** `1000` - `60000` <br> **Default value:**  `2500`
+| `appendLocationNameToHeader` | If set to `true`, the returned location name will be appended to the header of the module, if the header is enabled. This is mainly intresting when using calender based weather. <br><br> **Default value:**  `true`
+| `calendarClass`              | The class for the calender module to base the event based weather information on. <br><br> **Default value:**  `'calendar'`
+
+#### Current weather options
+
+| Option                       | Description
+| ---------------------------- | -----------
+| `onlyTemp`                   | Show only current Temperature and weather icon without windspeed, sunset, sunrise time and feels like. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
+| `useBeaufort`                | Pick between using the Beaufort scale for wind speed or using the default units. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
+| `showWindDirection`          | Show the wind direction next to the wind speed. <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
+| `showWindDirectionAsArrow`   | Show the wind direction as an arrow instead of abbreviation <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
+| `showHumidity`               | Show the current humidity <br><br> **Possible values:** `true` or `false` <br> **Default value:** `false`
+| `showIndoorTemperature`      | If you have another module that emits the `INDOOR_TEMPERATURE` notification, the indoor temperature will be displayed <br> **Default value:** `false`
+| `showIndoorHumidity`         | If you have another module that emits the `INDOOR_HUMIDITY` notification, the indoor humidity will be displayed <br> **Default value:** `false`
+
+#### Weather forecast options
+
+| Option                       | Description
+| ---------------------------- | -----------
+| `tableClass`                 | The class for the forecast table. <br><br> **Default value:**  `'small'`
+| `colored`                    | If set to `true`, the min and max temperature are color coded. <br><br> **Default value:**  `false`
+| `showRainAmount`             | Show the amount of rain in the forecast <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
+
+### Openweathermap options
+
+| Option                       | Description
+| ---------------------------- | -----------
+| `apiVersion`                 | The OpenWeatherMap API version to use. <br><br> **Default value:**  `2.5`
+| `apiBase`                    | The OpenWeatherMap base URL. <br><br> **Default value:**  `'http://api.openweathermap.org/data/'`
+| `weatherEndpoint`	           | The OpenWeatherMap API endPoint. <br><br> **Possible values:** `/weather` or `/forecast/daily` <br> **Default value:**  `'/weather'`
+| `locationID`                 | Location ID from [OpenWeatherMap](https://openweathermap.org/find) **This will override anything you put in location.** <br> Leave blank if you want to use location. <br> **Example:** `1234567` <br> **Default value:** `false` <br><br> **Note:** When the `location` and `locationID` are both not set, the location will be based on the information provided by the calendar module. The first upcoming event with location data will be used.
+| `location`                   | The location used for weather information. <br><br> **Example:** `'Amsterdam,Netherlands'` <br> **Default value:** `false` <br><br> **Note:** When the `location` and `locationID` are both not set, the location will be based on the information provided by the calendar module. The first upcoming event with location data will be used.
+| `apiKey`                      | The [OpenWeatherMap](https://home.openweathermap.org) API key, which can be obtained by creating an OpenWeatherMap account. <br><br>  This value is **REQUIRED**
+
+### Darksky options
+
+| Option                       | Description
+| ---------------------------- | -----------
+| `apiBase`                    | The DarkSky base URL. The darksky api has disabled [cors](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), therefore a proxy is required. <br><br> **Possible value:**  `'https://cors-anywhere.herokuapp.com/https://api.darksky.net'` <br>  This value is **REQUIRED**
+| `weatherEndpoint`	           | The DarkSky API endPoint. <br><br> **Possible values:** `/forecast` <br>  This value is **REQUIRED**
+| `apiKey`                     | The [DarkSky](https://darksky.net/dev/register) API key, which can be obtained by creating an DarkSky account. <br><br>  This value is **REQUIRED**
+| `lat`                        | The geo coordinate latitude. <br><br>  This value is **REQUIRED**
+| `lon`                        | The geo coordinate longitude. <br><br>  This value is **REQUIRED**

modules/default/weather/current.njk

@@ -0,0 +1,61 @@
+{% if current %}
+    {% if not config.onlyTemp %}
+        <div class="normal medium">
+            <span class="wi wi-strong-wind dimmed"></span>
+            <span>
+                {% if config.useBeaufort %}
+                    {{current.beaufortWindSpeed() | round}}
+                {% else %}
+                    {{current.windSpeed | round}}
+                {% endif %}
+                
+                {% if config.showWindDirection %}
+                    <sup> 
+                        {% if config.showWindDirectionAsArrow %}
+                            <i class="fa fa-long-arrow-up" style="transform:rotate({{current.windDirection}}deg);"></i>    
+                        {% else %}
+                            {{current.cardinalWindDirection() | translate}}
+                        {% endif %}
+                        &nbsp;
+                    </sup>
+                {% endif %}
+            </span>
+            {% if config.showHumidity and current.humidity %}
+                <span>{{ current.humidity }}</span><sup>&nbsp;<i class="wi wi-humidity humidityIcon"></i></sup>
+            {% endif %}
+            <span class="wi dimmed wi-{{current.nextSunAction()}}"></span>
+            <span>
+                {% if current.nextSunAction() == "sunset" %}
+                    {{current.sunset | formatTime}}
+                {% else %}
+                    {{current.sunrise | formatTime}}
+                {% endif %}
+            </span>
+        </div>
+    {% endif %}
+    <div class="large light">
+        <span class="wi weathericon wi-{{current.weatherType}}"></span>
+        <span class="bright">
+            {{current.temperature | roundValue | unit("temperature")}}
+        </span>
+        {% if config.showIndoorTemperature and indoor.temperature %}
+            <span class="fa fa-home"></span>
+            <span class="bright">
+                {{indoor.temperature | roundValue | unit("temperature")}}
+            </span>
+        {% endif %}
+        {% if config.showIndoorHumidity and indoor.humidity %}
+            <span class="fa fa-tint"></span>
+            <span class="bright">
+                {{indoor.humidity | roundValue}}%
+            </span>
+        {% endif %}
+    </div>
+{% else %}
+    <div class="dimmed light small">
+        {{"LOADING" | translate}}
+    </div>
+{% endif %}
+
+<!-- Unclomment the line below to see the contents of the `current` object. -->
+<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{current | dump}}</div> -->

modules/default/weather/forecast.njk

@@ -0,0 +1,26 @@
+{% if forecast %}
+    <table class="{{config.tableClass}}">
+        {% for f in forecast %}
+            <tr {% if config.colored %}class="colored"{% endif %}>
+                <td class="day">{{f.date.format('ddd')}}</td>
+                <td class="bright weather-icon"><span class="wi weathericon wi-{{f.weatherType}}"></span></td>
+                <td class="align-right bright max-temp">
+                    {{f.maxTemperature | roundValue | unit("temperature")}}
+                </td>
+                <td class="align-right min-temp">
+                    {{f.minTemperature | roundValue | unit("temperature")}}
+                </td>
+                {% if config.showRainAmount %}
+                    <td class="align-right bright rain">
+                        {{f.rain | formatRain}}
+                    </td>
+                {% endif %}
+            </tr>
+        {% endfor %}
+    </table>
+{% else %}
+    {{"LOADING" | translate}}
+{% endif %}
+
+<!-- Unclomment the line below to see the contents of the `current` object. -->
+<!-- <div style="word-wrap:break-word" class="xsmall dimmed">{{forecast | dump}}</div> -->

modules/default/weather/providers/darksky.js

@@ -0,0 +1,102 @@
+/* global WeatherProvider, WeatherDay */
+
+/* Magic Mirror
+ * Module: Weather
+ * Provider: Dark Sky
+ *
+ * By Nicholas Hubbard https://github.com/nhubbard
+ * MIT Licensed
+ *
+ * This class is a provider for Dark Sky.
+ */
+WeatherProvider.register("darksky", {
+	// Set the name of the provider.
+	// Not strictly required, but helps for debugging.
+	providerName: "Dark Sky",
+
+	fetchCurrentWeather: function() {
+		this.fetchData(this.getUrl())
+			.then(data => {
+				if(!data || !data.currently || typeof data.currently.temperature === "undefined") {
+					// No usable data?
+					return;
+				}
+
+				var currentWeather = this.generateWeatherDayFromCurrentWeather(data);
+				this.setCurrentWeather(currentWeather);
+			}).catch(function(request) {
+				Log.error("Could not load data ... ", request);
+			});
+	},
+
+	fetchWeatherForecast: function() {
+		this.fetchData(this.getUrl())
+			.then(data => {
+				if(!data || !data.daily || !data.daily.data.length) {
+					// No usable data?
+					return;
+				}
+
+				var forecast = this.generateWeatherObjectsFromForecast(data.daily.data);
+				this.setWeatherForecast(forecast);
+			}).catch(function(request) {
+				Log.error("Could not load data ... ", request);
+			});
+	},
+
+	// Create a URL from the config and base URL.
+	getUrl: function() {
+		return `${this.config.apiBase}${this.config.weatherEndpoint}/${this.config.apiKey}/${this.config.lat},${this.config.lon}`;
+	},
+
+	// Implement WeatherDay generator.
+	generateWeatherDayFromCurrentWeather: function(currentWeatherData) {
+		var currentWeather = new WeatherObject();
+
+		currentWeather.date = moment();
+		currentWeather.humidity = parseFloat(currentWeatherData.currently.humidity);
+		currentWeather.temperature = parseFloat(currentWeatherData.currently.temperature);
+		currentWeather.windSpeed = parseFloat(currentWeatherData.currently.windSpeed);
+		currentWeather.windDirection = currentWeatherData.currently.windBearing;
+		currentWeather.weatherType = this.convertWeatherType(currentWeatherData.currently.icon);
+		currentWeather.sunrise = moment(currentWeatherData.daily.data[0].sunriseTime, "X");
+		currentWeather.sunset = moment(currentWeatherData.daily.data[0].sunsetTime, "X");
+
+		return currentWeather;
+	},
+
+	generateWeatherObjectsFromForecast: function(forecasts) {
+		var days = [];
+
+		for (var forecast of forecasts) {
+			var weather = new WeatherObject();
+
+			weather.date = moment(forecast.time, "X");
+			weather.minTemperature = forecast.temperatureMin;
+			weather.maxTemperature = forecast.temperatureMax;
+			weather.weatherType = this.convertWeatherType(forecast.icon);
+			weather.rain = forecast.precipAccumulation;
+
+			days.push(weather)
+		}
+
+		return days
+	},
+
+	// Map icons from Dark Sky to our icons.
+	convertWeatherType: function(weatherType) {
+		var weatherTypes = {
+			"clear-day": "day-sunny",
+			"clear-night": "night-clear",
+			"rain": "rain",
+			"snow": "snow",
+			"sleet": "snow",
+			"wind": "wind",
+			"fog": "fog",
+			"cloudy": "cloudy",
+			"partly-cloudy-day": "day-cloudy",
+			"partly-cloudy-night": "night-cloudy"
+		};
+		return weatherTypes.hasOwnProperty(weatherType) ? weatherTypes[weatherType] : null;
+	}
+});

modules/default/weather/providers/openweathermap.js

@@ -0,0 +1,161 @@
+/* global WeatherProvider, WeatherObject */
+
+/* Magic Mirror
+ * Module: Weather
+ *
+ * By Michael Teeuw http://michaelteeuw.nl
+ * MIT Licensed.
+ * 
+ * This class is the blueprint for a weather provider.
+ */
+
+WeatherProvider.register("openweathermap", {
+
+	// Set the name of the provider.
+	// This isn't strictly necessary, since it will fallback to the provider identifier
+	// But for debugging (and future alerts) it would be nice to have the real name.
+	providerName: "OpenWeatherMap",
+
+	// Overwrite the fetchCurrentWeather method.
+	fetchCurrentWeather: function() {
+		this.fetchData(this.getUrl())
+			.then(data => {
+				if (!data || !data.main || typeof data.main.temp === "undefined") {
+					// Did not receive usable new data.
+					// Maybe this needs a better check?
+					return;
+				}
+
+				this.setFetchedLocation(`${data.name}, ${data.sys.country}`);
+
+				var currentWeather = this.generateWeatherObjectFromCurrentWeather(data);
+				this.setCurrentWeather(currentWeather);
+			})
+			.catch(function(request) {
+				Log.error("Could not load data ... ", request);
+			})
+	},
+
+	// Overwrite the fetchCurrentWeather method.
+	fetchWeatherForecast: function() {
+		this.fetchData(this.getUrl())
+			.then(data => {
+				if (!data || !data.list || !data.list.length) {
+					// Did not receive usable new data.
+					// Maybe this needs a better check?
+					return;
+				}
+
+				this.setFetchedLocation(`${data.city.name}, ${data.city.country}`);
+
+				var forecast = this.generateWeatherObjectsFromForecast(data.list);
+				this.setWeatherForecast(forecast);
+			})
+			.catch(function(request) {
+				Log.error("Could not load data ... ", request);
+			})
+	},
+
+
+
+	/** OpenWeatherMap Specific Methods - These are not part of the default provider methods */
+	/*
+	 * Gets the complete url for the request
+	 */
+	getUrl: function() {
+		return this.config.apiBase + this.config.apiVersion + this.config.weatherEndpoint + this.getParams();
+	},
+
+	/* 
+	 * Generate a WeatherObject based on currentWeatherInformation
+	 */
+	generateWeatherObjectFromCurrentWeather: function(currentWeatherData) {
+		var currentWeather = new WeatherObject();
+
+		currentWeather.humidity = currentWeatherData.main.humidity;
+		currentWeather.temperature = currentWeatherData.main.temp;
+		currentWeather.windSpeed = currentWeatherData.wind.speed;
+		currentWeather.windDirection = currentWeatherData.wind.deg;
+		currentWeather.weatherType = this.convertWeatherType(currentWeatherData.weather[0].icon);
+		currentWeather.sunrise = moment(currentWeatherData.sys.sunrise, "X");
+		currentWeather.sunset = moment(currentWeatherData.sys.sunset, "X");
+
+		return currentWeather;
+	},
+
+	/*
+	 * Generate WeatherObjects based on forecast information
+	 */
+	generateWeatherObjectsFromForecast: function(forecasts) {
+		var days = [];
+
+		for (var forecast of forecasts) {
+			var weather = new WeatherObject();
+
+			weather.date = moment(forecast.dt, "X");
+			weather.minTemperature = forecast.temp.min;
+			weather.maxTemperature = forecast.temp.max;
+			weather.weatherType = this.convertWeatherType(forecast.weather[0].icon);
+			weather.rain = forecast.rain;
+
+			days.push(weather);
+		}
+
+		return days;
+	},
+
+	/*
+	 * Convert the OpenWeatherMap icons to a more usable name.
+	 */
+	convertWeatherType: function(weatherType) {
+		var weatherTypes = {
+			"01d": "day-sunny",
+			"02d": "day-cloudy",
+			"03d": "cloudy",
+			"04d": "cloudy-windy",
+			"09d": "showers",
+			"10d": "rain",
+			"11d": "thunderstorm",
+			"13d": "snow",
+			"50d": "fog",
+			"01n": "night-clear",
+			"02n": "night-cloudy",
+			"03n": "night-cloudy",
+			"04n": "night-cloudy",
+			"09n": "night-showers",
+			"10n": "night-rain",
+			"11n": "night-thunderstorm",
+			"13n": "night-snow",
+			"50n": "night-alt-cloudy-windy"
+		};
+
+		return weatherTypes.hasOwnProperty(weatherType) ? weatherTypes[weatherType] : null;
+	},
+
+	/* getParams(compliments)
+	 * Generates an url with api parameters based on the config.
+	 *
+	 * return String - URL params.
+	 */
+	getParams: function() {
+		var params = "?";
+		if(this.config.locationID) {
+			params += "id=" + this.config.locationID;
+		} else if(this.config.location) {
+			params += "q=" + this.config.location;
+		} else if (this.firstEvent && this.firstEvent.geo) {
+			params += "lat=" + this.firstEvent.geo.lat + "&lon=" + this.firstEvent.geo.lon;
+		} else if (this.firstEvent && this.firstEvent.location) {
+			params += "q=" + this.firstEvent.location;
+		} else {
+			this.hide(this.config.animationSpeed, {lockString:this.identifier});
+			return;
+		}
+
+		params += "&units=" + this.config.units;
+		params += "&lang=" + this.config.lang;
+		params += "&APPID=" + this.config.apiKey;
+
+		return params;
+	}
+});

modules/default/weather/weather.css

@@ -0,0 +1,45 @@
+.weather .weathericon,
+.weather .fa-home {
+  font-size: 75%;
+  line-height: 65px;
+  display: inline-block;
+  -ms-transform: translate(0, -3px); /* IE 9 */
+  -webkit-transform: translate(0, -3px); /* Safari */
+  transform: translate(0, -3px);
+}
+
+.weather .humidityIcon {
+  padding-right: 4px;
+}
+
+.weather .humidity-padding {
+  padding-bottom: 6px;
+}
+
+.weather .day {
+  padding-left: 0;
+  padding-right: 25px;
+}
+
+.weather .weather-icon {
+  padding-right: 30px;
+  text-align: center;
+}
+
+.weather .min-temp {
+  padding-left: 20px;
+  padding-right: 0;
+}
+
+.weather .rain {
+  padding-left: 20px;
+  padding-right: 0;
+}
+
+.weather tr.colored .min-temp {
+  color: #bcddff;
+}
+
+.weather tr.colored .max-temp {
+  color: #ff8e99;
+}

modules/default/weather/weather.js

@@ -0,0 +1,217 @@
+/* global Module, WeatherProvider */
+
+/* Magic Mirror
+ * Module: Weather
+ *
+ * By Michael Teeuw http://michaelteeuw.nl
+ * MIT Licensed.
+ */
+
+Module.register("weather",{
+	// Default module config.
+	defaults: {
+		updateInterval: 10 * 60 * 1000,
+		weatherProvider: "openweathermap",
+		roundTemp: false,
+		type: "current", //current, forecast
+
+		location: false,
+		locationID: false,
+		appid: "",
+		units: config.units,
+		updateInterval: 10 * 60 * 1000, // every 10 minutes
+		animationSpeed: 1000,
+		timeFormat: config.timeFormat,
+		showPeriod: true,
+		showPeriodUpper: false,
+		showWindDirection: true,
+		showWindDirectionAsArrow: false,
+		useBeaufort: true,
+		lang: config.language,
+		showHumidity: false,
+		degreeLabel: false,
+		showIndoorTemperature: false,
+		showIndoorHumidity: false,
+
+		initialLoadDelay: 0, // 0 seconds delay
+		retryDelay: 2500,
+
+		apiVersion: "2.5",
+		apiBase: "http://api.openweathermap.org/data/",
+		weatherEndpoint: "/weather",
+
+		appendLocationNameToHeader: true,
+		calendarClass: "calendar",
+		tableClass: "small",
+
+		onlyTemp: false,
+		showRainAmount: true,
+		colored: false
+	},
+
+	// Module properties.
+	weatherProvider: null,
+
+	// Define required scripts.
+	getStyles: function() {
+		return ["font-awesome.css", "weather-icons.css", "weather.css"];
+	},
+
+	// Return the scripts that are nessecery for the weather module.
+	getScripts: function () {
+		return [
+			"moment.js",
+			"weatherprovider.js",
+			"weatherobject.js",
+			this.file("providers/" + this.config.weatherProvider.toLowerCase() + ".js")
+		];
+	},
+
+	// Override getHeader method.
+	getHeader: function() {
+		if (this.config.appendLocationNameToHeader && this.weatherProvider) {
+			return this.data.header + " " + this.weatherProvider.fetchedLocation();
+		}
+
+		return this.data.header;
+	},
+
+	// Start the weather module.
+	start: function () {
+		moment.locale(this.config.lang);
+		// Initialize the weather provider.
+		this.weatherProvider = WeatherProvider.initialize(this.config.weatherProvider, this);
+
+		// Let the weather provider know we are starting.
+		this.weatherProvider.start();
+
+		// Add custom filters
+		this.addFilters();
+
+		// Schedule the first update.
+		this.scheduleUpdate(this.config.initialLoadDelay);
+	},
+
+	// Override notification handler.
+	notificationReceived: function(notification, payload, sender) {
+		if (notification === "CALENDAR_EVENTS") {
+			var senderClasses = sender.data.classes.toLowerCase().split(" ");
+			if (senderClasses.indexOf(this.config.calendarClass.toLowerCase()) !== -1) {
+				this.firstEvent = false;
+
+				for (var e in payload) {
+					var event = payload[e];
+					if (event.location || event.geo) {
+						this.firstEvent = event;
+						//Log.log("First upcoming event with location: ", event);
+						break;
+					}
+				}
+			}
+		} else if (notification === "INDOOR_TEMPERATURE") {
+			this.indoorTemperature = this.roundValue(payload);
+			this.updateDom(300);
+		} else if (notification === "INDOOR_HUMIDITY") {
+			this.indoorHumidity = this.roundValue(payload);
+			this.updateDom(300);
+		}
+	},
+
+	// Select the template depending on the display type.
+	getTemplate: function () {
+		return `${this.config.type.toLowerCase()}.njk`;
+	},
+
+	// Add all the data to the template.
+	getTemplateData: function () {
+		return {
+			config: this.config,
+			current: this.weatherProvider.currentWeather(),
+			forecast: this.weatherProvider.weatherForecast(),
+			indoor: {
+				humidity: this.indoorHumidity,
+				temperature: this.indoorTemperature
+			}
+		}
+	},
+
+	// What to do when the weather provider has new information available?
+	updateAvailable: function() {
+		Log.log("New weather information available.");
+		this.updateDom(0);
+		this.scheduleUpdate();
+	},
+
+	scheduleUpdate: function(delay = null) {
+		var nextLoad = this.config.updateInterval;
+		if (delay !== null && delay >= 0) {
+			nextLoad = delay;
+		}
+
+		setTimeout(() => {
+			if (this.config.type === "forecast") {
+				this.weatherProvider.fetchWeatherForecast();
+			} else {
+				this.weatherProvider.fetchCurrentWeather();
+			}
+		}, nextLoad);
+	},
+
+	roundValue: function(temperature) {
+		var decimals = this.config.roundTemp ? 0 : 1;
+		return parseFloat(temperature).toFixed(decimals);
+	},
+
+	addFilters() {
+		this.nunjucksEnvironment().addFilter("formatTime", function(date) {
+			date = moment(date);
+
+			if (this.config.timeFormat !== 24) {
+				if (this.config.showPeriod) {
+					if (this.config.showPeriodUpper) {
+						return date.format("h:mm A");
+					} else {
+						return date.format("h:mm a");
+					}
+				} else {
+					return date.format("h:mm");
+				}
+			}
+
+			return date.format("HH:mm");
+		}.bind(this));
+
+		this.nunjucksEnvironment().addFilter("unit", function (value, type) {
+			if (type === "temperature") {
+				value += "°";
+				if (this.config.degreeLabel) {
+					if (this.config.units === "metric") {
+						value += "C";
+					} else if (this.config.units === "imperial") {
+						value += "F";
+					} else {
+						value += "K";
+					}
+				}
+			}
+
+			return value;
+		}.bind(this));
+
+		this.nunjucksEnvironment().addFilter("roundValue", function(value) {
+			return this.roundValue(value);
+		}.bind(this));
+
+		this.nunjucksEnvironment().addFilter("formatRain", function(value) {
+			if (isNaN(value)) {
+				return "";
+			}
+
+			if(this.config.units === "imperial") {
+				return `${(parseFloat(value) / 25.4).toFixed(2)} in`;
+			} else {
+				return `${parseFloat(value).toFixed(1)} mm`;
+			}
+		}.bind(this));
+	}
+});

modules/default/weather/weatherobject.js

@@ -0,0 +1,81 @@
+/* global Class */
+
+/* Magic Mirror
+ * Module: Weather
+ *
+ * By Michael Teeuw http://michaelteeuw.nl
+ * MIT Licensed.
+ *
+ * This class is the blueprint for a day which includes weather information.
+ */
+
+// Currently this is focused on the information which is necessary for the current weather.
+// As soon as we start implementing the forecast, mode properties will be added.
+
+class WeatherObject {
+	constructor() {
+		this.date = null;
+		this.windSpeed = null;
+		this.windDirection = null;
+		this.sunrise = null;
+		this.sunset = null;
+		this.temperature = null;
+		this.minTemperature = null;
+		this.maxTemperature = null;
+		this.weatherType = null;
+		this.humidity = null;
+	}
+
+	cardinalWindDirection () {
+		if (this.windDirection > 11.25 && this.windDirection <= 33.75){
+			return "NNE";
+		} else if (this.windDirection > 33.75 && this.windDirection <= 56.25) {
+			return "NE";
+		} else if (this.windDirection > 56.25 && this.windDirection <= 78.75) {
+			return "ENE";
+		} else if (this.windDirection > 78.75 && this.windDirection <= 101.25) {
+			return "E";
+		} else if (this.windDirection > 101.25 && this.windDirection <= 123.75) {
+			return "ESE";
+		} else if (this.windDirection > 123.75 && this.windDirection <= 146.25) {
+			return "SE";
+		} else if (this.windDirection > 146.25 && this.windDirection <= 168.75) {
+			return "SSE";
+		} else if (this.windDirection > 168.75 && this.windDirection <= 191.25) {
+			return "S";
+		} else if (this.windDirection > 191.25 && this.windDirection <= 213.75) {
+			return "SSW";
+		} else if (this.windDirection > 213.75 && this.windDirection <= 236.25) {
+			return "SW";
+		} else if (this.windDirection > 236.25 && this.windDirection <= 258.75) {
+			return "WSW";
+		} else if (this.windDirection > 258.75 && this.windDirection <= 281.25) {
+			return "W";
+		} else if (this.windDirection > 281.25 && this.windDirection <= 303.75) {
+			return "WNW";
+		} else if (this.windDirection > 303.75 && this.windDirection <= 326.25) {
+			return "NW";
+		} else if (this.windDirection > 326.25 && this.windDirection <= 348.75) {
+			return "NNW";
+		} else {
+			return "N";
+		}
+	}
+
+	beaufortWindSpeed () {
+		var kmh = this.windSpeed * 60 * 60 / 1000;
+		var speeds = [1, 5, 11, 19, 28, 38, 49, 61, 74, 88, 102, 117, 1000];
+		for (var beaufort in speeds) {
+			var speed = speeds[beaufort];
+			if (speed > kmh) {
+				return beaufort;
+			}
+		}
+		return 12;
+	}
+
+	nextSunAction () {
+		var now = new Date();
+		return (this.sunrise < now && this.sunset > now) ? "sunset" : "sunrise";
+	}
+}

modules/default/weather/weatherprovider.js

@@ -0,0 +1,154 @@
+/* global Class */
+
+/* Magic Mirror
+ * Module: Weather
+ *
+ * By Michael Teeuw http://michaelteeuw.nl
+ * MIT Licensed.
+ *
+ * This class is the blueprint for a weather provider.
+ */
+
+
+/**
+ * Base BluePrint for the WeatherProvider
+ */
+var WeatherProvider = Class.extend({
+	// Weather Provider Properties
+	providerName: null,
+
+	// The following properties have accestor methods.
+	// Try to not access them directly.
+	currentWeatherObject: null,
+	weatherForecastArray: null,
+	fetchedLocationName: null,
+
+	// The following properties will be set automaticly.
+	// You do not need to overwrite these properties.
+	config: null,
+	delegate: null,
+	providerIdentifier: null,
+
+
+	// Weather Provider Methods
+	// All the following methods can be overwrited, although most are good as they are.
+
+	// Called when a weather provider is initialized.
+	init: function(config) {
+		this.config = config;
+		Log.info(`Weather provider: ${this.providerName} initialized.`);
+	},
+
+	// Called to set the config, this config is the same as the weather module's config.
+	setConfig: function(config) {
+		this.config = config;
+		Log.info(`Weather provider: ${this.providerName} config set.`, this.config);
+	},
+
+	// Called when the weather provider is about to start.
+	start: function(config) {
+		Log.info(`Weather provider: ${this.providerName} started.`);
+	},
+
+	// This method should start the API request to fetch the current weather.
+	// This method should definetly be overwritten in the provider.
+	fetchCurrentWeather: function() {
+		Log.warn(`Weather provider: ${this.providerName} does not subclass the fetchCurrentWeather method.`);
+	},
+
+	// This method should start the API request to fetch the weather forecast.
+	// This method should definetly be overwritten in the provider.
+	fetchWeatherForecast: function() {
+		Log.warn(`Weather provider: ${this.providerName} does not subclass the fetchWeatherForecast method.`);
+	},
+
+	// This returns a WeatherDay object for the current weather.
+	currentWeather: function() {
+		return this.currentWeatherObject;
+	},
+
+	// This returns an array of WeatherDay objects for the weather forecast.
+	weatherForecast: function() {
+		return this.weatherForecastArray;
+	},
+
+	// This returns the name of the fetched location or an empty string
+	fetchedLocation: function() {
+		return this.fetchedLocationName || "";
+	},
+
+	// Set the currentWeather and notify the delegate that new information is available.
+	setCurrentWeather: function(currentWeatherObject) {
+		// We should check here if we are passing a WeatherDay
+		this.currentWeatherObject = currentWeatherObject;
+
+		this.updateAvailable();
+	},
+
+	// Set the weatherForecastArray and notify the delegate that new information is available.
+	setWeatherForecast: function(weatherForecastArray) {
+		// We should check here if we are passing a WeatherDay
+		this.weatherForecastArray = weatherForecastArray;
+
+		this.updateAvailable();
+	},
+
+	// Set the fetched location name
+	setFetchedLocation: function(name) {
+		this.fetchedLocationName = name;
+	},
+
+	// Notify the delegate that new weather is available.
+	updateAvailable: function() {
+		this.delegate.updateAvailable(this);
+	},
+
+	// A convinience function to make requests. It returns a promise.
+	fetchData: function(url, method = "GET", data = null) {
+		return new Promise(function(resolve, reject) {
+			var request = new XMLHttpRequest();
+			request.open(method, url, true);
+			request.onreadystatechange = function() {
+				if (this.readyState === 4) {
+					if (this.status === 200) {
+						resolve(JSON.parse(this.response));
+					} else {
+						reject(request)
+					}
+				}
+			};
+			request.send();
+		})
+	}
+});
+
+/**
+ * Collection of registered weather providers.
+ */
+WeatherProvider.providers = [];
+
+/**
+ * Static method to register a new weather provider.
+ */
+WeatherProvider.register = function(providerIdentifier, providerDetails) {
+	WeatherProvider.providers[providerIdentifier.toLowerCase()] = WeatherProvider.extend(providerDetails);
+};
+
+/**
+ * Static method to initialize a new weather provider.
+ */
+WeatherProvider.initialize = function(providerIdentifier, delegate) {
+	providerIdentifier = providerIdentifier.toLowerCase();
+
+	var provider = new WeatherProvider.providers[providerIdentifier]();
+
+	provider.delegate = delegate;
+	provider.setConfig(delegate.config);
+
+	provider.providerIdentifier = providerIdentifier;
+	if (!provider.providerName) {
+		provider.providerName = providerIdentifier;
+	}
+
+	return provider;
+};