radar complete
This commit is contained in:
Matt Walsh
parent
31343f3eff
commit
c109e2604a
|
|
@ -1,10 +1,10 @@
|
|||
// current weather conditions display
|
||||
/* globals WeatherDisplay, utils, STATUS, draw, luxon */
|
||||
/* globals WeatherDisplay, utils, STATUS, luxon */
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class Radar extends WeatherDisplay {
|
||||
constructor(navId, elemId) {
|
||||
super(navId, elemId, 'Local Radar');
|
||||
super(navId, elemId, 'Local Radar', true, true);
|
||||
|
||||
// set max images
|
||||
this.dopplerRadarImageMax = 6;
|
||||
|
|
@ -204,31 +204,10 @@ class Radar extends WeatherDisplay {
|
|||
|
||||
async drawCanvas() {
|
||||
super.drawCanvas();
|
||||
if (this.screenIndex === -1) return;
|
||||
|
||||
const { DateTime } = luxon;
|
||||
// Title
|
||||
draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 155, 60, 'Local', 2);
|
||||
draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 155, 95, 'Radar', 2);
|
||||
|
||||
draw.text(this.context, 'Star4000', 'bold 18pt', '#ffffff', 438, 49, 'PRECIP', 2, 'center');
|
||||
draw.text(this.context, 'Star4000', 'bold 18pt', '#ffffff', 298, 73, 'Light', 2);
|
||||
draw.text(this.context, 'Star4000', 'bold 18pt', '#ffffff', 517, 73, 'Heavy', 2);
|
||||
|
||||
let x = 362;
|
||||
const y = 52;
|
||||
draw.box(this.context, '#000000', x - 2, y - 2, 154, 28);
|
||||
draw.box(this.context, 'rgb(49, 210, 22)', x, y, 17, 24); x += 19;
|
||||
draw.box(this.context, 'rgb(28, 138, 18)', x, y, 17, 24); x += 19;
|
||||
draw.box(this.context, 'rgb(20, 90, 15)', x, y, 17, 24); x += 19;
|
||||
draw.box(this.context, 'rgb(10, 40, 10)', x, y, 17, 24); x += 19;
|
||||
draw.box(this.context, 'rgb(196, 179, 70)', x, y, 17, 24); x += 19;
|
||||
draw.box(this.context, 'rgb(190, 72, 19)', x, y, 17, 24); x += 19;
|
||||
draw.box(this.context, 'rgb(171, 14, 14)', x, y, 17, 24); x += 19;
|
||||
draw.box(this.context, 'rgb(115, 31, 4)', x, y, 17, 24); x += 19;
|
||||
|
||||
this.context.drawImage(this.data[this.screenIndex], 0, 0, 640, 367, 0, 113, 640, 367);
|
||||
draw.text(this.context, 'Star4000 Small', '24pt', '#ffffff', 438, 105, this.times[this.screenIndex].toLocaleString(DateTime.TIME_SIMPLE), 2, 'center');
|
||||
const time = this.times[this.screenIndex].toLocaleString(DateTime.TIME_SIMPLE);
|
||||
const timePadded = time.length >= 8 ? time : ` ${time}`;
|
||||
this.elem.querySelector('.header .right .time').innerHTML = timePadded;
|
||||
|
||||
// scroll to image
|
||||
this.elem.querySelector('.scroll-area').style.top = `${-this.screenIndex * 371}px`;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,14 +5,97 @@
|
|||
background-image: url('../images/BackGround4_1.png');
|
||||
|
||||
.header {
|
||||
height: 83px;
|
||||
|
||||
.title.dual {
|
||||
color: white;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 28pt;
|
||||
left: 155px;
|
||||
|
||||
.top {
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
top: 30px;
|
||||
top: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 360px;
|
||||
margin-top: 2px;
|
||||
font-family: 'Star4000';
|
||||
font-size: 18pt;
|
||||
font-weight: bold;
|
||||
@include u.text-shadow();
|
||||
text-align: center;
|
||||
|
||||
.scale>div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.scale-table {
|
||||
display: table-row;
|
||||
border-collapse: collapse;
|
||||
|
||||
.box {
|
||||
display: table-cell;
|
||||
border: 2px solid black;
|
||||
width: 17px;
|
||||
height: 24px;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
background-color: rgb(49, 210, 22);
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
background-color: rgb(28, 138, 18);
|
||||
}
|
||||
|
||||
.box-3 {
|
||||
background-color: rgb(20, 90, 15);
|
||||
}
|
||||
|
||||
.box-4 {
|
||||
background-color: rgb(10, 40, 10);
|
||||
}
|
||||
|
||||
.box-5 {
|
||||
background-color: rgb(196, 179, 70);
|
||||
}
|
||||
|
||||
.box-6 {
|
||||
background-color: rgb(190, 72, 19);
|
||||
}
|
||||
|
||||
.box-7 {
|
||||
background-color: rgb(171, 14, 14);
|
||||
}
|
||||
|
||||
.box-8 {
|
||||
background-color: rgb(115, 31, 4);
|
||||
}
|
||||
}
|
||||
|
||||
.scale {
|
||||
.text {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
top: -14px;
|
||||
font-family: 'Star4000 Small';
|
||||
font-size: 24pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,10 +103,9 @@
|
|||
|
||||
.weather-display .main.radar {
|
||||
overflow: hidden;
|
||||
|
||||
height: 367px;
|
||||
|
||||
.container {
|
||||
margin-top: 21px;
|
||||
|
||||
.scroll-area {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
<div id="extended-forecast-html" class="weather-display">
|
||||
<%- include('partials/extended-forecast.ejs') %>
|
||||
</div>
|
||||
<div id="radar-html" class="weather-display show">
|
||||
<div id="radar-html" class="weather-display">
|
||||
<%- include('partials/radar.ejs') %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,26 @@
|
|||
Radar
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="precip">
|
||||
<div class="precip-header">PRECIP</div>
|
||||
<div class="scale">
|
||||
<div class="text">Light</div>
|
||||
<div class="scale-table">
|
||||
<div class="box box-1"></div>
|
||||
<div class="box box-2"></div>
|
||||
<div class="box box-3"></div>
|
||||
<div class="box box-4"></div>
|
||||
<div class="box box-5"></div>
|
||||
<div class="box box-6"></div>
|
||||
<div class="box box-7"></div>
|
||||
<div class="box box-7"></div>
|
||||
</div>
|
||||
<div class="text">Heavy</div>
|
||||
</div>
|
||||
<div class="time"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main radar">
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"Noaa",
|
||||
"nosleep",
|
||||
"Pngs",
|
||||
"PRECIP",
|
||||
"rtrim",
|
||||
"T",
|
||||
"T'storm",
|
||||
|
|
|
|||
Loading…
Reference in a new issue