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

Show moon phase in clock module (#3284)

Browse Source 
This change replaces the font-awesome moon icon and percent-lit with an
icon showing the current lunar phase.

It uses emoji, which may not be installed on all machines. The fallback
text version is backwards (the dark part of the moon is text-color,
which is normally black but white in MagicMirror).

---------

Co-authored-by: veeck <michael.veeck@nebenan.de>
This commit is contained in:
Ben Nitkin 2023-12-13 03:43:07 -05:00 committed by GitHub
parent 9d97724401
commit 55cd03576f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -28,6 +28,7 @@ _This release is scheduled to be released on 2024-01-01._
- Update newsfeed: Use `html-to-text` instead of regex for transform description - Update newsfeed: Use `html-to-text` instead of regex for transform description
- Review ESLint config (#3269) - Review ESLint config (#3269)
- Updated dependencies - Updated dependencies
- Clock module: optionally display current moon phase in addition to rise/set times
### Fixed ### Fixed

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

@ -32,7 +32,7 @@ Module.register("clock", {
secondsColor: "#888888", secondsColor: "#888888",
showSunTimes: false, showSunTimes: false,
showMoonTimes: false, showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase)
lat: 47.630539, lat: 47.630539,
lon: -122.344147 lon: -122.344147
}, },
@ -208,9 +208,13 @@ Module.register("clock", {
moonSet = nextMoonTimes.set; moonSet = nextMoonTimes.set;
} }
const isVisible = now.isBetween(moonRise, moonSet) || moonTimes.alwaysUp === true; const isVisible = now.isBetween(moonRise, moonSet) || moonTimes.alwaysUp === true;
const showFraction = ["both", "percent"].includes(this.config.showMoonTimes);
const showUnicode = ["both", "phase"].includes(this.config.showMoonTimes);
const illuminatedFractionString = `${Math.round(moonIllumination.fraction * 100)}%`; const illuminatedFractionString = `${Math.round(moonIllumination.fraction * 100)}%`;
const image = showUnicode ? [..."🌑🌒🌓🌔🌕🌖🌗🌘"][Math.floor(moonIllumination.phase * 8)] : '<i class="fas fa-moon" aria-hidden="true"></i>';
moonWrapper.innerHTML = moonWrapper.innerHTML =
`<span class="${isVisible ? "bright" : ""}"><i class="fas fa-moon" aria-hidden="true"></i> ${illuminatedFractionString}</span>` + `<span class="${isVisible ? "bright" : ""}">${image} ${showFraction ? illuminatedFractionString : ""}</span>` +
`<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${moonRise ? formatTime(this.config, moonRise) : "..."}</span>` + `<span><i class="fas fa-arrow-up" aria-hidden="true"></i> ${moonRise ? formatTime(this.config, moonRise) : "..."}</span>` +
`<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${moonSet ? formatTime(this.config, moonSet) : "..."}</span>`; `<span><i class="fas fa-arrow-down" aria-hidden="true"></i> ${moonSet ? formatTime(this.config, moonSet) : "..."}</span>`;
digitalWrapper.appendChild(moonWrapper); digitalWrapper.appendChild(moonWrapper);