Snowman and flower animations (#33)

* Adding snowman and flower animations

* Update Changelog and Readme

* Small cleanup

* 2.12.0

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 Wintermix, realistic clouds and effect particle count
 
+## [2.12.0] - 2021-02-19
+### Added
+- Added a flower growing animation during rain and a snowman being built during snow
+- Added hideSnowman and hideFlower option (added to configuration)
+
 ## [2.11.0] - 2021-02-19
 ### Added
 - Winter mix weather effect to show snow and rain at sametime based on current weather

MMM-DynamicWeather.css

@@ -430,4 +430,117 @@ Lightning
   100% {
     opacity: 0;
   }
+}
+
+/***************************
+Snowman
+***************************/
+.MMM-DynamicWeather .snowman {
+  width: 350px !important;
+  bottom: 20px;
+  left: 25%;
+  position: absolute;
+  display: block;
+  height: 100px !important;
+  background: url("images/SNOWMAN_1.png") center center/cover no-repeat transparent;
+  animation: snowmanBg linear;
+  animation-fill-mode: forwards;
+  animation-duration: 60;
+  /* animation-delay: 10s; */
+}
+@keyframes snowmanBg {
+  0% {
+    background-image: url("images/SNOWMAN_1.png");
+    height: 100px;
+  }
+  10% {
+    background-image: url("images/SNOWMAN_1.png");
+    height: 100px;
+  }
+  20% {
+    background-image: url("images/SNOWMAN_2.png");
+    height: 200px;
+  }
+  30% {
+    background-image: url("images/SNOWMAN_3.png");
+    height: 300px;
+  }
+  40% {
+    background-image: url("images/SNOWMAN_4.png");
+    height: 375px;
+  }
+  50% {
+    background-image: url("images/SNOWMAN_5.png");
+    height: 450px;
+  }
+  60% {
+    background-image: url("images/SNOWMAN_6.png");
+    height: 600px;
+  }
+  70% {
+    background-image: url("images/SNOWMAN_7.png");
+    height: 625px;
+  }
+  80% {
+    background-image: url("images/SNOWMAN_8.png");
+    height: 625px;
+  }
+  90% {
+    background-image: url("images/SNOWMAN_9.png");
+    height: 650px;
+  }
+  100% {
+    background-image: url("images/SNOWMAN_9.png");
+    height: 650px;
+  }
+}
+
+/***************************
+Flower
+***************************/
+.MMM-DynamicWeather .flower {
+  width: 400px !important;
+  bottom: 20px;
+  left: 25%;
+  position: absolute;
+  display: block;
+  height: 250px !important;
+  background: url("images/FLOWER_1.png") center center/cover no-repeat transparent;
+  animation: flowerBg linear;
+  animation-fill-mode: forwards;
+  animation-delay: 10s;
+}
+@keyframes flowerBg {
+  0%, 10% {
+    background-image: url("images/FLOWER_1.png");
+    height: 250px;
+  }
+  20% {
+    background-image: url("images/FLOWER_2.png");
+    height: 350px;
+  }
+  30% {
+    background-image: url("images/FLOWER_3.png");
+    height: 400px;
+  }
+  40% {
+    background-image: url("images/FLOWER_4.png");
+    height: 450px;
+  }
+  50% {
+    background-image: url("images/FLOWER_5.png");
+    height: 500px;
+  }
+  60% {
+    background-image: url("images/FLOWER_6.png");
+    height: 600px;
+  }
+  70% {
+    background-image: url("images/FLOWER_7.png");
+    height: 650px;
+  }
+  80%, 100% {
+    background-image: url("images/FLOWER_8.png");
+    height: 650px;
+  }
 }

MMM-DynamicWeather.js

@@ -74,7 +74,9 @@ Module.register("MMM-DynamicWeather", {
         effectDelay: 60000,
         realisticClouds: false,
         hideSnow: false,
+        hideSnowman: true,
         hideRain: false,
+        hideFlower: true,
         hideClouds: false,
         hideFog: false,
         hideLightning: false,
@@ -315,13 +317,19 @@ Module.register("MMM-DynamicWeather", {
             //Codes from https://openweathermap.org/weather-conditions
             if (this.weatherCode >= 600 && this.weatherCode <= 622 && !this.config.hideSnow) {
                 this.showCustomEffect(wrapper, this.snowEffect);
+                if (this.config.hideSnowman === false) {
+                    this.buildSnowman(wrapper);
+                }
                 if (this.weatherCode >= 611 && this.weatherCode <= 622 && !this.config.hideRain) {
                     //snow/rain mix
                     this.makeItRain(wrapper);
                 }
             }
             else if (this.weatherCode >= 200 && this.weatherCode <= 531 && !this.config.hideRain) {
                 this.makeItRain(wrapper);
+                if (this.config.hideFlower === false) {
+                    this.buildFlower(wrapper);
+                }
                 if (this.weatherCode >= 200 && this.weatherCode <= 232 && !this.config.hideLightning) {
                     this.makeItLightning(wrapper);
                 }
@@ -388,14 +396,14 @@ Module.register("MMM-DynamicWeather", {
                 }
                 case "left-right": {
                     flake.className = "flake-left-right";
-                    flake.style.left = (-75 - (size * 2)) + "px";
+                    flake.style.left = -75 - size * 2 + "px";
                     flake.style.top = Math.random() * 100 - 10 + "%";
                     flake.style.animationName = "flake-jiggle-left-right";
                     break;
                 }
                 case "right-left": {
                     flake.className = "flake-right-left";
-                    flake.style.right = (75 + (size * 2)) + "px";
+                    flake.style.right = 75 + size * 2 + "px";
                     flake.style.top = Math.random() * 100 - 10 + "%";
                     flake.style.animationName = "flake-jiggle-right-left";
                     break;
@@ -408,8 +416,8 @@ Module.register("MMM-DynamicWeather", {
                 }
             }
             //let speed = 95;
-            var max = effect.getSpeedMax(); //(100 - speed) < 1 ? 1 : 100 - speed;
-            var min = effect.getSpeedMin(); //(50 - speed) < 0 ? 0 : 50 - speed;
+            var max = effect.getSpeedMax();
+            var min = effect.getSpeedMin();
             jiggle = document.createElement("div");
             jiggle.style.animationDelay = Math.random() * max + "s";
             jiggle.style.animationDuration = max - Math.random() * min * size + "s";
@@ -429,6 +437,13 @@ Module.register("MMM-DynamicWeather", {
             wrapper.appendChild(flake);
         }
     },
+    buildSnowman: function (wrapper) {
+        this.doShowEffects = false;
+        var snowmanImage = document.createElement("div");
+        snowmanImage.classList.add("snowman");
+        snowmanImage.style.animationDuration = this.config.effectDuration - 10000 + "ms"; //subtract for 10s delay
+        wrapper.appendChild(snowmanImage);
+    },
     makeItRain: function (wrapper) {
         this.doShowEffects = false;
         var increment = 0;
@@ -463,6 +478,13 @@ Module.register("MMM-DynamicWeather", {
             wrapper.appendChild(frontDrop);
         }
     },
+    buildFlower: function (wrapper) {
+        this.doShowEffects = false;
+        var flowerImage = document.createElement("div");
+        flowerImage.classList.add("flower");
+        flowerImage.style.animationDuration = this.config.effectDuration - 10000 + "ms"; //subtract for 10s delay
+        wrapper.appendChild(flowerImage);
+    },
     makeItLightning: function (wrapper) {
         this.doShowEffects = false;
         var lightningImage1 = document.createElement("div");

MMM-DynamicWeather.ts

@@ -96,7 +96,9 @@ Module.register("MMM-DynamicWeather", {
     effectDelay: 60000,
     realisticClouds: false,
     hideSnow: false,
+    hideSnowman: true,
     hideRain: false,
+    hideFlower: true,
     hideClouds: false,
     hideFog: false,
     hideLightning: false,
@@ -343,12 +345,18 @@ Module.register("MMM-DynamicWeather", {
       //Codes from https://openweathermap.org/weather-conditions
       if (this.weatherCode >= 600 && this.weatherCode <= 622 && !this.config.hideSnow) {
         this.showCustomEffect(wrapper, this.snowEffect);
+        if (this.config.hideSnowman === false) {
+          this.buildSnowman(wrapper);
+        }
         if (this.weatherCode >= 611 && this.weatherCode <= 622 && !this.config.hideRain) {
           //snow/rain mix
           this.makeItRain(wrapper);
         }
       } else if (this.weatherCode >= 200 && this.weatherCode <= 531 && !this.config.hideRain) {
         this.makeItRain(wrapper);
+        if (this.config.hideFlower === false) {
+          this.buildFlower(wrapper);
+        }
         if (this.weatherCode >= 200 && this.weatherCode <= 232 && !this.config.hideLightning) {
           this.makeItLightning(wrapper);
         }
@@ -417,14 +425,14 @@ Module.register("MMM-DynamicWeather", {
         }
         case "left-right": {
           flake.className = "flake-left-right";
-          flake.style.left = (-75 - (size * 2)) + "px";
+          flake.style.left = -75 - size * 2 + "px";
           flake.style.top = Math.random() * 100 - 10 + "%";
           flake.style.animationName = "flake-jiggle-left-right";
           break;
         }
         case "right-left": {
           flake.className = "flake-right-left";
-          flake.style.right = (75 + (size * 2)) + "px";
+          flake.style.right = 75 + size * 2 + "px";
           flake.style.top = Math.random() * 100 - 10 + "%";
           flake.style.animationName = "flake-jiggle-right-left";
           break;
@@ -437,9 +445,8 @@ Module.register("MMM-DynamicWeather", {
         }
       }
 
-      //let speed = 95;
-      let max = effect.getSpeedMax(); //(100 - speed) < 1 ? 1 : 100 - speed;
-      let min = effect.getSpeedMin(); //(50 - speed) < 0 ? 0 : 50 - speed;
+      let max = effect.getSpeedMax();
+      let min = effect.getSpeedMin();
 
       jiggle = document.createElement("div");
       jiggle.style.animationDelay = Math.random() * max + "s";
@@ -466,6 +473,16 @@ Module.register("MMM-DynamicWeather", {
     }
   },
 
+  buildSnowman: function (wrapper) {
+    this.doShowEffects = false;
+
+    var snowmanImage = document.createElement("div");
+    snowmanImage.classList.add("snowman");
+    snowmanImage.style.animationDuration = this.config.effectDuration - 10000 + "ms"; //subtract for 10s delay
+
+    wrapper.appendChild(snowmanImage);
+  },
+
   makeItRain: function (wrapper) {
     this.doShowEffects = false;
     var increment = 0;
@@ -507,6 +524,16 @@ Module.register("MMM-DynamicWeather", {
     }
   },
 
+  buildFlower: function (wrapper) {
+    this.doShowEffects = false;
+
+    var flowerImage = document.createElement("div");
+    flowerImage.classList.add("flower");
+    flowerImage.style.animationDuration = this.config.effectDuration - 10000 + "ms"; //subtract for 10s delay
+
+    wrapper.appendChild(flowerImage);
+  },
+
   makeItLightning: function (wrapper) {
     this.doShowEffects = false;
 

README.md

@@ -75,7 +75,9 @@ The following properties can be configured:
 |`effectDelay`|The length, in milliseconds, to wait to restart the effect. <br><br>**Type:** `number`<br>**Default value:** `60000`|
 |`fadeDuration`|The length, in milliseconds, to fade out all effects. <br><br>**Type:** `number`<br>**Default value:** `3000`|
 |`hideSnow`|If true, will never display the "snow" effect. <br><br>**Type:** `boolean`<br>**Default value:** `false`|
+|`hideSnowman`|If false, will display an animation at the bottom of a snowman being built if the current weather is snow and `hideSnow` is false. The animation lasts for the effectDuration with a 10 second delay.<br><br>**Type:** `boolean`<br>**Default value:** `true`|
 |`hideRain`|If true, will never display the "rain" effect. <br><br>**Type:** `boolean`<br>**Default value:** `false`|
+|`hideFlower`|If false, will display an animation at the bottom of a flower growing if the current weather is rain and `hideRain` is false. The animation lasts for the effectDuration with a 10 second delay. <br><br>**Type:** `boolean`<br>**Default value:** `true`|
 |`hideClouds`|If true, will never display the "cloudy" effect. <br><br>**Type:** `boolean`<br>**Default value:** `false`|
 |`hideFog`|If true, will never display the "fog" effect. <br><br>**Type:** `boolean`<br>**Default value:** `false`|
 |`hideLightning`|If true, will never display the "lightning" effect. <br><br>**Type:** `boolean`<br>**Default value:** `false`|
@@ -100,8 +102,8 @@ The following properties can be configured:
 |`holiday`|Will display the effect on the holiday found at [https://www.timeanddate.com/holidays/us/?hol=43122559](https://www.timeanddate.com/holidays/us/?hol=43122559). Simply copy the "Name" value from that table. <br><br>**Type:** `string`<br>**Default value:** `null`|
 |`images`|An array of image files to display at random for this effect. All files need to be in the "images" folder of the MMM-DynamicWeather module folder.<br><br>**Type:** `string[]`<br>**Default value:** `null`|
 |`particleCount`|The number of particles to show for the effect. Higher counts may cause performance issues. If this is not set, it will use the `particleCount` from the general configuration. <br><br>**Type:** `integer`<br>**Default value:** `null`|
-|`maxSpeed`|The max speed factor. Closer to zero is faster. <br><br>**Type:** `number`<br>**Default value:** `100`|
-|`minSpeed`|The min speed factor. Closer to zero is faster. <br><br>**Type:** `number`<br>**Default value:** `50`|
+|`maxSpeed`|The maximum speed, in seconds, for the effect's image to cross the screen. Closer to zero is faster. Each effect particle is randomized between maxSpeed and minSpeed. <br><br>**Type:** `number`<br>**Default value:** `100`|
+|`minSpeed`|The minimum speed, in seconds, for the effect's image to cross the screen. Closer to zero is faster. Each effect particle is randomized between maxSpeed and minSpeed.  <br><br>**Type:** `number`<br>**Default value:** `50`|
 |`recurrence`|Display the effect repeatedly.<br>Yearly - Not a recurrence option, just leave year unset or zero.<br><br>**Options:**`monthly`,`weekly`,`weekdays`,`weekends`<br>**Type:** `string`<br>**Default value:** `null`|
 |`size`|The size factor to display the image; larger the number the larger the picture.<br><br>**Type:** `number`<br>**Default value:** `1`|
 |`weatherCode`|The effect will be displayed whenever the current weather matches this code. You can find all valid codes [here](https://openweathermap.org/weather-conditions)<br>This does not change the default weather effects, those will still be shown unless `hideSnow`, `hideRain` or `hideClouds` is turned on. <br><br>**Type:** `number`<br>**Default value:** `0`|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mmm-dynamicweather",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "A heavily configurable MagicMirror Module to display different animations based on current weather and show customized event effects.",
   "repository": {
     "type": "git",