5.9.11

Fix time flickering when frame is first displayed

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.9.9",
+	"version": "5.9.11",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.9.9",
+			"version": "5.9.11",
 			"license": "MIT",
 			"devDependencies": {
 				"del": "^6.0.0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.9.9",
+	"version": "5.9.11",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {

server/scripts/modules/radar.mjs

@@ -216,7 +216,7 @@ class Radar extends WeatherDisplay {
 
 		// get image offset calculation
 		// is slides slightly because of scaling so we have to take a measurement from the rendered page
-		const actualFrameHeight = this.elem.querySelector('.frame').getBoundingClientRect().height;
+		const actualFrameHeight = this.elem.querySelector('.frame').scrollHeight;
 
 		// scroll to image
 		this.elem.querySelector('.scroll-area').style.top = `${-this.screenIndex * actualFrameHeight}px`;

server/scripts/modules/weatherdisplay.mjs

@@ -151,6 +151,7 @@ class WeatherDisplay {
 	drawCanvas() {
 		// clean up the first-run flag in screen index
 		if (this.screenIndex < 0) this.screenIndex = 0;
+		if (this.okToDrawCurrentDateTime) this.drawCurrentDateTime();
 	}
 
 	finishDraw() {
@@ -159,14 +160,13 @@ class WeatherDisplay {
 			this.drawCurrentDateTime();
 			// auto clock refresh
 			if (!this.dateTimeInterval) {
-				setInterval(() => this.drawCurrentDateTime(), 100);
+				// only draw if canvas is active to conserve battery
+				setInterval(() => this.active && this.drawCurrentDateTime(), 100);
 			}
 		}
 	}
 
 	drawCurrentDateTime() {
-		// only draw if canvas is active to conserve battery
-		if (!this.active) return;
 		// Get the current date and time.
 		const now = DateTime.local().setZone(timeZone());
 

server/styles/scss/_page.scss

@@ -283,7 +283,7 @@ body {
 	position: relative;
 	width: 640px;
 	height: 480px;
-	overflow: hidden;
+	// overflow: hidden;
 	background-image: url(../images/BackGround1_1.png);
 	transform-origin: 0 0;
 

views/index.ejs

@@ -115,7 +115,7 @@
       <div id="radar-html" class="weather-display">
         <%- include('partials/radar.ejs') %>
       </div>
-      <div id="hazards-html" class="weather-display show">
+      <div id="hazards-html" class="weather-display">
         <%- include('partials/hazards.ejs') %>
       </div>
     </div>