diff --git a/CHANGELOG.md b/CHANGELOG.md index 75a849a2e6..f4fd8af871 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/modules/default/weather/README.md b/modules/default/weather/README.md index d10297d173..a035e85e40 100644 --- a/modules/default/weather/README.md +++ b/modules/default/weather/README.md @@ -71,6 +71,9 @@ The following properties can be configured: | `tableClass` | The class for the forecast table.

**Default value:** `'small'` | `colored` | If set to `true`, the min and max temperature are color coded.

**Default value:** `false` | `showRainAmount` | Show the amount of rain in the forecast

**Possible values:** `true` or `false`
**Default value:** `true` +| `fade` | Fade the future events to black. (Gradient)

**Possible values:** `true` or `false`
**Default value:** `true` +| `fadePoint` | Where to start fade?

**Possible values:** `0` (top of the list) - `1` (bottom of list)
**Default value:** `0.25` +| `maxNumberOfDays` | How many days of forecast to return. Specified by config.js

**Possible values:** `1` - `16`
**Default value:** `5` (5 days)
This value is optional. By default the weatherforecast module will return 5 days. ### Openweathermap options diff --git a/modules/default/weather/forecast.njk b/modules/default/weather/forecast.njk index 556a98ff05..315ebff82c 100644 --- a/modules/default/weather/forecast.njk +++ b/modules/default/weather/forecast.njk @@ -1,7 +1,10 @@ {% if forecast %} + {% set numSteps = forecast | calcNumSteps %} + {% set currentStep = 0 %} + {% set forecast = forecast.slice(0, numSteps) %} {% for f in forecast %} - + {% endif %} + {% set currentStep = currentStep + 1 %} {% endfor %}
{{ f.date.format('ddd') }} @@ -16,6 +19,7 @@
{% else %} diff --git a/modules/default/weather/weather.js b/modules/default/weather/weather.js index 52e9cfee5d..0c2304240a 100644 --- a/modules/default/weather/weather.js +++ b/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)); } });