kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 11:50:00 +00:00
Code Issues Projects Releases Wiki Activity

add sun/moon rise/set times

Browse Source 
Icons become bold when the object is above the horizon. Also shows
percent of moon illumination.
This commit is contained in:
Denis Treskunov 2020-01-17 21:52:04 -08:00
parent 1fd5fd4832
commit 08b9e7b5b5
3 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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)

38
modules/default/clock/clock.js
View File

@ -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 = '<span class="' + (isVisible ? 'bold' : 'light') + '"><i class="fa fa-sun-o" aria-hidden="true"></i></span>' +
'<span><i class="fa fa-arrow-up" aria-hidden="true"></i>' + formatTime(this.config, sunTimes.sunrise) + '</span>' +
'<span><i class="fa fa-arrow-down" aria-hidden="true"></i>' + formatTime(this.config, sunTimes.sunset) + '</span>';
}
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 = '<span class="' + (isVisible ? 'bold' : 'light') + '"><i class="fa fa-moon-o" aria-hidden="true"></i> ' + moonIllumination.fraction.toLocaleString(undefined, {style: 'percent'}) + '</span>' +
'<span><i class="fa fa-arrow-up" aria-hidden="true"></i> ' + formatTime(this.config, moonTimes.rise) + '</span>'+
'<span><i class="fa fa-arrow-down" aria-hidden="true"></i> ' + formatTime(this.config, moonTimes.set) + '</span>';
}
/****************************************************************
* 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) {

7
modules/default/clock/clock_styles.css
View File

@ -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;
}