diff --git a/MMM-WeatherBackground.js b/MMM-WeatherBackground.js index 5154898..5cd075c 100644 --- 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 index 3436fc3..a1f806e 100644 --- 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 new file mode 100644 index 0000000..6890914 Binary files /dev/null and b/images/chancesnow.jpg differ diff --git a/images/clear.jpg b/images/clear.jpg new file mode 100644 index 0000000..6b29a16 Binary files /dev/null and b/images/clear.jpg differ diff --git a/images/cloudy.jpg b/images/cloudy.jpg new file mode 100644 index 0000000..db5fa97 Binary files /dev/null and b/images/cloudy.jpg differ diff --git a/images/drizzle.jpg b/images/drizzle.jpg new file mode 100644 index 0000000..6cc5d78 Binary files /dev/null and b/images/drizzle.jpg differ diff --git a/images/flurries.jpg b/images/flurries.jpg new file mode 100644 index 0000000..4798e04 Binary files /dev/null and b/images/flurries.jpg differ diff --git a/images/fog.jpg b/images/fog.jpg new file mode 100644 index 0000000..a7fda94 Binary files /dev/null and b/images/fog.jpg differ diff --git a/images/hazy.jpg b/images/hazy.jpg new file mode 100644 index 0000000..bfbc504 Binary files /dev/null and b/images/hazy.jpg differ diff --git a/images/lightsnow.jpg b/images/lightsnow.jpg new file mode 100644 index 0000000..8e4d0c0 Binary files /dev/null and b/images/lightsnow.jpg differ diff --git a/images/mostlycloudy.jpg b/images/mostlycloudy.jpg new file mode 100644 index 0000000..171ffe0 Binary files /dev/null and b/images/mostlycloudy.jpg differ diff --git a/images/n_chancesnow.jpg b/images/n_chancesnow.jpg new file mode 100644 index 0000000..e8fed95 Binary files /dev/null and b/images/n_chancesnow.jpg differ diff --git a/images/n_changesnow.jpg b/images/n_changesnow.jpg new file mode 100644 index 0000000..2afd04b Binary files /dev/null and b/images/n_changesnow.jpg differ diff --git a/images/n_clear.jpg b/images/n_clear.jpg new file mode 100644 index 0000000..129a357 Binary files /dev/null and b/images/n_clear.jpg differ diff --git a/images/n_cloudy.jpg b/images/n_cloudy.jpg new file mode 100644 index 0000000..53e9191 Binary files /dev/null and b/images/n_cloudy.jpg differ diff --git a/images/n_flurries.jpg b/images/n_flurries.jpg new file mode 100644 index 0000000..af6189e Binary files /dev/null and b/images/n_flurries.jpg differ diff --git a/images/n_fog.jpg b/images/n_fog.jpg new file mode 100644 index 0000000..8b27ce6 Binary files /dev/null and b/images/n_fog.jpg differ diff --git a/images/n_hazy.jpg b/images/n_hazy.jpg new file mode 100644 index 0000000..d0e7b7f Binary files /dev/null and b/images/n_hazy.jpg differ diff --git a/images/n_lightsnow.jpg b/images/n_lightsnow.jpg new file mode 100644 index 0000000..dd6c91b Binary files /dev/null and b/images/n_lightsnow.jpg differ diff --git a/images/n_mostlycloudy.jpg b/images/n_mostlycloudy.jpg new file mode 100644 index 0000000..1cf630a Binary files /dev/null and b/images/n_mostlycloudy.jpg differ diff --git a/images/n_overcast.jpg b/images/n_overcast.jpg new file mode 100644 index 0000000..9ec8631 Binary files /dev/null and b/images/n_overcast.jpg differ diff --git a/images/n_partlycloudy.jpg b/images/n_partlycloudy.jpg new file mode 100644 index 0000000..96a854f Binary files /dev/null and b/images/n_partlycloudy.jpg differ diff --git a/images/n_rain.jpg b/images/n_rain.jpg new file mode 100644 index 0000000..bf28790 Binary files /dev/null and b/images/n_rain.jpg differ diff --git a/images/n_sleet.jpg b/images/n_sleet.jpg new file mode 100644 index 0000000..eef0291 Binary files /dev/null and b/images/n_sleet.jpg differ diff --git a/images/n_snow.jpg b/images/n_snow.jpg new file mode 100644 index 0000000..beae002 Binary files /dev/null and b/images/n_snow.jpg differ diff --git a/images/n_tstorms.jpg b/images/n_tstorms.jpg new file mode 100644 index 0000000..49d3e3f Binary files /dev/null and b/images/n_tstorms.jpg differ diff --git a/images/overcast.jpg b/images/overcast.jpg new file mode 100644 index 0000000..837b823 Binary files /dev/null and b/images/overcast.jpg differ diff --git a/images/partlycloudy.jpg b/images/partlycloudy.jpg new file mode 100644 index 0000000..8b513b1 Binary files /dev/null and b/images/partlycloudy.jpg differ diff --git a/images/rain.jpg b/images/rain.jpg new file mode 100644 index 0000000..3c733f5 Binary files /dev/null and b/images/rain.jpg differ diff --git a/images/raining.png b/images/raining.png new file mode 100644 index 0000000..f0bb427 Binary files /dev/null and b/images/raining.png differ diff --git a/images/sleet.jpg b/images/sleet.jpg new file mode 100644 index 0000000..ba0c25c Binary files /dev/null and b/images/sleet.jpg differ diff --git a/images/snow.jpg b/images/snow.jpg new file mode 100644 index 0000000..7047af4 Binary files /dev/null and b/images/snow.jpg differ diff --git a/images/tstorms.jpg b/images/tstorms.jpg new file mode 100644 index 0000000..34c564c Binary files /dev/null and b/images/tstorms.jpg differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..cf17736 --- /dev/null +++ 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 index f61be43..9aa4557 100644 Binary files a/scr.png and b/scr.png differ diff --git a/scr1.JPG b/scr1.JPG new file mode 100644 index 0000000..48b1707 Binary files /dev/null and b/scr1.JPG differ