some radar in html

server/scripts/modules/radar.js

@@ -31,9 +31,6 @@ class Radar extends WeatherDisplay {
 			{ time: 1, si: 4 },
 			{ time: 12, si: 5 },
 		];
-
-		// pre-load background image (returns promise)
-		this.backgroundImage = utils.image.load('images/BackGround4_1.png');
 	}
 
 	async getData(_weatherParameters) {
@@ -163,7 +160,6 @@ class Radar extends WeatherDisplay {
 			const imgBlob = await utils.image.load(blob);
 
 			// draw the entire image
-
 			workingContext.clearRect(0, 0, width, 1600);
 			workingContext.drawImage(imgBlob, 0, 0, width, 1600);
 
@@ -183,11 +179,20 @@ class Radar extends WeatherDisplay {
 			// merge the radar and map
 			Radar.mergeDopplerRadarImage(context, cropContext);
 
+			const elem = this.fillTemplate('frame', { map: { type: 'img', src: canvas.toDataURL() } });
+
 			return {
 				canvas,
 				time,
+				elem,
 			};
 		}));
+
+		// put the elements in the container
+		const scrollArea = this.elem.querySelector('.scroll-area');
+		scrollArea.innerHTML = '';
+		scrollArea.append(...radarInfo.map((r) => r.elem));
+
 		// set max length
 		this.timing.totalScreens = radarInfo.length;
 		// store the images
@@ -200,7 +205,7 @@ class Radar extends WeatherDisplay {
 	async drawCanvas() {
 		super.drawCanvas();
 		if (this.screenIndex === -1) return;
-		this.context.drawImage(await this.backgroundImage, 0, 0);
+
 		const { DateTime } = luxon;
 		// Title
 		draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 155, 60, 'Local', 2);
@@ -225,6 +230,9 @@ class Radar extends WeatherDisplay {
 		this.context.drawImage(this.data[this.screenIndex], 0, 0, 640, 367, 0, 113, 640, 367);
 		draw.text(this.context, 'Star4000 Small', '24pt', '#ffffff', 438, 105, this.times[this.screenIndex].toLocaleString(DateTime.TIME_SIMPLE), 2, 'center');
 
+		// scroll to image
+		this.elem.querySelector('.scroll-area').style.top = `${-this.screenIndex * 371}px`;
+
 		this.finishDraw();
 	}
 

server/styles/scss/_radar.scss

@@ -18,4 +18,15 @@
 	}
 }
 
-.weather-display .main.radar {}
+.weather-display .main.radar {
+	overflow: hidden;
+
+
+	.container {
+		margin-top: 21px;
+
+		.scroll-area {
+			position: relative;
+		}
+	}
+}

views/index.ejs

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

views/partials/radar.ejs

@@ -12,9 +12,11 @@
 
 <div class="main radar">
   <div class="container">
-    <div class="frame">
-      <div class="map">
-        <img src="" />
+    <div class="scroll-area">
+      <div class="frame template">
+        <div class="map">
+          <img src="images/4000RadarMap2.jpg" />
+        </div>
       </div>
     </div>
   </div>