lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

regional forecast font cleanup

Browse source
This commit is contained in:
Matt Walsh 2022-08-05 14:03:14 -05:00
parent 0cecf8a458
commit 80958226ce
27 changed files with 708 additions and 1051 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.vscode/launch.json vendored
View file

@ -4,18 +4,17 @@
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"name": "Frontend", "name": "Frontend",
"request": "launch", "request": "launch",
"type": "pwa-chrome", "type": "chrome",
"url": "http://localhost:8080", "url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/server", "webRoot": "${workspaceFolder}/server",
"skipFiles": [ "skipFiles": [
"<node_internals>/**", "<node_internals>/**",
"**/*.min.js", "**/*.min.js",
"**/vendor/**" "**/vendor/**"
] ],
}, },
{ {
"name": "Data:stations", "name": "Data:stations",
@ -40,7 +39,10 @@
"compounds": [ "compounds": [
{ {
"name": "Compound", "name": "Compound",
"configurations": ["Frontend", "Server"] "configurations": [
"Frontend",
"Server"
]
} }
] ]
} }

2
.vscode/settings.json vendored
View file

@ -4,7 +4,7 @@
], ],
"liveSassCompile.settings.formats": [ "liveSassCompile.settings.formats": [
{ {
"format": "expanded", "format": "compressed",
"extensionName": ".css", "extensionName": ".css",
"savePath": "/server/styles", "savePath": "/server/styles",
"savePathSegmentKeys": null, "savePathSegmentKeys": null,

BIN
server/fonts/Star4000 Large-old.ttf Normal file
View file

Binary file not shown.

BIN
server/fonts/Star4000 Large.ttf
View file

Binary file not shown.

108
server/scripts/modules/progress.js
View file

@ -1,11 +1,11 @@
// regional forecast and observations // regional forecast and observations
/* globals WeatherDisplay, utils, STATUS, draw, navigation */ /* globals WeatherDisplay, utils, STATUS, navigation */
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
class Progress extends WeatherDisplay { class Progress extends WeatherDisplay {
constructor(navId, elemId) { constructor(navId, elemId) {
super(navId, elemId); super(navId, elemId, '', false, true);
// pre-load background image (returns promise) // pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png'); this.backgroundImage = utils.image.load('images/BackGround1_1.png');
@ -14,103 +14,91 @@ class Progress extends WeatherDisplay {
this.timing = false; this.timing = false;
this.version = document.getElementById('version').innerHTML; this.version = document.getElementById('version').innerHTML;
// setup event listener
this.elem.querySelector('.container').addEventListener('click', this.lineClick.bind(this));
} }
async drawCanvas(displays, loadedCount) { async drawCanvas(displays, loadedCount) {
super.drawCanvas(); super.drawCanvas();
// set up an event listener
if (!this.eventListener) {
this.eventListener = true;
this.canvas.addEventListener('click', (e) => this.canvasClick(e), false);
}
// get the background image
const backgroundImage = await this.backgroundImage;
// only draw the background once
if (!this.backgroundDrawn) {
this.context.drawImage(backgroundImage, 0, 0, 640, 480, 0, 0, 640, 480);
draw.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
draw.titleText(this.context, 'WeatherStar', `4000+ ${this.version}`);
}
this.finishDraw();
// if no displays provided just draw the backgrounds (above) // if no displays provided just draw the backgrounds (above)
if (!displays) return; if (!displays) return;
displays.forEach((display, idx) => { const lines = displays.map((display, index) => {
const y = 120 + idx * 29; const fill = {};
const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
draw.text(this.context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
let statusText; fill.name = display.name;
let statusColor;
let statusClass;
switch (display.status) { switch (display.status) {
case STATUS.loading: case STATUS.loading:
statusText = 'Loading'; statusClass = 'loading';
statusColor = '#ffff00';
break; break;
case STATUS.loaded: case STATUS.loaded:
statusText = 'Press Here'; statusClass = 'press-here';
statusColor = '#00ff00';
this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25);
break; break;
case STATUS.failed: case STATUS.failed:
statusText = 'Failed'; statusClass = 'failed';
statusColor = '#ff0000';
break; break;
case STATUS.noData: case STATUS.noData:
statusText = 'No Data'; statusClass = 'no-data';
statusColor = '#C0C0C0';
draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
break; break;
case STATUS.disabled: case STATUS.disabled:
statusText = 'Disabled'; statusClass = 'disabled';
statusColor = '#C0C0C0';
this.context.drawImage(backgroundImage, 470, y - 20, 45, 25, 470, y - 20, 45, 25);
break; break;
default: default:
} }
// Erase any dots that spill into the status text.
this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30); // make the line
draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end'); const line = this.fillTemplate('item', fill);
}); // because of timing, this might get called before the template is loaded
if (!line) return false;
// update the status
const links = line.querySelector('.links');
links.classList.remove('loading');
links.classList.add(statusClass);
links.dataset.index = index;
return line;
}).filter((d) => d);
// get the container and update
const container = this.elem.querySelector('.container');
container.innerHTML = '';
container.append(...lines);
this.finishDraw();
// calculate loaded percent // calculate loaded percent
const loadedPercent = (loadedCount / displays.length); const loadedPercent = (loadedCount / displays.length);
if (loadedPercent < 1.0) { if (loadedPercent < 1.0) {
// Draw a box for the progress. // Draw a box for the progress.
draw.box(this.context, '#000000', 51, 428, 534, 22);
draw.box(this.context, '#ffffff', 53, 430, 530, 18);
// update the progress gif
draw.box(this.context, '#1d7fff', 55, 432, 526 * loadedPercent, 14);
} else { } else {
// restore the background // restore the background
this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22);
} }
} }
canvasClick(e) { lineClick(e) {
// un-scale // get index
const scale = e.target.getBoundingClientRect().width / e.target.width; const indexRaw = e.target?.parentNode?.dataset?.index;
const x = e.offsetX / scale; if (indexRaw === undefined) return;
const y = e.offsetY / scale; const index = +indexRaw;
// eliminate off canvas and outside area clicks
if (!this.isActive()) return;
if (y < 100 || y > 410) return;
if (x < 440 || x > 570) return;
// stop playing // stop playing
navigation.message('navButton'); navigation.message('navButton');
// use the y value to determine an index // use the y value to determine an index
const index = Math.floor((y - 100) / 29);
const display = navigation.getDisplay(index); const display = navigation.getDisplay(index);
if (display && display.status === STATUS.loaded) { if (display && display.status === STATUS.loaded) {
display.showCanvas(navigation.msg.command.firstFrame); display.showCanvas(navigation.msg.command.firstFrame);
this.hideCanvas(); if (this.canvas) {
this.canvas.style.display = 'none';
}
if (this.isHtml) {
this.elem.classList.remove('show');
}
} }
} }
} }

441
server/styles/compiled.css
View file

@ -1,441 +0,0 @@
.weather-display {
width: 640px;
height: 480px;
overflow: hidden;
position: relative;
background-image: url(../images/BackGround1_1.png);
/* this method is required to hide blocks so they can be measured while off screen */
height: 0px;
}
.weather-display.show {
height: 480px;
}
.weather-display .template {
display: none;
}
.weather-display .header {
width: 640px;
height: 60px;
padding-top: 30px;
}
.weather-display .header .title {
color: yellow;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
font-family: "Star4000";
font-size: 24pt;
position: absolute;
width: 250px;
}
.weather-display .header .title.single {
left: 170px;
top: 25px;
}
.weather-display .header .title.dual {
left: 170px;
}
.weather-display .header .title.dual > div {
position: absolute;
}
.weather-display .header .title.dual .top {
top: -3px;
}
.weather-display .header .title.dual .bottom {
top: 26px;
}
.weather-display .header .logo {
top: 30px;
left: 50px;
position: absolute;
z-index: 10;
}
.weather-display .header .noaa-logo {
position: absolute;
top: 39px;
left: 356px;
}
.weather-display .header .title.single {
top: 40px;
}
.weather-display .header .date-time {
white-space: pre;
color: white;
font-family: "Star4000 Small";
font-size: 24pt;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
left: 415px;
width: 170px;
text-align: right;
position: absolute;
}
.weather-display .header .date-time.date {
padding-top: 22px;
}
.weather-display .main {
position: relative;
}
.weather-display .main.has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
}
.weather-display .main.has-box {
margin-left: 64px;
margin-right: 64px;
width: calc(100% - 128px);
}
.weather-display .scroll {
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
width: 640px;
height: 80px;
overflow: hidden;
margin-top: 10px;
}
.weather-display .scroll .fixed {
font-family: "Star4000";
font-size: 24pt;
margin-left: 55px;
}
.weather-display .main.hourly.main {
overflow-y: hidden;
}
.weather-display .main.hourly.main .column-headers {
background-color: rgb(32, 0, 87);
height: 20px;
position: absolute;
width: 100%;
}
.weather-display .main.hourly.main .column-headers {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}
.weather-display .main.hourly.main .column-headers div {
display: inline-block;
font-family: "Star4000 Small";
font-size: 24pt;
color: yellow;
position: absolute;
top: -14px;
z-index: 5;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
}
.weather-display .main.hourly.main .column-headers .temp {
left: 355px;
}
.weather-display .main.hourly.main .column-headers .like {
left: 435px;
}
.weather-display .main.hourly.main .column-headers .wind {
left: 535px;
}
.weather-display .main.hourly.main .hourly-lines {
min-height: 338px;
padding-top: 10px;
background: repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px);
}
.weather-display .main.hourly.main .hourly-lines .hourly-row {
font-family: "Star4000 Large";
font-size: 24pt;
height: 72px;
color: yellow;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
position: relative;
}
.weather-display .main.hourly.main .hourly-lines .hourly-row > div {
position: absolute;
white-space: pre;
top: 8px;
}
.weather-display .main.hourly.main .hourly-lines .hourly-row .hour {
left: 25px;
}
.weather-display .main.hourly.main .hourly-lines .hourly-row .icon {
left: 255px;
width: 70px;
text-align: center;
top: unset;
}
.weather-display .main.hourly.main .hourly-lines .hourly-row .temp {
left: 355px;
}
.weather-display .main.hourly.main .hourly-lines .hourly-row .like {
left: 425px;
}
.weather-display .main.hourly.main .hourly-lines .hourly-row .wind {
left: 505px;
width: 100px;
text-align: right;
}
.weather-display .main.current-weather.main .col {
height: 50px;
width: 255px;
display: inline-block;
margin-top: 10px;
position: absolute;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
}
.weather-display .main.current-weather.main .col.left {
font-family: "Star4000 Extended";
font-size: 24pt;
}
.weather-display .main.current-weather.main .col.right {
right: 0px;
font-family: "Star4000 Large";
font-size: 20px;
font-weight: bold;
}
.weather-display .main.current-weather.main .col.right .row {
margin-bottom: 12px;
}
.weather-display .main.current-weather.main .col.right .row .label,
.weather-display .main.current-weather.main .col.right .row .value {
display: inline-block;
}
.weather-display .main.current-weather.main .col.right .row .label {
margin-left: 20px;
}
.weather-display .main.current-weather.main .col.right .row .value {
float: right;
margin-right: 10px;
}
.weather-display .main.current-weather.main .center {
text-align: center;
}
.weather-display .main.current-weather.main .temp {
font-family: "Star4000 Large";
font-size: 24pt;
}
.weather-display .main.current-weather.main .icon {
height: 100px;
}
.weather-display .main.current-weather.main .icon img {
max-width: 126px;
}
.weather-display .main.current-weather.main .wind-container {
margin-bottom: 10px;
}
.weather-display .main.current-weather.main .wind-container > div {
width: 45%;
display: inline-block;
margin: 0px;
}
.weather-display .main.current-weather.main .wind-container .wind-label {
margin-left: 5px;
}
.weather-display .main.current-weather.main .wind-container .wind {
text-align: right;
}
.weather-display .main.current-weather.main .wind-gusts {
margin-left: 5px;
}
.weather-display .main.current-weather.main .location {
color: yellow;
margin-bottom: 10px;
}
.weather-display .local-forecast .container {
position: relative;
top: 15px;
margin: 0px 10px;
box-sizing: border-box;
height: 280px;
overflow: hidden;
}
.weather-display .local-forecast .forecasts {
position: relative;
}
.weather-display .local-forecast .forecast {
font-family: "Star4000";
font-size: 24pt;
text-transform: uppercase;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
min-height: 280px;
line-height: 40px;
}
.weather-display .latest-observations.main {
overflow-y: hidden;
}
.weather-display .latest-observations.main .column-headers {
height: 20px;
position: absolute;
width: 100%;
}
.weather-display .latest-observations.main .column-headers {
top: 0px;
}
.weather-display .latest-observations.main .column-headers div {
display: inline-block;
font-family: "Star4000 Small";
font-size: 24pt;
position: absolute;
top: -14px;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
}
.weather-display .latest-observations.main .column-headers .temp {
display: none;
}
.weather-display .latest-observations.main .column-headers .temp.show {
display: inline-block;
}
.weather-display .latest-observations.main .temp {
left: 230px;
}
.weather-display .latest-observations.main .weather {
left: 280px;
}
.weather-display .latest-observations.main .wind {
left: 430px;
}
.weather-display .latest-observations.main .observation-lines {
min-height: 338px;
padding-top: 10px;
}
.weather-display .latest-observations.main .observation-lines .observation-row {
font-family: "Star4000";
font-size: 24pt;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
position: relative;
height: 40px;
}
.weather-display .latest-observations.main .observation-lines .observation-row > div {
position: absolute;
top: 8px;
}
.weather-display .latest-observations.main .observation-lines .observation-row .wind {
white-space: pre;
text-align: right;
}
#regional-forecast-html.weather-display {
background-image: url("../images/BackGround5_1.png");
}
.weather-display .main.regional-forecast {
position: relative;
}
.weather-display .main.regional-forecast .map {
position: absolute;
}
.weather-display .main.regional-forecast .location {
position: absolute;
width: 140px;
margin-left: -40px;
margin-top: -35px;
}
.weather-display .main.regional-forecast .location > div {
position: absolute;
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
}
.weather-display .main.regional-forecast .location .icon {
top: 26px;
left: 44px;
}
.weather-display .main.regional-forecast .location .icon img {
max-height: 32px;
}
.weather-display .main.regional-forecast .location .temp {
font-family: "Star4000 Large Compressed";
font-size: 28px;
color: yellow;
top: 32px;
text-align: right;
width: 40px;
}
.weather-display .main.regional-forecast .location .city {
font-family: Star4000;
font-size: 20px;
}
#extended-forecast-html.weather-display {
background-image: url("../images/BackGround2_1.png");
}
.weather-display .main.extended-forecast .day-container {
margin-top: 16px;
margin-left: 27px;
}
.weather-display .main.extended-forecast .day {
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black;
padding: 5px;
height: 285px;
width: 155px;
display: inline-block;
margin: 0px 15px;
font-family: "Star4000";
font-size: 24pt;
}
.weather-display .main.extended-forecast .day .date {
text-transform: uppercase;
text-align: center;
color: yellow;
}
.weather-display .main.extended-forecast .day .condition {
text-align: center;
height: 74px;
margin-top: 10px;
}
.weather-display .main.extended-forecast .day .icon {
text-align: center;
height: 75px;
}
.weather-display .main.extended-forecast .day .icon img {
max-height: 75px;
}
.weather-display .main.extended-forecast .day .temperatures {
width: 100%;
margin-top: 5px;
}
.weather-display .main.extended-forecast .day .temperatures .temperature-block {
display: inline-block;
width: 44%;
}
.weather-display .main.extended-forecast .day .temperatures .temperature-block > div {
text-align: center;
}
.weather-display .main.extended-forecast .day .temperatures .temperature-block .value {
font-family: "Star4000 Large";
margin-top: 4px;
}
.weather-display .main.extended-forecast .day .temperatures .temperature-block.lo .label {
color: #8080FF;
}
.weather-display .main.extended-forecast .day .temperatures .temperature-block.hi .label {
color: yellow;
}/*# sourceMappingURL=compiled.css.map */

1
server/styles/compiled.css.map
View file

@ -1 +0,0 @@
{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss","scss/_local-forecast.scss","scss/_latest-observations.scss","scss/_regional-forecast.scss","scss/_extended-forecast.scss"],"names":[],"mappings":"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","file":"compiled.css"}

364
server/styles/index.css
View file

@ -1,364 +0,0 @@
@font-face
{
font-family: "Star4000";
src: url('../fonts/Star4000.woff') format('woff');
}
body
{
font-family: "Star4000";
}
input, button
{
font-family: "Star4000";
}
#imgGetGps
{
height: 13px;
vertical-align: middle;
}
#txtAddress
{
width: 490px;
font-size: 16pt;
}
#btnGetGps, #btnGetLatLng, #btnClearQuery
{
font-size: 16pt;
}
.autocomplete-suggestions
{
background-color: #ffffff;
border: 1px solid #000000;
/*overflow: auto;*/
}
.autocomplete-suggestion
{
/*padding: 2px 5px;*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16pt;
}
.autocomplete-selected
{
background-color: #0000ff;
color: #ffffff;
}
#divTwc
{
display: block;
background-color: #000000;
color: #ffffff;
width: 100%;
max-width: 640px;
}
#divTwcLeft
{
display: none;
text-align: right;
flex-direction: column;
vertical-align: middle;
}
#divTwcLeft > div
{
flex: 1;
padding-right: 12px;
display: flex;
flex-direction: column;
justify-content: center;
}
#divTwcRight
{
text-align: left;
display: none;
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: #000000;
color: #ffffff;
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
{
width: 100%;
display: flex;
flex-direction: row;
background-color: #000000;
color: #ffffff;
max-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;
}
.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');
}
#display
{
font-family: "Star4000";
margin: 0 0 0 0;
/* overflow: hidden; */
width: 100%;
/* height: 480px; */
/* max-width: 640px; */
}
jsgif
{
display: none;
}
#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';
}
#container {
position: relative;
width: 100%;
/* max-width: 640px; */
height: 100%;
max-height: 480;
background-image: url(../images/BackGround1_1.png);
}
#divTwc:fullscreen #container {
background-image: none;
}
#loading {
width: 640px;
height: 480px;
max-width: 100%;
text-shadow: 4px 4px black;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
#loading .title {
font-family: Star4000 Large;
font-size: 36px;
color: yellow;
margin-bottom: 40px;
}
#loading .instructions {font-size: 18pt;}
#container canvas {
/* position: absolute; */
width: 100%;
/* max-width: 640px; */
}
.heading {
font-weight: bold;
margin-top: 15px;
}
#enabledDisplays {
margin-bottom: 15px;
}
#enabledDisplays label {
display: block;
max-width: 300px;
}
#divTwcBottom img {
zoom: 150%;
}
#divTwc:fullscreen {
display:flex;
align-items: center;
justify-content: center;
align-content: center;
}
#divTwc:fullscreen #display {
position: relative;
}
#divTwc:fullscreen #divTwcBottom {
display: flex;
flex-direction: row;
background-color: rgb(0 0 0 / 0.5);
color: #ffffff;
width: 100%;
position: absolute;
bottom: 0px;
}
@media screen and (orientation: portrait) {
#divTwc:fullscreen canvas {
width: 100vw;
max-width: 100vw;
height: auto;
}
#divTwc:fullscreen #container {
width: 100vw;
height: auto;
max-height: unset;
max-width: unset;
}
}
@media screen and (orientation: landscape) {
#divTwc:fullscreen canvas {
height: 100vh;
max-height: 100vh;
width: auto;
}
#divTwc:fullscreen #container {
height: 100vh;
width: auto;
max-width: 100vw;
max-height: unset;
}
}
.navButton {
cursor: pointer;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 1s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear
}

1
server/styles/main.css Normal file
View file

File diff suppressed because one or more lines are too long

1
server/styles/main.css.map Normal file
View file

File diff suppressed because one or more lines are too long

4
server/styles/scss/_current-weather.scss
View file

@ -1,5 +1,5 @@
@use 'colors'as c; @use 'shared/_colors'as c;
@use 'utils'as u; @use 'shared/_utils'as u;
.weather-display .main.current-weather { .weather-display .main.current-weather {
&.main { &.main {

6
server/styles/scss/_extended-forecast.scss
View file

@ -1,5 +1,5 @@
@use 'colors'as c; @use 'shared/_colors'as c;
@use 'utils'as u; @use 'shared/_utils'as u;
#extended-forecast-html.weather-display { #extended-forecast-html.weather-display {
background-image: url('../images/BackGround2_1.png'); background-image: url('../images/BackGround2_1.png');
@ -49,10 +49,10 @@
.temperature-block { .temperature-block {
display: inline-block; display: inline-block;
width: 44%; width: 44%;
vertical-align: top;
>div { >div {
text-align: center; text-align: center;
;
} }
.value { .value {

4
server/styles/scss/_hourly.scss
View file

@ -1,5 +1,5 @@
@use 'colors'as c; @use 'shared/_colors'as c;
@use 'utils'as u; @use 'shared/_utils'as u;
.weather-display .main.hourly { .weather-display .main.hourly {
&.main { &.main {

4
server/styles/scss/_latest-observations.scss
View file

@ -1,5 +1,5 @@
@use 'colors'as c; @use 'shared/_colors'as c;
@use 'utils'as u; @use 'shared/_utils'as u;
.weather-display .latest-observations { .weather-display .latest-observations {

4
server/styles/scss/_local-forecast.scss
View file

@ -1,5 +1,5 @@
@use 'colors'as c; @use 'shared/_colors'as c;
@use 'utils'as u; @use 'shared/_utils'as u;
.weather-display .local-forecast { .weather-display .local-forecast {
.container { .container {

365
server/styles/scss/_page.scss Normal file
View file

@ -0,0 +1,365 @@
@font-face {
font-family: "Star4000";
src: url('../fonts/Star4000.woff') format('woff');
}
body {
font-family: "Star4000";
}
input,
button {
font-family: "Star4000";
}
#imgGetGps {
height: 13px;
vertical-align: middle;
}
#txtAddress {
width: 490px;
font-size: 16pt;
}
#btnGetGps,
#btnGetLatLng,
#btnClearQuery {
font-size: 16pt;
}
.autocomplete-suggestions {
background-color: #ffffff;
border: 1px solid #000000;
/*overflow: auto;*/
}
.autocomplete-suggestion {
/*padding: 2px 5px;*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16pt;
}
.autocomplete-selected {
background-color: #0000ff;
color: #ffffff;
}
#divTwc {
display: block;
background-color: #000000;
color: #ffffff;
width: 100%;
max-width: 640px;
}
#divTwcLeft {
display: none;
text-align: right;
flex-direction: column;
vertical-align: middle;
}
#divTwcLeft>div {
flex: 1;
padding-right: 12px;
display: flex;
flex-direction: column;
justify-content: center;
}
#divTwcRight {
text-align: left;
display: none;
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: #000000;
color: #ffffff;
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 {
width: 100%;
display: flex;
flex-direction: row;
background-color: #000000;
color: #ffffff;
max-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;
}
.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.ttf') format('truetype');
}
@font-face {
font-family: 'Star4000 Small';
src: url('../fonts/Star4000 Small.woff') format('woff');
}
#display {
font-family: "Star4000";
margin: 0 0 0 0;
/* overflow: hidden; */
width: 100%;
/* height: 480px; */
/* max-width: 640px; */
}
jsgif {
display: none;
}
#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';
}
#container {
position: relative;
width: 100%;
/* max-width: 640px; */
height: 100%;
max-height: 480;
background-image: url(../images/BackGround1_1.png);
}
#divTwc:fullscreen #container {
background-image: none;
}
#loading {
width: 640px;
height: 480px;
max-width: 100%;
text-shadow: 4px 4px black;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
#loading .title {
font-family: Star4000 Large;
font-size: 36px;
color: yellow;
margin-bottom: 40px;
}
#loading .instructions {
font-size: 18pt;
}
#container canvas {
/* position: absolute; */
width: 100%;
/* max-width: 640px; */
}
.heading {
font-weight: bold;
margin-top: 15px;
}
#enabledDisplays {
margin-bottom: 15px;
}
#enabledDisplays label {
display: block;
max-width: 300px;
}
#divTwcBottom img {
zoom: 150%;
}
#divTwc:fullscreen {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
#divTwc:fullscreen #display {
position: relative;
}
#divTwc:fullscreen #divTwcBottom {
display: flex;
flex-direction: row;
background-color: rgb(0 0 0 / 0.5);
color: #ffffff;
width: 100%;
position: absolute;
bottom: 0px;
}
@media screen and (orientation: portrait) {
#divTwc:fullscreen canvas {
width: 100vw;
max-width: 100vw;
height: auto;
}
#divTwc:fullscreen #container {
width: 100vw;
height: auto;
max-height: unset;
max-width: unset;
}
}
@media screen and (orientation: landscape) {
#divTwc:fullscreen canvas {
height: 100vh;
max-height: 100vh;
width: auto;
}
#divTwc:fullscreen #container {
height: 100vh;
width: auto;
max-width: 100vw;
max-height: unset;
}
}
.navButton {
cursor: pointer;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 1s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear
}

85
server/styles/scss/_progress.scss Normal file
View file

@ -0,0 +1,85 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
.weather-display .progress {
@include u.text-shadow();
font-family: 'Star4000 Extended';
font-size: 19pt;
.container {
position: relative;
top: 15px;
margin: 0px 10px;
box-sizing: border-box;
height: 280px;
overflow: hidden;
.item {
position: relative;
.name {
white-space: nowrap;
&::after {
content: '........................................................................';
}
}
.links {
position: absolute;
text-align: right;
right: 0px;
top: 0px;
>div {
background-color: c.$blue-box;
display: none;
padding-left: 4px;
}
.loading {
color: #ffff00;
}
.press-here {
color: #00ff00;
cursor: pointer;
}
.failed {
color: #ff0000;
}
.no-data {
color: #C0C0C0;
}
.disabled {
color: #C0C0C0;
}
&.loading .loading {
display: block;
}
&.press-here .press-here {
display: block;
}
&.failed .failed {
display: block;
}
&.no-data .no-data {
display: block;
}
&.disabled .disabled {
display: block;
}
}
}
}
}

8
server/styles/scss/_regional-forecast.scss
View file

@ -1,5 +1,5 @@
@use 'colors'as c; @use 'shared/_colors'as c;
@use 'utils'as u; @use 'shared/_utils'as u;
#regional-forecast-html.weather-display { #regional-forecast-html.weather-display {
background-image: url('../images/BackGround5_1.png'); background-image: url('../images/BackGround5_1.png');
@ -35,10 +35,10 @@
} }
.temp { .temp {
font-family: 'Star4000 Large Compressed'; font-family: 'Star4000 Large';
font-size: 28px; font-size: 28px;
color: c.$title-color; color: c.$title-color;
top: 32px; top: 28px;
text-align: right; text-align: right;
width: 40px; width: 40px;
} }

4
server/styles/scss/_weatherdisplay.scss → server/styles/scss/_weather-display.scss
View file

@ -1,5 +1,5 @@
@use 'colors'as c; @use 'shared/_colors'as c;
@use 'utils'as u; @use 'shared/_utils'as u;
.weather-display { .weather-display {
width: 640px; width: 640px;

7
server/styles/scss/compiled.scss
View file

@ -1,7 +0,0 @@
@use '_weatherdisplay';
@use '_hourly';
@use '_current-weather';
@use '_local-forecast';
@use '_latest-observations';
@use '_regional-forecast';
@use '_extended-forecast';

9
server/styles/scss/main.scss Normal file
View file

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

4
server/styles/scss/_colors.scss → server/styles/scss/shared/_colors.scss
View file

@ -7,4 +7,6 @@ $column-header: rgb(32, 0, 87);
$gradient-main-background-1: #102080; $gradient-main-background-1: #102080;
$gradient-main-background-2: #001040; $gradient-main-background-2: #001040;
$extended-low: #8080FF; $extended-low: #8080FF;
$blue-box: #26235a;

0
server/styles/scss/_utils.scss → server/styles/scss/shared/_utils.scss
View file

262
views/index.ejs
View file

@ -3,159 +3,155 @@
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WeatherStar 4000+</title> <title>WeatherStar 4000+</title>
<meta name="description" <meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" /> <meta name="keywords" content="WeatherStar 4000+" />
<meta name="keywords" content="WeatherStar 4000+" /> <meta name="author" content="Matt Walsh" />
<meta name="author" content="Matt Walsh" /> <meta name="application-name" content="WeatherStar 4000+" />
<meta name="application-name" content="WeatherStar 4000+" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<link rel="icon" href="images/Logo192.png" /> <link rel="icon" href="images/Logo192.png" />
<% if (production) { %> <% if (production) { %>
<link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" /> <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
<script type="text/javascript" src="resources/data.min.js?_=<%=production%>"></script> <script type="text/javascript" src="resources/data.min.js?_=<%=production%>"></script>
<script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script> <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
<% } else { %> <% } else { %>
<link rel="stylesheet" type="text/css" href="styles/index.css" /> <link rel="stylesheet" type="text/css" href="styles/main.css" />
<link rel="stylesheet" type="text/css" href="styles/compiled.css" /> <script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script>
<script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script> <script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script> <script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
<script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script> <script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script>
<script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script> <script type="text/javascript" src="scripts/vendor/jquery.touchswipe.min.js"></script>
<script type="text/javascript" src="scripts/vendor/jquery.touchswipe.min.js"></script> <script type="text/javascript" src="scripts/index.js"></script>
<script type="text/javascript" src="scripts/index.js"></script> <script type="text/javascript" src="scripts/data/states.js"></script>
<script type="text/javascript" src="scripts/data/states.js"></script>
<script type="text/javascript" src="scripts/libgif.js"></script> <script type="text/javascript" src="scripts/libgif.js"></script>
<script type="text/javascript" src="scripts/vendor/auto/luxon.js"></script> <script type="text/javascript" src="scripts/vendor/auto/luxon.js"></script>
<script type="text/javascript" src="scripts/vendor/auto/suncalc.js"></script> <script type="text/javascript" src="scripts/vendor/auto/suncalc.js"></script>
<script type="text/javascript" src="scripts/data/travelcities.js"></script> <script type="text/javascript" src="scripts/data/travelcities.js"></script>
<script type="text/javascript" src="scripts/data/regionalcities.js"></script> <script type="text/javascript" src="scripts/data/regionalcities.js"></script>
<script type="text/javascript" src="scripts/data/stations.js"></script> <script type="text/javascript" src="scripts/data/stations.js"></script>
<script type="text/javascript" src="scripts/modules/draw.js"></script> <script type="text/javascript" src="scripts/modules/draw.js"></script>
<script type="text/javascript" src="scripts/modules/weatherdisplay.js"></script> <script type="text/javascript" src="scripts/modules/weatherdisplay.js"></script>
<script type="text/javascript" src="scripts/modules/icons.js"></script> <script type="text/javascript" src="scripts/modules/icons.js"></script>
<script type="text/javascript" src="scripts/modules/utilities.js"></script> <script type="text/javascript" src="scripts/modules/utilities.js"></script>
<script type="text/javascript" src="scripts/modules/currentweather.js"></script> <script type="text/javascript" src="scripts/modules/currentweather.js"></script>
<script type="text/javascript" src="scripts/modules/currentweatherscroll.js"></script> <script type="text/javascript" src="scripts/modules/currentweatherscroll.js"></script>
<script type="text/javascript" src="scripts/modules/latestobservations.js"></script> <script type="text/javascript" src="scripts/modules/latestobservations.js"></script>
<script type="text/javascript" src="scripts/modules/travelforecast.js"></script> <script type="text/javascript" src="scripts/modules/travelforecast.js"></script>
<script type="text/javascript" src="scripts/modules/regionalforecast.js"></script> <script type="text/javascript" src="scripts/modules/regionalforecast.js"></script>
<script type="text/javascript" src="scripts/modules/localforecast.js"></script> <script type="text/javascript" src="scripts/modules/localforecast.js"></script>
<script type="text/javascript" src="scripts/modules/extendedforecast.js"></script> <script type="text/javascript" src="scripts/modules/extendedforecast.js"></script>
<script type="text/javascript" src="scripts/modules/almanac.js"></script> <script type="text/javascript" src="scripts/modules/almanac.js"></script>
<script type="text/javascript" src="scripts/modules/radar.js"></script> <script type="text/javascript" src="scripts/modules/radar.js"></script>
<script type="text/javascript" src="scripts/modules/hourly.js"></script> <script type="text/javascript" src="scripts/modules/hourly.js"></script>
<script type="text/javascript" src="scripts/modules/progress.js"></script> <script type="text/javascript" src="scripts/modules/progress.js"></script>
<script type="text/javascript" src="scripts/modules/navigation.js"></script> <script type="text/javascript" src="scripts/modules/navigation.js"></script>
<% } %> <% } %>
</head> </head>
<body> <body>
<div id="divQuery"> <div id="divQuery">
<form id="frmGetLatLng"> <form id="frmGetLatLng">
<input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img id="imgGetGps" src="images/nav/ic_gps_fixed_black_18dp_1x.png" /></button>
type="button" title="Get GPS Location"><img id="imgGetGps" <input id="btnGetLatLng" type="submit" value="GO" />
src="images/nav/ic_gps_fixed_black_18dp_1x.png" /></button> <input id="btnClearQuery" type="reset" value="Reset" />
<input id="btnGetLatLng" type="submit" value="GO" /> </form>
<input id="btnClearQuery" type="reset" value="Reset" /> <div id="divLat"></div>
</form> <div id="divLng"></div>
<div id="divLat"></div> </div>
<div id="divLng"></div>
</div>
<br /> <br />
<img id="imgPause1x" src="images/nav/ic_pause_white_24dp_1x.png" /> <img id="imgPause1x" src="images/nav/ic_pause_white_24dp_1x.png" />
<img id="imgPause2x" src="images/nav/ic_pause_white_24dp_2x.png" /> <img id="imgPause2x" src="images/nav/ic_pause_white_24dp_2x.png" />
<div id="version" style="display:none"> <div id="version" style="display:none">
<%- version %> <%- version %>
</div> </div>
<div id="divTwc"> <div id="divTwc">
<div id="container"> <div id="container">
<div id="loading" width="640" height="480"> <div id="loading" width="640" height="480">
<div> <div>
<div class="title">WeatherStar 4000+</div> <div class="title">WeatherStar 4000+</div>
<div class="instructions">Enter your location above to continue</div> <div class="instructions">Enter your location above to continue</div>
</div> </div>
</div> </div>
<div id="hourly-html" class="weather-display"> <div id="progress-html" class="weather-display show">
<%- include('partials/hourly.ejs') %> <%- include('partials/progress.ejs') %>
</div> </div>
<div id="current-weather-html" class="weather-display"> <div id="hourly-html" class="weather-display">
<%- include('partials/current-weather.ejs') %> <%- include('partials/hourly.ejs') %>
</div> </div>
<div id="local-forecast-html" class="weather-display"> <div id="current-weather-html" class="weather-display">
<%- include('partials/local-forecast.ejs') %> <%- include('partials/current-weather.ejs') %>
</div> </div>
<div id="latest-observations-html" class="weather-display"> <div id="local-forecast-html" class="weather-display">
<%- include('partials/latest-observations.ejs') %> <%- include('partials/local-forecast.ejs') %>
</div> </div>
<div id="regional-forecast-html" class="weather-display"> <div id="latest-observations-html" class="weather-display">
<%- include('partials/regional-forecast.ejs') %> <%- include('partials/latest-observations.ejs') %>
</div> </div>
<div id="extended-forecast-html" class="weather-display"> <div id="regional-forecast-html" class="weather-display">
<%- include('partials/extended-forecast.ejs') %> <%- include('partials/regional-forecast.ejs') %>
</div> </div>
</div> <div id="extended-forecast-html" class="weather-display">
<div id="divTwcBottom"> <%- include('partials/extended-forecast.ejs') %>
<div id="divTwcBottomLeft"> </div>
<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" /> </div>
<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" <div id="divTwcBottom">
title="Previous" /> <div id="divTwcBottomLeft">
<img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" /> <img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />
<img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" /> <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" />
</div> <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" />
<div id="divTwcBottomMiddle"> <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" />
<img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /> </div>
</div> <div id="divTwcBottomMiddle">
<div id="divTwcBottomRight"> <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" />
<img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" </div>
title="Exit Fullscreen" /> <div id="divTwcBottomRight">
</div> <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" />
</div> </div>
</div> </div>
</div>
<br /> <br />
<div class="info"> <div class="info">
<a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a> <a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a>
</div> </div>
<div class='heading'>Selected displays</div> <div class='heading'>Selected displays</div>
<div id='enabledDisplays'> <div id='enabledDisplays'>
</div> </div>
<div id="divInfo"> <div id="divInfo">
Location: <span id="spanCity"></span> <span id="spanState"></span><br /> Location: <span id="spanCity"></span> <span id="spanState"></span><br />
Station Id: <span id="spanStationId"></span><br /> Station Id: <span id="spanStationId"></span><br />
Radar Id: <span id="spanRadarId"></span><br /> Radar Id: <span id="spanRadarId"></span><br />
Zone Id: <span id="spanZoneId"></span><br /> Zone Id: <span id="spanZoneId"></span><br />
</div> </div>
<div id="divRefresh"> <div id="divRefresh">
Last Update: <span id="spanLastRefresh">(None)</span><br /> Last Update: <span id="spanLastRefresh">(None)</span><br />
<input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" <input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label> </div>
</div>
<div id="divUnits"> <div id="divUnits">
Units: Units:
<input id="radEnglish" name="radUnits" type="radio" value="ENGLISH" /><label for="radEnglish">English</label> <input id="radEnglish" name="radUnits" type="radio" value="ENGLISH" /><label for="radEnglish">English</label>
<input id="radMetric" name="radUnits" type="radio" value="METRIC" /><label for="radMetric">Metric</label> <input id="radMetric" name="radUnits" type="radio" value="METRIC" /><label for="radMetric">Metric</label>
</div> </div>
</body> </body>

44
views/partials/extended-forecast.ejs
View file

@ -1,23 +1,23 @@
<%- include('header.ejs', {titleDual:{ top: 'Extended' , bottom: 'Forecast' }, hasTime: true }) %> <%- include('header.ejs', {titleDual:{ top: 'Extended' , bottom: 'Forecast' }, hasTime: true }) %>
<div class="main has-scroll extended-forecast"> <div class="main has-scroll extended-forecast">
<div class="day-container"> <div class="day-container">
<div class="day template"> <div class="day template">
<div class="date"></div> <div class="date"></div>
<div class="icon"> <div class="icon">
<img src="" /> <img src="" />
</div> </div>
<div class="condition"></div> <div class="condition"></div>
<div class="temperatures"> <div class="temperatures">
<div class="temperature-block lo"> <div class="temperature-block lo">
<div class="label">Lo</div> <div class="label">Lo</div>
<div class="value value-hi"></div> <div class="value value-lo"></div>
</div> </div>
<div class="temperature-block hi"> <div class="temperature-block hi">
<div class="label">Hi</div> <div class="label">Hi</div>
<div class="value value-lo"></div> <div class="value value-hi"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<%- include('scroll.ejs') %> <%- include('scroll.ejs') %>

15
views/partials/progress.ejs Normal file
View file

@ -0,0 +1,15 @@
<%- include('header.ejs', {titleDual:{ top: 'WeatherStar' , bottom: '4000+ v' + version }, hasTime: true}) %>
<div class="main has-box progress">
<div class="container">
<div class="item template">
<div class="name">Current Conditions</div>
<div class="links loading">
<div class="loading">Loading</div>
<div class="press-here">Press Here</div>
<div class="failed">Failed</div>
<div class="no-data">No Data</div>
<div class="disabled">Disabled</div>
</div>
</div>
</div>
</div>

6
ws4kp.code-workspace
View file

@ -42,5 +42,11 @@
"**/twc3.js", "**/twc3.js",
], ],
"editor.tabSize": 2, "editor.tabSize": 2,
"emmet.includeLanguages": {
"ejs": "html",
},
"[html]": {
"editor.defaultFormatter": "j69.ejs-beautify"
},
}, },
} }