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

Merge pull request #2737 from stweedo/master 

Update interface.html for shadowclk
pull/2742/head
Gordon Williams 2023-05-10 08:12:07 +01:00 committed by GitHub
parent 1d6677d238 72315d2b34
commit 652cf621ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 76 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
apps/shadowclk/interface.html
View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<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">
@ -79,12 +80,16 @@
margin-top: 20px;
}
#message {
#message-container {
height: 40px;
/* adjust the height based on your desired fixed height */
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<script src="../../core/lib/interface.js"></script>
<div class="main-container">
@ -95,9 +100,12 @@
<canvas id="preview-canvas" width="176" height="176"></canvas>
</div>
<button id="upload" class="btn btn-primary">Upload</button>
<div id="message"></div>
<div id="message-container">
<div id="message"></div>
</div>
</div>
<script>
const messageDiv = document.getElementById('message');
let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
let colorButtonsContainer = document.getElementById('color-buttons-container');
colors.forEach((color, i) => {
@ -139,8 +147,8 @@
}
function toggleBackground() {
let previewBox = document.getElementById("preview-box");
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
}
@ -148,6 +156,8 @@
function drawText(color) {
let canvas = document.getElementById("preview-canvas");
let ctx = canvas.getContext("2d");
let previewBox = document.getElementById("preview-box");
previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
@ -265,41 +275,38 @@
let selectedColor = "#0ff";
let isDarkBg = false;
function loadSettings() {
Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => {
if (data && data.color && data.theme) {
// Apply color and theme from JSON
const { color, theme } = data;
selectedColor = color;
isDarkBg = theme === "dark";
} else {
// Use default values if there is no data for color and theme
function loadSettings(callback) {
// Set a timeout for loading the settings
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error("Timeout occurred")), 500)
);
const loadSettingsFromStorage = new Promise((resolve) => {
Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => {
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();
});
});
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;
}
// Update UI with loaded settings
let previewBox = document.getElementById("preview-box");
previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
(function () {
// Load fonts before drawing for the first time
function loadFont(font) {
return document.fonts.load(font);
}
Promise.all([
loadFont('81px Londrina Solid'),
loadFont('81px Londrina Shadow'),
loadFont('19px DotGothic16')
]).then(() => {
drawText(selectedColor);
});
})();
// Start updating the time every second after loading the settings
updateTime();
});
callback();
});
}
function updateTime() {
@ -308,7 +315,24 @@
}, 1000);
}
const messageDiv = document.getElementById('message');
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);
}
document.getElementById("upload").addEventListener("click", function () {
// Save theme settings to Bangle.js
let themeColors = createThemeColors(isDarkBg);
@ -323,42 +347,24 @@
console.log('Color saved:', result);
});
// Remove any existing message
while (messageDiv.firstChild) {
messageDiv.removeChild(messageDiv.firstChild);
}
// Create a new message element
const message = document.createElement('p');
message.innerHTML = 'Configuration sent...<br>Hold button on Bangle.js';
message.style.fontSize = '24px';
messageDiv.appendChild(message);
// Remove the message element after the timeout
setTimeout(() => {
messageDiv.removeChild(message);
}, 5000);
// Display the message using displayMessage function
displayMessage('Configuration sent...<br>Hold button on Bangle.js', 5000);
});
// Call loadSettings when the page loads
loadSettings();
function loadFonts() {
return Promise.all([
document.fonts.load('81px Londrina Solid'),
document.fonts.load('81px Londrina Shadow'),
document.fonts.load('19px DotGothic16')
]);
}
// Fallback to defaults if we can't load settings
(function () {
// Load fonts before drawing for the first time
function loadFont(font) {
return document.fonts.load(font);
}
Promise.all([
loadFont('81px Londrina Solid'),
loadFont('81px Londrina Shadow'),
loadFont('19px DotGothic16')
]).then(() => {
drawText(selectedColor);
});
})();
async function init() {
await loadFonts(); // Load fonts before drawing for the first time
loadSettings(updateTime); // Pass updateTime as the callback function to loadSettings
}
init();
</script>
</body>
</html>
</html>