radar complete

server/scripts/modules/radar.js

@@ -1,10 +1,10 @@
 // current weather conditions display
-/* globals WeatherDisplay, utils, STATUS, draw, luxon */
+/* globals WeatherDisplay, utils, STATUS, luxon */
 
 // eslint-disable-next-line no-unused-vars
 class Radar extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId, 'Local Radar');
+		super(navId, elemId, 'Local Radar', true, true);
 
 		// set max images
 		this.dopplerRadarImageMax = 6;
@@ -204,31 +204,10 @@ class Radar extends WeatherDisplay {
 
 	async drawCanvas() {
 		super.drawCanvas();
-		if (this.screenIndex === -1) return;
-
 		const { DateTime } = luxon;
-		// Title
+		const time = this.times[this.screenIndex].toLocaleString(DateTime.TIME_SIMPLE);
-		draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 155, 60, 'Local', 2);
+		const timePadded = time.length >= 8 ? time : ` ${time}`;
-		draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 155, 95, 'Radar', 2);
+		this.elem.querySelector('.header .right .time').innerHTML = timePadded;
-
-		draw.text(this.context, 'Star4000', 'bold 18pt', '#ffffff', 438, 49, 'PRECIP', 2, 'center');
-		draw.text(this.context, 'Star4000', 'bold 18pt', '#ffffff', 298, 73, 'Light', 2);
-		draw.text(this.context, 'Star4000', 'bold 18pt', '#ffffff', 517, 73, 'Heavy', 2);
-
-		let x = 362;
-		const y = 52;
-		draw.box(this.context, '#000000', x - 2, y - 2, 154, 28);
-		draw.box(this.context, 'rgb(49, 210, 22)', x, y, 17, 24); x += 19;
-		draw.box(this.context, 'rgb(28, 138, 18)', x, y, 17, 24); x += 19;
-		draw.box(this.context, 'rgb(20, 90, 15)', x, y, 17, 24); x += 19;
-		draw.box(this.context, 'rgb(10, 40, 10)', x, y, 17, 24); x += 19;
-		draw.box(this.context, 'rgb(196, 179, 70)', x, y, 17, 24); x += 19;
-		draw.box(this.context, 'rgb(190, 72, 19)', x, y, 17, 24); x += 19;
-		draw.box(this.context, 'rgb(171, 14, 14)', x, y, 17, 24); x += 19;
-		draw.box(this.context, 'rgb(115, 31, 4)', x, y, 17, 24); x += 19;
-
-		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`;

server/styles/scss/_radar.scss

@@ -5,14 +5,97 @@
 	background-image: url('../images/BackGround4_1.png');
 
 	.header {
+		height: 83px;
+
 		.title.dual {
 			color: white;
 			font-family: 'Arial', sans-serif;
 			font-weight: bold;
 			font-size: 28pt;
+			left: 155px;
+
+			.top {
+				top: -4px;
+			}
 
 			.bottom {
-				top: 30px;
+				top: 31px;
+			}
+		}
+
+		.right {
+			position: absolute;
+			right: 0px;
+			width: 360px;
+			margin-top: 2px;
+			font-family: 'Star4000';
+			font-size: 18pt;
+			font-weight: bold;
+			@include u.text-shadow();
+			text-align: center;
+
+			.scale>div {
+				display: inline-block;
+			}
+
+			.scale-table {
+				display: table-row;
+				border-collapse: collapse;
+
+				.box {
+					display: table-cell;
+					border: 2px solid black;
+					width: 17px;
+					height: 24px;
+					padding: 0
+				}
+
+				.box-1 {
+					background-color: rgb(49, 210, 22);
+				}
+
+				.box-2 {
+					background-color: rgb(28, 138, 18);
+				}
+
+				.box-3 {
+					background-color: rgb(20, 90, 15);
+				}
+
+				.box-4 {
+					background-color: rgb(10, 40, 10);
+				}
+
+				.box-5 {
+					background-color: rgb(196, 179, 70);
+				}
+
+				.box-6 {
+					background-color: rgb(190, 72, 19);
+				}
+
+				.box-7 {
+					background-color: rgb(171, 14, 14);
+				}
+
+				.box-8 {
+					background-color: rgb(115, 31, 4);
+				}
+			}
+
+			.scale {
+				.text {
+					position: relative;
+					top: -5px;
+				}
+			}
+
+			.time {
+				position: relative;
+				font-weight: normal;
+				top: -14px;
+				font-family: 'Star4000 Small';
+				font-size: 24pt;
 			}
 		}
 	}
@@ -20,10 +103,9 @@
 
 .weather-display .main.radar {
 	overflow: hidden;
-
+	height: 367px;
 
 	.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 show">
+      <div id="radar-html" class="weather-display">
         <%- include('partials/radar.ejs') %>
       </div>
     </div>

views/partials/radar.ejs

@@ -8,6 +8,26 @@
       Radar
     </div>
   </div>
+  <div class="right">
+    <div class="precip">
+      <div class="precip-header">PRECIP</div>
+      <div class="scale">
+        <div class="text">Light</div>
+        <div class="scale-table">
+          <div class="box box-1"></div>
+          <div class="box box-2"></div>
+          <div class="box box-3"></div>
+          <div class="box box-4"></div>
+          <div class="box box-5"></div>
+          <div class="box box-6"></div>
+          <div class="box box-7"></div>
+          <div class="box box-7"></div>
+        </div>
+        <div class="text">Heavy</div>
+      </div>
+      <div class="time"></div>
+    </div>
+  </div>
 </div>
 
 <div class="main radar">

ws4kp.code-workspace

@@ -25,6 +25,7 @@
 			"Noaa",
 			"nosleep",
 			"Pngs",
+			"PRECIP",
 			"rtrim",
 			"T",
 			"T'storm",