mirror of https://github.com/espruino/BangleApps
Merge pull request #2745 from stweedo/master
+settings for UI, less IO r/w, rm timeout from evalpull/2753/head^2
Gordon Williams
GitHub
commit
01d4cea940
|
|
@ -1,6 +1,6 @@
|
|||
// Clock with large colored digits using the "Londrina" font and a slightly larger "Londrina Shadow" font on top
|
||||
|
||||
Graphics.prototype.setFontLondrinaSolid = function() {
|
||||
Graphics.prototype.setFontLondrinaSolid = function () {
|
||||
// Actual height 59 (64 - 6)
|
||||
return this.setFontCustom(
|
||||
E.toString(require('heatshrink').decompress(atob('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'))),
|
||||
|
|
@ -10,7 +10,7 @@ Graphics.prototype.setFontLondrinaSolid = function() {
|
|||
);
|
||||
};
|
||||
|
||||
Graphics.prototype.setFontLondrinaShadow = function() {
|
||||
Graphics.prototype.setFontLondrinaShadow = function () {
|
||||
// Actual height 63 (67 - 5)
|
||||
return this.setFontCustom(
|
||||
E.toString(require('heatshrink').decompress(atob('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'))),
|
||||
|
|
@ -20,7 +20,7 @@ Graphics.prototype.setFontLondrinaShadow = function() {
|
|||
);
|
||||
};
|
||||
|
||||
Graphics.prototype.setFontRighteous = function() {
|
||||
Graphics.prototype.setFontRighteous = function () {
|
||||
// Actual height 16 (15 - 0)
|
||||
return this.setFontCustom(
|
||||
E.toString(require('heatshrink').decompress(atob('ABN//ABBv0QA4N4AIVwAogACoEC+EH+EP4EOAovACIcPsEfsF7vABBjfghPAjEAv0As0Yv14n/gg+Aj34vP4sPYgH4gFgEgMP8Ef+F7nABBjcwjEwIwZNFEYM//H//3wn3AgwLBwEC8EO/3+v/8E4IfDmMAn+A/8A/0AAYIHBncAGQMDAIUHgEf4ABBBIYAEjwBChgGBB4YBJAAU4AIS1BhAFBgP4h/wHoKPBXYIlDj/gn/wuF4uE4sEYAYLXBBYK9BSwLhDAIKODuP4uYBB3ABDv84n84jgSCEoNzAIIRFFoUc8DFBv/gAIN+A4IBCWoIBBj7XEFoIBDu4BCH4XwsPggPAdIItBf4N+nFOnEOnB/Bg4tBwAmBQINwOoP4u5rB4CNEsEdS4ILBLIMYAIIFBBIINBgFAhznCn/AuPIuHYRIN7N4TnBZQcHnABBgTLBXoOeAIMBdYUHgEPwAZBnvgnHgiFAD4cNwABLCIcwsAbBdILbBg+AeIJoCPIfYTIR7BgABBv8AnwTCgIZB8EHuEP7ABE4EOoEH4CzBCoLNBQ4N48FwAIjvCboYACBIIBDuapBAIQJDnypBQYKBBcIU4vFwnABHmEwFI4PFXoSBCHpoVBsEYCJGAAISZDJY14JZD7BmJhCE48DVIIBEBYYVJgE4AIYJC+F/MYQVHJIXAJISBCoEIFJoBEgDRBToRxCU4wJECYI/Jn8AWIMD8EBG4rjQUILTNuHgAId/EYPAj+AFZ0+vF+n/2FaBhD7ArBjiHBXIM4ue4AI34uLtBoCLDS5YBBHIRbBDIN4dJXgCYNggF+C4JvB/CjBgZLBCIOADwNAFIYJBc4jxJF4YXBoEIRYN8E4SHBToa/BBoIRBvgtBAIOAgfAIIJDCwAJBBoIRBsAnCToKJBGoW4vzEBnFgIIMA//+AIfgh3AgxhBRoJ1BcoMH+AxBLYUACIIVBAIIdDBYMYCAQdBAYMQQoUAgYBMAAUwDY0BHYUP/EOnEOjADBA4ILDWYR5BWoPwCYQBECYMDboQnIAIUPnEGmA3NcogjH/ADBh+4EYcMTIK3C//49kA5gbHnYBCn8P/8H/0P/iFDaoQTBgABDPYRBB/EgCIgFBkEPv/+v/8A4IhFgPggY9Ch14hiwBhARFHYZlCHYgHFNYJBDgYZCB45THXJjhCZoaBC/7fHCYYjBEp3/EIJjLJoIBBgcYh/YAIMMAIf4AIVwCIN/8D3DSoMMjABBh+Ah4/CgChBAIQ1DHYKRCCYUBQISFBh/Ah66CAoQjGEIgHFCIPAhEIOYV4TIaBDJZE7gE/AIMP/0P/hLChBlCGYQBCNYUAjEDRoOAv/8//+/n+8EOAIIfBBIIBBv/+4EGBoYJC/kHwAfBCoMHAIgrBAYMGgA='))),
|
||||
|
|
@ -30,17 +30,15 @@ Graphics.prototype.setFontRighteous = function() {
|
|||
);
|
||||
};
|
||||
|
||||
// Load and set default appSettings
|
||||
let teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"];
|
||||
let defaultAppSettings = Object.assign({
|
||||
color: teletextColors[6],
|
||||
theme: 'light',
|
||||
enableSuffix: true,
|
||||
enableLeadingZero: false,
|
||||
}, require('Storage').readJSON("shadowclk.json", true) || {});
|
||||
let appSettings = require("Storage").readJSON("shadowclk.json", 1) || {};
|
||||
let settings = require("Storage").readJSON("setting.json", 1) || {};
|
||||
let is12Hour = settings["12hour"] !== undefined ? settings["12hour"] : false;
|
||||
let color = appSettings.color !== undefined ? appSettings.color : "#0ff";
|
||||
let enableLeadingZero = appSettings.enableLeadingZero !== undefined ? appSettings.enableLeadingZero : false;
|
||||
let enableSuffix = appSettings.enableSuffix !== undefined ? appSettings.enableSuffix : true;
|
||||
|
||||
// Draw the time and date
|
||||
(function() {
|
||||
(function () {
|
||||
let drawTimeout;
|
||||
|
||||
function draw() {
|
||||
|
|
@ -48,36 +46,35 @@ let defaultAppSettings = Object.assign({
|
|||
var y = g.getHeight() / 2;
|
||||
g.reset().clearRect(Bangle.appRect);
|
||||
var date = new Date();
|
||||
var appSettings = require("Storage").readJSON("shadowclk.json", 1) || defaultAppSettings;
|
||||
var settings = require("Storage").readJSON("setting.json", 1) || {};
|
||||
var is12HourFormat = settings["12hour"];
|
||||
var hour = date.getHours();
|
||||
var minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
|
||||
// Handle 12-hour format
|
||||
if (is12HourFormat) {
|
||||
if (is12Hour) {
|
||||
hour = hour % 12 || 12; // Convert 0 to 12 for 12-hour format
|
||||
} else {
|
||||
// If the leading zero option is enabled and hour is less than 10, add leading zero
|
||||
if (appSettings.enableLeadingZero && hour < 10) {
|
||||
if (enableLeadingZero && hour < 10) {
|
||||
hour = '0' + hour;
|
||||
}
|
||||
}
|
||||
|
||||
var timeStr = hour + ':' + minutes;
|
||||
|
||||
// Handle midnight in 12-hour format specifically
|
||||
if (is12HourFormat && hour === 0) {
|
||||
if (is12Hour && hour === 0) {
|
||||
timeStr = '12' + timeStr.substring(2);
|
||||
}
|
||||
// Print time in selected color and then the outline
|
||||
var color = appSettings.color;
|
||||
|
||||
g.setFontAlign(0, 0).setFont("LondrinaSolid").setColor(color).drawString(timeStr, x - 1, y);
|
||||
g.reset().setFontAlign(0, 0).setFont("LondrinaShadow").drawString(timeStr, x - 1, y);
|
||||
// Get full date and format it
|
||||
|
||||
var locale = require("locale");
|
||||
var dayOfMonth = date.getDate();
|
||||
var month = locale.month(date, 1).slice(0, 1).toUpperCase() + locale.month(date, 1).slice(1).toLowerCase();
|
||||
var year = date.getFullYear();
|
||||
var dayOfMonthStr = dayOfMonth.toString();
|
||||
if (appSettings.enableSuffix) {
|
||||
if (enableSuffix) {
|
||||
var suffix = "";
|
||||
if (dayOfMonth === 1 || dayOfMonth === 21 || dayOfMonth === 31) {
|
||||
suffix = "st";
|
||||
|
|
@ -90,11 +87,10 @@ let defaultAppSettings = Object.assign({
|
|||
}
|
||||
dayOfMonthStr += suffix;
|
||||
}
|
||||
// Combine and print date string
|
||||
var dayOfWeek = locale.dow(date, 0).slice(0, 1).toUpperCase() + locale.dow(date, 0).slice(1).toLowerCase();
|
||||
var dateStr = month + " " + dayOfMonthStr + ", " + year + "\n" + dayOfWeek;
|
||||
g.setFontAlign(0, 0).setFont("Righteous").drawString(dateStr, x, y + 56);
|
||||
// Time interval set to redraw every 60 seconds
|
||||
|
||||
if (drawTimeout) clearTimeout(drawTimeout);
|
||||
drawTimeout = setTimeout(() => {
|
||||
drawTimeout = undefined;
|
||||
|
|
@ -103,7 +99,7 @@ let defaultAppSettings = Object.assign({
|
|||
}
|
||||
Bangle.setUI({
|
||||
mode: "clock",
|
||||
remove: function() {
|
||||
remove: function () {
|
||||
if (drawTimeout) clearTimeout(drawTimeout);
|
||||
drawTimeout = undefined;
|
||||
delete Graphics.prototype.setFontLondrinaSolid;
|
||||
|
|
|
|||
|
|
@ -6,14 +6,30 @@
|
|||
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet"> <title>3-Bit Color Picker</title>
|
||||
<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 {
|
||||
|
|
@ -71,12 +87,39 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
#toggle-bg {
|
||||
margin-top: 20px;
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 360px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -87,23 +130,43 @@
|
|||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<script src="../../core/lib/interface.js"></script>
|
||||
<div class="main-container">
|
||||
<h1>3-Bit Color Picker</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>
|
||||
<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>
|
||||
</div>
|
||||
<script>
|
||||
const messageDiv = document.getElementById('message');
|
||||
|
||||
// Initialize app and system settings
|
||||
let selectedColor = "#0ff";
|
||||
let isDarkBg = false;
|
||||
let leadingZero = false;
|
||||
let prevLeadingZeroState = false;
|
||||
let suffix = true;
|
||||
let is12Hour = false;
|
||||
|
||||
// Create and add color buttons to the UI
|
||||
let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
|
||||
let colorButtonsContainer = document.getElementById('color-buttons-container');
|
||||
|
|
@ -120,25 +183,88 @@
|
|||
});
|
||||
});
|
||||
|
||||
// Format the current time in the desired format
|
||||
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() {
|
||||
if (leadingZeroButton.disabled) {
|
||||
leadingZeroButton.textContent = prevLeadingZeroState ? 'Leading Zero: ON' : 'Leading Zero: OFF';
|
||||
} else {
|
||||
leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: 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) {
|
||||
prevLeadingZeroState = leadingZero; // Store the state before disabling
|
||||
leadingZeroButton.disabled = true;
|
||||
leadingZeroButton.textContent = prevLeadingZeroState ? 'Leading Zero: ON' : 'Leading Zero: OFF';
|
||||
} else {
|
||||
leadingZero = prevLeadingZeroState; // Retrieve the stored state
|
||||
leadingZeroButton.disabled = false;
|
||||
leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: OFF';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleLeadingZero() {
|
||||
if (!is12Hour) { // Only allow toggle if in 24-hour mode
|
||||
leadingZero = !leadingZero;
|
||||
prevLeadingZeroState = leadingZero; // Update previous state on each toggle
|
||||
updateButtonState();
|
||||
drawText(selectedColor);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleHourFormat() {
|
||||
is12Hour = !is12Hour;
|
||||
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
|
||||
}
|
||||
|
||||
function toggleSuffix() {
|
||||
suffix = !suffix;
|
||||
document.getElementById("toggle-suffix").textContent = `Suffix: ${suffix ? 'On' : 'Off'}`;
|
||||
updateButtonState();
|
||||
drawText(selectedColor);
|
||||
}
|
||||
|
||||
function formatTime(date) {
|
||||
let hours = date.getHours();
|
||||
let minutes = date.getMinutes();
|
||||
let formattedHours = hours < 10 ? `${hours}` : `${hours}`;
|
||||
// If 12 hour format is selected, adjust hours
|
||||
if (is12Hour) {
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12' in 12h format
|
||||
}
|
||||
let formattedHours = (!is12Hour && leadingZero && hours < 10) ? `0${hours}` : `${hours}`;
|
||||
let formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
|
||||
return `${formattedHours}:${formattedMinutes}`;
|
||||
}
|
||||
|
||||
// Get the current date as a formatted string
|
||||
function getCurrentDate() {
|
||||
function getCurrentDate(suffix) {
|
||||
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
let suffixes = ["st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "st"];
|
||||
let date = new Date();
|
||||
let month = months[date.getMonth()];
|
||||
let day = date.getDate();
|
||||
let suffix = suffixes[day - 1];
|
||||
let suffixString = suffix ? suffixes[day - 1] : '';
|
||||
let year = date.getFullYear();
|
||||
return `${month} ${day}${suffix}, ${year}`;
|
||||
return `${month} ${day}${suffixString}, ${year}`;
|
||||
}
|
||||
|
||||
// Get the current day of the week as a string
|
||||
|
|
@ -148,14 +274,6 @@
|
|||
return days[date.getDay()];
|
||||
}
|
||||
|
||||
// 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";
|
||||
drawText(selectedColor); // Redraw the text with updated color
|
||||
}
|
||||
|
||||
// Draw the time, date, and day of the week on the canvas
|
||||
function drawText(color) {
|
||||
let canvas = document.getElementById("preview-canvas");
|
||||
|
|
@ -198,10 +316,10 @@
|
|||
ctx.fillText(currentTime, xPos, yPos);
|
||||
|
||||
// Set the font for the date
|
||||
ctx.font = "16px Righteous";
|
||||
ctx.font = "13px Righteous";
|
||||
|
||||
// Get the current date
|
||||
let currentDate = getCurrentDate();
|
||||
let currentDate = getCurrentDate(suffix);
|
||||
|
||||
// Measure the date width and calculate the horizontal position
|
||||
let dateWidth = ctx.measureText(currentDate).width;
|
||||
|
|
@ -219,7 +337,7 @@
|
|||
xPos = (canvas.width - dayWidth) / 2;
|
||||
|
||||
// Draw the day of the week
|
||||
ctx.fillText(currentDay, xPos, yPos + 18);
|
||||
ctx.fillText(currentDay, xPos, yPos + 12);
|
||||
}
|
||||
|
||||
// Converts a hexadecimal color code to a 16-bit integer value.
|
||||
|
|
@ -257,7 +375,7 @@
|
|||
}
|
||||
|
||||
// Save the provided theme to Bangle.js storage and set Shadow Clock as the default clock
|
||||
function saveThemeToSettings(theme) {
|
||||
function saveThemeToSettings(themeColors) {
|
||||
Puck.eval('[require("Storage").readJSON("setting.json", true)]', (dataArray) => {
|
||||
let data = dataArray ? dataArray[0] : null;
|
||||
if (data) {
|
||||
|
|
@ -266,10 +384,13 @@
|
|||
data.theme = {};
|
||||
}
|
||||
// Save all theme values
|
||||
for (let key in theme) {
|
||||
data.theme[key] = theme[key];
|
||||
for (let key in themeColors) {
|
||||
data.theme[key] = themeColors[key];
|
||||
}
|
||||
data.clock = "shadowclk.app.js"; // Set Shadow Clock as default
|
||||
// Save settings for 12 or 24 hour mode
|
||||
data["12hour"] = is12Hour;
|
||||
// Set Shadow Clock as default
|
||||
data.clock = "shadowclk.app.js";
|
||||
Puck.write(`require("Storage").write("setting.json", ${JSON.stringify(data)});\n`, (result) => {
|
||||
console.log('Theme saved:', result);
|
||||
});
|
||||
|
|
@ -277,44 +398,33 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Initialize color and theme settings
|
||||
let selectedColor = "#0ff";
|
||||
let isDarkBg = false;
|
||||
|
||||
// Load settings from Bangle.js storage
|
||||
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 and theme from JSON
|
||||
const { color, theme } = data;
|
||||
selectedColor = color;
|
||||
isDarkBg = theme === "dark";
|
||||
displayMessage("Previous settings loaded.", 3000);
|
||||
} else {
|
||||
// Use default values if there is no data for color and theme
|
||||
selectedColor = "#0ff";
|
||||
isDarkBg = false;
|
||||
}
|
||||
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);
|
||||
// Use default values in case of a timeout or error
|
||||
selectedColor = "#0ff";
|
||||
isDarkBg = false;
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
// Update the time display every second
|
||||
|
|
@ -341,19 +451,25 @@
|
|||
}, timeout);
|
||||
}
|
||||
|
||||
// Attach an event listener to the 'upload' button to save theme and color settings to Bangle.js storage
|
||||
// Attach an event listener to the 'upload' button to save color and theme settings to Bangle.js storage
|
||||
document.getElementById("upload").addEventListener("click", function () {
|
||||
// Save theme settings to Bangle.js
|
||||
let themeColors = createThemeColors(isDarkBg);
|
||||
saveThemeToSettings(themeColors);
|
||||
// Save Shadow Clock color setting
|
||||
// Save Shadow Clock app setting
|
||||
let data = {
|
||||
color: selectedColor,
|
||||
theme: isDarkBg ? "dark" : "light"
|
||||
theme: isDarkBg ? "dark" : "light",
|
||||
enableLeadingZero: leadingZero,
|
||||
enableSuffix: suffix,
|
||||
enable12Hour: is12Hour
|
||||
};
|
||||
|
||||
// Write the updated settings back to shadowclk.json
|
||||
Puck.write(`require("Storage").write("shadowclk.json", ${JSON.stringify(data)});\n`, (result) => {
|
||||
console.log('Color saved:', result);
|
||||
console.log('App settings saved:', result);
|
||||
});
|
||||
|
||||
// Display the message using displayMessage function
|
||||
displayMessage('Configuration sent...<br>Hold button on Bangle.js', 5000);
|
||||
});
|
||||
|
|
@ -363,7 +479,7 @@
|
|||
return Promise.all([
|
||||
document.fonts.load('81px Londrina Solid'),
|
||||
document.fonts.load('81px Londrina Shadow'),
|
||||
document.fonts.load('16px Righteous')
|
||||
document.fonts.load('13px Righteous')
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue