From 8f0857e6855916be319ba4f64d3722442ec7bdf6 Mon Sep 17 00:00:00 2001 From: nutty Date: Mon, 10 Aug 2026 21:15:47 +1000 Subject: [PATCH] Various clocko changes. FUCK YEAH CLOCKO IS THE SHIT! --- clocko/index.html | 22 +++++--- clocko/script.js | 71 +++++++++++++++++--------- clocko/settings/settings.json | 96 ++++++++++++++++++++++------------- clocko/style.css | 7 ++- 4 files changed, 128 insertions(+), 68 deletions(-) diff --git a/clocko/index.html b/clocko/index.html index 0d722a4..8078048 100644 --- a/clocko/index.html +++ b/clocko/index.html @@ -1,12 +1,20 @@ + - -
-
- - - + + + + + + + +
+
+ + + +
-
+ diff --git a/clocko/script.js b/clocko/script.js index b665b37..81bbd89 100644 --- a/clocko/script.js +++ b/clocko/script.js @@ -26,31 +26,33 @@ const line3 = document.getElementById('line3'); // OPTIONS // ///////////// +const font = urlParams.get("font") || ""; + const enableLine1 = GetBooleanParam("enableLine1", true); -const line1Format = urlParams.get("line1Format") || "ddd DD MMM YYYY hh:mm:ss A z"; -const line1Font = urlParams.get("line1Font") || ""; -const line1FontSize = GetIntParam("line1FontSize", 40); -const line1FontWeight = urlParams.get("line1FontWeight") || "400"; +const line1Format = urlParams.get("line1Format") || "hh:mm:ss A"; +const line1FontSize = GetIntParam("line1FontSize", 50); +const line1FontWeight = urlParams.get("line1FontWeight") || "700"; const line1FontColor = urlParams.get("line1FontColor") || "#ffffff"; const line1FontOpacity = urlParams.get("line1FontOpacity") || "1"; +const line1TextTransform = urlParams.get("line1TextTransform") || "none"; const line1TextAlignment = urlParams.get("line1TextAlignment") || "center"; -const enableLine2 = GetBooleanParam("enableLine2", false); -const line2Format = urlParams.get("line2Format") || "hh:mm:ss A"; -const line2Font = urlParams.get("line2Font") || ""; +const enableLine2 = GetBooleanParam("enableLine2", true); +const line2Format = urlParams.get("line2Format") || "ddd, MMM D"; const line2FontSize = GetIntParam("line2FontSize", 40); const line2FontWeight = urlParams.get("line2FontWeight") || "400"; const line2FontColor = urlParams.get("line2FontColor") || "#ffffff"; -const line2FontOpacity = urlParams.get("line2FontOpacity") || "1"; +const line2FontOpacity = urlParams.get("line2FontOpacity") || "0.7"; +const line2TextTransform = urlParams.get("line2TextTransform") || "none"; const line2TextAlignment = urlParams.get("line2TextAlignment") || "center"; const enableLine3 = GetBooleanParam("enableLine3", false); -const line3Format = urlParams.get("line3Format") || "ddd DD MMM YYYY"; -const line3Font = urlParams.get("line3Font") || ""; -const line3FontSize = GetIntParam("line3FontSize", 40); -const line3FontWeight = urlParams.get("line3FontWeight") || "400"; +const line3Format = urlParams.get("line3Format") || "ddd DD MMM YYYY hh:mm:ss A z"; +const line3FontSize = GetIntParam("line3FontSize", 30); +const line3FontWeight = urlParams.get("line3FontWeight") || "600"; const line3FontColor = urlParams.get("line3FontColor") || "#ffffff"; const line3FontOpacity = urlParams.get("line3FontOpacity") || "1"; +const line3TextTransform = urlParams.get("line3TextTransform") || "none"; const line3TextAlignment = urlParams.get("line3TextAlignment") || "center"; @@ -59,6 +61,11 @@ const line3TextAlignment = urlParams.get("line3TextAlignment") || "center"; // PAGE SETUP // //////////////// +// Set the font for the entire page if specified +if (font) + document.body.style.fontFamily = `'${font}'`; + +// Hide lines that are not enabled if (!enableLine1) line1.style.display = "none"; if (!enableLine2) @@ -72,15 +79,32 @@ if (!enableLine3) // CLOCKO // //////////// +// Check if any active format string includes milliseconds (e.g., 'S', 'SS', 'SSS') +const usesMilliseconds = + (enableLine1 && line1Format.includes('S')) || + (enableLine2 && line2Format.includes('S')) || + (enableLine3 && line3Format.includes('S')); + UpdateTime(); -setInterval(() => { - UpdateTime(); -}, 1000); + +if (usesMilliseconds) { + // High-frequency updates for millisecond precision + function updateFrame() { + UpdateTime(); + requestAnimationFrame(updateFrame); + } + requestAnimationFrame(updateFrame); +} else { + // Efficient 1-second interval for standard clocks + setInterval(UpdateTime, 1000); +} function UpdateTime() { - line1.textContent = dayjs().tz(dayjs.tz.guess()).format(line1Format); - line2.textContent = dayjs().tz(dayjs.tz.guess()).format(line2Format); - line3.textContent = dayjs().tz(dayjs.tz.guess()).format(line3Format); + const now = dayjs().tz(dayjs.tz.guess()); + + if (enableLine1) line1.textContent = now.format(line1Format); + if (enableLine2) line2.textContent = now.format(line2Format); + if (enableLine3) line3.textContent = now.format(line3Format); } @@ -89,16 +113,15 @@ function UpdateTime() { // STYLING // ///////////// -function ApplyStyling(el, font, fontSize, fontWeight, fontColor, fontOpacity, textAlignment) { - if (font) - el.style.fontFamily = `'${font}'`; +function ApplyStyling(el, fontSize, fontWeight, fontColor, fontOpacity, textTransform, textAlignment) { el.style.fontSize = fontSize + "px"; el.style.fontWeight = fontWeight; el.style.color = fontColor; el.style.opacity = fontOpacity; + el.style.textTransform = textTransform; el.style.textAlign = textAlignment; } -ApplyStyling(line1, line1Font, line1FontSize, line1FontWeight, line1FontColor, line1FontOpacity, line1TextAlignment); -ApplyStyling(line2, line2Font, line2FontSize, line2FontWeight, line2FontColor, line2FontOpacity, line2TextAlignment); -ApplyStyling(line3, line3Font, line3FontSize, line3FontWeight, line3FontColor, line3FontOpacity, line3TextAlignment); \ No newline at end of file +ApplyStyling(line1, line1FontSize, line1FontWeight, line1FontColor, line1FontOpacity, line1TextTransform, line1TextAlignment); +ApplyStyling(line2, line2FontSize, line2FontWeight, line2FontColor, line2FontOpacity, line2TextTransform, line2TextAlignment); +ApplyStyling(line3, line3FontSize, line3FontWeight, line3FontColor, line3FontOpacity, line3TextTransform, line3TextAlignment); \ No newline at end of file diff --git a/clocko/settings/settings.json b/clocko/settings/settings.json index 096c779..bf27ef7 100644 --- a/clocko/settings/settings.json +++ b/clocko/settings/settings.json @@ -1,5 +1,13 @@ { "settings": [ + { + "id": "font", + "label": "Font", + "description": "Check installed fonts", + "type": "font", + "defaultValue": "", + "group": "Appearance" + }, { "id": "enableLine1", "label": "Enable Line 1", @@ -13,16 +21,7 @@ "label": "Format", "description": "Click here for formatting options", "type": "text", - "defaultValue": "ddd DD MMM YYYY hh:mm:ss A z", - "showIf": "enableLine1", - "group": "Appearance" - }, - { - "id": "line1Font", - "label": "Font", - "description": "Check installed fonts", - "type": "font", - "defaultValue": "", + "defaultValue": "hh:mm:ss A", "showIf": "enableLine1", "group": "Appearance" }, @@ -78,6 +77,21 @@ "showIf": "enableLine1", "group": "Appearance" }, + { + "id": "line1TextTransform", + "label": "Text Transform", + "description": "", + "type": "select", + "options": [ + { "value": "none", "label": "Normal" }, + { "value": "uppercase", "label": "Uppercase" }, + { "value": "lowercase", "label": "Lowercase" }, + { "value": "capitalize", "label": "Capitalize" } + ], + "defaultValue": "uppercase", + "showIf": "enableLine1", + "group": "Appearance" + }, { "id": "line1TextAlignment", "label": "Text Alignment", @@ -97,7 +111,7 @@ "label": "Enable Line 2", "description": "Show the second line of the clock", "type": "checkbox", - "defaultValue": false, + "defaultValue": true, "group": "Appearance" }, { @@ -105,16 +119,7 @@ "label": "Format", "description": "Click here for formatting options", "type": "text", - "defaultValue": "hh:mm:ss A", - "showIf": "enableLine2", - "group": "Appearance" - }, - { - "id": "line2Font", - "label": "Font", - "description": "Check installed PC fonts", - "type": "font", - "defaultValue": "", + "defaultValue": "ddd, MMM D", "showIf": "enableLine2", "group": "Appearance" }, @@ -145,7 +150,7 @@ { "value": "800", "label": "Extra Bold" }, { "value": "900", "label": "Black" } ], - "defaultValue": "600", + "defaultValue": "400", "showIf": "enableLine2", "group": "Appearance" }, @@ -163,13 +168,28 @@ "label": "Font Opacity", "description": "", "type": "number", - "defaultValue": "0.9", + "defaultValue": "0.7", "min": 0, "max": 1, "step": ".01", "showIf": "enableLine2", "group": "Appearance" }, + { + "id": "line2TextTransform", + "label": "Text Transform", + "description": "", + "type": "select", + "options": [ + { "value": "none", "label": "Normal" }, + { "value": "uppercase", "label": "Uppercase" }, + { "value": "lowercase", "label": "Lowercase" }, + { "value": "capitalize", "label": "Capitalize" } + ], + "defaultValue": "uppercase", + "showIf": "enableLine2", + "group": "Appearance" + }, { "id": "line2TextAlignment", "label": "Text Alignment", @@ -197,16 +217,7 @@ "label": "Format", "description": "Click here for formatting options", "type": "text", - "defaultValue": "ddd DD MMM YYYY", - "showIf": "enableLine3", - "group": "Appearance" - }, - { - "id": "line3Font", - "label": "Font", - "description": "Check installed PC fonts", - "type": "text", - "defaultValue": "", + "defaultValue": "ddd DD MMM YYYY hh:mm:ss A z", "showIf": "enableLine3", "group": "Appearance" }, @@ -237,7 +248,7 @@ { "value": "800", "label": "Extra Bold" }, { "value": "900", "label": "Black" } ], - "defaultValue": "400", + "defaultValue": "600", "showIf": "enableLine3", "group": "Appearance" }, @@ -255,13 +266,28 @@ "label": "Font Opacity", "description": "", "type": "number", - "defaultValue": "0.7", + "defaultValue": "1", "min": 0, "max": 1, "step": ".01", "showIf": "enableLine3", "group": "Appearance" }, + { + "id": "line3TextTransform", + "label": "Text Transform", + "description": "", + "type": "select", + "options": [ + { "value": "none", "label": "Normal" }, + { "value": "uppercase", "label": "Uppercase" }, + { "value": "lowercase", "label": "Lowercase" }, + { "value": "capitalize", "label": "Capitalize" } + ], + "defaultValue": "none", + "showIf": "enableLine3", + "group": "Appearance" + }, { "id": "line3TextAlignment", "label": "Text Alignment", diff --git a/clocko/style.css b/clocko/style.css index 6df43c4..0615c04 100644 --- a/clocko/style.css +++ b/clocko/style.css @@ -3,6 +3,11 @@ padding: 0; } +html { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + text-transform: uppercase; +} + #main-container { display: flex; flex-direction: column; @@ -14,8 +19,6 @@ .timeLabel { font-size: 40px; - text-transform: uppercase; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* text-shadow: rgb(0, 0, 0) 2px 2px 2px; */ color: white; }