I’m trying to build a multi-timezone clock that’ll be displayed in a web browser in kiosk mode.
I’ve stolen the basic code from
https://ampron.eu/article/use-case/digital-wall-clock-with-raspberry-pi/
and the kiosk setup from:
https://pimylifeup.com/raspberry-pi-kiosk/
and modified it into:
http://dotnetdotcom.net/tzclock.html
but I can’t figure out how to change the color of each of the timezones.
JavaScript isn’t really anything I have any experience with, so if I’m doing it all wrong, please point me in the right direction.
Many thanks in advance!
Here’s my code so far (87 lines):
"use strict";
var textElem = document.getElementById("clocktext");
clocktext.setAttribute('style', 'white-space: pre;');
var targetWidth = 0.90; // Proportion of full screen width
var curFontSize = 20; // Do not change
function updateClock() {
var d = new Date();
var s = "";
s += "UTC - "
s += (10 > d.getUTCHours() ? "0" : "") + d.getUTCHours() + ":";
s += (10 > d.getUTCMinutes() ? "0" : "") + d.getUTCMinutes() + ":";
s += (10 > d.getUTCSeconds() ? "0" : "") + d.getUTCSeconds();
s += '\r\n';
s += "Loc - "
s += (10 > d.getHours() ? "0" : "") + d.getHours() + ":";
s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + ":";
s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds();
textElem.textContent = s;
setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
}
function updateTextSize() {
for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
curFontSize *= targetWidth / (textElem.offsetWidth / textElem.parentNode.offsetWidth);
textElem.style.fontSize = curFontSize + "pt";
}
}
updateClock();
updateTextSize();
window.addEventListener("resize", updateTextSize);
$(document).ready(function() {
// iOS web app full screen hacks.
if (window.navigator.standalone == true) {
// make all link remain in web app mode.
$('a').click(function() {
window.location = $(this).attr('href');
return false;
});
}
});
@font-face {
font-family: "Digital-7";
src: url(digital-7.ttf) format("truetype");
}
p.customfont {
font-family: "Digital-7";
}
html {
background: #000000;
font-family: "Digital-7", sans-serif;
font-weight: normal;
color: #00ffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no, viewport-fit=cover'>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Ampron Clock">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GeekHo Clock</title>
</head>
<body style="display:flex; height:100%; margin:0; padding:0; justify-content:center; align-items:center">
<span id="clocktext" style="font-kerning:none"></span>
</body>
</html>
There are a few ways to accomplish your goal. I chose the one that fits into your code the easiest.
<span>
tags around the timezones and give them a class to style it with the new colortextElem.textContent = s;
totextElem.innerHTML = s;
tz
) and provide the new color.If you want different colors for each time zone use different class names with different colors defined in CSS.
Nice work! Kudos from Ampron. Glad to see our wall clock had been useful for some 🙂