progress screen progress bar

server/scripts/modules/navigation.js

@@ -126,10 +126,15 @@ const navigation = (() => {
 		postMessage('loaded');
 	};
 
-	const countLoadedCanvases = () => displays.reduce((acc, display) => {
+	const countLoadedCanvases = () => {
+		const result = displays.reduce((acc, display) => {
+			console.log(display.name, display.status);
 			if (display.status !== STATUS.loading) return acc + 1;
 			return acc;
 		}, 0);
+		console.log(result);
+		return result;
+	};
 
 	const hideAllCanvases = () => {
 		displays.forEach((display) => display.hideCanvas());

server/scripts/modules/progress.js

@@ -22,6 +22,9 @@ class Progress extends WeatherDisplay {
 	async drawCanvas(displays, loadedCount) {
 		super.drawCanvas();
 
+		// get the progress bar cover (makes percentage)
+		if (!this.progressCover) this.progressCover = this.elem.querySelector('.scroll .cover');
+
 		// if no displays provided just draw the backgrounds (above)
 		if (!displays) return;
 		const lines = displays.map((display, index) => {
@@ -73,11 +76,12 @@ class Progress extends WeatherDisplay {
 		const loadedPercent = (loadedCount / displays.length);
 
 		if (loadedPercent < 1.0) {
-			// Draw a box for the progress.
-
+			// show the progress bar and set width
+			this.progressCover.parentNode.classList.add('show');
+			this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
 		} else {
-			// restore the background
-
+			// hide the progressbar
+			this.progressCover.parentNode.classList.remove('show');
 		}
 	}
 

server/styles/scss/_progress.scss

@@ -11,7 +11,7 @@
 		top: 15px;
 		margin: 0px 10px;
 		box-sizing: border-box;
-		height: 280px;
+		height: 310px;
 		overflow: hidden;
 
 		.item {
@@ -82,4 +82,68 @@
 		}
 	}
 
+
+}
+
+#progress-html.weather-display .scroll {
+
+	@keyframes progress-scroll {
+		0% {
+			background-position: -40px 0;
+		}
+
+		100% {
+			background-position: 40px 0;
+		}
+	}
+
+	.progress-bar-container {
+		border: 2px solid black;
+		background-color: white;
+		margin: 20px auto;
+		width: 524px;
+		position: relative;
+		display: none;
+
+		&.show {
+			display: block;
+		}
+
+		.progress-bar {
+			height: 20px;
+			margin: 2px;
+			width: 520px;
+			background: repeating-linear-gradient(90deg,
+					c.$gradient-loading-1 0px,
+					c.$gradient-loading-1 5px,
+					c.$gradient-loading-2 5px,
+					c.$gradient-loading-2 10px,
+					c.$gradient-loading-3 10px,
+					c.$gradient-loading-3 15px,
+					c.$gradient-loading-4 15px,
+					c.$gradient-loading-4 20px,
+					c.$gradient-loading-3 20px,
+					c.$gradient-loading-3 25px,
+					c.$gradient-loading-2 25px,
+					c.$gradient-loading-2 30px,
+					c.$gradient-loading-1 30px,
+					c.$gradient-loading-1 40px,
+				);
+			// animation
+			animation-duration: 2s;
+			animation-fill-mode: forwards;
+			animation-iteration-count: infinite;
+			animation-name: progress-scroll;
+			animation-timing-function: linear;
+		}
+
+		.cover {
+			position: absolute;
+			top: 0px;
+			right: 0px;
+			background-color: white;
+			width: 100%;
+			height: 24px;
+		}
+	}
 }

server/styles/scss/_radar.scss

@@ -0,0 +1,21 @@
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+
+#radar-html.weather-display {
+	background-image: url('../images/BackGround4_1.png');
+
+	.header {
+		.title.dual {
+			color: white;
+			font-family: 'Arial', sans-serif;
+			font-weight: bold;
+			font-size: 28pt;
+
+			.bottom {
+				top: 30px;
+			}
+		}
+	}
+}
+
+.weather-display .main.radar {}

server/styles/scss/_weather-display.scss

@@ -110,7 +110,7 @@
 	.scroll {
 		@include u.text-shadow(3px, 1.5px);
 		width: 640px;
-		height: 80px;
+		height: 70px;
 		overflow: hidden;
 		margin-top: 10px;
 

server/styles/scss/main.scss

@@ -1,9 +1,10 @@
 @import 'page';
+@import 'weather-display';
 @import 'current-weather';
 @import 'extended-forecast';
 @import 'hourly';
 @import 'latest-observations';
 @import 'local-forecast';
 @import 'progress';
+@import 'radar';
 @import 'regional-forecast';
-@import 'weather-display';

server/styles/scss/shared/_colors.scss

@@ -7,6 +7,11 @@ $column-header: rgb(32, 0, 87);
 $gradient-main-background-1: #102080;
 $gradient-main-background-2: #001040;
 
+$gradient-loading-1: #09246f;
+$gradient-loading-2: #364ac0;
+$gradient-loading-3: #4f99f9;
+$gradient-loading-4: #8ffdfa;
+
 $extended-low: #8080FF;
 
 $blue-box: #26235a;

views/index.ejs

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

views/partials/progress.ejs

@@ -13,3 +13,9 @@
     </div>
   </div>
 </div>
+<div class="scroll">
+  <div class="progress-bar-container show">
+    <div class="progress-bar"></div>
+    <div class="cover"></div>
+  </div>
+</div>

views/partials/radar.ejs

@@ -0,0 +1,21 @@
+<div class="header">
+  <div class="logo"><img src="images/Logo3.png" /></div>
+  <div class="title dual">
+    <div class="top">
+      Local
+    </div>
+    <div class="bottom">
+      Radar
+    </div>
+  </div>
+</div>
+
+<div class="main radar">
+  <div class="container">
+    <div class="frame">
+      <div class="map">
+        <img src="" />
+      </div>
+    </div>
+  </div>
+</div>

ws4kp.code-workspace

@@ -6,12 +6,13 @@
 	],
 	"settings": {
 		"search.exclude": {
-			"**/node_modules": true,
-			"**/bower_components": true,
 			"**/*.code-search": true,
-			"dist/**": true,
+			"**/*.css": true,
 			"**/*.min.js": true,
+			"**/bower_components": true,
+			"**/node_modules": true,
 			"**/vendor": true,
+			"dist/**": true
 		},
 		"cSpell.enabled": true,
 		"cSpell.words": [