Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity

Update interface.html 

Lots of fixes, fairly reliable now.

GadgetBridge throws a "Malformed JSON from Bangle.js: No value for t"
master
stweedo 2023-05-09 15:28:54 -05:00 committed by GitHub
parent 1d6677d238
commit 72315d2b34
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> <html>
<head> <head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../css/spectre.min.css"> <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+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=Londrina+Shadow&display=swap" rel="stylesheet">
@ -79,12 +80,16 @@
margin-top: 20px; margin-top: 20px;
} }
#message { #message-container {
height: 40px;
/* adjust the height based on your desired fixed height */
margin-top: 20px;
text-align: center; text-align: center;
} }
</style> </style>
</head> </head>
<body> <body>
<script src="../../core/lib/interface.js"></script> <script src="../../core/lib/interface.js"></script>
<div class="main-container"> <div class="main-container">
@ -95,9 +100,12 @@
<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> <button id="upload" class="btn btn-primary">Upload</button>
<div id="message"></div> <div id="message-container">
<div id="message"></div>
</div>
</div> </div>
<script> <script>
const messageDiv = document.getElementById('message');
let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff']; let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
let colorButtonsContainer = document.getElementById('color-buttons-container'); let colorButtonsContainer = document.getElementById('color-buttons-container');
colors.forEach((color, i) => { colors.forEach((color, i) => {
@ -139,8 +147,8 @@
} }
function toggleBackground() { function toggleBackground() {
let previewBox = document.getElementById("preview-box");
isDarkBg = !isDarkBg; // Toggle the background state isDarkBg = !isDarkBg; // Toggle the background state
let previewBox = document.getElementById("preview-box");
previewBox.style.backgroundColor = isDarkBg ? "black" : "white"; previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
drawText(selectedColor); // Redraw the text with updated color drawText(selectedColor); // Redraw the text with updated color
} }
@ -148,6 +156,8 @@
function drawText(color) { function drawText(color) {
let canvas = document.getElementById("preview-canvas"); let canvas = document.getElementById("preview-canvas");
let ctx = canvas.getContext("2d"); let ctx = canvas.getContext("2d");
let previewBox = document.getElementById("preview-box");
previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
// Clear the canvas // Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
@ -265,41 +275,38 @@
let selectedColor = "#0ff"; let selectedColor = "#0ff";
let isDarkBg = false; let isDarkBg = false;
function loadSettings() { function loadSettings(callback) {
Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => { // Set a timeout for loading the settings
if (data && data.color && data.theme) { const timeout = new Promise((_, reject) =>
// Apply color and theme from JSON setTimeout(() => reject(new Error("Timeout occurred")), 500)
const { color, theme } = data; );
selectedColor = color;
isDarkBg = theme === "dark"; const loadSettingsFromStorage = new Promise((resolve) => {
} else { Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => {
// Use default values if there is no data for color and theme 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"; selectedColor = "#0ff";
isDarkBg = false; isDarkBg = false;
} callback();
});
// 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();
});
} }
function updateTime() { function updateTime() {
@ -308,7 +315,24 @@
}, 1000); }, 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 () { document.getElementById("upload").addEventListener("click", function () {
// Save theme settings to Bangle.js // Save theme settings to Bangle.js
let themeColors = createThemeColors(isDarkBg); let themeColors = createThemeColors(isDarkBg);
@ -323,42 +347,24 @@
console.log('Color saved:', result); console.log('Color saved:', result);
}); });
// Remove any existing message // Display the message using displayMessage function
while (messageDiv.firstChild) { displayMessage('Configuration sent...<br>Hold button on Bangle.js', 5000);
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);
}); });
// Call loadSettings when the page loads function loadFonts() {
loadSettings(); 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 async function init() {
(function () { await loadFonts(); // Load fonts before drawing for the first time
// Load fonts before drawing for the first time loadSettings(updateTime); // Pass updateTime as the callback function to loadSettings
function loadFont(font) { }
return document.fonts.load(font); init();
}
Promise.all([
loadFont('81px Londrina Solid'),
loadFont('81px Londrina Shadow'),
loadFont('19px DotGothic16')
]).then(() => {
drawText(selectedColor);
});
})();
</script> </script>
</body> </body>
</html> </html>