separate data and css

This commit is contained in:
Matt Walsh 2020-09-08 10:05:46 -05:00
parent 180ac0c5fa
commit 4cf146c7a2
19 changed files with 59 additions and 109 deletions

2
dist/index.html vendored

File diff suppressed because one or more lines are too long

1
dist/resources/data.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/resources/index.min.css vendored Normal file
View file

@ -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}

1
dist/resources/twc3.min.css vendored Normal file
View file

@ -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}

View file

@ -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}

File diff suppressed because one or more lines are too long

2
dist/twc3.html vendored
View file

@ -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>

View file

@ -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 = [
'server/styles/*.css',
const css_sources_index = [
'server/styles/index.css',
];
gulp.task('compress_css', () =>
gulp.src(css_sources)
.pipe(concat('ws.min.css'))
gulp.task('compress_css_index', () =>
gulp.src(css_sources_index)
.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');

View file

@ -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');

View file

@ -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');

View file

@ -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;

View file

@ -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');

View file

@ -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());
if (index === undefined) console.error('No active display');
let index = displays.findIndex(display=>display.isActive());
// if there is no active display, default to the first one
if (index === -1) index = displays.length-1;
return index;
};
const currentDisplay = () => {

View file

@ -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);

View file

@ -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;

View file

@ -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');

View file

@ -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;*/
}

View file

@ -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>

View file

@ -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,16 +40,6 @@
<% } %>
</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>