bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lots of improvements and fixes

master
stweedo 2023-05-12 04:37:00 -05:00 committed by GitHub
parent 0eaea67ac2
commit 6d4d88b821
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 134 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
apps/shadowclk/interface.html
View File

@ -9,12 +9,27 @@
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<title>Shadow Clock Customizer</title> <title>Shadow Clock Customizer</title>
<style> <style>
.underlined-heading {
position: relative;
padding-bottom: 5px;
}
.underlined-heading::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 5px solid;
}
.main-container { .main-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
padding-bottom: 100px;
} }
.color-button { .color-button {
@ -72,24 +87,39 @@
display: block; display: block;
} }
#toggle-bg { .button-container {
margin-top: 20px; display: flex;
} flex-direction: column;
align-items: center;
#toggle-leading-zero { justify-content: center;
width: 360px;
margin-top: 10px; margin-top: 10px;
} }
#toggle-suffix { .button-row {
margin-top: 10px; display: flex;
justify-content: space-between;
width: 100%;
margin-top: 5px;
} }
#toggle-hour-format { .btn {
margin-top: 10px; flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
margin: 5px;
width: 160px;
} }
#upload { #upload {
width: 150px;
}
#upload-container {
margin-top: 20px; margin-top: 20px;
display: flex;
justify-content: center;
width: 160px;
} }
#message-container { #message-container {
@ -103,16 +133,25 @@
<body> <body>
<script src="../../core/lib/interface.js"></script> <script src="../../core/lib/interface.js"></script>
<div class="main-container"> <div class="main-container">
<h1>Clock Customizer</h1> <h1 class="underlined-heading">Clock Customizer</h1>
<div id="color-buttons-container"></div> <div id="color-buttons-container"></div>
<button id="toggle-bg" class="btn btn-primary" onclick="toggleBackground()">Light / Dark</button> <div class="button-container">
<button id="toggle-hour-format" class="btn btn-primary" onclick="toggleHourFormat()">24 Hour</button> <div class="button-row">
<button id="toggle-leading-zero" class="btn btn-primary" onclick="toggleLeadingZero()">Leading Zero: Off</button> <button id="toggle-hour-format" class="btn btn-primary" onclick="toggleHourFormat()">Time Mode: 24 Hour</button>
<button id="toggle-suffix" class="btn btn-primary" onclick="toggleSuffix()">Suffix: On</button> <button id="toggle-bg" class="btn btn-primary" onclick="toggleBackground()">Theme: Light</button>
</div>
<div class="button-row">
<button id="toggle-leading-zero" class="btn btn-primary" onclick="toggleLeadingZero()">Leading Zero:
OFF</button>
<button id="toggle-suffix" class="btn btn-primary" onclick="toggleSuffix()">Suffix: ON</button>
</div>
</div>
<div id="preview-box"> <div id="preview-box">
<canvas id="preview-canvas" width="176" height="176"></canvas> <canvas id="preview-canvas" width="176" height="176"></canvas>
</div> </div>
<button id="upload" class="btn btn-primary">Upload</button> <div id="upload-container">
<button id="upload" class="btn btn-primary">Upload</button>
</div>
<div id="message-container"> <div id="message-container">
<div id="message"></div> <div id="message"></div>
</div> </div>
@ -147,6 +186,7 @@
let leadingZeroButton = document.getElementById('toggle-leading-zero'); let leadingZeroButton = document.getElementById('toggle-leading-zero');
let hourFormatButton = document.getElementById('toggle-hour-format'); let hourFormatButton = document.getElementById('toggle-hour-format');
let suffixButton = document.getElementById('toggle-suffix'); let suffixButton = document.getElementById('toggle-suffix');
let bgButton = document.getElementById('toggle-bg');
// Function to update the button text based on the current state // Function to update the button text based on the current state
function updateButtonState() { function updateButtonState() {
@ -155,17 +195,18 @@
} else { } else {
leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: OFF'; leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: OFF';
} }
hourFormatButton.textContent = is12Hour ? 'Time Mode: 12 Hour' : 'Time Mode: 24 Hour';
hourFormatButton.textContent = is12Hour ? '12 Hour' : '24 Hour'; suffixButton.textContent = suffix ? 'Suffix: ON' : 'Suffix: OFF';
suffixButton.textContent = suffix ? 'Suffix: On' : 'Suffix: Off'; bgButton.textContent = isDarkBg ? 'Theme: Dark' : 'Theme: Light';
if (is12Hour) { if (is12Hour) {
if (leadingZero) prevLeadingZeroState = true; prevLeadingZeroState = leadingZero; // Store the state before disabling
leadingZero = false;
leadingZeroButton.disabled = true; leadingZeroButton.disabled = true;
leadingZeroButton.textContent = prevLeadingZeroState ? 'Leading Zero: ON' : 'Leading Zero: OFF';
} else { } else {
leadingZero = prevLeadingZeroState; leadingZero = prevLeadingZeroState; // Retrieve the stored state
leadingZeroButton.disabled = false; 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() { function toggleHourFormat() {
is12Hour = !is12Hour; is12Hour = !is12Hour;
updateButtonState(); updateButtonState(); // This will also correctly update leadingZero
drawText(selectedColor); drawText(selectedColor);
} }
// Toggle the background color between dark and light // Toggle the background color between dark and light
function toggleBackground() { function toggleBackground() {
isDarkBg = !isDarkBg; // Toggle the background state isDarkBg = !isDarkBg; // Toggle the background state
let previewBox = document.getElementById("preview-box"); let previewBox = document.getElementById("preview-box");
previewBox.style.backgroundColor = isDarkBg ? "black" : "white"; previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
updateButtonState();
drawText(selectedColor); // Redraw the text with updated color drawText(selectedColor); // Redraw the text with updated color
} }
@ -197,9 +239,10 @@
suffix = !suffix; suffix = !suffix;
document.getElementById("toggle-suffix").textContent = `Suffix: ${suffix ? 'On' : 'Off'}`; document.getElementById("toggle-suffix").textContent = `Suffix: ${suffix ? 'On' : 'Off'}`;
updateButtonState(); updateButtonState();
drawText(selectedColor);
} }
function formatTime(date, leadingZero) { function formatTime(date) {
let hours = date.getHours(); let hours = date.getHours();
let minutes = date.getMinutes(); let minutes = date.getMinutes();
// If 12 hour format is selected, adjust hours // If 12 hour format is selected, adjust hours
@ -207,7 +250,7 @@
hours = hours % 12; hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12' in 12h format 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}`; let formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
return `${formattedHours}:${formattedMinutes}`; return `${formattedHours}:${formattedMinutes}`;
} }
@ -246,7 +289,7 @@
ctx.fillStyle = color; ctx.fillStyle = color;
// Get the current local system time // 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 // Measure the text width and calculate the horizontal position
let timeWidth = ctx.measureText(currentTime).width; 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) { function loadSettings(callback) {
// Set a timeout for loading the settings Puck.eval('[require("Storage").readJSON("shadowclk.json", true)]', (dataArray) => {
const timeout = new Promise((_, reject) => let data = dataArray ? dataArray[0] : null;
setTimeout(() => reject(new Error("Timeout occurred")), 1000) if (data) {
); // Apply color, theme, enableLeadingZero, enableSuffix and timeMode from JSON
// Load settings from Bangle.js storage let { color, theme, enableLeadingZero, enableSuffix, enable12Hour } = data;
const loadSettingsFromStorage = new Promise((resolve) => { selectedColor = color !== undefined ? color : selectedColor;
Puck.eval('[require("Storage").readJSON("shadowclk.json", true)]', (dataArray) => { isDarkBg = theme !== undefined ? (theme === "dark") : isDarkBg;
let data = dataArray ? dataArray[0] : null; // Use the JSON values if they exist, otherwise use the current values
if (data) { leadingZero = enableLeadingZero !== undefined ? enableLeadingZero : leadingZero;
// Apply color, theme, enableLeadingZero and enableSuffix from JSON prevLeadingZeroState = leadingZero; // Store the current state
let { color, theme, enableLeadingZero, enableSuffix } = data; suffix = enableSuffix !== undefined ? enableSuffix : suffix;
selectedColor = color; is12Hour = enable12Hour !== undefined ? enable12Hour : is12Hour; // Update the time mode from the settings
isDarkBg = theme === "dark"; displayMessage("Previous settings loaded.", 3000);
// Use the JSON values if they exist, otherwise use the current values } else {
leadingZero = enableLeadingZero !== undefined ? enableLeadingZero : leadingZero; // If no JSON data, load defaults
suffix = enableSuffix !== undefined ? enableSuffix : suffix; selectedColor = selectedColor;
updateButtonState(); isDarkBg = isDarkBg;
displayMessage("Previous settings loaded.", 3000); leadingZero = leadingZero;
} else { prevLeadingZeroState = leadingZero;
setDefaultSettings(); suffix = suffix;
} is12Hour = is12Hour;
resolve(); 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 // Update the time display every second
@ -432,7 +461,8 @@
color: selectedColor, color: selectedColor,
theme: isDarkBg ? "dark" : "light", theme: isDarkBg ? "dark" : "light",
enableLeadingZero: leadingZero, enableLeadingZero: leadingZero,
enableSuffix: suffix enableSuffix: suffix,
enable12Hour: is12Hour
}; };
// Write the updated settings back to shadowclk.json // Write the updated settings back to shadowclk.json

50
apps/shadowclk/settings.js
View File

@ -1,6 +1,7 @@
(function (back) { (function(back) {
let teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"]; let teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"];
let teletextColorNames = ["Black", "Red", "Green", "Yellow", "Blue", "Magenta", "Cyan", "White"]; let teletextColorNames = ["Black", "Red", "Green", "Yellow", "Blue", "Magenta", "Cyan", "White"];
let sysSettings = require('Storage').readJSON("setting.json", 1) || {};
// Load and set default settings // Load and set default settings
let appSettings = Object.assign({ let appSettings = Object.assign({
@ -8,14 +9,9 @@
theme: 'light', theme: 'light',
enableSuffix: true, enableSuffix: true,
enableLeadingZero: false, enableLeadingZero: false,
enable12Hour: '24hour' // default time mode
}, require('Storage').readJSON("shadowclk.json", true) || {}); }, 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 // Colors from 'Light BW' and 'Dark BW' themes
function createThemeColors(mode) { function createThemeColors(mode) {
let cl = x => g.setColor(x).getColor(); let cl = x => g.setColor(x).getColor();
@ -55,10 +51,10 @@
writeSettings(); writeSettings();
delete g.reset; delete g.reset;
g._reset = g.reset; g._reset = g.reset;
g.reset = function (n) { g.reset = function(n) {
return g._reset().setColor(newTheme.fg).setBgColor(newTheme.bg); return g._reset().setColor(newTheme.fg).setBgColor(newTheme.bg);
}; };
g.clear = function (n) { g.clear = function(n) {
if (n) g.reset(); if (n) g.reset();
return g.clearRect(0, 0, g.getWidth(), g.getHeight()); return g.clearRect(0, 0, g.getWidth(), g.getHeight());
}; };
@ -69,15 +65,36 @@
// Read the current system theme // Read the current system theme
function getCurrentTheme() { function getCurrentTheme() {
let s = require('Storage').readJSON("setting.json", 1) || {}; if (!sysSettings.theme) {
if (!s.theme) {
return appSettings.theme; // fallback to appSettings.theme (light or dark) 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() { function showMenu() {
appSettings.theme = getCurrentTheme(); appSettings.theme = getCurrentTheme();
appSettings.enable12Hour = getCurrentTimeMode();
E.showMenu({ E.showMenu({
"": { "": {
"title": "Shadow Clock" "title": "Shadow Clock"
@ -115,6 +132,15 @@
appSettings.enableLeadingZero = v; appSettings.enableLeadingZero = v;
writeSettings(); writeSettings();
} }
},
'Time Mode:': {
value: (appSettings.enable12Hour === '12hour'),
format: v => v ? '12 Hr' : '24 Hr',
onchange: v => {
appSettings.enable12Hour = v ? '12hour' : '24hour';
writeSettings();
writeTimeModeSetting();
}
} }
}); });
} }