Initial version of weatherchart module for Magic Mirror 2 project

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 paphko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+# Module: weatherchart
+This MagicMirror modules allows you to show a weather diagram provided by http://www.yr.no
+
+
+## Installation
+
+In your terminal, go to your MagicMirror's Module folder:
+````
+cd ~/MagicMirror/modules
+````
+
+Clone this repository:
+````
+git clone https://github.com/paphko/weatherchart.git
+````
+
+Configure the module in your `config.js` file.
+
+## Using the module
+
+To use this module, you must first determine country, area, and city:
+1. go to http://www.yr.no
+2. enter your location into the search field at the top and select your city
+3. at the top-right, switch language to English
+4. write down country, area, and city from the current URL, e.g.: http://www.yr.no/place/Germany/North_Rhine-Westphalia/Duisburg/
+
+Now add the module to the modules array in the `config/config.js` file:
+````javascript
+modules: [
+	{
+		module: 'weatherchart',
+		position: 'bottom_left', // this can be any of the regions
+		config: {
+			country: 'Germany', // as determined above
+			area: 'North_Rhine-Westphalia', // as determined above
+			city: 'Duisburg', // as determined above
+			hideBorder: true, // whether or not a border with city name should be shown
+		}
+	},
+]
+````
+
+## Configuration options
+
+The following properties can be configured:
+
+
+<table width="100%">
+	<!-- why, markdown... -->
+	<thead>
+		<tr>
+			<th>Option</th>
+			<th width="100%">Description</th>
+		</tr>
+	<thead>
+	<tbody>
+		<tr>
+			<td><code>country</code></td>
+			<td>Your country as determined above</td>
+		</tr>
+		<tr>
+			<td><code>area</code></td>
+			<td>Your area as determined above</td>
+		</tr>
+		<tr>
+			<td><code>city</code></td>
+			<td>Your city name as determined above</td>
+		</tr>
+		<tr>
+			<td><code>hideBorder</code></td>
+			<td>Wheather or not a border with city name should be shown.
+				<br><b>Default value:</b> <code>false</code>
+			</td>
+		</tr>
+	</tbody>
+</table>

weatherchart.js

@@ -0,0 +1,29 @@
+Module.register("weatherchart", {
+        defaults: {
+                country: 'Germany',
+                area: 'North_Rhine-Westphalia',
+                city: 'Dortmund',
+		hideBorder: true,
+        },
+        getDom: function() {
+                // add current timestamp to avoid old cached image
+                var src = "http://www.yr.no/place/" + this.config.country + "/" + this.config.area + "/" + this.config.city + "/meteogram.png#" + new Date().getTime();
+
+                // invert and grayscale image via css
+                var style = "-webkit-filter: invert(100%) grayscale(100%);";
+		if (this.config.hideBorder)
+			style = "position: absolute; left: -7px; top: -25px; " + style;
+                var img = "<img src='" + src + "' style='" + style + "'>";
+
+                var wrapper = document.createElement("div");
+		if (this.config.hideBorder) {
+			wrapper.style.width = "810px";
+			wrapper.style.height = "241px";
+			wrapper.style.overflow = "hidden";
+			wrapper.style.position = "relative";
+		}
+                wrapper.innerHTML = img;
+                return wrapper;
+        }
+});
+