From 69d14236f1f403a8830ed513ff72a2a006c58b18 Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Thu, 8 Dec 2022 09:23:26 -0600 Subject: [PATCH] hourly graph uses image with internal canvas for drawing --- server/scripts/modules/hourly-graph.mjs | 19 ++++--- server/scripts/modules/radar.mjs | 2 - server/styles/scss/_hourly-graph.scss | 2 +- views/partials/hourly-graph.ejs | 2 +- views/partials/radar.ejs | 76 ++++++++++++------------- 5 files changed, 52 insertions(+), 49 deletions(-) diff --git a/server/scripts/modules/hourly-graph.mjs b/server/scripts/modules/hourly-graph.mjs index 7c4a432..d9e8ba6 100644 --- a/server/scripts/modules/hourly-graph.mjs +++ b/server/scripts/modules/hourly-graph.mjs @@ -42,18 +42,20 @@ class HourlyGraph extends WeatherDisplay { } drawCanvas() { - if (!this.canvas) this.canvas = this.elem.querySelector('.chart canvas'); + if (!this.image) this.image = this.elem.querySelector('.chart img'); // get available space - const boundingRect = this.canvas.getBoundingClientRect(); - const availableWidth = boundingRect.width; - const availableHeight = boundingRect.height; + const availableWidth = 532; + const availableHeight = 285; - this.canvas.width = availableWidth; - this.canvas.height = availableHeight; + this.image.width = availableWidth; + this.image.height = availableHeight; // 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; // 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-3').innerHTML = minTemp; + // set the image source + this.image.src = canvas.toDataURL(); + super.drawCanvas(); this.finishDraw(); } diff --git a/server/scripts/modules/radar.mjs b/server/scripts/modules/radar.mjs index bbb6e30..073c029 100644 --- a/server/scripts/modules/radar.mjs +++ b/server/scripts/modules/radar.mjs @@ -367,8 +367,6 @@ class Radar extends WeatherDisplay { } RadarContext.putImageData(RadarImageData, 0, 0); - - // MapContext.drawImage(RadarContext.canvas, 0, 0); } static mergeDopplerRadarImage(mapContext, radarContext) { diff --git a/server/styles/scss/_hourly-graph.scss b/server/styles/scss/_hourly-graph.scss index 202bbbf..7e8cf29 100644 --- a/server/styles/scss/_hourly-graph.scss +++ b/server/styles/scss/_hourly-graph.scss @@ -89,7 +89,7 @@ top: 0px; left: 50px; - canvas { + img { width: 532px; height: 285px; } diff --git a/views/partials/hourly-graph.ejs b/views/partials/hourly-graph.ejs index dba3a73..2124782 100644 --- a/views/partials/hourly-graph.ejs +++ b/views/partials/hourly-graph.ejs @@ -11,7 +11,7 @@
55
- +
12a
diff --git a/views/partials/radar.ejs b/views/partials/radar.ejs index e77a13c..dbeeefb 100644 --- a/views/partials/radar.ejs +++ b/views/partials/radar.ejs @@ -1,43 +1,43 @@
- -
-
- Local -
-
- Radar -
-
-
-
-
PRECIP
-
-
Light
-
-
-
-
-
-
-
-
-
-
-
Heavy
-
-
-
-
+ +
+
+ Local +
+
+ Radar +
+
+
+
+
PRECIP
+
+
Light
+
+
+
+
+
+
+
+
+
+
+
Heavy
+
+
+
+
-
-
-
-
- -
-
-
-
+
+
+
+
+ +
+
+
+
\ No newline at end of file