BrianHepler · cowboysdude · Oct 3, 2018 · Oct 3, 2018 · Oct 3, 2018 · Oct 3, 2018
diff --git a/MMM-WeatherBackground.js b/MMM-WeatherBackground.js
@@ -1,70 +1,113 @@
 //
 // MMM-WeatherBackground
-//
+//  Modified by Cowboysdude for MMM-NOAA3
+
+var sunset;
+var icon;
+"use strict";
 
 Module.register("MMM-WeatherBackground", {
-  defaults: {
-    targetDOM: ".fullscreen.below", //null or DomSelector for target. (if null, currentweather will be targeted.)
-    notification: "CURRENTWEATHER_DATA", //if you use other weather module, modify this.
-    payloadConverter: (payload)=> {
-      var iconMap = {
-        "01d": "sunny",
-  			"02d": "clouds",
-  			"03d": "cloudy",
-  			"04d": "windy",
-  			"09d": "heavy rain",
-  			"10d": "rain",
-  			"11d": "thunderstorm",
-  			"13d": "snow",
-  			"50d": "fog",
-  			"01n": "clear night",
-  			"02n": "cloudy night",
-  			"03n": "cloudy night",
-  			"04n": "cloudy night",
-  			"09n": "night rain",
-  			"10n": "night rain",
-  			"11n": "night thunderstorm",
-  			"13n": "night snow",
-  			"50n": "windy night"
-      }
-      return iconMap[payload.data.weather[0].icon] //return value be used for search keyword.
+
+    defaults: {
+        targetDOM: ".fullscreen.below", //null or DomSelector for target. (if null, currentweather will be targeted.)
+        notification: "WEATHER", //if you use other weather module, modify this.
+        opacity: '0.3',
+        payloadConverter: (payload) => {  
+             icon = payload.icon,
+             sunset = moment(payload.sunset).format('HH'),  
+             now = moment().format('HH'),
+		console.log("Now time :"+now+" Sunset :"+sunset);
+			if (now >= sunset) {
+                var iconMap = {
+		    "breezy": "modules/MMM-WeatherBackground/images/n_bao.jpg",
+		    "broken clouds":"modules/MMM-WeatherBackground/images/n_brokenclouds.jpg",
+                    "clear": "modules/MMM-WeatherBackground/images/n_clear.jpg",
+                    "sleet": "modules/MMM-WeatherBackground/images/n_sleet.jpg",
+                    "mostlycloudy": "modules/MMM-WeatherBackground/images/n_mostlycloudy.jpg",
+                    "partlycloudy": "modules/MMM-WeatherBackground/images/n_partlycloudy.jpg",
+                    "cloudy": "modules/MMM-WeatherBackground/images/n_cloudy.jpg",
+                    "rain": "modules/MMM-WeatherBackground/images/n_rain.jpg",
+                    "drizzle": "modules/MMM-WeatherBackground/images/n_drizzle.jpg",
+                    "tstorms": "modules/MMM-WeatherBackground/images/n_tstorms.jpg",
+                    "snow": "modules/MMM-WeatherBackground/images/n_snow.jpg",
+                    "windy": "modules/MMM-WeatherBackground/images/n_windy.jpg",
+                    "fog": "modules/MMM-WeatherBackground/images/n_fog.jpg",
+                    "overcast": "modules/MMM-WeatherBackground/images/n_overcast.jpg",
+                    "hazy": "modules/MMM-WeatherBackground/images/n_hazy.jpg",
+                    "Clouds":"modules/MMM-WeatherBackground/images/n_cloudy.jpg",
+                    "Light Rain": "modules/MMM-WeatherBackground/images/n_lightrain.jpg",
+                    "Breezy and Mostly Cloudy": "modules/MMM-WeatherBackground/images/n_partlycloudy.jpg",
+                    "chancesnow": "modules/MMM-WeatherBackground/images/n_lightsnow.jpg",					
+                }
+                return iconMap[icon]
+
+            } else {
+
+                var iconMap = {
+		    "breezy": "modules/MMM-WeatherBackground/images/bao.jpg",
+		    "brokenclouds":"modules/MMM-WeatherBackground/images/brokenclouds.jpg",
+                    "sunny": "modules/MMM-WeatherBackground/images/clear.jpg",
+                    "clear": "modules/MMM-WeatherBackground/images/clear.jpg",
+                    "cloudy": "modules/MMM-WeatherBackground/images/cloudy.jpg",
+                    "mostlycloudy": "modules/MMM-WeatherBackground/images/mostlycloudy.jpg",
+                    "partlycloudy": "modules/MMM-WeatherBackground/images/partlycloudy.jpg",
+                    "overcast": "modules/MMM-WeatherBackground/images/overcast.jpg",
+                    "wind": "modules/MMM-WeatherBackground/images/windy.jpg",
+                    "rain": "modules/MMM-WeatherBackground/images/rain.jpg",
+                    "tstorms": "modules/MMM-WeatherBackground/images/tstorms.jpg",
+                    "snow": "modules/MMM-WeatherBackground/images/snow.jpg",
+                    "fog": "modules/MMM-WeatherBackground/images/fog.jpg",
+                    "sleet": "modules/MMM-WeatherBackground/images/sleet.jpg", 
+                    "hazy": "modules/MMM-WeatherBackground/images/hazy.jpg",
+                    "drizzle": "modules/MMM-WeatherBackground/images/drizzle.jpg",
+					"Light Rain": "modules/MMM-WeatherBackground/images/lightrain.jpg",
+					"Breezy and Mostly Cloudy": "modules/MMM-WeatherBackground/images/partlycloudy.jpg",
+					"chancesnow": "modules/MMM-WeatherBackground/images/lightsnow.jpg",	
+                }		
+                return iconMap[icon]
+            }
+        },
     },
-  },
 
-  notificationReceived: function(noti, payload, sender) {
-    switch(noti) {
-      case "DOM_OBJECTS_CREATED" :
-        break
-      case this.config.notification :
-        var target = (this.config.targetDOM) ? this.config.targetDOM : "#" + sender.data.identifier
+    Css: function() {
+        var myElement = document.getElementsByClassName('module');
+        var i;
+        for (i = 0; i < myElement.length; i++) {
+            myElement[i].style.backgroundColor = "rgba(0,0,0," + this.config.opacity + ")";
+            myElement[i].style.padding = "10px 10px 10px 10px";
+        }
+    },
 
-        var t = this.config.payloadConverter(payload)
-        this.loadImage(target, t)
-        break
-    }
-  },
+    notificationReceived: function(noti, payload, sender) {
+        switch (noti) {
+            case "DOM_OBJECTS_CREATED":
+                break
+            case this.config.notification:  
+                var target = (this.config.targetDOM) ? this.config.targetDOM : "#" + sender.data.identifier 
+                var t = this.config.payloadConverter(payload)
+                this.loadImage(target, t)
+                this.Css() 
+                break
+        }
+    },
 
-  loadImage: function(target, description) {
-    var drawImage = function(dom) {
-      var timer = setTimeout(()=>{
-        //var w = dom.offsetWidth
-        //var h = dom.offsetHeight
-        //var url = `https://source.unsplash.com/${w}x${h}/?"${description}"`
-        var seed = Date.now()
-        var url = `https://source.unsplash.com/featured/?"${description}"&s=${seed}`
-        dom.style.backgroundSize = "cover"
-        dom.style.transition = "background-image 1s ease 1s"
-        var url = `url('${url}')`
-        dom.style.backgroundImage = url
-      }, 1000)
-    }
-    var doms = document.querySelectorAll(target)
-    if (doms.length <= 0) {
-      console.log("[WTHBGR] DOM not found.", target)
-      return;
+    loadImage: function(target, description) {
+        var drawImage = function(dom) {
+            var timer = setTimeout(() => {
+                var url = description
+                dom.style.backgroundSize = "cover"
+                dom.style.transition = "background-image 2s ease 2s"
+                var url = `url('${url}')` 
+                dom.style.backgroundImage = url 
+            }, 1000)
+        }
+        var doms = document.querySelectorAll(target)
+        if (doms.length <= 0) {
+            console.log("[NOAA3_WTHBGR] DOM not found.", target)
+            return;
+        }
+        doms.forEach((dom) => {
+            drawImage(dom)
+        })
     }
-    doms.forEach((dom)=>{
-      drawImage(dom)
-    })
-  }
 })
diff --git a/README.md b/README.md
@@ -1,69 +1,34 @@
 # MMM-WeatherBackground
-MagicMirror Module - for Weather image background from Unsplash. This is a plugin of other weather modules.
+MagicMirror Module - for Weather image background. This is a plugin of other weather modules.
 
 ## Screenshot
-![Screenshot](https://github.com/eouia/MMM-WeatherBackground/blob/master/scr.png?raw=true)
+  Day
+![Screenshot](scr.png)
+
+  Night 
+![Screenshot](scr1.JPG)
+
 
 ## Installation
 ```shell
 cd ~/MagicMirror/modules
-git clone https://github.com/eouia/MMM-WeatherBackground
+git clone https://github.com/cowboysdude/MMM-WeatherBackground
+cd MMM-WeatherBackground
+npm install in the MMM-WeatherBackground directory
 ```
 
 ## Configuration
 ### Simple
 ```javascript
 {
-  module: "MMM-WeatherBackground",
-  // don't assign position.
-  config: {}
-},
-```
-### Defaults & details
-```javascript
-{
-  module: "MMM-WeatherBackground",
-  config: {
-    targetDOM: ".fullscreen.below", //null or DomSelector for target.
-    // if null, currentweather will be targeted.
-    // examples: ".newsfeed", "#SOME_SPECIAL_DOM", ".top.left .module"
-
-    // You don't need to care about belows;
-    notification: "CURRENTWEATHER_DATA", //if you want to use other notification, modify this.
-    payloadConverter: (payload)=> {
-      var iconMap = {
-        "01d": "sunny",
-        "02d": "clouds",
-        "03d": "cloudy",
-        "04d": "windy",
-        "09d": "heavy rain",
-        "10d": "rain",
-        "11d": "thunderstorm",
-        "13d": "snow",
-        "50d": "fog",
-        "01n": "clear night",
-        "02n": "cloudy night",
-        "03n": "cloudy night",
-        "04n": "cloudy night",
-        "09n": "night rain",
-        "10n": "night rain",
-        "11n": "night thunderstorm",
-        "13n": "night snow",
-        "50n": "windy night"
-      }
-      return iconMap[payload.data.weather[0].icon] //return value be used for search keyword.
-      //other solution: return payload.data.weather[0].description
-    },
-  }
-},
-
-```
-## Tip
-You'd better modify your CSS to enhance visibilties of your modules. Below is just one of examples.
-```CSS
-.module {
-  background-color:rgba(0,0,0,0.5)
-}
-```
-
-Sometimes, unsplash could return mismatched images with keyword. 
+            disabled: false,
+            module: "MMM-WeatherBackground",
+            config: {
+            opacity: "0.3" //This is the color behind the modules so you can see them better.   Higher the number the darker the color
+            //  default in module is set to 0.4
+            }
+}, 
+``` 
+That's pretty much the entire config entry that can be put anywhere in your config.js.
+## BE AWARE
+If you don't get a background let me know what the weather in the module says, perhaps there's no image for it and needs to be updated :)
diff --git a/images/chancesnow.jpg b/images/chancesnow.jpg
diff --git a/images/clear.jpg b/images/clear.jpg
diff --git a/images/cloudy.jpg b/images/cloudy.jpg
diff --git a/images/drizzle.jpg b/images/drizzle.jpg
diff --git a/images/flurries.jpg b/images/flurries.jpg
diff --git a/images/fog.jpg b/images/fog.jpg
diff --git a/images/hazy.jpg b/images/hazy.jpg
diff --git a/images/lightsnow.jpg b/images/lightsnow.jpg
diff --git a/images/mostlycloudy.jpg b/images/mostlycloudy.jpg
diff --git a/images/n_chancesnow.jpg b/images/n_chancesnow.jpg
diff --git a/images/n_changesnow.jpg b/images/n_changesnow.jpg
diff --git a/images/n_clear.jpg b/images/n_clear.jpg
diff --git a/images/n_cloudy.jpg b/images/n_cloudy.jpg
diff --git a/images/n_flurries.jpg b/images/n_flurries.jpg
diff --git a/images/n_fog.jpg b/images/n_fog.jpg
diff --git a/images/n_hazy.jpg b/images/n_hazy.jpg
diff --git a/images/n_lightsnow.jpg b/images/n_lightsnow.jpg
diff --git a/images/n_mostlycloudy.jpg b/images/n_mostlycloudy.jpg
diff --git a/images/n_overcast.jpg b/images/n_overcast.jpg
diff --git a/images/n_partlycloudy.jpg b/images/n_partlycloudy.jpg
diff --git a/images/n_rain.jpg b/images/n_rain.jpg
diff --git a/images/n_sleet.jpg b/images/n_sleet.jpg
diff --git a/images/n_snow.jpg b/images/n_snow.jpg
diff --git a/images/n_tstorms.jpg b/images/n_tstorms.jpg
diff --git a/images/overcast.jpg b/images/overcast.jpg
diff --git a/images/partlycloudy.jpg b/images/partlycloudy.jpg
diff --git a/images/rain.jpg b/images/rain.jpg
diff --git a/images/raining.png b/images/raining.png
diff --git a/images/sleet.jpg b/images/sleet.jpg
diff --git a/images/snow.jpg b/images/snow.jpg
diff --git a/images/tstorms.jpg b/images/tstorms.jpg
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "mmm-weatherbackground",
+  "version": "3.0.1",
+  "description": "MagicMirror Module - for Weather image background from Unsplash. This is a plugin of other weather modules.",
+  "main": "MMM-WeatherBackground.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "dayjs": "^1.7.7",
+    "request": "^2.88.0"
+  },
+  "devDependencies": {}
+}
diff --git a/scr.png b/scr.png
diff --git a/scr1.JPG b/scr1.JPG