eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-18 17:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

more html

Browse Source
This commit is contained in:
Matt Walsh
2022-07-29 16:12:42 -05:00
parent 8ffb0e744e
commit f26fce1e58
22 changed files with 1305 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
server/scripts/modules/currentweather.js
View File

@@ -69,7 +69,7 @@ class CurrentWeather extends WeatherDisplay {
data.Temperature = Math.round(observations.temperature.value);
data.TemperatureUnit = 'C';
data.DewPoint = Math.round(observations.dewpoint.value);
data.Ceiling = Math.round(observations.cloudLayers[0].base.value);
data.Ceiling = Math.round(observations.cloudLayers[0]?.base?.value ?? 0);
data.CeilingUnit = 'm.';
data.Visibility = Math.round(observations.visibility.value / 1000);
data.VisibilityUnit = ' km.';
@@ -190,15 +190,17 @@ class CurrentWeather extends WeatherDisplay {
draw.text(this.context, 'Star4000 Large', 'bold 16pt', '#FFFFFF', 560, 365, data.WindChill + String.fromCharCode(176), 2, 'right');
}
if (data.Icon) {
// get main icon
this.gifs.push(await utils.image.superGifAsync({
src: data.Icon,
auto_play: true,
canvas: this.canvas,
x: 140,
y: 175,
max_width: 126,
}));
this.gifs.push(await utils.image.superGifAsync({
src: data.Icon,
auto_play: true,
canvas: this.canvas,
x: 140,
y: 175,
max_width: 126,
}));
}
this.finishDraw();
}

109
server/scripts/modules/hourly.js
View File

@@ -1,22 +1,17 @@
// hourly forecast list
/* globals WeatherDisplay, utils, STATUS, UNITS, draw, navigation, icons, luxon */
/* globals WeatherDisplay, utils, STATUS, UNITS, navigation, icons, luxon */
// eslint-disable-next-line no-unused-vars
class Hourly extends WeatherDisplay {
constructor(navId, elemId, defaultActive) {
// special height and width for scrolling
super(navId, elemId, 'Hourly Forecast', defaultActive);
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround6_1.png');
// height of one hour in the forecast
this.hourHeight = 72;
super(navId, elemId, 'Hourly Forecast', defaultActive, true);
// set up the timing
this.timing.baseDelay = 20;
// 24 hours = 6 pages
const pages = 4; // first page is already displayed, last page doesn't happen
const timingStep = this.hourHeight * 4;
const timingStep = 75 * 4;
this.timing.delay = [150 + timingStep];
// add additional pages
for (let i = 0; i < pages; i += 1) this.timing.delay.push(timingStep);
@@ -114,52 +109,25 @@ class Hourly extends WeatherDisplay {
}
async drawLongCanvas() {
// create the "long" canvas if necessary
if (!this.longCanvas) {
this.longCanvas = document.createElement('canvas');
this.longCanvas.width = 640;
this.longCanvas.height = 24 * this.hourHeight;
this.longContext = this.longCanvas.getContext('2d');
this.longCanvasGifs = [];
}
// stop all gifs
this.longCanvasGifs.forEach((gif) => gif.pause());
// delete the gifs
this.longCanvasGifs.length = 0;
// clean up existing gifs
this.gifs.forEach((gif) => gif.pause());
// delete the gifs
this.gifs.length = 0;
this.longContext.clearRect(0, 0, this.longCanvas.width, this.longCanvas.height);
// draw the "long" canvas with all cities
draw.box(this.longContext, 'rgb(35, 50, 112)', 0, 0, 640, 24 * this.hourHeight);
for (let i = 0; i <= 4; i += 1) {
const y = i * 346;
draw.horizontalGradient(this.longContext, 0, y, 640, y + 346, '#102080', '#001040');
}
// get the list element and populate
const list = this.elem.querySelector('.hourly-lines');
list.innerHTML = '';
const startingHour = luxon.DateTime.local();
await Promise.all(this.data.map(async (data, index) => {
// calculate base y value
const y = 50 + this.hourHeight * index;
const lines = this.data.map((data, index) => {
const line = this.templates['hourly-row'].cloneNode(true);
// hour
const hour = startingHour.plus({ hours: index });
const formattedHour = hour.toLocaleString({ weekday: 'short', hour: 'numeric' });
draw.text(this.longContext, 'Star4000 Large Compressed', '24pt', '#FFFF00', 80, y, formattedHour, 2);
line.querySelector('.hour').innerHTML = formattedHour;
// temperatures, convert to strings with no decimal
const temperature = Math.round(data.temperature).toString().padStart(3);
const feelsLike = Math.round(data.apparentTemperature).toString().padStart(3);
draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', 390, y, temperature, 2, 'center');
line.querySelector('.temp').innerHTML = temperature;
// only plot apparent temperature if there is a difference
if (temperature !== feelsLike) draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', 470, y, feelsLike, 2, 'center');
if (temperature !== feelsLike) line.querySelector('.like').innerHTML = feelsLike;
// wind
let wind = 'Calm';
@@ -167,44 +135,25 @@ class Hourly extends WeatherDisplay {
const windSpeed = Math.round(data.windSpeed).toString();
wind = data.windDirection + (Array(6 - data.windDirection.length - windSpeed.length).join(' ')) + windSpeed;
}
draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', 580, y, wind, 2, 'center');
line.querySelector('.wind').innerHTML = wind;
this.longCanvasGifs.push(await utils.image.superGifAsync({
src: data.icon,
auto_play: true,
canvas: this.longCanvas,
x: 290,
y: y - 35,
max_width: 47,
}));
}));
// image
line.querySelector('.icon img').src = data.icon;
return line;
});
list.append(...lines);
}
async drawCanvas() {
// there are technically 2 canvases: the standard canvas and the extra-long canvas that contains the complete
// list of cities. The second canvas is copied into the standard canvas to create the scroll
drawCanvas() {
super.drawCanvas();
// draw the standard context
this.context.drawImage(await this.backgroundImage, 0, 0);
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, 'Hourly Forecast');
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFF00', 390, 105, 'TEMP', 2, 'center');
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFF00', 470, 105, 'LIKE', 2, 'center');
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFF00', 580, 105, 'WIND', 2, 'center');
// copy the scrolled portion of the canvas for the initial run before the scrolling starts
this.context.drawImage(this.longCanvas, 0, 0, 640, 289, 0, 110, 640, 289);
this.finishDraw();
}
async showCanvas() {
// special to travel forecast to draw the remainder of the canvas
await this.drawCanvas();
showCanvas() {
// special to hourly to draw the remainder of the canvas
this.drawCanvas();
super.showCanvas();
}
@@ -215,17 +164,14 @@ class Hourly extends WeatherDisplay {
// base count change callback
baseCountChange(count) {
// get a fresh canvas
const longCanvas = this.getLongCanvas();
// calculate scroll offset and don't go past end
let offsetY = Math.min(longCanvas.height - 289, (count - 150));
let offsetY = Math.min(this.elem.querySelector('.hourly-lines').getBoundingClientRect().height - 289, (count - 150));
// don't let offset go negative
if (offsetY < 0) offsetY = 0;
// copy the scrolled portion of the canvas
this.context.drawImage(longCanvas, 0, offsetY, 640, 289, 0, 110, 640, 289);
this.elem.querySelector('.main').scrollTo(0, offsetY);
}
static getTravelCitiesDayName(cities) {
@@ -241,9 +187,4 @@ class Hourly extends WeatherDisplay {
return dayName;
}, '');
}
// necessary to get the lastest long canvas when scrolling
getLongCanvas() {
return this.longCanvas;
}
}

2
server/scripts/modules/icons.js
View File

@@ -142,6 +142,8 @@ const icons = (() => {
};
const getWeatherIconFromIconLink = (link, _isNightTime) => {
if (!link) return;
// internal function to add path to returned icon
const addPath = (icon) => `images/${icon}`;
// extract day or night if not provided

6
server/scripts/modules/progress.js
View File

@@ -94,8 +94,10 @@ class Progress extends WeatherDisplay {
}
canvasClick(e) {
const x = e.offsetX;
const y = e.offsetY;
// 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;

7
server/scripts/modules/utilities.js
View File

@@ -286,8 +286,15 @@ const utils = (() => {
}
};
const elemForEach = (selector, callback) => {
[...document.querySelectorAll(selector)].forEach(callback);
};
// return an orderly object
return {
elem: {
forEach: elemForEach,
},
image: {
load: loadImg,
superGifAsync,

118
server/scripts/modules/weatherdisplay.js
View File

@@ -1,6 +1,6 @@
// base weather display class
/* globals navigation, utils, draw, UNITS, luxon, currentWeatherScroll */
/* globals navigation, utils, luxon, currentWeatherScroll */
const STATUS = {
loading: Symbol('loading'),
@@ -12,7 +12,7 @@ const STATUS = {
// eslint-disable-next-line no-unused-vars
class WeatherDisplay {
constructor(navId, elemId, name, defaultEnabled) {
constructor(navId, elemId, name, defaultEnabled, isHtml) {
// navId is used in messaging
this.navId = navId;
this.elemId = undefined;
@@ -21,6 +21,7 @@ class WeatherDisplay {
this.loadingStatus = STATUS.loading;
this.name = name ?? elemId;
this.getDataCallbacks = [];
this.isHtml = isHtml;
// default navigation timing
this.timing = {
@@ -41,6 +42,9 @@ class WeatherDisplay {
this.setStatus(STATUS.disabled);
}
this.startNavCount();
// get any templates
this.loadTemplates();
}
addCheckbox(defaultEnabled = true) {
@@ -97,6 +101,9 @@ class WeatherDisplay {
if (this.elemId) return;
this.elemId = elemId;
// no additional work if this is HTML
if (this.isHtml) return;
// create a canvas
const canvas = document.createElement('template');
canvas.innerHTML = `<canvas id='${`${elemId}Canvas`}' width='${width}' height='${height}' style='display: none;' />`;
@@ -136,13 +143,15 @@ class WeatherDisplay {
}
drawCanvas() {
if (!this.isHtml) {
// stop all gifs
this.gifs.forEach((gif) => gif.pause());
// delete the gifs
this.gifs.length = 0;
// refresh the canvas
this.canvas = document.getElementById(`${this.elemId}Canvas`);
this.context = this.canvas.getContext('2d');
this.gifs.forEach((gif) => gif.pause());
// delete the gifs
this.gifs.length = 0;
// refresh the canvas
this.canvas = document.getElementById(`${this.elemId}Canvas`);
this.context = this.canvas.getContext('2d');
}
// clean up the first-run flag in screen index
if (this.screenIndex < 0) this.screenIndex = 0;
@@ -197,64 +206,31 @@ class WeatherDisplay {
// if (OkToDrawCustomScrollText) DrawCustomScrollText(WeatherParameters, context);
}
drawCurrentDateTime(bottom) {
drawCurrentDateTime() {
// only draw if canvas is active to conserve battery
if (!this.isActive()) return;
const { DateTime } = luxon;
const font = 'Star4000 Small';
const size = '24pt';
const color = '#ffffff';
const shadow = 2;
// on the first pass store the background for the date and time
if (!this.dateTimeBackground) {
const bg = this.context.getImageData(410, 30, 175, 60);
// test background draw complete and skip drawing if there is no background yet
if (bg.data[0] === 0) return;
// store the background
this.dateTimeBackground = bg;
}
// Clear the date and time area.
if (bottom) {
draw.box(this.context, 'rgb(25, 50, 112)', 0, 389, 640, 16);
} else {
this.context.putImageData(this.dateTimeBackground, 410, 30);
}
// Get the current date and time.
const now = DateTime.local();
// time = "11:35:08 PM";
const time = now.toLocaleString(DateTime.TIME_WITH_SECONDS).padStart(11, ' ');
let x; let y;
if (bottom) {
x = 400;
y = 402;
} else {
x = 410;
y = 65;
if (this.lastTime !== time) {
utils.elem.forEach('.date-time.time', (elem) => { elem.innerHTML = time.toUpperCase(); });
}
if (navigation.units() === UNITS.metric) {
x += 45;
}
draw.text(this.context, font, size, color, x, y, time.toUpperCase(), shadow); // y += 20;
this.lastTime = time;
const date = now.toFormat(' ccc LLL ') + now.day.toString().padStart(2, ' ');
if (bottom) {
x = 55;
y = 402;
} else {
x = 410;
y = 85;
if (this.lastDate !== date) {
utils.elem.forEach('.date-time.date', (elem) => { elem.innerHTML = date.toUpperCase(); });
}
draw.text(this.context, font, size, color, x, y, date.toUpperCase(), shadow);
this.lastDate = date;
}
async drawNoaaImage() {
if (this.isHtml) return;
// load the image and store locally
if (!this.drawNoaaImage.image) {
this.drawNoaaImage.image = utils.image.load('images/noaa5.gif');
@@ -265,6 +241,7 @@ class WeatherDisplay {
}
async drawLogoImage() {
if (this.isHtml) return;
// load the image and store locally
if (!this.drawLogoImage.image) {
this.drawLogoImage.image = utils.image.load('images/Logo3.png');
@@ -281,23 +258,33 @@ class WeatherDisplay {
if (navCmd === navigation.msg.command.firstFrame) this.navNext(navCmd);
if (navCmd === navigation.msg.command.lastFrame) this.navPrev(navCmd);
// see if the canvas is already showing
if (this.canvas.style.display === 'block') return false;
this.startNavCount();
// show the canvas
this.canvas.style.display = 'block';
return false;
if (!this.isHtml) {
// see if the canvas is already showing
if (this.canvas.style.display === 'block') return;
// show the canvas
this.canvas.style.display = 'block';
} else {
this.elem.classList.add('show');
}
}
hideCanvas() {
this.resetNavBaseCount();
if (!this.canvas) return;
this.canvas.style.display = 'none';
if (this.canvas) {
this.canvas.style.display = 'none';
}
if (this.isHtml) {
this.elem.classList.remove('show');
}
}
isActive() {
return document.getElementById(`${this.elemId}Canvas`).offsetParent !== null;
if (!this.isHtml) return document.getElementById(`${this.elemId}Canvas`).offsetParent !== null;
return this.elem.offsetParent !== null;
}
isEnabled() {
@@ -452,7 +439,6 @@ class WeatherDisplay {
clearInterval(this.navInterval);
this.navInterval = undefined;
}
this.startNavCount();
}
sendNavDisplayMessage(message) {
@@ -461,4 +447,20 @@ class WeatherDisplay {
type: message,
});
}
loadTemplates() {
this.templates = {};
if (this.elemId !== 'progress') {
this.elem = document.getElementById(`${this.elemId}-html`);
if (!this.elem) return;
const templates = this.elem.querySelectorAll('.template');
templates.forEach((template) => {
const className = template.classList[0];
const node = template.cloneNode(true);
node.classList.remove('template');
this.templates[className] = node;
template.remove();
});
}
}
}

237
server/styles/compiled.css Normal file
View File

@@ -0,0 +1,237 @@
.weather-display {
width: 640px;
height: 480px;
overflow: hidden;
position: relative;
background-image: url(../images/BackGround1_1.png);
display: none;
}
.weather-display.show {
display: block;
}
.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;
}
.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.has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
}
.weather-display .scroll {
width: 640px;
height: 80px;
overflow: hidden;
margin-top: 10px;
}
#hourly-html.weather-display .main {
overflow-y: hidden;
}
#hourly-html.weather-display .main .column-headers {
background-color: rgb(32, 0, 87);
height: 20px;
position: absolute;
width: 100%;
}
#hourly-html.weather-display .main .column-headers {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}
#hourly-html.weather-display .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;
}
#hourly-html.weather-display .main .column-headers .temp {
left: 370px;
}
#hourly-html.weather-display .main .column-headers .like {
left: 450px;
}
#hourly-html.weather-display .main .column-headers .wind {
left: 560px;
}
#hourly-html.weather-display .main .hourly-lines {
min-height: 338px;
padding-top: 10px;
background: repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px);
}
#hourly-html.weather-display .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;
}
#hourly-html.weather-display .main .hourly-lines .hourly-row > div {
position: absolute;
white-space: pre;
top: 8px;
}
#hourly-html.weather-display .main .hourly-lines .hourly-row .hour {
left: 50px;
}
#hourly-html.weather-display .main .hourly-lines .hourly-row .icon {
left: 280px;
width: 70px;
text-align: center;
top: unset;
}
#hourly-html.weather-display .main .hourly-lines .hourly-row .temp {
left: 370px;
}
#hourly-html.weather-display .main .hourly-lines .hourly-row .like {
left: 450px;
}
#hourly-html.weather-display .main .hourly-lines .hourly-row .wind {
left: 530px;
width: 100px;
text-align: right;
}
#current-weather-html.weather-display .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;
}
#current-weather-html.weather-display .main .col.left {
left: 65px;
font-family: "Star4000 Extended";
font-size: 24pt;
}
#current-weather-html.weather-display .main .col.right {
right: 65px;
font-family: "Star4000 Large";
font-size: 20px;
font-weight: bold;
}
#current-weather-html.weather-display .main .col.right .row {
margin-bottom: 8px;
}
#current-weather-html.weather-display .main .col.right .row .label,
#current-weather-html.weather-display .main .col.right .row .value {
display: inline-block;
}
#current-weather-html.weather-display .main .col.right .row .label {
margin-left: 20px;
}
#current-weather-html.weather-display .main .col.right .row .value {
float: right;
margin-right: 10px;
}
#current-weather-html.weather-display .main .center {
text-align: center;
}
#current-weather-html.weather-display .main .temp {
font-family: "Star4000 Large";
font-size: 24pt;
}
#current-weather-html.weather-display .main .icon {
height: 100px;
}
#current-weather-html.weather-display .main .icon img {
max-width: 126px;
}
#current-weather-html.weather-display .main .wind-container {
margin-bottom: 10px;
}
#current-weather-html.weather-display .main .wind-container > div {
width: 45%;
display: inline-block;
margin: 0px;
}
#current-weather-html.weather-display .main .wind-container .wind-label {
margin-left: 5px;
}
#current-weather-html.weather-display .main .wind-container .wind {
text-align: right;
}
#current-weather-html.weather-display .main .wind-gusts {
margin-left: 5px;
}
#current-weather-html.weather-display .main .location {
color: yellow;
margin-bottom: 10px;
}/*# sourceMappingURL=compiled.css.map */

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

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

8
server/styles/scss/_colors.scss Normal file
View File

@@ -0,0 +1,8 @@
$title-color: yellow;
$date-time: white;
$text-shadow: black;
$column-header-text: yellow;
$column-header: rgb(32, 0, 87);
$gradient-main-background-1: #102080;
$gradient-main-background-2: #001040;

97
server/styles/scss/_current-weather.scss Normal file
View File

@@ -0,0 +1,97 @@
@use 'colors'as c;
@use 'utils'as u;
#current-weather-html.weather-display {
.main {
.col {
height: 50px;
width: 255px;
display: inline-block;
margin-top: 10px;
position: absolute;
@include u.text-shadow();
&.left {
left: 65px;
font-family: 'Star4000 Extended';
font-size: 24pt;
}
&.right {
right: 65px;
font-family: 'Star4000 Large';
font-size: 20px;
font-weight: bold;
.row {
margin-bottom: 8px;
.label,
.value {
display: inline-block;
}
.label {
margin-left: 20px;
}
.value {
float: right;
margin-right: 10px;
}
}
}
}
.center {
text-align: center;
}
.temp {
font-family: 'Star4000 Large';
font-size: 24pt;
}
.condition {}
.icon {
height: 100px;
img {
max-width: 126px;
}
}
.wind-container {
margin-bottom: 10px;
&>div {
width: 45%;
display: inline-block;
margin: 0px;
}
.wind-label {
margin-left: 5px;
}
.wind {
text-align: right;
}
}
.wind-gusts {
margin-left: 5px;
}
.location {
color: c.$title-color;
margin-bottom: 10px;
}
}
}

95
server/styles/scss/_hourly.scss Normal file
View File

@@ -0,0 +1,95 @@
@use 'colors'as c;
@use 'utils'as u;
#hourly-html.weather-display {
.main {
overflow-y: hidden;
.column-headers {
background-color: c.$column-header;
height: 20px;
position: absolute;
width: 100%;
}
.column-headers {
position: sticky;
top: 0px;
z-index: 5;
div {
display: inline-block;
font-family: 'Star4000 Small';
font-size: 24pt;
color: c.$column-header-text;
position: absolute;
top: -14px;
z-index: 5;
@include u.text-shadow();
}
.temp {
left: 370px;
}
.like {
left: 450px;
}
.wind {
left: 560px;
}
}
.hourly-lines {
min-height: 338px;
padding-top: 10px;
background: repeating-linear-gradient(0deg, c.$gradient-main-background-2 0px,
c.$gradient-main-background-1 136px,
c.$gradient-main-background-1 202px,
c.$gradient-main-background-2 338px,
);
.hourly-row {
font-family: 'Star4000 Large';
font-size: 24pt;
height: 72px;
color: c.$title-color;
@include u.text-shadow();
position: relative;
>div {
position: absolute;
white-space: pre;
top: 8px;
}
.hour {
left: 50px;
}
.icon {
left: 280px;
width: 70px;
text-align: center;
top: unset;
}
.temp {
left: 370px;
}
.like {
left: 450px;
}
.wind {
left: 530px;
width: 100px;
text-align: right;
}
}
}
}
}

17
server/styles/scss/_utils.scss Normal file
View File

@@ -0,0 +1,17 @@
@use 'colors'as c;
@mixin text-shadow($offset: 3px, $outline: 1.5px) {
/* eventually, when chrome supports paint-order for html elements */
/* -webkit-text-stroke: 2px black; */
/* paint-order: stroke fill; */
text-shadow:
$offset $offset 0 c.$text-shadow,
(-$outline) (-$outline) 0 c.$text-shadow,
0 (-$outline) 0 c.$text-shadow,
$outline (-$outline) 0 c.$text-shadow,
$outline 0 0 c.$text-shadow,
$outline $outline 0 c.$text-shadow,
0 $outline 0 c.$text-shadow,
(-$outline) $outline 0 c.$text-shadow,
(-$outline) 0 0 c.$text-shadow;
}

103
server/styles/scss/_weatherdisplay.scss Normal file
View File

@@ -0,0 +1,103 @@
@use 'colors'as c;
@use 'utils'as u;
.weather-display {
width: 640px;
height: 480px;
overflow: hidden;
position: relative;
background-image: url(../images/BackGround1_1.png);
display: none;
&.show {
display: block;
}
.template {
display: none;
}
.header {
width: 640px;
height: 60px;
padding-top: 30px;
.title {
color: c.$title-color;
@include u.text-shadow(3px, 1.5px);
font-family: 'Star4000';
font-size: 24pt;
position: absolute;
&.single {
left: 170px;
top: 25px;
}
&.dual {
left: 170px;
&>div {
position: absolute;
}
.top {
top: -3px;
}
.bottom {
top: 26px;
}
}
}
.logo {
top: 30px;
left: 50px;
position: absolute;
z-index: 10;
}
.noaa-logo {
position: absolute;
top: 39px;
left: 356px;
}
.title.single {
top: 40px;
}
.date-time {
white-space: pre;
color: c.$date-time;
font-family: 'Star4000 Small';
font-size: 24pt;
@include u.text-shadow(3px, 1.5px);
left: 415px;
width: 170px;
text-align: right;
position: absolute;
&.date {
padding-top: 22px;
}
}
}
.main {
&.has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
}
}
.scroll {
width: 640px;
height: 80px;
overflow: hidden;
margin-top: 10px;
}
}

3
server/styles/scss/compiled.scss Normal file
View File

@@ -0,0 +1,3 @@
@use '_weatherdisplay';
@use '_hourly';
@use '_current-weather';

61
server/styles/weatherdisplay.css
View File

@@ -1,61 +0,0 @@
.weather-display {
width: 640px;
height: 480px;
overflow: hidden;
position: relative;
background-image: url(../images/BackGround1_1.png);
/* background-attachment: fixed; */
}
.weather-display .header {
width: 640px;
height: 70px;
padding-top: 30px;
}
.weather-display .header .title {
color: yellow;
text-shadow: 3px 3px black;
font-family: 'Star4000';
font-size: 24pt;
position: absolute;
left: 170px;
top: 25px;
}
.weather-display .header .logo {
top: 30px;
left: 50px;
position: absolute;
}
.weather-display .header .title.single {
top: 40px;
}
.weather-display .header .date-time {
white-space: pre;
color: white;
font-family: 'Star4000 Small';
font-size: 24pt;
text-shadow: 2px 2px black;
left: 430px;
position: absolute;
}
.weather-display .header .date-time#date {
padding-top: 22px;
}
.weather-display .main-has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
}
.weather-display .scroll {
width: 640px;
height: 80px;
overflow: hidden;
}