forked from FOSS/BangleApps
stweedo
GitHub
parent
4256f63dce
commit
17e99cb10c
|
|
@ -1,231 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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=DotGothic16&display=swap" rel="stylesheet">
|
||||
<title>3-Bit Color Picker</title>
|
||||
<style>
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.color-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid black;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-0 {
|
||||
background: #000
|
||||
}
|
||||
|
||||
.color-1 {
|
||||
background: #f00
|
||||
}
|
||||
|
||||
.color-2 {
|
||||
background: #0f0
|
||||
}
|
||||
|
||||
.color-3 {
|
||||
background: #ff0
|
||||
}
|
||||
|
||||
.color-4 {
|
||||
background: #00f
|
||||
}
|
||||
|
||||
.color-5 {
|
||||
background: #f0f
|
||||
}
|
||||
|
||||
.color-6 {
|
||||
background: #0ff
|
||||
}
|
||||
|
||||
.color-7 {
|
||||
background: #fff
|
||||
}
|
||||
|
||||
#preview-box {
|
||||
width: 176px;
|
||||
height: 176px;
|
||||
border: 1px solid black;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#preview-canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toggle-bg {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#upload {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<h1>3-Bit Color Picker</h1>
|
||||
<div>
|
||||
<script>
|
||||
const 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>
|
||||
<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>
|
||||
<script>
|
||||
let selectedColor = "#0ff";
|
||||
let isDarkBg = false; // Add this line to track the background state
|
||||
document.querySelectorAll(".color-button").forEach(button => {
|
||||
button.addEventListener("click", () => {
|
||||
selectedColor = button.dataset.color;
|
||||
drawText(selectedColor);
|
||||
});
|
||||
});
|
||||
|
||||
function formatTime(date) {
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
const formattedHours = hours < 10 ? `${hours}` : `${hours}`;
|
||||
const formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
|
||||
return `${formattedHours}:${formattedMinutes}`;
|
||||
}
|
||||
|
||||
function getCurrentDate() {
|
||||
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
const 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"];
|
||||
const date = new Date();
|
||||
const month = months[date.getMonth()];
|
||||
const day = date.getDate();
|
||||
const suffix = suffixes[day - 1];
|
||||
const year = date.getFullYear();
|
||||
return `${month} ${day}${suffix}, ${year}`;
|
||||
}
|
||||
|
||||
function getCurrentDay() {
|
||||
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
const date = new Date();
|
||||
return days[date.getDay()];
|
||||
}
|
||||
|
||||
function toggleBackground() {
|
||||
const previewBox = document.getElementById("preview-box");
|
||||
isDarkBg = !isDarkBg; // Toggle the background state
|
||||
previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
|
||||
drawText(selectedColor); // Redraw the text with updated color
|
||||
}
|
||||
|
||||
function drawText(color) {
|
||||
const canvas = document.getElementById("preview-canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Clear the canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Set the base font and selected color
|
||||
ctx.font = "81px Londrina Solid";
|
||||
ctx.fillStyle = color;
|
||||
|
||||
// Get the current local system time
|
||||
const currentTime = formatTime(new Date());
|
||||
|
||||
// Measure the text width and calculate the horizontal position
|
||||
const timeWidth = ctx.measureText(currentTime).width;
|
||||
let xPos = (canvas.width - timeWidth) / 2;
|
||||
|
||||
// Measure the text height based on the font size and calculate the vertical position
|
||||
const timeHeight = ctx.measureText('M').actualBoundingBoxAscent + ctx.measureText('M').actualBoundingBoxDescent;
|
||||
let yPos = (canvas.height + timeHeight) / 2;
|
||||
|
||||
// Draw the time
|
||||
ctx.fillText(currentTime, xPos, yPos);
|
||||
|
||||
// Set the outline font and color
|
||||
ctx.font = "81px Londrina Shadow";
|
||||
|
||||
// Set the text color based on the background state
|
||||
if (isDarkBg) {
|
||||
ctx.fillStyle = "#fff";
|
||||
} else {
|
||||
ctx.fillStyle = "#000";
|
||||
}
|
||||
|
||||
// Draw the time again
|
||||
ctx.fillText(currentTime, xPos, yPos);
|
||||
|
||||
// Set the font for the date
|
||||
ctx.font = "19px DotGothic16";
|
||||
|
||||
// Get the current date
|
||||
const currentDate = getCurrentDate();
|
||||
|
||||
// Measure the date width and calculate the horizontal position
|
||||
const dateWidth = ctx.measureText(currentDate).width;
|
||||
xPos = (canvas.width - dateWidth) / 2;
|
||||
|
||||
// Draw the date
|
||||
yPos += 20;
|
||||
ctx.fillText(currentDate, xPos, yPos);
|
||||
|
||||
// Get the current day of the week
|
||||
const currentDay = getCurrentDay();
|
||||
|
||||
// Measure the day width and calculate the horizontal position
|
||||
const dayWidth = ctx.measureText(currentDay).width;
|
||||
xPos = (canvas.width - dayWidth) / 2;
|
||||
|
||||
// Draw the day of the week
|
||||
ctx.fillText(currentDay, xPos, yPos + 20);
|
||||
}
|
||||
|
||||
// Update the time every second
|
||||
setInterval(() => {
|
||||
drawText(selectedColor);
|
||||
}, 1000);
|
||||
|
||||
document.getElementById("upload").addEventListener("click", function() {
|
||||
// Prepare data to send to the watch
|
||||
const data = {
|
||||
color: selectedColor,
|
||||
theme: isDarkBg ? "dark" : "light"
|
||||
};
|
||||
|
||||
// Convert the data to JSON
|
||||
const json = JSON.stringify(data);
|
||||
|
||||
// Send app and settings
|
||||
sendCustomizedApp({
|
||||
storage: [
|
||||
{ name: "shadowclk.app.js", url: "app.js" },
|
||||
{ name: "shadowclk.json", content: json }
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue