diff --git a/MMM-SunRiseSet.css b/MMM-SunRiseSet.css new file mode 100644 index 0000000..a7139db --- /dev/null +++ b/MMM-SunRiseSet.css @@ -0,0 +1,70 @@ +/* Copy and paste any or all of these css entries into your custom.css file inside your + * css folder. The functions are annotated to make things as easy as possible for you. + * Use any colors you want! Go to - "http://htmlcolorcodes.com/color-picker/" + * Pick your color, copy and paste the HEX number. Example - #62FF00 = bright green. + */ + +.MMM-SunRiseSet .header { + color: white; /* Header color. Default is white. */ + text-align: left; /* Algin header text */ +} + +.MMM-SunRiseSet .photo { +/* display: none; uncomment if you don't want animated image */ + width: 100%; /* adjust size of moon picture */ + margin-left: 0px; /* Precisely align moon picture with these */ + margin-right: 0px; + margin-top: 10px; + margin-bottom: -15px; + float: center; +} + +.MMM-SunRiseSet .sunrise { + color: white; /* sunrise color. Default is white. */ + text-align: left; /* Align sunrise text */ +} + +.MMM-SunRiseSet .sunset { + color: white; /* sunset color. Default is white. */ + text-align: left; /* Align sunset text */ +} + +.MMM-SunRiseSet .solar_noon { + color: white; /* solar_noon color. Default is white. */ + text-align: left; /* Align solar_noon text */ +} + +.MMM-SunRiseSet .day_length { + color: white; /* day_length color. Default is white. */ + text-align: left; /* Align day_length text */ +} + +.MMM-SunRiseSet .civil_twilight_begin { + color: white; /* civil_twilight_begin color. Default is white. */ + text-align: left; /* Align civil_twilight_begin text */ +} + +.MMM-SunRiseSet .civil_twilight_end { + color: white; /* civil_twilight_end color. Default is white. */ + text-align: left; /* Align civil_twilight_end text */ +} + +.MMM-SunRiseSet .nautical_twilight_begin { + color: white; /* nautical_twilight_begin color. Default is white. */ + text-align: left; /* Align nautical_twilight_begin text */ +} + +.MMM-SunRiseSet .nautical_twilight_end { + color: white; /* nautical_twilight_end color. Default is white. */ + text-align: left; /* Align nautical_twilight_end text */ +} + +.MMM-SunRiseSet .astronomical_twilight_begin { + color: white; /* astronomical_twilight_begin color. Default is white. */ + text-align: left; /* Align astronomical_twilight_begin text */ +} + +.MMM-SunRiseSet .astronomical_twilight_end { + color: white; /* astronomical_twilight_end color. Default is white. */ + text-align: left; /* Align astronomical_twilight_end text */ +} \ No newline at end of file diff --git a/MMM-SunRiseSet.js b/MMM-SunRiseSet.js new file mode 100644 index 0000000..3cb37f9 --- /dev/null +++ b/MMM-SunRiseSet.js @@ -0,0 +1,181 @@ +/* Magic Mirror + * Module: MMM-SunRiseSet + * + * By Mykle1 + * + */ +Module.register("MMM-SunRiseSet", { + + // Module config defaults. + defaults: { + lat: "36.7201600", // latitude + lng: "-4.4203400", // longitude + useHeader: false, // true if you want a header + header: "On to the heart of the sunrise", // Any text you want. useHeader must be true + maxWidth: "300px", + animationSpeed: 3000, + initialLoadDelay: 4250, + retryDelay: 2500, + updateInterval: 60 * 60 * 1000, // 1 hour + + }, + + getStyles: function() { + return ["MMM-SunRiseSet.css"]; + }, + + getScripts: function() { + return ["moment.js"]; + }, + + start: function() { + Log.info("Starting module: " + this.name); + + requiresVersion: "2.1.0", + + // Set locale. + this.url = "https://api.sunrise-sunset.org/json?lat=" + this.config.lat + "&lng=" + this.config.lng + "&date=today&formatted=0"; + this.SunRiseSet = {}; + this.scheduleUpdate(); + }, + + getDom: function() { + + var wrapper = document.createElement("div"); + wrapper.className = "wrapper"; + wrapper.style.maxWidth = this.config.maxWidth; + + if (!this.loaded) { + wrapper.innerHTML = "On to the heart of the sunrise"; + wrapper.classList.add("bright", "light", "small"); + return wrapper; + } + + if (this.config.useHeader != false) { + var header = document.createElement("header"); + header.classList.add("xsmall", "bright", "light"); + header.innerHTML = this.config.header; + wrapper.appendChild(header); + } + + var SunRiseSet = this.SunRiseSet; + var lat = this.config.lat; // latitude + var lng = this.config.lng; // longitude + + + var top = document.createElement("div"); + top.classList.add("list-row"); + + + // sunrise set to local time using moment + var sunrise = document.createElement("div"); + sunrise.classList.add("xsmall", "bright", "sunrise"); + sunrise.innerHTML = "Sunrise is at " + moment(SunRiseSet.sunrise).local().format("h:mm A"); + wrapper.appendChild(sunrise); + + + // sunset set to local time using moment + var sunset = document.createElement("div"); + sunset.classList.add("xsmall", "bright", "sunset"); + sunset.innerHTML = "Sunset is at " + moment(SunRiseSet.sunset).local().format("h:mm A"); + wrapper.appendChild(sunset); + + + // solar noon set to local time using moment + var solar_noon = document.createElement("div"); + solar_noon.classList.add("xsmall", "bright", "solar_noon"); + solar_noon.innerHTML = "Solar noon is at " + moment(SunRiseSet.solar_noon).local().format("h:mm A"); + wrapper.appendChild(solar_noon); + + + // convert utc day_length to human readable time + var date = new Date(null); + date.setSeconds(SunRiseSet.day_length); // specify value for SECONDS here + var result = date.toISOString().substr(11, 8); + // length of day + var day_length = document.createElement("div"); + day_length.classList.add("xsmall", "bright", "day_length"); + day_length.innerHTML = "Length of day is " + result; + wrapper.appendChild(day_length); + + + // civil twilight begins set to local time using moment + var civil_twilight_begin = document.createElement("div"); + civil_twilight_begin.classList.add("xsmall", "bright", "civil_twilight_begin"); + civil_twilight_begin.innerHTML = "Civil twilight begins at " + moment(SunRiseSet.civil_twilight_begin).local().format("h:mm A"); + wrapper.appendChild(civil_twilight_begin); + + + // civil twilight ends set to local time using moment + var civil_twilight_end = document.createElement("div"); + civil_twilight_end.classList.add("xsmall", "bright", "civil_twilight_end"); + civil_twilight_end.innerHTML = "Civil twilight ends at " + moment(SunRiseSet.civil_twilight_end).local().format("h:mm A"); + wrapper.appendChild(civil_twilight_end); + + + // nautical_twilight_begin set to local time using moment + var nautical_twilight_begin = document.createElement("div"); + nautical_twilight_begin.classList.add("xsmall", "bright", "nautical_twilight_begin"); + nautical_twilight_begin.innerHTML = "Nautical twilight begins at " + moment(SunRiseSet.nautical_twilight_begin).local().format("h:mm A"); + wrapper.appendChild(nautical_twilight_begin); + + + // nautical_twilight_end set to local time using moment + var nautical_twilight_end = document.createElement("div"); + nautical_twilight_end.classList.add("xsmall", "bright", "nautical_twilight_end"); + nautical_twilight_end.innerHTML = "Nautical twilight ends at " + moment(SunRiseSet.nautical_twilight_end).local().format("h:mm A"); + wrapper.appendChild(nautical_twilight_end); + + + // astronomical_twilight_begin set to local time using moment + var astronomical_twilight_begin = document.createElement("div"); + astronomical_twilight_begin.classList.add("xsmall", "bright", "astronomical_twilight_begin"); + astronomical_twilight_begin.innerHTML = "Astronomical twilight begins at " + moment(SunRiseSet.astronomical_twilight_begin).local().format("h:mm A"); + wrapper.appendChild(astronomical_twilight_begin); + + + // astronomical_twilight_end set to local time using moment + var astronomical_twilight_end = document.createElement("div"); + astronomical_twilight_end.classList.add("xsmall", "bright", "astronomical_twilight_end"); + astronomical_twilight_end.innerHTML = "Astronomical twilight ends at " + moment(SunRiseSet.astronomical_twilight_end).local().format("h:mm A"); + wrapper.appendChild(astronomical_twilight_end); + + + // If I use a picture + var pic = document.createElement("div"); + var img = document.createElement("img"); + img.classList.add("photo"); + img.src = "modules/MMM-SunRiseSet/pix/phases.png"; + pic.appendChild(img); + wrapper.appendChild(pic); + + return wrapper; + }, + + + processSunRiseSet: function(data) { + this.today = data.Today; + this.SunRiseSet = data; + this.loaded = true; + }, + + scheduleUpdate: function() { + setInterval(() => { + this.getSunRiseSet(); + }, this.config.updateInterval); + this.getSunRiseSet(this.config.initialLoadDelay); + }, + + getSunRiseSet: function() { + this.sendSocketNotification('GET_SUNRISESET', this.url); + }, + + socketNotificationReceived: function(notification, payload) { + if (notification === "SUNRISESET_RESULT") { + this.processSunRiseSet(payload); + + this.updateDom(this.config.animationSpeed); + } + this.updateDom(this.config.initialLoadDelay); + }, +}); \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..f7936ae --- /dev/null +++ b/README.md @@ -0,0 +1,48 @@ +## MMM-SunRiseSet + +More information than you ever wanted to know about the rising and setting of the sun. + +## The information + +* Sunrise: The actual time the rising sun breaches the horizon. +* Sunset: The actual time the sun falls completely below the horizon. +* Solar Noon: The actual time when the sun is at its highest altitude in the sky. +* Day Length: The length of time between sunrise and sunset. +* Civil Twilight: The geometric center of the Sun is at most 6 degrees below the horizon. +* Nautical Twilight: The geometric center of the Sun is between 6 and 12 degrees below the horizon. +* Astronomical Twilight: The geometric center of the Sun is between 12 and 18 degrees below the horizon. + +## Examples + +* MMM-Lunartic in top_left region + +![](pix/1.JPG) + +* MMM-SunRiseSet in bottom_left region + +Annotated .css file included for aligning and coloring text and header. + +## Installation + +* `git clone https://github.com/mykle1/MMM-SunRiseSet` into the `~/MagicMirror/modules` directory. + +* No API key needed! No dependencies needed! No kidding! + + +## Config.js entry and options + + { + disabled: false, + module: "MMM-SunRiseSet", + position: "bottom_left", + config: { + lat: "40.574783", // Your latitude + lng: "-74.112450", // Your longitude + useHeader: false, // true if you want a header + header: "Header", // useHeader must be true + maxWidth: "260px", + } + }, + + +## Thanks go to SpaceCowboysDude for UTC and moment advice \ No newline at end of file diff --git a/node_helper.js b/node_helper.js new file mode 100644 index 0000000..9bc7f22 --- /dev/null +++ b/node_helper.js @@ -0,0 +1,36 @@ +/* Magic Mirror + * Module: MMM-SunRiseSet + * + * By Mykle1 + * + */ +const NodeHelper = require('node_helper'); +const request = require('request'); + + + +module.exports = NodeHelper.create({ + + start: function() { + console.log("Starting node_helper for: " + this.name); + }, + + getSunRiseSet: function(url) { + request({ + url: url, + method: 'GET' + }, (error, response, body) => { + if (!error && response.statusCode == 200) { + var result = JSON.parse(body).results; + // console.log(response.statusCode + result); // for checking + this.sendSocketNotification('SUNRISESET_RESULT', result); + } + }); + }, + + socketNotificationReceived: function(notification, payload) { + if (notification === 'GET_SUNRISESET') { + this.getSunRiseSet(payload); + } + } +}); diff --git a/pix/1.JPG b/pix/1.JPG new file mode 100644 index 0000000..f876e74 Binary files /dev/null and b/pix/1.JPG differ