I am trying to create a full-page web-based clock to be used by an embedded device. The idea is that the device will show a full screen with the clock in large display, and below that the current temperature, Farenheit and Celsius and a city name or code. The clock time and temperatures will be updated over time; the clock will simply scroll through the available cities repeatedly on 5-second intervals.
I’m having trouble getting the font sizing to work properly. The idea is that a smallish font will be set to get an initial size, then we’ll do the arithmetic to make the text fill 90% of the width. This is done in an iterative loop because offsetWidth is an integer value, so iterative processing should get us close enough to our goal.
There is a group division, and within that a division for time and a division for temperature. All three of these specify 100% width, which is what I want. And then the individual elements’ offsetWidths are applied against the division width to derive the font needed to fill that width.
Play-by-play, the initial “clock” offsetWidth with a 10-point font is 48 with a goal of 1259. The arithmetic correctly sets the fontsize to 236 (and change). Then we look at the temperature offset width, and before any arithmetic is done, it shows offsetWidth is already 1259, so the font is not manipulated. But that number is not correct; the offsetWidth should be more like 150 or so.
Also, the clock sizing seems to work only once (so it appears for about a half second), and then has the same problem as the temperature sizing. I don’t see any point where I fail to reset or where I reset incorrectly, so I am confused what’s happening here.
I have included the source (test.html and test.js) in hopes that someone can tell me where I might have gone wrong. I would appreciate your guidance.
test.html
<!DOCTYPE html>
<html lang='en' style="height:100%; width:100%; margin:0; padding:0">
<head>
<title>Full Screen Clock</title>
<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"/>
<style>
/* Customizable font and colors */
html {
font-family: 'Courier' ;
background:#000000;
color: #91ff0f ;
}
</style>
</head>
<body style="display:flex; height:100%; width:100%; margin:0; padding:0; justify-content:center; align-items:center">
<div style='height:100%; width: 100%; margin: 0 auto'>
<div id='clockDiv' style='height:60%; width:100%; margin: 0 auto'>
<span id="clocktext" style="font-kerning:none; text-align:center"></span>
</div>
<div id='tempDiv' style='width:100%; margin: 0 auto'>
<span id="temptext" style="font-kerning:none; text-align:center"></span>
</div>
</div>
<script src='test.js'></script>
</body>
</html>
test.js
"use strict" ;
const cycleLength = 5 ;
const startFontSize = 10 ;
const targetWidth = .9 ;
var tempsTableElem = document.getElementById('temps') ;
var timeElem = document.getElementById("clocktext") ;
var tempElem = document.getElementById("temptext") ;
var clockElem = document.getElementById("clockDiv") ;
var timeFontSize ;
var tempFontSize ;
var cityTempArray ;
function updateClock() {
var d = new Date() ;
var seconds = d.getSeconds() ;
var cityCount = cityTempArray.length ;
var showSeconds = (cityCount == 1) ;
var showCity = (cityCount > 1) ;
// We change cities (if applicable) every 5 seconds. So:
// If there are two cities, the cycle repeats every 10 seconds
// If there are three cities, the cycle repeats every 15 seconds
// four cities: 20 seconds
// Therefore, we can use (seconds/5) modulus (number of cities) to get city index.
// So if we are, say, 38 seconds into the minute and there are, say, 3 cities, then current city (from 0 to 2) is:
// Math.floor(38/5) % cityCount = 7 % 3 = 1 (0~4=0 5~9=1 10~14=2 15~19=0 22~24=1 25~29=2 30~34=0 35~39=1)
// We will set maximum to 4 cities because it gets weird after that. Anyway, that's enough, right?
var currentCity = Math.floor(seconds/cycleLength) % cityCount ; // (0 through number-cities - 1)
var cityCode = cityTempArray[currentCity][0] ;
var farenheit = round(cityTempArray[currentCity][1], 0) ;
var s = "" ;
var celsius = round(5 / 9 * (farenheit - 32), 1) ;
var colon = (showSeconds || d.getMilliseconds() < 500) ? ':' : ' ' ;
s += (d.getHours() < 10 ? "0" : "") + d.getHours() ;
s += colon + (d.getMinutes() < 10 ? "0" : "") + d.getMinutes() ;
if (showSeconds)
s += colon + (d.getSeconds() < 10 ? "0" : "") + d.getSeconds() ;
timeElem.textContent = s ;
s = farenheit + 'ºF ' + celsius + 'ºC' ;
if (showCity)
s += ' ' + cityCode ;
tempElem.textContent = s ;
updateTextSize() ;
let time = 500 - d.getTime() % 500 + 20 ;
setTimeout(updateClock, time) ;
}
function updateTextSize() { // Attempt to fill the width of the page with clock text and temperature text
tempFontSize = startFontSize ;
timeFontSize = startFontSize ;
for (var i = 0 ; i < 3 ; i++) { // Iterate for better better convergence
// We will hide the elements we're not sizing, so that they don't interfere
tempElem.style.display = 'none' ;
timeFontSize *= targetWidth / (timeElem.offsetWidth / clockElem.offsetWidth) ;
timeElem.style.fontSize = timeFontSize + "pt" ;
// We will hide the elements we're not sizing, so that they don't interfere
timeElem.style.display = 'none' ;
tempElem.style.display = 'block' ;
tempFontSize *= targetWidth / (tempElem.offsetWidth / clockElem.offsetWidth) ;
tempElem.style.fontSize = tempFontSize + 'pt' ;
timeElem.style.display = 'block' ;
}
}
function getTemps(tableElement) {
cityTempArray = [ [ 'NewYork', 34 ], ['Brisbain', 76 ] ] ;
}
function round(value, precision) {
var multiplier = Math.pow(10, precision || 0) ;
return Math.round(value * multiplier) / multiplier ;
}
getTemps() ;
updateClock() ;
window.addEventListener("resize", updateTextSize) ;