From e9c82cf596101687e9fb50da9b42e49486a28586 Mon Sep 17 00:00:00 2001 From: BrandgrandRealMe Date: Fri, 28 Jun 2024 10:24:26 -0500 Subject: [PATCH] Added clock to Lively --- Lively/LivelyProperties.json | 57 ++++++++++++++++++ Lively/index.html | 13 +++- Lively/scripts/clock.js | 112 +++++++++++++++++++++++++++++++++++ Lively/scripts/options.js | 56 +++++++++++++++++- Lively/styles/style.css | 44 +++++++++----- 5 files changed, 266 insertions(+), 16 deletions(-) create mode 100644 Lively/scripts/clock.js diff --git a/Lively/LivelyProperties.json b/Lively/LivelyProperties.json index 807c0a5..b692d93 100644 --- a/Lively/LivelyProperties.json +++ b/Lively/LivelyProperties.json @@ -23,6 +23,63 @@ "type": "checkbox", "value": false }, + "clockLabel": { + "type": "label", + "value": "CLOCK" + }, + "clockEnabled": { + "type": "checkbox", + "value": false, + "text": "Enable Clock" + }, + "clockSecondsEnabled": { + "type": "checkbox", + "value": false, + "text": "Enable Seconds" + }, + "clockDateEnabled": { + "type": "checkbox", + "value": false, + "text": "Enable Date" + }, + "clockDateFormat": { + "type": "dropdown", + "value": 3, + "text": "Date Format", + "items": [ + "MM/DD/YYYY", + "DD/MM/YYYY", + "YYYY-MM-DD", + "MMMM DD, YYYY" + ] + }, + "clockColor": { + "text": "Clock Color", + "type": "color", + "value": "#ffffff" + }, + "clockFontSize": { + "text" : "Clock Size", + "type" : "textbox", + "value" : "50" + }, + "dateFontSize": { + "text" : "Date Size", + "type" : "textbox", + "value" : "30" + }, + "clockPosition": { + "type": "dropdown", + "value": 0, + "text": "Date Format", + "items": [ + "Middle", + "Top Right", + "Top Left", + "Bottom Right", + "Bottom Left" + ] + }, "miscLabel": { "type": "label", "value": "MISC" diff --git a/Lively/index.html b/Lively/index.html index ee267a8..ef0ef16 100644 --- a/Lively/index.html +++ b/Lively/index.html @@ -4,8 +4,19 @@ -
+
+
+
+
+
+
+ +
+ +
+ + \ No newline at end of file diff --git a/Lively/scripts/clock.js b/Lively/scripts/clock.js new file mode 100644 index 0000000..0f1b374 --- /dev/null +++ b/Lively/scripts/clock.js @@ -0,0 +1,112 @@ +var timerId; + +var clockBox = document.getElementById("CLOCK-BOX"); +var clockItems = document.getElementById("CLOCK-ITEMS"); +var clockDate = document.getElementById("CLOCK-DATE"); +var clockTime = document.getElementById("CLOCK-TIME"); + +const formatRegexps = { + "MM/DD/YYYY": /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/, + "DD/MM/YYYY": /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/, + "YYYY-MM-DD": /^(\d{4})-(\d{1,2})-(\d{1,2})$/, + "MMMM DD, YYYY": /^(.+) (\d+), (\d{4})$/, // Capture month name, day, year +}; + +function formatDate(date, format) { + // Format the date according to the user-specified format + let formattedDate = ""; + const monthNames = ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"]; + + switch (format) { + case "MM/DD/YYYY": + formattedDate = `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`; + break; + case "DD/MM/YYYY": + formattedDate = `${date.getDate()}/${date.getMonth()}/${date.getFullYear()}`; + break; + case "YYYY-MM-DD": + formattedDate = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`; + break; + case "MMMM DD, YYYY": + formattedDate = `${monthNames[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`; + break; + default: + alert("Unsupported date format! " + format); + return; + } + + return formattedDate; +} + + +function ClockSetSizePos() { + clockTime.style.fontSize = clockFontSize + "px"; + clockDate.style.fontSize = dateFontSize + "px"; + if (clockPosition == "middle") { + clockBox.style.justifyContent = "center"; + clockItems.style.alignItems = "center"; + clockBox.style.alignItems = "center"; + } + if (clockPosition == "top-right") { + clockBox.style.justifyContent = "right"; + clockItems.style.alignItems = "flex-end"; + clockBox.style.alignItems = "normal"; + } + if (clockPosition == "top-left") { + clockBox.style.justifyContent = "left"; + clockItems.style.alignItems = "flex-start"; + clockBox.style.alignItems = "normal"; + } + if (clockPosition == "bottom-right") { + clockBox.style.justifyContent = "right"; + clockItems.style.alignItems = "flex-end"; + clockBox.style.alignItems = "flex-end"; + } + if (clockPosition == "bottom-left") { + clockBox.style.justifyContent = "left"; + clockItems.style.alignItems = "flex-start"; + clockBox.style.alignItems = "flex-end"; + } +} + +function ClockChangeTime() { + var date = new Date(); + var hours = date.getHours(); + var minutes = date.getMinutes(); + var seconds = date.getSeconds(); + + // Format hours with leading zero if needed (01 instead of 1) + hours = hours % 12 || 12; // 0 for midnight, 12 for noon + + // Format minutes with leading zero + minutes = minutes.toString().padStart(2, '0'); + + // Determine AM/PM + var ampm = hours >= 12 ? 'PM' : 'AM'; + + if (clockEnabled) { + clockBox.style.display = "flex"; + if (clockSecondsEnabled) { + seconds = seconds.toString().padStart(2, '0'); + var formattedTime = `${hours}:${minutes}:${seconds} ${ampm}`; + clockTime.innerHTML = formattedTime; + } else { + var formattedTime = `${hours}:${minutes} ${ampm}`; + clockTime.innerHTML = formattedTime; + } + if (clockDateEnabled) { + clockDate.innerHTML = formatDate(date, clockDateFormat); + } + } else { + clockBox.style.display = "none"; + } +} + +function ClockRefresh() { + if (timerId) clearInterval(timerId); + timerId = setInterval(ClockChangeTime, 30); + ClockSetSizePos() +} + +ClockRefresh() \ No newline at end of file diff --git a/Lively/scripts/options.js b/Lively/scripts/options.js index 584fa84..e2a3ada 100644 --- a/Lively/scripts/options.js +++ b/Lively/scripts/options.js @@ -8,13 +8,22 @@ function invertNumber(number) { return 101 - number; } -var colors = { background: "#000000", foregroundPrimary: "#00ff00", foregroundSecondary: null, firstCharacter: "#ffffff"}; +var colors = { background: "#000000", foregroundPrimary: "#00ff00", foregroundSecondary: null, firstCharacter: "#ffffff" }; var gradientEnabled = false; var characters = "ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ"; var fallSpeed = 33; var symbolSize = 15; +// Clock stuff +var clockEnabled = qs("clock") || false; +var clockSecondsEnabled = qs("clockseconds") || false; +var clockDateEnabled = qs("clockdate") || false; +var clockDateFormat = decodeURIComponent(qs("clockdateformat")) || "MMMM DD, YYYY"; +var clockColor = qs("clockcolor") || "#ffffff"; +var clockFontSize = qs("clockfontsize") || "50"; +var dateFontSize = qs("datefontsize") || "30"; +var clockPosition = qs("clockposition") || "middle"; function livelyPropertyListener(name, val) { switch (name) { @@ -42,5 +51,50 @@ function livelyPropertyListener(name, val) { symbolSize = val; refresh(); break; + case "clockEnabled": + clockEnabled = val; + ClockRefresh(); + break; + case "clockSecondsEnabled": + clockSecondsEnabled = val; + ClockRefresh(); + break; + case "clockDateEnabled": + clockDateEnabled = val; + ClockRefresh(); + break; + case "clockDateFormat": + var Formats = [ + "MM/DD/YYYY", + "DD/MM/YYYY", + "YYYY-MM-DD", + "MMMM DD, YYYY" + ]; + clockDateFormat = Formats[val]; + ClockRefresh(); + break; + case "clockColor": + clockColor = val; + ClockRefresh(); + break; + case "clockFontSize": + clockFontSize = val; + ClockRefresh(); + break; + case "dateFontSize": + dateFontSize = val; + ClockRefresh(); + break; + case "clockPosition": + var Positions = [ + "middle", + "top-right", + "top-left", + "bottom-right", + "bottom-left" + ]; + clockPosition = Positions[val]; + ClockRefresh(); + break; } } diff --git a/Lively/styles/style.css b/Lively/styles/style.css index 56b4f06..36662a3 100644 --- a/Lively/styles/style.css +++ b/Lively/styles/style.css @@ -1,15 +1,31 @@ * { - margin: 0; - padding: 0; - } - - html { - height: 100%; - width: 100%; - } - - canvas { - display: block; - height: 100%; - width: 100%; - } \ No newline at end of file + margin: 0; + padding: 0; +} + +html { + height: 100%; + width: 100%; +} + +canvas { + display: block; + height: 100%; + width: 100%; +} + +.CLOCK-BOX { + height: 100%; + width: 100%; + position: absolute; + color: white; + z-index: 1; + display: none; + font-family: Arial, sans-serif; +} + +.CLOCK-ITEMS { + display: flex; + flex-direction: column; + margin: 20px; +} \ No newline at end of file