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

Update interface.html - shadowclk 

Add comments
Reduce timeout to 50ms
master
stweedo 2023-05-10 05:00:03 -05:00 committed by GitHub
parent cccce9318e
commit 96342a3c39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
apps/shadowclk/interface.html
View File

@ -82,7 +82,6 @@
#message-container {
height: 40px;
/* adjust the height based on your desired fixed height */
margin-top: 20px;
text-align: center;
}
@ -106,6 +105,7 @@
</div>
<script>
const messageDiv = document.getElementById('message');
// 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');
colors.forEach((color, i) => {
@ -121,6 +121,7 @@
});
});
// Format the current time in the desired format
function formatTime(date) {
let hours = date.getHours();
let minutes = date.getMinutes();
@ -129,6 +130,7 @@
return `${formattedHours}:${formattedMinutes}`;
}
// Get the current date as a formatted string
function getCurrentDate() {
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"];
@ -140,12 +142,14 @@
return `${month} ${day}${suffix}, ${year}`;
}
// Get the current day of the week as a string
function getCurrentDay() {
let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let date = new Date();
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");
@ -153,6 +157,7 @@
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");
let ctx = canvas.getContext("2d");
@ -218,6 +223,9 @@
ctx.fillText(currentDay, xPos, yPos + 20);
}
// Converts a hexadecimal color code to a 16-bit integer value.
// If the input hex string is in short format (#rgb), it's converted to long format (#rrggbb) first.
// Returns the 16-bit integer value representing the color.
function hexToDec(hex) {
if (hex.length === 4) {
hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
@ -249,6 +257,7 @@
};
}
// Save the provided theme to Bangle.js storage and set Shadow Clock as the default clock
function saveThemeToSettings(theme) {
Puck.eval('require("Storage").readJSON("setting.json", true)', (data) => {
if (data) {
@ -256,14 +265,11 @@
if (!data.theme) {
data.theme = {};
}
// Save all theme values
for (let key in theme) {
data.theme[key] = theme[key];
}
data.clock = "shadowclk.app.js"; // Set Shadow Clock as default
Puck.write(`require("Storage").write("setting.json", ${JSON.stringify(data)});\n`, (result) => {
console.log('Theme saved:', result);
});
@ -271,18 +277,20 @@
});
}
// Load Shadow Clock color and theme setting
// Initialize Shadow Clock color and theme settings with defaults
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")), 500)
setTimeout(() => reject(new Error("Timeout occurred")), 50)
);
// Load settings from Bangle.js storage
const loadSettingsFromStorage = new Promise((resolve) => {
Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => {
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;
@ -297,7 +305,7 @@
resolve();
});
});
// 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) => {
@ -309,35 +317,35 @@
});
}
// Update the time display every second
function updateTime() {
setInterval(() => {
drawText(selectedColor);
}, 1000);
}
// Display a message for a given duration and then remove it
function displayMessage(text, timeout) {
// Remove any existing message
while (messageDiv.firstChild) {
messageDiv.removeChild(messageDiv.firstChild);
}
// Create a new message element
const message = document.createElement('p');
message.innerHTML = text; // Use innerHTML instead of textContent
message.style.fontSize = '24px';
messageDiv.appendChild(message);
// Remove the message element after the timeout
setTimeout(() => {
messageDiv.removeChild(message);
}, timeout);
}
// Attach an event listener to the 'upload' button to save theme and color 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
let data = {
color: selectedColor,
@ -346,11 +354,11 @@
Puck.write(`require("Storage").write("shadowclk.json", ${JSON.stringify(data)});\n`, (result) => {
console.log('Color saved:', result);
});
// Display the message using displayMessage function
displayMessage('Configuration sent...<br>Hold button on Bangle.js', 5000);
});
// Load required fonts for the application
function loadFonts() {
return Promise.all([
document.fonts.load('81px Londrina Solid'),