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

hourly graph uses image with internal canvas for drawing

Browse source
This commit is contained in:
Matt Walsh 2022-12-08 09:23:26 -06:00
parent 64fb06d7b4
commit 69d14236f1
5 changed files with 52 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
server/scripts/modules/hourly-graph.mjs
View file

@ -42,18 +42,20 @@ class HourlyGraph extends WeatherDisplay {
} }
drawCanvas() { drawCanvas() {
if (!this.canvas) this.canvas = this.elem.querySelector('.chart canvas'); if (!this.image) this.image = this.elem.querySelector('.chart img');
// get available space // get available space
const boundingRect = this.canvas.getBoundingClientRect(); const availableWidth = 532;
const availableWidth = boundingRect.width; const availableHeight = 285;
const availableHeight = boundingRect.height;
this.canvas.width = availableWidth; this.image.width = availableWidth;
this.canvas.height = availableHeight; this.image.height = availableHeight;
// get context // get context
const ctx = this.canvas.getContext('2d'); const canvas = document.createElement('canvas');
canvas.width = availableWidth;
canvas.height = availableHeight;
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;
// calculate time scale // calculate time scale
@ -97,6 +99,9 @@ class HourlyGraph extends WeatherDisplay {
this.elem.querySelector('.y-axis .l-2').innerHTML = midTemp; this.elem.querySelector('.y-axis .l-2').innerHTML = midTemp;
this.elem.querySelector('.y-axis .l-3').innerHTML = minTemp; this.elem.querySelector('.y-axis .l-3').innerHTML = minTemp;
// set the image source
this.image.src = canvas.toDataURL();
super.drawCanvas(); super.drawCanvas();
this.finishDraw(); this.finishDraw();
} }

2
server/scripts/modules/radar.mjs
View file

@ -367,8 +367,6 @@ class Radar extends WeatherDisplay {
} }
RadarContext.putImageData(RadarImageData, 0, 0); RadarContext.putImageData(RadarImageData, 0, 0);
// MapContext.drawImage(RadarContext.canvas, 0, 0);
} }
static mergeDopplerRadarImage(mapContext, radarContext) { static mergeDopplerRadarImage(mapContext, radarContext) {

2
server/styles/scss/_hourly-graph.scss
View file

@ -89,7 +89,7 @@
top: 0px; top: 0px;
left: 50px; left: 50px;
canvas { img {
width: 532px; width: 532px;
height: 285px; height: 285px;
} }

2
views/partials/hourly-graph.ejs
View file

@ -11,7 +11,7 @@
<div class="label l-3">55</div> <div class="label l-3">55</div>
</div> </div>
<div class="chart"> <div class="chart">
<canvas id="chart-area"></canvas> <img id="chart-area"></img>
</div> </div>
<div class="x-axis"> <div class="x-axis">
<div class="label l-1">12a</div> <div class="label l-1">12a</div>

76
views/partials/radar.ejs
View file

@ -1,43 +1,43 @@
<div class="header"> <div class="header">
<div class="logo"><img src="images/Logo3.png" /></div> <div class="logo"><img src="images/Logo3.png" /></div>
<div class="title dual"> <div class="title dual">
<div class="top"> <div class="top">
Local Local
</div> </div>
<div class="bottom"> <div class="bottom">
Radar Radar
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="precip"> <div class="precip">
<div class="precip-header">PRECIP</div> <div class="precip-header">PRECIP</div>
<div class="scale"> <div class="scale">
<div class="text">Light</div> <div class="text">Light</div>
<div class="scale-table"> <div class="scale-table">
<div class="box box-1"></div> <div class="box box-1"></div>
<div class="box box-2"></div> <div class="box box-2"></div>
<div class="box box-3"></div> <div class="box box-3"></div>
<div class="box box-4"></div> <div class="box box-4"></div>
<div class="box box-5"></div> <div class="box box-5"></div>
<div class="box box-6"></div> <div class="box box-6"></div>
<div class="box box-7"></div> <div class="box box-7"></div>
<div class="box box-7"></div> <div class="box box-7"></div>
</div> </div>
<div class="text">Heavy</div> <div class="text">Heavy</div>
</div> </div>
<div class="time"></div> <div class="time"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="main radar"> <div class="main radar">
<div class="container"> <div class="container">
<div class="scroll-area"> <div class="scroll-area">
<div class="frame template"> <div class="frame template">
<div class="map"> <div class="map">
<img src="images/4000RadarMap2.jpg" /> <img src="images/4000RadarMap2.jpg" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>