From e4820dc1ca22aded8688f400cc68443ec3e1988d Mon Sep 17 00:00:00 2001 From: nutty Date: Fri, 7 Aug 2026 06:28:48 +1000 Subject: [PATCH] Added 'Clocko' widget --- clocko/index.html | 16 ++ clocko/script.js | 104 +++++++++++++ clocko/settings/index.html | 29 ++++ clocko/settings/script.js | 26 ++++ clocko/settings/settings.json | 280 ++++++++++++++++++++++++++++++++++ clocko/style.css | 29 ++++ 6 files changed, 484 insertions(+) create mode 100644 clocko/index.html create mode 100644 clocko/script.js create mode 100644 clocko/settings/index.html create mode 100644 clocko/settings/script.js create mode 100644 clocko/settings/settings.json create mode 100644 clocko/style.css diff --git a/clocko/index.html b/clocko/index.html new file mode 100644 index 0000000..0d722a4 --- /dev/null +++ b/clocko/index.html @@ -0,0 +1,16 @@ + + +
+
+ + + +
+
+ + + + +' +' + \ No newline at end of file diff --git a/clocko/script.js b/clocko/script.js new file mode 100644 index 0000000..b665b37 --- /dev/null +++ b/clocko/script.js @@ -0,0 +1,104 @@ +///////////// +// IMPORTS // +///////////// + +dayjs.extend(window.dayjs_plugin_utc); +dayjs.extend(window.dayjs_plugin_timezone); +dayjs.extend(window.dayjs_plugin_advancedFormat); + +//////////////////// +// URL PARAMETERS // +//////////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +/////////////////// +// PAGE ELEMENTS // +/////////////////// + +const mainContainer = document.getElementById('main-container'); +const line1 = document.getElementById('line1'); +const line2 = document.getElementById('line2'); +const line3 = document.getElementById('line3'); + +///////////// +// OPTIONS // +///////////// + +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 line1FontColor = urlParams.get("line1FontColor") || "#ffffff"; +const line1FontOpacity = urlParams.get("line1FontOpacity") || "1"; +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 line2FontSize = GetIntParam("line2FontSize", 40); +const line2FontWeight = urlParams.get("line2FontWeight") || "400"; +const line2FontColor = urlParams.get("line2FontColor") || "#ffffff"; +const line2FontOpacity = urlParams.get("line2FontOpacity") || "1"; +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 line3FontColor = urlParams.get("line3FontColor") || "#ffffff"; +const line3FontOpacity = urlParams.get("line3FontOpacity") || "1"; +const line3TextAlignment = urlParams.get("line3TextAlignment") || "center"; + + + +//////////////// +// PAGE SETUP // +//////////////// + +if (!enableLine1) + line1.style.display = "none"; +if (!enableLine2) + line2.style.display = "none"; +if (!enableLine3) + line3.style.display = "none"; + + + +//////////// +// CLOCKO // +//////////// + +UpdateTime(); +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); +} + + + +///////////// +// STYLING // +///////////// + +function ApplyStyling(el, font, fontSize, fontWeight, fontColor, fontOpacity, textAlignment) { + if (font) + el.style.fontFamily = `'${font}'`; + el.style.fontSize = fontSize + "px"; + el.style.fontWeight = fontWeight; + el.style.color = fontColor; + el.style.opacity = fontOpacity; + 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 diff --git a/clocko/settings/index.html b/clocko/settings/index.html new file mode 100644 index 0000000..2fd0841 --- /dev/null +++ b/clocko/settings/index.html @@ -0,0 +1,29 @@ + + + + + + + + nutty + + + + + + + + + \ No newline at end of file diff --git a/clocko/settings/script.js b/clocko/settings/script.js new file mode 100644 index 0000000..f067f52 --- /dev/null +++ b/clocko/settings/script.js @@ -0,0 +1,26 @@ +const widgetContainer = document.getElementById('widgetContainer'); + +const settingsPageURL = '/.common/core/settings-core'; + +const currentURL = window.location.href; + +let settingsJSON; +let baseURL = currentURL; + +if (baseURL.endsWith("index.html")) + baseURL = baseURL.replace("index.html", ""); + +settingsJSON = "?settingsJson=" + baseURL + "settings.json"; + +const lastSlashIndex = baseURL.lastIndexOf("/"); +let widgetURL = "&widgetURL=" + baseURL.replace("/settings", ""); + +const usesStreamerBot = "&usesStreamerBot=false"; + +console.debug("Window Ref: " + window.location.href); +console.debug("Base URL: " + baseURL); +console.debug("Settings JSON: " + settingsJSON); +console.debug("Widget URL: " + widgetURL); +console.debug("Uses Streamer Bot: " + usesStreamerBot); + +widgetContainer.src = settingsPageURL + settingsJSON + widgetURL + usesStreamerBot; \ No newline at end of file diff --git a/clocko/settings/settings.json b/clocko/settings/settings.json new file mode 100644 index 0000000..dc40b2c --- /dev/null +++ b/clocko/settings/settings.json @@ -0,0 +1,280 @@ +{ + "settings": [ + { + "id": "enableLine1", + "label": "Enable Line 1", + "description": "Show the first line of the clock", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "line1Format", + "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": "", + "type": "text", + "defaultValue": "", + "showIf": "enableLine1", + "group": "Appearance" + }, + { + "id": "line1FontSize", + "label": "Font Size", + "description": "", + "type": "number", + "min": 1, + "max": 120, + "defaultValue": 50, + "showIf": "enableLine1", + "group": "Appearance" + }, + { + "id": "line1FontWeight", + "label": "Font Weight", + "description": "", + "type": "select", + "options": [ + { "value": "100", "label": "Thin" }, + { "value": "200", "label": "Extra Light" }, + { "value": "300", "label": "Light" }, + { "value": "400", "label": "Regular" }, + { "value": "500", "label": "Medium" }, + { "value": "600", "label": "Semi Bold" }, + { "value": "700", "label": "Bold" }, + { "value": "800", "label": "Extra Bold" }, + { "value": "900", "label": "Black" } + ], + "defaultValue": "700", + "showIf": "enableLine1", + "group": "Appearance" + }, + { + "id": "line1FontColor", + "label": "Font Color", + "description": "", + "type": "color", + "defaultValue": "#ffffff", + "showIf": "enableLine1", + "group": "Appearance" + }, + { + "id": "line1FontOpacity", + "label": "Font Opacity", + "description": "", + "type": "number", + "defaultValue": "1", + "min": 0, + "max": 1, + "step": ".01", + "showIf": "enableLine1", + "group": "Appearance" + }, + { + "id": "line1TextAlignment", + "label": "Text Alignment", + "description": "", + "type": "select", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ], + "defaultValue": "center", + "showIf": "enableLine1", + "group": "Appearance" + }, + { + "id": "enableLine2", + "label": "Enable Line 2", + "description": "Show the second line of the clock", + "type": "checkbox", + "defaultValue": false, + "group": "Appearance" + }, + { + "id": "line2Format", + "label": "Format", + "description": "Click here for formatting options", + "type": "text", + "defaultValue": "hh:mm:ss A", + "showIf": "enableLine2", + "group": "Appearance" + }, + { + "id": "line2Font", + "label": "Font", + "description": "", + "type": "text", + "defaultValue": "", + "showIf": "enableLine2", + "group": "Appearance" + }, + { + "id": "line2FontSize", + "label": "Font Size", + "description": "", + "type": "number", + "min": 1, + "max": 120, + "defaultValue": 40, + "showIf": "enableLine2", + "group": "Appearance" + }, + { + "id": "line2FontWeight", + "label": "Font Weight", + "description": "", + "type": "select", + "options": [ + { "value": "100", "label": "Thin" }, + { "value": "200", "label": "Extra Light" }, + { "value": "300", "label": "Light" }, + { "value": "400", "label": "Regular" }, + { "value": "500", "label": "Medium" }, + { "value": "600", "label": "Semi Bold" }, + { "value": "700", "label": "Bold" }, + { "value": "800", "label": "Extra Bold" }, + { "value": "900", "label": "Black" } + ], + "defaultValue": "600", + "showIf": "enableLine2", + "group": "Appearance" + }, + { + "id": "line2FontColor", + "label": "Font Color", + "description": "", + "type": "color", + "defaultValue": "#ffffff", + "showIf": "enableLine2", + "group": "Appearance" + }, + { + "id": "line2FontOpacity", + "label": "Font Opacity", + "description": "", + "type": "number", + "defaultValue": "0.9", + "min": 0, + "max": 1, + "step": ".01", + "showIf": "enableLine2", + "group": "Appearance" + }, + { + "id": "line2TextAlignment", + "label": "Text Alignment", + "description": "", + "type": "select", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ], + "defaultValue": "center", + "showIf": "enableLine2", + "group": "Appearance" + }, + { + "id": "enableLine3", + "label": "Enable Line 3", + "description": "Show the third line of the clock", + "type": "checkbox", + "defaultValue": false, + "group": "Appearance" + }, + { + "id": "line3Format", + "label": "Format", + "description": "Click here for formatting options", + "type": "text", + "defaultValue": "ddd DD MMM YYYY", + "showIf": "enableLine3", + "group": "Appearance" + }, + { + "id": "line3Font", + "label": "Font", + "description": "", + "type": "text", + "defaultValue": "", + "showIf": "enableLine3", + "group": "Appearance" + }, + { + "id": "line3FontSize", + "label": "Font Size", + "description": "", + "type": "number", + "min": 1, + "max": 120, + "defaultValue": 30, + "showIf": "enableLine3", + "group": "Appearance" + }, + { + "id": "line3FontWeight", + "label": "Font Weight", + "description": "", + "type": "select", + "options": [ + { "value": "100", "label": "Thin" }, + { "value": "200", "label": "Extra Light" }, + { "value": "300", "label": "Light" }, + { "value": "400", "label": "Regular" }, + { "value": "500", "label": "Medium" }, + { "value": "600", "label": "Semi Bold" }, + { "value": "700", "label": "Bold" }, + { "value": "800", "label": "Extra Bold" }, + { "value": "900", "label": "Black" } + ], + "defaultValue": "400", + "showIf": "enableLine3", + "group": "Appearance" + }, + { + "id": "line3FontColor", + "label": "Font Color", + "description": "", + "type": "color", + "defaultValue": "#ffffff", + "showIf": "enableLine3", + "group": "Appearance" + }, + { + "id": "line3FontOpacity", + "label": "Font Opacity", + "description": "", + "type": "number", + "defaultValue": "0.7", + "min": 0, + "max": 1, + "step": ".01", + "showIf": "enableLine3", + "group": "Appearance" + }, + { + "id": "line3TextAlignment", + "label": "Text Alignment", + "description": "", + "type": "select", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ], + "defaultValue": "center", + "showIf": "enableLine3", + "group": "Appearance" + } + ] +} \ No newline at end of file diff --git a/clocko/style.css b/clocko/style.css new file mode 100644 index 0000000..6df43c4 --- /dev/null +++ b/clocko/style.css @@ -0,0 +1,29 @@ +* { + margin: 0; + padding: 0; +} + +#main-container { + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; + height: 95vh; + padding: 1em; +} + +.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; +} + +#line1 { + text-align: center; +} + +#line2 { + text-align: right; +} \ No newline at end of file