From b3fa338ab8895b09ee66b78a79ed06b44061a9cc Mon Sep 17 00:00:00 2001 From: sam detweiler Date: Thu, 6 Mar 2025 16:03:16 +0100 Subject: [PATCH 1/7] add support for digital clock time color --- CHANGELOG.md | 1 + modules/default/clock/clock.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e6655233df..ddf71099d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ planned for 2025-04-01 ### Added - Added Arabic translation. +- add support for css on digital clock hour/minute thru css using clock_hour and clock_minute classes ### Changed diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 5d2a17c87d..2f11a9bd32 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -146,6 +146,8 @@ Module.register("clock", { } if (this.config.displayType !== "analog" && this.config.showTime) { + let ts = timeString.split(":"); + timeString = `${ts[0]}:${ts[1]}`; timeWrapper.innerHTML = timeString; secondsWrapper.innerHTML = now.format("ss"); if (this.config.showPeriodUpper) { From d96172ec588800409b2aca6765dd1655744e8815 Mon Sep 17 00:00:00 2001 From: sam detweiler Date: Fri, 7 Mar 2025 10:13:21 -0700 Subject: [PATCH 2/7] add support for hour/minute color in both digital and analog views, add empty css for digitial hours/minutes --- modules/default/clock/clock.js | 10 +++++++++- modules/default/clock/clock_styles.css | 8 ++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 2f11a9bd32..745d5dc09c 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -24,6 +24,8 @@ Module.register("clock", { analogPlacement: "bottom", // options: 'top', 'bottom', 'left', 'right' analogShowDate: "top", // OBSOLETE, can be replaced with analogPlacement and showTime, options: false, 'top', or 'bottom' secondsColor: "#888888", + minutesColor: "#fff", + hoursColor: "#fff", showSunTimes: false, showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase) @@ -147,7 +149,11 @@ Module.register("clock", { if (this.config.displayType !== "analog" && this.config.showTime) { let ts = timeString.split(":"); - timeString = `${ts[0]}:${ts[1]}`; + let hour_style_string = ""; + let minute_style_string = ""; + if (this.defaults.hoursColor !== this.config.hoursColor) hour_style_string = ` style="color:${this.config.hoursColor}"`; + if (this.defaults.minutesColor !== this.config.minutesColor) minute_style_string = ` style="color:${this.config.minutesColor}"`; + timeString = `${ts[0]}:${ts[1]}`; timeWrapper.innerHTML = timeString; secondsWrapper.innerHTML = now.format("ss"); if (this.config.showPeriodUpper) { @@ -254,10 +260,12 @@ Module.register("clock", { const clockHour = document.createElement("div"); clockHour.id = "clock-hour"; clockHour.style.transform = `rotate(${hour}deg)`; + clockHour.style.backgroundColor = this.config.hoursColor; clockHour.className = "clock-hour"; const clockMinute = document.createElement("div"); clockMinute.id = "clock-minute"; clockMinute.style.transform = `rotate(${minute}deg)`; + clockMinute.style.backgroundColor = this.config.minutesColor; clockMinute.className = "clock-minute"; // Combine analog wrappers diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index e938dd2e8e..e917e6f282 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -91,3 +91,11 @@ .module.clock .moon > * { flex: 1; } + +/* +.module.clock .clock-hour-digital { + +} +.module.clock .clock-minute-digital { + +} */ From e436e8ebdd50ceec89ae5bd506a925187bb7c8a5 Mon Sep 17 00:00:00 2001 From: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com> Date: Mon, 10 Mar 2025 22:14:38 +0100 Subject: [PATCH 3/7] Refactor --- CHANGELOG.md | 2 +- modules/default/clock/clock.js | 48 +++++++++++--------------- modules/default/clock/clock_styles.css | 10 ++++-- 3 files changed, 28 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ddf71099d5..8223a1a92a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ planned for 2025-04-01 ### Added - Added Arabic translation. -- add support for css on digital clock hour/minute thru css using clock_hour and clock_minute classes +- Add CSS support to the digital clock hour/minute/second through the use of the classes `clock-hour-digital`, `clock-minute-digital`, and `clock-second-digital`. ### Changed diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 745d5dc09c..6e7541a53b 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -24,8 +24,6 @@ Module.register("clock", { analogPlacement: "bottom", // options: 'top', 'bottom', 'left', 'right' analogShowDate: "top", // OBSOLETE, can be replaced with analogPlacement and showTime, options: false, 'top', or 'bottom' secondsColor: "#888888", - minutesColor: "#fff", - hoursColor: "#fff", showSunTimes: false, showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase) @@ -107,6 +105,8 @@ Module.register("clock", { */ const dateWrapper = document.createElement("div"); const timeWrapper = document.createElement("div"); + const hoursWrapper = document.createElement("span"); + const minutesWrapper = document.createElement("span"); const secondsWrapper = document.createElement("sup"); const periodWrapper = document.createElement("span"); const sunWrapper = document.createElement("div"); @@ -116,45 +116,40 @@ Module.register("clock", { // Style Wrappers dateWrapper.className = "date normal medium"; timeWrapper.className = "time bright large light"; - secondsWrapper.className = "seconds dimmed"; + hoursWrapper.className = "clock-hour-digital"; + minutesWrapper.className = "clock-minute-digital"; + secondsWrapper.className = "clock-second-digital dimmed"; sunWrapper.className = "sun dimmed small"; moonWrapper.className = "moon dimmed small"; weekWrapper.className = "week dimmed medium"; // Set content of wrappers. - // The moment().format("h") method has a bug on the Raspberry Pi. - // So we need to generate the timestring manually. - // See issue: https://github.com/MagicMirrorOrg/MagicMirror/issues/181 - let timeString; const now = moment(); if (this.config.timezone) { now.tz(this.config.timezone); } - let hourSymbol = "HH"; - if (this.config.timeFormat !== 24) { - hourSymbol = "h"; - } - - if (this.config.clockBold) { - timeString = now.format(`${hourSymbol}[]mm[]`); - } else { - timeString = now.format(`${hourSymbol}:mm`); - } - if (this.config.showDate) { dateWrapper.innerHTML = now.format(this.config.dateFormat); digitalWrapper.appendChild(dateWrapper); } if (this.config.displayType !== "analog" && this.config.showTime) { - let ts = timeString.split(":"); - let hour_style_string = ""; - let minute_style_string = ""; - if (this.defaults.hoursColor !== this.config.hoursColor) hour_style_string = ` style="color:${this.config.hoursColor}"`; - if (this.defaults.minutesColor !== this.config.minutesColor) minute_style_string = ` style="color:${this.config.minutesColor}"`; - timeString = `${ts[0]}:${ts[1]}`; - timeWrapper.innerHTML = timeString; + let hourSymbol = "HH"; + if (this.config.timeFormat !== 24) { + hourSymbol = "h"; + } + + hoursWrapper.innerHTML = now.format(hourSymbol); + minutesWrapper.innerHTML = now.format("mm"); + + timeWrapper.appendChild(hoursWrapper); + if (this.config.clockBold) { + minutesWrapper.classList.add("bold"); + } else { + timeWrapper.innerHTML += ":"; + } + timeWrapper.appendChild(minutesWrapper); secondsWrapper.innerHTML = now.format("ss"); if (this.config.showPeriodUpper) { periodWrapper.innerHTML = now.format("A"); @@ -260,12 +255,10 @@ Module.register("clock", { const clockHour = document.createElement("div"); clockHour.id = "clock-hour"; clockHour.style.transform = `rotate(${hour}deg)`; - clockHour.style.backgroundColor = this.config.hoursColor; clockHour.className = "clock-hour"; const clockMinute = document.createElement("div"); clockMinute.id = "clock-minute"; clockMinute.style.transform = `rotate(${minute}deg)`; - clockMinute.style.backgroundColor = this.config.minutesColor; clockMinute.className = "clock-minute"; // Combine analog wrappers @@ -277,7 +270,6 @@ Module.register("clock", { clockSecond.id = "clock-second"; clockSecond.style.transform = `rotate(${second}deg)`; clockSecond.className = "clock-second"; - clockSecond.style.backgroundColor = this.config.secondsColor; clockFace.appendChild(clockSecond); } analogWrapper.appendChild(clockFace); diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index e917e6f282..dceed77f06 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -92,10 +92,14 @@ flex: 1; } -/* .module.clock .clock-hour-digital { - + color: var(--color-text-bright); } + .module.clock .clock-minute-digital { + color: var(--color-text-bright); +} -} */ +.module.clock .clock-second-digital { + color: var(--color-text-dimmed); +} From 6bb8a8c390c90b033e637ec333086bb5713fd0d2 Mon Sep 17 00:00:00 2001 From: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com> Date: Mon, 10 Mar 2025 22:15:30 +0100 Subject: [PATCH 4/7] Mark option `secondsColor` as deprecated --- CHANGELOG.md | 1 + js/app.js | 16 ++++++++++++++-- js/deprecated.js | 3 ++- modules/default/clock/clock.js | 2 +- 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8223a1a92a..9b7f5a31b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ planned for 2025-04-01 - Added Arabic translation. - Add CSS support to the digital clock hour/minute/second through the use of the classes `clock-hour-digital`, `clock-minute-digital`, and `clock-second-digital`. +- Mark option `secondsColor` as deprecated in clock module. ### Changed diff --git a/js/app.js b/js/app.js index ffe3616df8..20bc856cf3 100644 --- a/js/app.js +++ b/js/app.js @@ -153,11 +153,23 @@ function App () { */ function checkDeprecatedOptions (userConfig) { const deprecated = require(`${global.root_path}/js/deprecated`); - const deprecatedOptions = deprecated.configs; + // check for deprecated core options + const deprecatedOptions = deprecated.configs; const usedDeprecated = deprecatedOptions.filter((option) => userConfig.hasOwnProperty(option)); if (usedDeprecated.length > 0) { - Log.warn(`WARNING! Your config is using deprecated options: ${usedDeprecated.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`); + Log.warn(`WARNING! Your config is using deprecated option(s): ${usedDeprecated.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`); + } + + // check for deprecated module options + for (const element of userConfig.modules) { + if (deprecated[element.module] !== undefined && element.config !== undefined) { + const deprecatedModuleOptions = deprecated[element.module]; + const usedDeprecatedModuleOptions = deprecatedModuleOptions.filter((option) => element.config.hasOwnProperty(option)); + if (usedDeprecatedModuleOptions.length > 0) { + Log.warn(`WARNING! Your config for module ${element.module} is using deprecated option(s): ${usedDeprecatedModuleOptions.join(", ")}. Check README and CHANGELOG for more up-to-date ways of getting the same functionality.`); + } + } } } diff --git a/js/deprecated.js b/js/deprecated.js index b0aca56ca0..10cf7ae044 100644 --- a/js/deprecated.js +++ b/js/deprecated.js @@ -1,3 +1,4 @@ module.exports = { - configs: ["kioskmode"] + configs: ["kioskmode"], + clock: ["secondsColor"] }; diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 6e7541a53b..459b356308 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -23,7 +23,7 @@ Module.register("clock", { analogFace: "simple", // options: 'none', 'simple', 'face-###' (where ### is 001 to 012 inclusive) analogPlacement: "bottom", // options: 'top', 'bottom', 'left', 'right' analogShowDate: "top", // OBSOLETE, can be replaced with analogPlacement and showTime, options: false, 'top', or 'bottom' - secondsColor: "#888888", + secondsColor: "#888888", // DEPRECATED, use CSS instead. Class "clock-second-digital" for digital clock, "clock-second" for analog clock. showSunTimes: false, showMoonTimes: false, // options: false, 'times' (rise/set), 'percent' (lit percent), 'phase' (current phase), or 'both' (percent & phase) From d50940af09bcc118ce900334d401675eb3554d9a Mon Sep 17 00:00:00 2001 From: sam detweiler Date: Thu, 13 Mar 2025 07:34:27 -0700 Subject: [PATCH 5/7] reenable secondsColor, update clock_styles.css with example, and comments */ --- modules/default/clock/clock.js | 1 + modules/default/clock/clock_styles.css | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js index 459b356308..14667d0227 100644 --- a/modules/default/clock/clock.js +++ b/modules/default/clock/clock.js @@ -270,6 +270,7 @@ Module.register("clock", { clockSecond.id = "clock-second"; clockSecond.style.transform = `rotate(${second}deg)`; clockSecond.className = "clock-second"; + clockSecond.style.backgroundColor = this.config.secondsColor; /* DEPRECATED, to be removed in a future version , use CSS instead */ clockFace.appendChild(clockSecond); } analogWrapper.appendChild(clockFace); diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css index dceed77f06..a6751e3da5 100644 --- a/modules/default/clock/clock_styles.css +++ b/modules/default/clock/clock_styles.css @@ -78,7 +78,12 @@ left: 50%; margin: -38% -1px 0 0; /* numbers must match negative length & thickness */ padding: 38% 1px 0 0; /* indicator length & thickness */ - background: var(--color-text); + + /* background: #888888 !important; */ + + /* use this instead of secondsColor */ + + /* have to use !important, because the code explicitly sets the color currently */ transform-origin: 50% 100%; } From 986cfacf399ac30b635e3af34ce7f17c2d2428d9 Mon Sep 17 00:00:00 2001 From: sam detweiler Date: Thu, 13 Mar 2025 08:21:47 -0700 Subject: [PATCH 6/7] add testcase to check for spans in time value for unique css control --- tests/e2e/modules/clock_spec.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/tests/e2e/modules/clock_spec.js b/tests/e2e/modules/clock_spec.js index 651b20de66..a5a6d2e0ca 100644 --- a/tests/e2e/modules/clock_spec.js +++ b/tests/e2e/modules/clock_spec.js @@ -38,6 +38,13 @@ describe("Clock module", () => { const timeRegex = /^(?:1[0-2]|[1-9]):[0-5]\d[0-5]\d[ap]m$/; await expect(helpers.testMatch(".clock .time", timeRegex)).resolves.toBe(true); }); + + it("check for discreet elements of clock", async () => { + let elemClock = helpers.waitForElement(".clock-hour-digital"); + await expect(elemClock).not.toBeNull(); + elemClock = helpers.waitForElement(".clock-minute-digital"); + await expect(elemClock).not.toBeNull(); + }); }); describe("with showPeriodUpper config enabled", () => { From 99389dcf69d0e5a666d4dddec9f96b1bdc02ed98 Mon Sep 17 00:00:00 2001 From: sam detweiler Date: Fri, 14 Mar 2025 06:49:14 -0700 Subject: [PATCH 7/7] Update CHANGELOG.md Co-authored-by: Veeck --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 74264a20eb..903e3f628a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,6 @@ planned for 2025-04-01 ### Added -- Added Arabic translation. - Add CSS support to the digital clock hour/minute/second through the use of the classes `clock-hour-digital`, `clock-minute-digital`, and `clock-second-digital`. - Add Arabic (#3719) and Esperanto translation. - Mark option `secondsColor` as deprecated in clock module.