separate data and css

dist/resources/index.min.css

@@ -0,0 +1 @@
+@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}body{font-family:Star4000}button,input{font-family:Star4000}#imgGetGps{height:13px;vertical-align:middle}#txtAddress{width:490px;font-size:16pt}#btnClearQuery,#btnGetGps,#btnGetLatLng{font-size:16pt}.autocomplete-suggestions{background-color:#fff;border:1px solid #000}.autocomplete-suggestion{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16pt}.autocomplete-selected{background-color:#00f;color:#fff}#divTwc{display:block;background-color:#000;color:#fff;width:640px}#divTwcMiddle{display:flex}#divTwcLeft{visibility:hidden;text-align:right;display:flex;flex-direction:column;vertical-align:middle}#divTwcLeft>div{flex:1;padding-right:12px;display:flex;flex-direction:column;justify-content:center}#divTwcRight{visibility:hidden;text-align:left;display:flex;flex-direction:column;vertical-align:middle}#divTwcRight>div{flex:1;padding-left:12px;display:flex;flex-direction:column;justify-content:center}#divTwcBottom{visibility:hidden;display:flex;flex-direction:row;background-color:#000;color:#fff;width:100%}#divTwcBottom>div{padding-left:6px;padding-right:6px}#divTwcBottomLeft{flex:1;text-align:left}#divTwcBottomMiddle{flex:0;text-align:center}#divTwcBottomRight{flex:1;text-align:right}#divTwcNavContainer{display:none}#divTwcNav{display:flex;flex-direction:row;background-color:#000;color:#fff;width:640px}#divTwcNav>div{padding-left:6px;padding-right:6px}#divTwcNavLeft{flex:1;text-align:left}#divTwcNavMiddle{flex:0;text-align:center}#divTwcNavRight{flex:1;text-align:right}#imgPause1x,#imgPause2x{visibility:hidden;position:absolute}#iframeTwc{width:640px;height:480px;overflow:hidden;border:0}.HideCursor{cursor:none!important}#txtScrollText{width:475px}

dist/resources/twc3.min.css

@@ -0,0 +1 @@
+@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}@font-face{font-family:"Star 4 Radar";src:url('../fonts/Star 4 Radar.woff') format('woff')}@font-face{font-family:'Star4000 Extended';src:url('../fonts/Star4000 Extended.woff') format('woff')}@font-face{font-family:Star4000LCN;src:url(../fonts/Star4000LCN.woff) format('woff')}@font-face{font-family:'Star4000 Large Compressed';src:url('../fonts/Star4000 Large Compressed.woff') format('woff')}@font-face{font-family:'Star4000 Large';src:url('../fonts/Star4000 Large.woff') format('woff')}@font-face{font-family:'Star4000 Small';src:url('../fonts/Star4000 Small.woff') format('woff')}body{font-family:Star4000;margin:0;overflow:hidden}input{font-family:Star4000}jsgif{display:none}.fontPreload{visibility:hidden;position:absolute}#Star4000{font-family:Star4000}#Star4000Extended{font-family:'Star4000 Extended'}#Star4000LargeCompressed{font-family:'Star4000 Large Compressed'}#Star4000Large{font-family:'Star4000 Large'}#Star4000LargeCompressedNumbers{font-family:Star4000LCN}#Star4000Small{font-family:'Star4000 Small'}#Star4Radar{font-family:'Star 4 Radar'}.HideCursor{cursor:none!important}#container{position:absolute}#container canvas{position:absolute}

dist/resources/ws.min.css

@@ -1 +0,0 @@
-@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}@font-face{font-family:"Star 4 Radar";src:url('../fonts/Star 4 Radar.woff') format('woff')}@font-face{font-family:'Star4000 Extended';src:url('../fonts/Star4000 Extended.woff') format('woff')}@font-face{font-family:'Star4000 Large Compressed Numbers';src:url('../fonts/Star4000 Large Compressed Numbers.woff') format('woff')}@font-face{font-family:'Star4000 Large Compressed';src:url('../fonts/Star4000 Large Compressed.woff') format('woff')}@font-face{font-family:'Star4000 Large';src:url('../fonts/Star4000 Large.woff') format('woff')}@font-face{font-family:'Star4000 Small';src:url('../fonts/Star4000 Small.woff') format('woff')}body{font-family:Star4000}button,input{font-family:Star4000}#imgGetGps{height:13px;vertical-align:middle}#txtAddress{width:490px;font-size:16pt}#btnClearQuery,#btnGetGps,#btnGetLatLng{font-size:16pt}.autocomplete-suggestions{background-color:#fff;border:1px solid #000}.autocomplete-suggestion{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16pt}.autocomplete-selected{background-color:#00f;color:#fff}#divTwc{display:block;background-color:#000;color:#fff;width:640px}#divTwcMiddle{display:flex}#divTwcLeft{visibility:hidden;text-align:right;display:flex;flex-direction:column;vertical-align:middle}#divTwcLeft>div{flex:1;padding-right:12px;display:flex;flex-direction:column;justify-content:center}#divTwcRight{visibility:hidden;text-align:left;display:flex;flex-direction:column;vertical-align:middle}#divTwcRight>div{flex:1;padding-left:12px;display:flex;flex-direction:column;justify-content:center}#divTwcBottom{visibility:hidden;display:flex;flex-direction:row;background-color:#000;color:#fff;width:100%}#divTwcBottom>div{padding-left:6px;padding-right:6px}#divTwcBottomLeft{flex:1;text-align:left}#divTwcBottomMiddle{flex:0;text-align:center}#divTwcBottomRight{flex:1;text-align:right}#divTwcNavContainer{display:none}#divTwcNav{display:flex;flex-direction:row;background-color:#000;color:#fff;width:640px}#divTwcNav>div{padding-left:6px;padding-right:6px}#divTwcNavLeft{flex:1;text-align:left}#divTwcNavMiddle{flex:0;text-align:center}#divTwcNavRight{flex:1;text-align:right}#imgPause1x,#imgPause2x{visibility:hidden;position:absolute}#iframeTwc{width:640px;height:480px;overflow:hidden;border:0}.HideCursor{cursor:none!important}#txtScrollText{width:475px}@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}@font-face{font-family:"Star 4 Radar";src:url('../fonts/Star 4 Radar.woff') format('woff')}@font-face{font-family:'Star4000 Extended';src:url('../fonts/Star4000 Extended.woff') format('woff')}@font-face{font-family:Star4000LCN;src:url(../fonts/Star4000LCN.woff) format('woff')}@font-face{font-family:'Star4000 Large Compressed';src:url('../fonts/Star4000 Large Compressed.woff') format('woff')}@font-face{font-family:'Star4000 Large';src:url('../fonts/Star4000 Large.woff') format('woff')}@font-face{font-family:'Star4000 Small';src:url('../fonts/Star4000 Small.woff') format('woff')}body{font-family:Star4000;margin:0;overflow:hidden}input{font-family:Star4000}jsgif{display:none}.fontPreload{visibility:hidden;position:absolute}#Star4000{font-family:Star4000}#Star4000Extended{font-family:'Star4000 Extended'}#Star4000LargeCompressed{font-family:'Star4000 Large Compressed'}#Star4000Large{font-family:'Star4000 Large'}#Star4000LargeCompressedNumbers{font-family:Star4000LCN}#Star4000Small{font-family:'Star4000 Small'}#Star4Radar{font-family:'Star 4 Radar'}.HideCursor{cursor:none!important}#container{position:absolute}#container canvas{position:absolute}

dist/twc3.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=2.2.0"><script type="text/javascript" src="resources/ws.min.js?_=2.2.0"></script></head><body><!-- This will force the browser to download the font before the canvas is rendered. --><div class="fontPreload" id="Star4000">123 This is a test</div><div class="fontPreload" id="Star4000Extended">123 This is a test</div><div class="fontPreload" id="Star4000LargeCompressedNumbers">123 This is a test</div><div class="fontPreload" id="Star4000LargeCompressed">123 This is a test</div><div class="fontPreload" id="Star4000Large">123 This is a test</div><div class="fontPreload" id="Star4000Small">123 This is a test</div><div class="fontPreload" id="Star4Radar">123 This is a test</div><div id="container"><canvas id="progressCanvas" width="640" height="480"></canvas></div></body></html>
+<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><link rel="preload" href="fonts/Star4000.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star 4 Radar.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Extended.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Large Compressed Numbers.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Large Compressed.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Large.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Small.woff" as="font" crossorigin="anonymous"><link rel="stylesheet" type="text/css" href="resources/twc3.min.css?_=2.2.0"><script type="text/javascript" src="resources/data.min.js"></script><script type="text/javascript" src="resources/ws.min.js?_=2.2.0"></script></head><body><div id="container"><canvas id="progressCanvas" width="640" height="480"></canvas></div></body></html>

gulp/publish-frontend.js

@@ -14,14 +14,23 @@ gulp.task('clean', () =>
 	del(['./dist**']),
 );
 
+const js_sources_data = [
+	'server/scripts/data/travelcities.js',
+	'server/scripts/data/regionalcities.js',
+	'server/scripts/data/stations.js',
+];
+gulp.task('compress_js_data', () =>
+	gulp.src(js_sources_data)
+		.pipe(concat('data.min.js'))
+		.pipe(terser())
+		.pipe(gulp.dest('./dist/resources')),
+);
+
 const js_sources = [
 	'server/scripts/vendor/jquery-3.5.1.min.js',
 	'server/scripts/vendor/libgif.js',
 	'server/scripts/vendor/luxon.js',
 	'server/scripts/vendor/suncalc.js',
-	'server/scripts/data/travelcities.js',
-	'server/scripts/data/regionalcities.js',
-	'server/scripts/data/stations.js',
 	'server/scripts/modules/draw.js',
 	'server/scripts/modules/weatherdisplay.js',
 	'server/scripts/modules/icons.js',
@@ -44,12 +53,22 @@ gulp.task('compress_js', () =>
 		.pipe(gulp.dest('./dist/resources')),
 );
 
-const css_sources = [
+const css_sources_index = [
-	'server/styles/*.css',
+	'server/styles/index.css',
 ];
-gulp.task('compress_css', () =>
+gulp.task('compress_css_index', () =>
-	gulp.src(css_sources)
+	gulp.src(css_sources_index)
-		.pipe(concat('ws.min.css'))
+		.pipe(concat('index.min.css'))
+		.pipe(cleanCSS())
+		.pipe(gulp.dest('./dist/resources')),
+);
+
+const css_sources_twc3 = [
+	'server/styles/twc3.css',
+];
+gulp.task('compress_css_twc3', () =>
+	gulp.src(css_sources_twc3)
+		.pipe(concat('twc3.min.css'))
 		.pipe(cleanCSS())
 		.pipe(gulp.dest('./dist/resources')),
 );
@@ -123,4 +142,4 @@ gulp.task('invalidate', async () => {
 	}).promise();
 });
 
-module.exports = gulp.series('clean', gulp.parallel('compress_js','compress_css', 'compress_html', 'copy_other_files'), 'upload', 'invalidate');
+module.exports = gulp.series('clean', gulp.parallel('compress_js','compress_js_data','compress_css_index','compress_css_twc3', 'compress_html', 'copy_other_files'), 'upload', 'invalidate');

server/scripts/modules/almanac.js

@@ -5,7 +5,7 @@
 // eslint-disable-next-line no-unused-vars
 class Almanac extends WeatherDisplay {
 	constructor(navId,elemId,weatherParameters) {
-		super(navId,elemId);
+		super(navId,elemId,'Almanac');
 
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround1_1.png');

server/scripts/modules/currentweather.js

@@ -4,7 +4,7 @@
 // eslint-disable-next-line no-unused-vars
 class CurrentWeather extends WeatherDisplay {
 	constructor(navId,elemId,weatherParameters) {
-		super(navId,elemId);
+		super(navId,elemId,'Current Conditions');
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
 

server/scripts/modules/extendedforecast.js

@@ -6,7 +6,7 @@
 // eslint-disable-next-line no-unused-vars
 class ExtendedForecast extends WeatherDisplay {
 	constructor(navId,elemId,weatherParameters) {
-		super(navId,elemId);
+		super(navId,elemId,'Extended Forecast');
 
 		// set timings
 		this.timing.totalScreens = 2;

server/scripts/modules/latestobservations.js

@@ -4,7 +4,7 @@
 // eslint-disable-next-line no-unused-vars
 class LatestObservations extends WeatherDisplay {
 	constructor(navId,elemId, weatherParameters) {
-		super(navId,elemId);
+		super(navId,elemId,'Latest Observations');
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
 

server/scripts/modules/navigation.js

@@ -176,7 +176,7 @@ const navigation = (() => {
 		},
 	};
 
-	// receive naivgation messages from displays
+	// receive navigation messages from displays
 	const displayNavMessage = (message) => {
 		if (message.type === msg.response.previous) loadDisplay(-1);
 		if (message.type === msg.response.next) loadDisplay(1);
@@ -208,8 +208,9 @@ const navigation = (() => {
 
 	// get the current display index or value
 	const currentDisplayIndex = () => {
-		const index = displays.findIndex(display=>display.isActive());
+		let index = displays.findIndex(display=>display.isActive());
-		if (index === undefined) console.error('No active display');
+		// if there is no active display, default to the first one
+		if (index === -1) index = displays.length-1;
 		return index;
 	};
 	const currentDisplay = () => {

server/scripts/modules/radar.js

@@ -4,7 +4,7 @@
 // eslint-disable-next-line no-unused-vars
 class Radar extends WeatherDisplay {
 	constructor(navId,elemId,weatherParameters) {
-		super(navId,elemId);
+		super(navId,elemId,'Local Radar');
 
 		// set max images
 		this.dopplerRadarImageMax = 6;
@@ -134,9 +134,6 @@ class Radar extends WeatherDisplay {
 				workingContext.drawImage(imgBlob, 0, 0, 2550, 1600);
 			}
 
-			// clean the image
-			this.removeDopplerRadarImageNoise(workingContext);
-
 			// get the base map
 			context.drawImage(await this.baseMap, sourceXY.x, sourceXY.y, offsetX*2, offsetY*2, 0, 0, 640, 367);
 
@@ -147,6 +144,8 @@ class Radar extends WeatherDisplay {
 			const cropContext = cropCanvas.getContext('2d');
 			cropContext.imageSmoothingEnabled = false;
 			cropContext.drawImage(workingCanvas, radarSourceX, radarSourceY, (radarOffsetX * 2), (radarOffsetY * 2.33), 0, 0, 640, 367);
+			// clean the image
+			this.removeDopplerRadarImageNoise(cropContext);
 
 			// merge the radar and map
 			this.mergeDopplerRadarImage(context, cropContext);

server/scripts/modules/regionalforecast.js

@@ -7,7 +7,7 @@
 // eslint-disable-next-line no-unused-vars
 class RegionalForecast extends WeatherDisplay {
 	constructor(navId,elemId, weatherParameters, period) {
-		super(navId,elemId);
+		super(navId,elemId,'Regional Forecast');
 		// store the period, see above
 		this.period = period;
 

server/scripts/modules/travelforecast.js

@@ -5,7 +5,7 @@
 class TravelForecast extends WeatherDisplay {
 	constructor(navId, elemId, weatherParameters) {
 		// special height and width for scrolling
-		super(navId, elemId);
+		super(navId, elemId, 'Travel Forecast');
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround6_1.png');
 

server/styles/index.css

@@ -2,38 +2,6 @@
 {
     font-family: "Star4000";
     src: url('../fonts/Star4000.woff') format('woff');
-    /*font-weight: bold;
-    font-style: italic;*/
-}
-@font-face 
-{
-    font-family: "Star 4 Radar";
-    src: url('../fonts/Star 4 Radar.woff') format('woff');
-}
-@font-face 
-{
-    font-family: 'Star4000 Extended';
-    src: url('../fonts/Star4000 Extended.woff') format('woff');
-}
-@font-face 
-{
-    font-family: 'Star4000 Large Compressed Numbers';
-    src: url('../fonts/Star4000 Large Compressed Numbers.woff') format('woff');
-}
-@font-face
- {
-    font-family: 'Star4000 Large Compressed';
-    src: url('../fonts/Star4000 Large Compressed.woff') format('woff');
-}
-@font-face 
-{
-    font-family: 'Star4000 Large';
-    src: url('../fonts/Star4000 Large.woff') format('woff');
-}
-@font-face
- {
-    font-family: 'Star4000 Small';
-    src: url('../fonts/Star4000 Small.woff') format('woff');
 }
 body
 {
@@ -53,7 +21,6 @@ input, button
 
 #txtAddress
 {
-    /*width: 400px;*/
     width: 490px;
     font-size: 16pt;
 }
@@ -82,31 +49,8 @@ input, button
 	background-color: #0000ff;
     color: #ffffff;
 }
-.autocomplete-suggestions strong
-{
-	/*font-weight: normal;*/
-	/*color: lightseagreen*/
-}
-.autocomplete-group
-{
-	/*padding: 2px 5px;*/
-}
-.autocomplete-group strong 
-{
-	/*display: block;
-	border-bottom: 1px solid black;*/
-}
-
-/*#Star4000LargeCompressedNumbers
-{
-    visibility: hidden;
-    position: absolute;
-    font-family: 'Star4000 Large Compressed Numbers';
-}*/
-
 #divTwc
 {
-    /*display: none;*/
     display: block;
     background-color: #000000;
     color: #ffffff;
@@ -133,8 +77,6 @@ input, button
     display: flex;
     flex-direction: column;
     justify-content: center;
-    /*position: relative;
-    top: 10%;*/
 }
 
 #divTwcRight
@@ -152,8 +94,6 @@ input, button
     display: flex;
     flex-direction: column;
     justify-content: center;
-    /*position: relative;
-    top: 10%;*/
 }
 
 #divTwcBottom
@@ -242,5 +182,4 @@ input, button
 #txtScrollText
 {
     width: 475px;
-    /*text-transform: uppercase;*/
 }

views/index.ejs

@@ -3,7 +3,7 @@
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta charset="utf-8" />
-
+	<link rel="preload" href="fonts/Star4000.woff" as="font" crossorigin="anonymous" />
     <title>WeatherStar 4000+</title>
     <meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
     <meta name="keywords" content="WeatherStar 4000+" />
@@ -16,16 +16,8 @@
     <link rel="manifest" href="manifest.json" />
 	<link rel="icon" href="images/Logo192.png" />
 
-    <link rel="preload" href="fonts/Star4000.woff" as="font" crossorigin="anonymous" />
-    <link rel="preload" href="fonts/Star 4 Radar.woff" as="font" crossorigin="anonymous" />
-    <link rel="preload" href="fonts/Star4000 Extended.woff" as="font" crossorigin="anonymous" />
-    <link rel="preload" href="fonts/Star4000 Large Compressed Numbers.woff" as="font" crossorigin="anonymous" />
-    <link rel="preload" href="fonts/Star4000 Large Compressed.woff" as="font" crossorigin="anonymous" />
-    <link rel="preload" href="fonts/Star4000 Large.woff" as="font" crossorigin="anonymous" />
-	<link rel="preload" href="fonts/Star4000 Small.woff" as="font" crossorigin="anonymous" />
-	
 	<% if (production) { %>
-		<link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
+		<link rel="stylesheet" type="text/css" href="resources/index.min.css?_=<%=production%>" />
 		<script type="text/javascript" src="scripts/vendor/jquery-3.5.1.min.js"></script>
 		<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
 		<script type="text/javascript" src="scripts/vendor/nosleep.min.js"></script>

views/twc3.ejs

@@ -3,8 +3,16 @@
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<meta charset="utf-8" />
+	<link rel="preload" href="fonts/Star4000.woff" as="font" crossorigin="anonymous" />
+    <link rel="preload" href="fonts/Star 4 Radar.woff" as="font" crossorigin="anonymous" />
+    <link rel="preload" href="fonts/Star4000 Extended.woff" as="font" crossorigin="anonymous" />
+    <link rel="preload" href="fonts/Star4000 Large Compressed Numbers.woff" as="font" crossorigin="anonymous" />
+    <link rel="preload" href="fonts/Star4000 Large Compressed.woff" as="font" crossorigin="anonymous" />
+    <link rel="preload" href="fonts/Star4000 Large.woff" as="font" crossorigin="anonymous" />
+	<link rel="preload" href="fonts/Star4000 Small.woff" as="font" crossorigin="anonymous" />
 	<% if (production) { %>
-    <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>">
+	<link rel="stylesheet" type="text/css" href="resources/twc3.min.css?_=<%=production%>">
+    <script type="text/javascript" src="resources/data.min.js"></script>
     <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
 	<% } else { %>
 	<link rel="stylesheet" type="text/css" href="styles/twc3.css">
@@ -32,19 +40,9 @@
 	<% } %>
 </head>
 <body>
-
-    <!-- This will force the browser to download the font before the canvas is rendered. -->
-    <div class="fontPreload" id="Star4000">123 This is a test</div>
-    <div class="fontPreload" id="Star4000Extended">123 This is a test</div>
-    <div class="fontPreload" id="Star4000LargeCompressedNumbers">123 This is a test</div>
-    <div class="fontPreload" id="Star4000LargeCompressed">123 This is a test</div>
-    <div class="fontPreload" id="Star4000Large">123 This is a test</div>
-    <div class="fontPreload" id="Star4000Small">123 This is a test</div>
-    <div class="fontPreload" id="Star4Radar">123 This is a test</div>
-
 	<div id="container">
     	<canvas id="progressCanvas" width="640" height="480"></canvas>
 	</div>
-    
+   
 </body>
 </html>