Features/fade forecast and maxnumberdays

CHANGELOG.md

@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Aligned indoor values in current weather vertical [#1499](https://github.com/MichMich/MagicMirror/issues/1499).
 - Added humidity support to nunjuck unit filter.
 - Do not display degree symbol for temperature in Kelvin [#1503](https://github.com/MichMich/MagicMirror/issues/1503).
+- Added fade, fadePoint and maxNumberOfDays properties to the forecast mode [#1516](https://github.com/MichMich/MagicMirror/issues/1516)
 
 ## [2.6.0] - 2019-01-01
 

modules/default/weather/README.md

@@ -71,6 +71,9 @@ The following properties can be configured:
 | `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`
+| `fade`                       | Fade the future events to black. (Gradient) <br><br> **Possible values:** `true` or `false` <br> **Default value:** `true`
+| `fadePoint`                  | Where to start fade? <br><br> **Possible values:** `0` (top of the list) - `1` (bottom of list) <br> **Default value:** `0.25`
+| `maxNumberOfDays`            | How many days of forecast to return. Specified by config.js <br><br> **Possible values:** `1` - `16` <br> **Default value:** `5` (5 days) <br> This value is optional. By default the weatherforecast module will return 5 days.
 
 ### Openweathermap options
 

modules/default/weather/forecast.njk

@@ -1,7 +1,10 @@
 {% if forecast %}
+    {% set numSteps = forecast | calcNumSteps %}
+    {% set currentStep = 0 %}
     <table class="{{ config.tableClass }}">
+        {% set forecast = forecast.slice(0, numSteps) %}
         {% for f in forecast %}
-            <tr {% if config.colored %}class="colored"{% endif %}>
+            <tr {% if config.colored %}class="colored"{% endif %} {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% 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">
@@ -16,6 +19,7 @@
                     </td>
                 {% endif %}
             </tr>
+            {% set currentStep = currentStep + 1 %}
         {% endfor %}
     </table>
 {% else %}

modules/default/weather/weather.js

@@ -33,6 +33,9 @@ Module.register("weather",{
 		decimalSymbol: ".",
 		showIndoorTemperature: false,
 		showIndoorHumidity: false,
+		maxNumberOfDays: 5,
+		fade: true,
+		fadePoint: 0.25, // Start on 1/4th of the list.
 
 		initialLoadDelay: 0, // 0 seconds delay
 		retryDelay: 2500,
@@ -198,7 +201,7 @@ Module.register("weather",{
 					}
 				}
 			} else if (type === "rain") {
-				if (isNaN(value)) {
+				if (isNaN(value) || value === 0) {
 					value = "";
 				} else {
 					value = `${value.toFixed(2)} ${this.config.units === "imperial" ? "in" : "mm"}`;
@@ -217,5 +220,26 @@ Module.register("weather",{
 		this.nunjucksEnvironment().addFilter("decimalSymbol", function(value) {
 			return value.replace(/\./g, this.config.decimalSymbol);
 		}.bind(this));
+
+		this.nunjucksEnvironment().addFilter("calcNumSteps", function(forecast) {
+			return Math.min(forecast.length, this.config.maxNumberOfDays);
+		}.bind(this));
+
+		this.nunjucksEnvironment().addFilter("opacity", function(currentStep, numSteps) {
+			if (this.config.fade && this.config.fadePoint < 1) {
+				if (this.config.fadePoint < 0) {
+					this.config.fadePoint = 0;
+				}
+				var startingPoint = numSteps * this.config.fadePoint;
+				var numFadesteps = numSteps - startingPoint;
+				if (currentStep >= startingPoint) {
+					return 1 - (currentStep - startingPoint) / numFadesteps;
+				} else {
+					return 1;
+				}
+			} else {
+				return 1;
+			}
+		}.bind(this));
 	}
 });