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

Merge pull request #2736 from stweedo/master 

update to interface.html
master
Gordon Williams 2023-05-09 14:56:12 +01:00 committed by GitHub
parent 0f00217e92 51a5defac9
commit 1d6677d238
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 98 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
apps/shadowclk/interface.html
View File

@ -78,31 +78,34 @@
#upload {
margin-top: 20px;
}
#message {
text-align: center;
}
</style>
</head>
<body>
<script src="../../lib/interface.js"></script>
<script src="../../core/lib/interface.js"></script>
<div class="main-container">
<h1>3-Bit Color Picker</h1>
<div>
<script>
let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
colors.forEach((color, i) => {
document.write(`<button class="color-button color-${i}" data-color="${color}"></button>`);
});
</script>
</div>
<div id="color-buttons-container"></div>
<button id="toggle-bg" class="btn btn-primary" onclick="toggleBackground()">Light/Dark</button>
<div id="preview-box">
<canvas id="preview-canvas" width="176" height="176"></canvas>
</div>
<button id="upload" class="btn btn-primary">Upload</button>
<script src="../../core/lib/customize.js"></script>
<div id="message"></div>
</div>
<script>
let selectedColor = "#0ff";
let isDarkBg = false; // Add this line to track the background state
let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
let colorButtonsContainer = document.getElementById('color-buttons-container');
colors.forEach((color, i) => {
let button = document.createElement('button');
button.className = `color-button color-${i}`;
button.dataset.color = color;
colorButtonsContainer.appendChild(button);
});
document.querySelectorAll(".color-button").forEach(button => {
button.addEventListener("click", () => {
selectedColor = button.dataset.color;
@ -205,11 +208,6 @@
ctx.fillText(currentDay, xPos, yPos + 20);
}
// Update the time every second
setInterval(() => {
drawText(selectedColor);
}, 1000);
function hexToDec(hex) {
if (hex.length === 4) {
hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
@ -263,6 +261,54 @@
});
}
// Load Shadow Clock color and theme setting
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
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();
});
}
function updateTime() {
setInterval(() => {
drawText(selectedColor);
}, 1000);
}
const messageDiv = document.getElementById('message');
document.getElementById("upload").addEventListener("click", function () {
// Save theme settings to Bangle.js
let themeColors = createThemeColors(isDarkBg);
@ -276,7 +322,42 @@
Puck.write(`require("Storage").write("shadowclk.json", ${JSON.stringify(data)});\n`, (result) => {
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);
});
// Call loadSettings when the page loads
loadSettings();
// 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);
});
})();
</script>
</body>