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