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
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
|
||||
{
|
||||
"name": "Frontend",
|
||||
"request": "launch",
|
||||
"type": "pwa-chrome",
|
||||
"type": "chrome",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}/server",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**",
|
||||
"**/*.min.js",
|
||||
"**/vendor/**"
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
"name": "Data:stations",
|
||||
|
|
@ -40,7 +39,10 @@
|
|||
"compounds": [
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"format": "expanded",
|
||||
"format": "compressed",
|
||||
"extensionName": ".css",
|
||||
"savePath": "/server/styles",
|
||||
"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
|
||||
|
||||
/* globals WeatherDisplay, utils, STATUS, draw, navigation */
|
||||
/* globals WeatherDisplay, utils, STATUS, navigation */
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class Progress extends WeatherDisplay {
|
||||
constructor(navId, elemId) {
|
||||
super(navId, elemId);
|
||||
super(navId, elemId, '', false, true);
|
||||
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||
|
|
@ -14,103 +14,91 @@ class Progress extends WeatherDisplay {
|
|||
this.timing = false;
|
||||
|
||||
this.version = document.getElementById('version').innerHTML;
|
||||
|
||||
// setup event listener
|
||||
this.elem.querySelector('.container').addEventListener('click', this.lineClick.bind(this));
|
||||
}
|
||||
|
||||
async drawCanvas(displays, loadedCount) {
|
||||
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 (!displays) return;
|
||||
displays.forEach((display, idx) => {
|
||||
const y = 120 + idx * 29;
|
||||
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);
|
||||
const lines = displays.map((display, index) => {
|
||||
const fill = {};
|
||||
|
||||
let statusText;
|
||||
let statusColor;
|
||||
fill.name = display.name;
|
||||
|
||||
let statusClass;
|
||||
switch (display.status) {
|
||||
case STATUS.loading:
|
||||
statusText = 'Loading';
|
||||
statusColor = '#ffff00';
|
||||
statusClass = 'loading';
|
||||
break;
|
||||
case STATUS.loaded:
|
||||
statusText = 'Press Here';
|
||||
statusColor = '#00ff00';
|
||||
this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25);
|
||||
statusClass = 'press-here';
|
||||
break;
|
||||
case STATUS.failed:
|
||||
statusText = 'Failed';
|
||||
statusColor = '#ff0000';
|
||||
statusClass = 'failed';
|
||||
break;
|
||||
case STATUS.noData:
|
||||
statusText = 'No Data';
|
||||
statusColor = '#C0C0C0';
|
||||
draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
|
||||
statusClass = 'no-data';
|
||||
break;
|
||||
case STATUS.disabled:
|
||||
statusText = 'Disabled';
|
||||
statusColor = '#C0C0C0';
|
||||
this.context.drawImage(backgroundImage, 470, y - 20, 45, 25, 470, y - 20, 45, 25);
|
||||
statusClass = 'disabled';
|
||||
break;
|
||||
default:
|
||||
}
|
||||
// Erase any dots that spill into the status text.
|
||||
this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
|
||||
draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
|
||||
});
|
||||
|
||||
// make the line
|
||||
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
|
||||
const loadedPercent = (loadedCount / displays.length);
|
||||
|
||||
if (loadedPercent < 1.0) {
|
||||
// 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 {
|
||||
// restore the background
|
||||
this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
canvasClick(e) {
|
||||
// un-scale
|
||||
const scale = e.target.getBoundingClientRect().width / e.target.width;
|
||||
const x = e.offsetX / scale;
|
||||
const y = e.offsetY / scale;
|
||||
// eliminate off canvas and outside area clicks
|
||||
if (!this.isActive()) return;
|
||||
if (y < 100 || y > 410) return;
|
||||
if (x < 440 || x > 570) return;
|
||||
lineClick(e) {
|
||||
// get index
|
||||
const indexRaw = e.target?.parentNode?.dataset?.index;
|
||||
if (indexRaw === undefined) return;
|
||||
const index = +indexRaw;
|
||||
|
||||
// stop playing
|
||||
navigation.message('navButton');
|
||||
// use the y value to determine an index
|
||||
const index = Math.floor((y - 100) / 29);
|
||||
const display = navigation.getDisplay(index);
|
||||
if (display && display.status === STATUS.loaded) {
|
||||
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 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .main.current-weather {
|
||||
&.main {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
#extended-forecast-html.weather-display {
|
||||
background-image: url('../images/BackGround2_1.png');
|
||||
|
|
@ -49,10 +49,10 @@
|
|||
.temperature-block {
|
||||
display: inline-block;
|
||||
width: 44%;
|
||||
vertical-align: top;
|
||||
|
||||
>div {
|
||||
text-align: center;
|
||||
;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .main.hourly {
|
||||
&.main {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .latest-observations {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .local-forecast {
|
||||
.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 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
#regional-forecast-html.weather-display {
|
||||
background-image: url('../images/BackGround5_1.png');
|
||||
|
|
@ -35,10 +35,10 @@
|
|||
}
|
||||
|
||||
.temp {
|
||||
font-family: 'Star4000 Large Compressed';
|
||||
font-family: 'Star4000 Large';
|
||||
font-size: 28px;
|
||||
color: c.$title-color;
|
||||
top: 32px;
|
||||
top: 28px;
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display {
|
||||
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;
|
||||
|
||||
$extended-low: #8080FF;
|
||||
|
||||
$blue-box: #26235a;
|
||||
|
|
@ -5,8 +5,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WeatherStar 4000+</title>
|
||||
<meta name="description"
|
||||
content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!" />
|
||||
<meta name="description" 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="author" content="Matt Walsh" />
|
||||
<meta name="application-name" content="WeatherStar 4000+" />
|
||||
|
|
@ -22,8 +21,7 @@
|
|||
<script type="text/javascript" src="resources/data.min.js?_=<%=production%>"></script>
|
||||
<script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
|
||||
<% } else { %>
|
||||
<link rel="stylesheet" type="text/css" href="styles/index.css" />
|
||||
<link rel="stylesheet" type="text/css" href="styles/compiled.css" />
|
||||
<link rel="stylesheet" type="text/css" href="styles/main.css" />
|
||||
<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/auto/nosleep.js"></script>
|
||||
|
|
@ -64,9 +62,7 @@
|
|||
|
||||
<div id="divQuery">
|
||||
<form id="frmGetLatLng">
|
||||
<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>
|
||||
<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>
|
||||
<input id="btnGetLatLng" type="submit" value="GO" />
|
||||
<input id="btnClearQuery" type="reset" value="Reset" />
|
||||
</form>
|
||||
|
|
@ -90,6 +86,9 @@
|
|||
<div class="instructions">Enter your location above to continue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="progress-html" class="weather-display show">
|
||||
<%- include('partials/progress.ejs') %>
|
||||
</div>
|
||||
<div id="hourly-html" class="weather-display">
|
||||
<%- include('partials/hourly.ejs') %>
|
||||
</div>
|
||||
|
|
@ -112,8 +111,7 @@
|
|||
<div id="divTwcBottom">
|
||||
<div id="divTwcBottomLeft">
|
||||
<img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" />
|
||||
<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png"
|
||||
title="Previous" />
|
||||
<img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" />
|
||||
<img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" />
|
||||
<img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" />
|
||||
</div>
|
||||
|
|
@ -121,8 +119,7 @@
|
|||
<img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" />
|
||||
</div>
|
||||
<div id="divTwcBottomRight">
|
||||
<img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png"
|
||||
title="Exit Fullscreen" />
|
||||
<img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -147,8 +144,7 @@
|
|||
|
||||
<div id="divRefresh">
|
||||
Last Update: <span id="spanLastRefresh">(None)</span><br />
|
||||
<input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown"
|
||||
for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
|
||||
<input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
|
||||
</div>
|
||||
|
||||
<div id="divUnits">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<%- 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 template">
|
||||
<div class="date"></div>
|
||||
|
|
@ -10,14 +10,14 @@
|
|||
<div class="temperatures">
|
||||
<div class="temperature-block lo">
|
||||
<div class="label">Lo</div>
|
||||
<div class="value value-hi"></div>
|
||||
<div class="value value-lo"></div>
|
||||
</div>
|
||||
<div class="temperature-block hi">
|
||||
<div class="label">Hi</div>
|
||||
<div class="value value-lo"></div>
|
||||
<div class="value value-hi"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('scroll.ejs') %>
|
||||
</div>
|
||||
<%- 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",
|
||||
],
|
||||
"editor.tabSize": 2,
|
||||
"emmet.includeLanguages": {
|
||||
"ejs": "html",
|
||||
},
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "j69.ejs-beautify"
|
||||
},
|
||||
},
|
||||
}
|
||||
Loading…
Reference in a new issue