-
Clock Customizer
+
Clock Customizer
-
-
-
-
+
-
+
+
+
@@ -147,6 +186,7 @@
let leadingZeroButton = document.getElementById('toggle-leading-zero');
let hourFormatButton = document.getElementById('toggle-hour-format');
let suffixButton = document.getElementById('toggle-suffix');
+ let bgButton = document.getElementById('toggle-bg');
// Function to update the button text based on the current state
function updateButtonState() {
@@ -155,17 +195,18 @@
} else {
leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: OFF';
}
-
- hourFormatButton.textContent = is12Hour ? '12 Hour' : '24 Hour';
- suffixButton.textContent = suffix ? 'Suffix: On' : 'Suffix: Off';
+ hourFormatButton.textContent = is12Hour ? 'Time Mode: 12 Hour' : 'Time Mode: 24 Hour';
+ suffixButton.textContent = suffix ? 'Suffix: ON' : 'Suffix: OFF';
+ bgButton.textContent = isDarkBg ? 'Theme: Dark' : 'Theme: Light';
if (is12Hour) {
- if (leadingZero) prevLeadingZeroState = true;
- leadingZero = false;
+ prevLeadingZeroState = leadingZero; // Store the state before disabling
leadingZeroButton.disabled = true;
+ leadingZeroButton.textContent = prevLeadingZeroState ? 'Leading Zero: ON' : 'Leading Zero: OFF';
} else {
- leadingZero = prevLeadingZeroState;
+ leadingZero = prevLeadingZeroState; // Retrieve the stored state
leadingZeroButton.disabled = false;
+ leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: OFF';
}
}
@@ -178,18 +219,19 @@
}
}
- // Function to toggle between 12 and 24 hour format
function toggleHourFormat() {
is12Hour = !is12Hour;
- updateButtonState();
+ updateButtonState(); // This will also correctly update leadingZero
drawText(selectedColor);
}
+
// Toggle the background color between dark and light
function toggleBackground() {
isDarkBg = !isDarkBg; // Toggle the background state
let previewBox = document.getElementById("preview-box");
previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
+ updateButtonState();
drawText(selectedColor); // Redraw the text with updated color
}
@@ -197,9 +239,10 @@
suffix = !suffix;
document.getElementById("toggle-suffix").textContent = `Suffix: ${suffix ? 'On' : 'Off'}`;
updateButtonState();
+ drawText(selectedColor);
}
- function formatTime(date, leadingZero) {
+ function formatTime(date) {
let hours = date.getHours();
let minutes = date.getMinutes();
// If 12 hour format is selected, adjust hours
@@ -207,7 +250,7 @@
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12' in 12h format
}
- let formattedHours = leadingZero && hours < 10 ? `0${hours}` : `${hours}`;
+ let formattedHours = (!is12Hour && leadingZero && hours < 10) ? `0${hours}` : `${hours}`;
let formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
return `${formattedHours}:${formattedMinutes}`;
}
@@ -246,7 +289,7 @@
ctx.fillStyle = color;
// Get the current local system time
- let currentTime = formatTime(new Date(), leadingZero);
+ let currentTime = formatTime(new Date());
// Measure the text width and calculate the horizontal position
let timeWidth = ctx.measureText(currentTime).width;
@@ -355,47 +398,33 @@
});
}
- // Set default settings
- function setDefaultSettings() {
- selectedColor = "#0ff";
- isDarkBg = false;
- leadingZero = false;
- suffix = true;
- }
-
function loadSettings(callback) {
- // Set a timeout for loading the settings
- const timeout = new Promise((_, reject) =>
- setTimeout(() => reject(new Error("Timeout occurred")), 1000)
- );
- // Load settings from Bangle.js storage
- const loadSettingsFromStorage = new Promise((resolve) => {
- Puck.eval('[require("Storage").readJSON("shadowclk.json", true)]', (dataArray) => {
- let data = dataArray ? dataArray[0] : null;
- if (data) {
- // Apply color, theme, enableLeadingZero and enableSuffix from JSON
- let { color, theme, enableLeadingZero, enableSuffix } = data;
- selectedColor = color;
- isDarkBg = theme === "dark";
- // Use the JSON values if they exist, otherwise use the current values
- leadingZero = enableLeadingZero !== undefined ? enableLeadingZero : leadingZero;
- suffix = enableSuffix !== undefined ? enableSuffix : suffix;
- updateButtonState();
- displayMessage("Previous settings loaded.", 3000);
- } else {
- setDefaultSettings();
- }
- resolve();
- });
+ Puck.eval('[require("Storage").readJSON("shadowclk.json", true)]', (dataArray) => {
+ let data = dataArray ? dataArray[0] : null;
+ if (data) {
+ // Apply color, theme, enableLeadingZero, enableSuffix and timeMode from JSON
+ let { color, theme, enableLeadingZero, enableSuffix, enable12Hour } = data;
+ selectedColor = color !== undefined ? color : selectedColor;
+ isDarkBg = theme !== undefined ? (theme === "dark") : isDarkBg;
+ // Use the JSON values if they exist, otherwise use the current values
+ leadingZero = enableLeadingZero !== undefined ? enableLeadingZero : leadingZero;
+ prevLeadingZeroState = leadingZero; // Store the current state
+ suffix = enableSuffix !== undefined ? enableSuffix : suffix;
+ is12Hour = enable12Hour !== undefined ? enable12Hour : is12Hour; // Update the time mode from the settings
+ displayMessage("Previous settings loaded.", 3000);
+ } else {
+ // If no JSON data, load defaults
+ selectedColor = selectedColor;
+ isDarkBg = isDarkBg;
+ leadingZero = leadingZero;
+ prevLeadingZeroState = leadingZero;
+ suffix = suffix;
+ is12Hour = is12Hour;
+ displayMessage("Defaults loaded.", 3000);
+ }
+ updateButtonState(); // Update button state regardless
+ callback();
});
- // Execute the callback after loading the settings, or use default values in case of a timeout or error
- Promise.race([loadSettingsFromStorage, timeout])
- .then(() => callback())
- .catch((error) => {
- console.error(error);
- setDefaultSettings();
- callback();
- });
}
// Update the time display every second
@@ -432,7 +461,8 @@
color: selectedColor,
theme: isDarkBg ? "dark" : "light",
enableLeadingZero: leadingZero,
- enableSuffix: suffix
+ enableSuffix: suffix,
+ enable12Hour: is12Hour
};
// Write the updated settings back to shadowclk.json
diff --git a/apps/shadowclk/settings.js b/apps/shadowclk/settings.js
index 93408657c..384710318 100644
--- a/apps/shadowclk/settings.js
+++ b/apps/shadowclk/settings.js
@@ -1,6 +1,7 @@
-(function (back) {
+(function(back) {
let teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"];
let teletextColorNames = ["Black", "Red", "Green", "Yellow", "Blue", "Magenta", "Cyan", "White"];
+ let sysSettings = require('Storage').readJSON("setting.json", 1) || {};
// Load and set default settings
let appSettings = Object.assign({
@@ -8,14 +9,9 @@
theme: 'light',
enableSuffix: true,
enableLeadingZero: false,
+ enable12Hour: '24hour' // default time mode
}, require('Storage').readJSON("shadowclk.json", true) || {});
-
- // Save settings to storage
- function writeSettings() {
- require('Storage').writeJSON("shadowclk.json", appSettings);
- }
-
// Colors from 'Light BW' and 'Dark BW' themes
function createThemeColors(mode) {
let cl = x => g.setColor(x).getColor();
@@ -55,10 +51,10 @@
writeSettings();
delete g.reset;
g._reset = g.reset;
- g.reset = function (n) {
+ g.reset = function(n) {
return g._reset().setColor(newTheme.fg).setBgColor(newTheme.bg);
};
- g.clear = function (n) {
+ g.clear = function(n) {
if (n) g.reset();
return g.clearRect(0, 0, g.getWidth(), g.getHeight());
};
@@ -69,15 +65,36 @@
// Read the current system theme
function getCurrentTheme() {
- let s = require('Storage').readJSON("setting.json", 1) || {};
- if (!s.theme) {
+ if (!sysSettings.theme) {
return appSettings.theme; // fallback to appSettings.theme (light or dark)
}
- return s.theme.dark ? 'dark' : 'light';
+ return sysSettings.theme.dark ? 'dark' : 'light';
+ }
+
+ // Read the current time mode
+ function getCurrentTimeMode() {
+ if (!sysSettings['12hour']) {
+ return appSettings.enable12Hour; // fallback to appSettings.enable12Hour
+ }
+ return sysSettings['12hour'] ? '12hour' : '24hour';
+ }
+
+ // Save settings to storage
+ function writeSettings() {
+ appSettings.enable12Hour = appSettings.enable12Hour === '12hour' ? '12hour' : '24hour';
+ require('Storage').writeJSON("shadowclk.json", appSettings);
+ }
+
+ // Save time mode to system settings
+ function writeTimeModeSetting() {
+ sysSettings['12hour'] = appSettings.enable12Hour === '12hour';
+ require('Storage').writeJSON("setting.json", sysSettings);
}
function showMenu() {
appSettings.theme = getCurrentTheme();
+ appSettings.enable12Hour = getCurrentTimeMode();
+
E.showMenu({
"": {
"title": "Shadow Clock"
@@ -115,6 +132,15 @@
appSettings.enableLeadingZero = v;
writeSettings();
}
+ },
+ 'Time Mode:': {
+ value: (appSettings.enable12Hour === '12hour'),
+ format: v => v ? '12 Hr' : '24 Hr',
+ onchange: v => {
+ appSettings.enable12Hour = v ? '12hour' : '24hour';
+ writeSettings();
+ writeTimeModeSetting();
+ }
}
});
}