FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Lots of improvements and fixes

pull/2745/head
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">
<title>Shadow Clock Customizer</title>
<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 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding-bottom: 100px;
}
.color-button {
@ -72,24 +87,39 @@
display: block;
}
#toggle-bg {
margin-top: 20px;
}
#toggle-leading-zero {
.button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 360px;
margin-top: 10px;
}
#toggle-suffix {
margin-top: 10px;
.button-row {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 5px;
}
#toggle-hour-format {
margin-top: 10px;
.btn {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
margin: 5px;
width: 160px;
}
#upload {
width: 150px;
}
#upload-container {
margin-top: 20px;
display: flex;
justify-content: center;
width: 160px;
}
#message-container {
@ -103,16 +133,25 @@
<body>
<script src="../../core/lib/interface.js"></script>
<div class="main-container">
<h1>Clock Customizer</h1>
<h1 class="underlined-heading">Clock Customizer</h1>
<div id="color-buttons-container"></div>
<button id="toggle-bg" class="btn btn-primary" onclick="toggleBackground()">Light / Dark</button>
<button id="toggle-hour-format" class="btn btn-primary" onclick="toggleHourFormat()">24 Hour</button>
<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 class="button-container">
<div class="button-row">
<button id="toggle-hour-format" class="btn btn-primary" onclick="toggleHourFormat()">Time Mode: 24 Hour</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">
<canvas id="preview-canvas" width="176" height="176"></canvas>
</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"></div>
</div>
@ -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

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 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();
}
}
});
}