regional forecast font cleanup
This commit is contained in:
Matt Walsh
parent
0cecf8a458
commit
80958226ce
10
.vscode/launch.json
vendored
10
.vscode/launch.json
vendored
|
|
@ -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
2
.vscode/settings.json
vendored
|
|
@ -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
BIN
server/fonts/Star4000 Large-old.ttf
Normal file
Binary file not shown.
Binary file not shown.
|
|
@ -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');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 +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"}
|
|
||||||
|
|
@ -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
1
server/styles/main.css
Normal file
File diff suppressed because one or more lines are too long
1
server/styles/main.css.map
Normal file
1
server/styles/main.css.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
365
server/styles/scss/_page.scss
Normal 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
85
server/styles/scss/_progress.scss
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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
9
server/styles/scss/main.scss
Normal 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';
|
||||||
|
|
@ -8,3 +8,5 @@ $gradient-main-background-1: #102080;
|
||||||
$gradient-main-background-2: #001040;
|
$gradient-main-background-2: #001040;
|
||||||
|
|
||||||
$extended-low: #8080FF;
|
$extended-low: #8080FF;
|
||||||
|
|
||||||
|
$blue-box: #26235a;
|
||||||
262
views/index.ejs
262
views/index.ejs
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
15
views/partials/progress.ejs
Normal 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>
|
||||||
|
|
@ -42,5 +42,11 @@
|
||||||
"**/twc3.js",
|
"**/twc3.js",
|
||||||
],
|
],
|
||||||
"editor.tabSize": 2,
|
"editor.tabSize": 2,
|
||||||
|
"emmet.includeLanguages": {
|
||||||
|
"ejs": "html",
|
||||||
|
},
|
||||||
|
"[html]": {
|
||||||
|
"editor.defaultFormatter": "j69.ejs-beautify"
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue