From 08b9e7b5b5dcd969da116e383647c403fb1f7bbc Mon Sep 17 00:00:00 2001 From: Denis Treskunov Date: Fri, 17 Jan 2020 21:52:04 -0800 Subject: [PATCH 1/4] add sun/moon rise/set times Icons become bold when the object is above the horizon. Also shows percent of moon illumination. --- CHANGELOG.md | 1 + modules/default/clock/clock.js | 38 +++++++++++++++++++++++++- modules/default/clock/clock_styles.css | 7 +++++ 3 files changed, 45 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7e63e7e..2549defb 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Added - Finnish translation for "PRECIP", "UPDATE_INFO_MULTIPLE" and "UPDATE_INFO_SINGLE". +- Sun and Moon data to the `clock` module. ### Fixed - Force declaration of public ip adress in config file (ISSUE #1852) diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index d566c52f..4eb7a6d3 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -26,10 +26,15 @@ Module.register("clock",{ analogShowDate: "top", // options: false, 'top', or 'bottom' secondsColor: "#888888", timezone: null, + + showSunTimes: false, + showMoonTimes: false, + lat: 47.630539, + lon: -122.344147, }, // Define required scripts. getScripts: function() { - return ["moment.js", "moment-timezone.js"]; + return ["moment.js", "moment-timezone.js", "suncalc.js"]; }, // Define styles. getStyles: function() { @@ -93,11 +98,15 @@ Module.register("clock",{ var timeWrapper = document.createElement("div"); var secondsWrapper = document.createElement("sup"); var periodWrapper = document.createElement("span"); + var sunWrapper = document.createElement("div"); + var moonWrapper = document.createElement("div"); var weekWrapper = document.createElement("div"); // Style Wrappers dateWrapper.className = "date normal medium"; timeWrapper.className = "time bright large light"; secondsWrapper.className = "dimmed"; + sunWrapper.className = "sun dimmed small"; + moonWrapper.className = "moon dimmed small"; weekWrapper.className = "week dimmed medium"; // Set content of wrappers. @@ -142,6 +151,29 @@ Module.register("clock",{ timeWrapper.appendChild(periodWrapper); } + function formatTime(config, time) { + var formatString = hourSymbol + ':mm'; + if (config.showPeriod && config.timeFormat !== 24) { + formatString += config.showPeriodUpper ? 'A' : 'a'; + } + return moment(time).format(formatString); + } + if (this.config.showSunTimes) { + const sunTimes = SunCalc.getTimes(now, this.config.lat, this.config.lon); + const isVisible = now.isBetween(sunTimes.sunrise, sunTimes.sunset); + sunWrapper.innerHTML = '' + + '' + formatTime(this.config, sunTimes.sunrise) + '' + + '' + formatTime(this.config, sunTimes.sunset) + ''; + } + if (this.config.showMoonTimes) { + const moonIllumination = SunCalc.getMoonIllumination(now.toDate()); + const moonTimes = SunCalc.getMoonTimes(now, this.config.lat, this.config.lon); + const isVisible = now.isBetween(moonTimes.rise, moonTimes.set); + moonWrapper.innerHTML = ' ' + moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}) + '' + + ' ' + formatTime(this.config, moonTimes.rise) + ''+ + ' ' + formatTime(this.config, moonTimes.set) + ''; + } + /**************************************************************** * Create wrappers for ANALOG clock, only if specified in config */ @@ -210,6 +242,8 @@ Module.register("clock",{ // Display only a digital clock wrapper.appendChild(dateWrapper); wrapper.appendChild(timeWrapper); + wrapper.appendChild(sunWrapper); + wrapper.appendChild(moonWrapper); wrapper.appendChild(weekWrapper); } else if (this.config.displayType === "analog") { // Display only an analog clock @@ -244,6 +278,8 @@ Module.register("clock",{ digitalWrapper.style.cssFloat = "none"; digitalWrapper.appendChild(dateWrapper); digitalWrapper.appendChild(timeWrapper); + digitalWrapper.appendChild(sunWrapper); + digitalWrapper.appendChild(moonWrapper); digitalWrapper.appendChild(weekWrapper); var appendClocks = function(condition, pos1, pos2) { diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index 1df9bf83..7bd4554a 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -66,3 +66,10 @@ -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } + +.module.clock .sun, .module.clock .moon { + display: flex; +} +.module.clock .sun > *, .module.clock .moon > * { + flex: 1; +} From 85a52523cf02eb3ec81530fc94874b056748aa43 Mon Sep 17 00:00:00 2001 From: Denis Treskunov Date: Sat, 18 Jan 2020 08:39:54 -0800 Subject: [PATCH 2/4] show sun/moon as bright rather than bold if obj is visible --- modules/default/clock/clock.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 4eb7a6d3..6022998e 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -161,7 +161,7 @@ Module.register("clock",{ if (this.config.showSunTimes) { const sunTimes = SunCalc.getTimes(now, this.config.lat, this.config.lon); const isVisible = now.isBetween(sunTimes.sunrise, sunTimes.sunset); - sunWrapper.innerHTML = '' + + sunWrapper.innerHTML = '' + '' + formatTime(this.config, sunTimes.sunrise) + '' + '' + formatTime(this.config, sunTimes.sunset) + ''; } @@ -169,7 +169,7 @@ Module.register("clock",{ const moonIllumination = SunCalc.getMoonIllumination(now.toDate()); const moonTimes = SunCalc.getMoonTimes(now, this.config.lat, this.config.lon); const isVisible = now.isBetween(moonTimes.rise, moonTimes.set); - moonWrapper.innerHTML = ' ' + moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}) + '' + + moonWrapper.innerHTML = ' ' + moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}) + '' + ' ' + formatTime(this.config, moonTimes.rise) + ''+ ' ' + formatTime(this.config, moonTimes.set) + ''; } From 40a9f9dd85c861d3e0e2cab28792b51951b07dca Mon Sep 17 00:00:00 2001 From: Denis Treskunov Date: Sat, 18 Jan 2020 08:45:52 -0800 Subject: [PATCH 3/4] fix stylelint:simple --- modules/default/clock/clock_styles.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index 7bd4554a..fa6c2d5d 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -67,9 +67,12 @@ transform-origin: 50% 100%; } -.module.clock .sun, .module.clock .moon { +.module.clock .sun, +.module.clock .moon { display: flex; } -.module.clock .sun > *, .module.clock .moon > * { + +.module.clock .sun > *, +.module.clock .moon > * { flex: 1; } From 36762a6e46402e7ff5f410775ef2cc9e1750710a Mon Sep 17 00:00:00 2001 From: Denis Treskunov Date: Sat, 18 Jan 2020 09:50:43 -0800 Subject: [PATCH 4/4] add duration until next sunset/sunrise --- modules/default/clock/clock.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 6022998e..e6ac880b 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -161,7 +161,18 @@ Module.register("clock",{ if (this.config.showSunTimes) { const sunTimes = SunCalc.getTimes(now, this.config.lat, this.config.lon); const isVisible = now.isBetween(sunTimes.sunrise, sunTimes.sunset); - sunWrapper.innerHTML = '' + + var nextEvent; + if (now.isBefore(sunTimes.sunrise)) { + nextEvent = sunTimes.sunrise; + } else if (now.isBefore(sunTimes.sunset)) { + nextEvent = sunTimes.sunset; + } else { + const tomorrowSunTimes = SunCalc.getTimes(now.add(1, 'day'), this.config.lat, this.config.lon); + nextEvent = tomorrowSunTimes.sunrise; + } + const untilNextEvent = moment.duration(moment(nextEvent).diff(now)); + const untilNextEventString = untilNextEvent.hours() + 'h ' + untilNextEvent.minutes() + 'm'; + sunWrapper.innerHTML = ' ' + untilNextEventString + '' + '' + formatTime(this.config, sunTimes.sunrise) + '' + '' + formatTime(this.config, sunTimes.sunset) + ''; } @@ -169,7 +180,8 @@ Module.register("clock",{ const moonIllumination = SunCalc.getMoonIllumination(now.toDate()); const moonTimes = SunCalc.getMoonTimes(now, this.config.lat, this.config.lon); const isVisible = now.isBetween(moonTimes.rise, moonTimes.set); - moonWrapper.innerHTML = ' ' + moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}) + '' + + const illuminatedFractionString = moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}); + moonWrapper.innerHTML = ' ' + illuminatedFractionString + '' + ' ' + formatTime(this.config, moonTimes.rise) + ''+ ' ' + formatTime(this.config, moonTimes.set) + ''; }