portrait hourly graph #167

server/scripts/modules/hourly-graph.mjs

@@ -7,6 +7,12 @@ import { registerDisplay, timeZone } from './navigation.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
 import settings from './settings.mjs';
 
+// two chart areas
+const chartAreas = [
+	'.top',
+	'.bottom',
+];
+
 // set up spacing and scales
 const scaling = () => {
 	const available = {
@@ -24,6 +30,11 @@ const scaling = () => {
 		dataLength.hours = 48;
 		dataLength.xTicks = 6;
 	}
+
+	if (settings.portrait?.value && settings.enhanced?.value) {
+		available.height = 450;
+	}
+
 	return {
 		available,
 		dataLength,
@@ -85,10 +96,13 @@ class HourlyGraph extends WeatherDisplay {
 
 		// get the image
 		if (!this.image) this.image = this.elem.querySelector('.chart img');
+		if (!this.portraitImage) this.portraitImage = this.elem.querySelector('.bottom .chart img');
 
-		// set up image
+		// set up images
 		this.image.width = available.width;
 		this.image.height = available.height;
+		this.portraitImage.width = available.width;
+		this.portraitImage.height = available.height;
 
 		// get context
 		const canvas = document.createElement('canvas');
@@ -97,31 +111,57 @@ class HourlyGraph extends WeatherDisplay {
 		const ctx = canvas.getContext('2d');
 		ctx.imageSmoothingEnabled = false;
 
+		// set the canvas for each graph to the top one by default
+		const contexts = [
+			ctx,
+			ctx,
+			ctx,
+			ctx,
+		];
+
+		// if in portrait-enhanced, change out the second two contexts with a second canvas
+		let portraitCanvas;
+		if (settings.portrait?.value && settings.enhanced?.value) {
+			portraitCanvas = document.createElement('canvas');
+			portraitCanvas.width = available.width;
+			portraitCanvas.height = available.height;
+			const portraitCtx = portraitCanvas.getContext('2d');
+			portraitCtx.imageSmoothingEnabled = false;
+
+			contexts[2] = portraitCtx;
+			contexts[3] = portraitCtx;
+		}
+
 		// calculate time scale
 		const timeScale = calcScale(0, 5, this.data.temperature.length - 1, available.width);
 		const timeStep = this.data.temperature.length / (dataLength.xTicks);
 		const startTime = DateTime.now().startOf('hour');
-		let prevTime = startTime;
-		Array(dataLength.xTicks + 1).fill().forEach((val, idx) => {
-			// track the previous label so a day of week can be added when it changes
-			const label = formatTime(startTime.plus({ hour: idx * timeStep }), prevTime);
-			prevTime = label.ts;
-			// write to page
-			document.querySelector(`.x-axis .l-${idx + 1}`).innerHTML = label.formatted;
+
+		// there are two x axes in portrait
+		chartAreas.forEach((area) => {
+			let prevTime = startTime;
+			const elem = this.elem.querySelector(area);
+			Array(dataLength.xTicks + 1).fill().forEach((val, idx) => {
+				// track the previous label so a day of week can be added when it changes
+				const label = formatTime(startTime.plus({ hour: idx * timeStep }), prevTime);
+				prevTime = label.ts;
+				// write to page
+				elem.querySelector(`.x-axis .l-${idx + 1}`).innerHTML = label.formatted;
+			});
 		});
 
 		// order is important last line drawn is on top
 		// clouds
 		const percentScale = calcScale(0, available.height - 10, 100, 10);
 		const cloud = createPath(this.data.skyCover, timeScale, percentScale);
-		drawPath(cloud, ctx, {
+		drawPath(cloud, contexts[3], {
 			strokeStyle: 'lightgrey',
 			lineWidth: 3,
 		});
 
 		// precip
 		const precip = createPath(this.data.probabilityOfPrecipitation, timeScale, percentScale);
-		drawPath(precip, ctx, {
+		drawPath(precip, contexts[2], {
 			strokeStyle: 'aqua',
 			lineWidth: 3,
 		});
@@ -136,14 +176,14 @@ class HourlyGraph extends WeatherDisplay {
 
 		// dewpoint
 		const dewpointPath = createPath(this.data.dewpoint, timeScale, tempScale);
-		drawPath(dewpointPath, ctx, {
+		drawPath(dewpointPath, contexts[1], {
 			strokeStyle: 'green',
 			lineWidth: 3,
 		});
 
 		// temperature
 		const tempPath = createPath(this.data.temperature, timeScale, tempScale);
-		drawPath(tempPath, ctx, {
+		drawPath(tempPath, contexts[0], {
 			strokeStyle: 'red',
 			lineWidth: 3,
 		});
@@ -151,6 +191,8 @@ class HourlyGraph extends WeatherDisplay {
 		// temperature axis labels
 		// limited to 3 characters, sacraficing degree character
 		const degree = String.fromCharCode(176);
+
+		// only fill the upper chart with temperatures
 		this.elem.querySelector('.y-axis .l-1').innerHTML = (maxScale + degree).substring(0, 3);
 		this.elem.querySelector('.y-axis .l-2').innerHTML = (midScale2 + degree).substring(0, 3);
 		this.elem.querySelector('.y-axis .l-3').innerHTML = (midScale1 + degree).substring(0, 3);
@@ -159,6 +201,11 @@ class HourlyGraph extends WeatherDisplay {
 		// set the image source
 		this.image.src = canvas.toDataURL();
 
+		// if a portrait canvas was created set that image as well
+		if (portraitCanvas) {
+			this.portraitImage.src = portraitCanvas.toDataURL();
+		}
+
 		// change the units in the header
 		this.elem.querySelector('.temperature').innerHTML = `Temperature ${String.fromCharCode(176)}${this.data.temperatureUnit}`;
 		this.elem.querySelector('.dewpoint').innerHTML = `Dewpoint ${String.fromCharCode(176)}${this.data.temperatureUnit}`;

server/styles/scss/_current-weather.scss

@@ -7,22 +7,6 @@
 		width: calc(p.$standard-width - (2 * p.$blue-box-margin));
 		@include u.text-shadow();
 
-		.portrait-only {
-			display: none;
-
-			.portrait.enhanced & {
-				display: block;
-			}
-		}
-
-		.standard-only {
-			display: block;
-
-			.portrait.enhanced & {
-				display: none;
-			}
-		}
-
 		.portrait-location {
 			text-align: center;
 			margin-top: 175px;

server/styles/scss/_hourly-graph.scss

@@ -1,5 +1,6 @@
 @use 'shared/_colors'as c;
 @use 'shared/_utils'as u;
+@use 'shared/_positions'as p;
 
 #hourly-graph-html {
 	background-image: url(../images/backgrounds/1-chart.png);
@@ -10,36 +11,54 @@
 		background-position-x: 0px;
 	}
 
-	.header {
-		.right {
-			position: absolute;
+	// change background for portrait
+	.portrait.enhanced & {
+		background-image: url(../images/backgrounds/1-chart-portrait.png);
+		background-position-x: 0px;
+	}
+
+}
+
+.legend {
+	.right & {
+		position: absolute;
+
+		.header & {
 			top: 35px;
-			right: 60px;
-			width: 360px;
-			font-family: 'Star4000 Small';
-			font-size: 28px;
-			@include u.text-shadow();
-			text-align: right;
+		}
 
-			div {
-				margin-top: -18px;
-			}
+		right: 60px;
+		width: 360px;
+		font-family: 'Star4000 Small';
+		font-size: 28px;
+		@include u.text-shadow();
+		text-align: right;
 
-			.temperature {
-				color: red;
-			}
+		div {
+			margin-top: -18px;
+		}
 
-			.dewpoint {
-				color: green;
-			}
+		.temperature {
+			color: red;
 
-			.cloud {
-				color: lightgrey;
+			// shift down when only 2 legend elements are shown in portrait
+			.header & {
+				.portrait.enhanced & {
+					margin-top: 12px;
+				}
 			}
+		}
 
-			.rain {
-				color: aqua;
-			}
+		.dewpoint {
+			color: green;
+		}
+
+		.cloud {
+			color: lightgrey;
+		}
+
+		.rain {
+			color: aqua;
 		}
 	}
 }
@@ -47,136 +66,216 @@
 .weather-display .main.hourly-graph {
 
 	&.main {
-		>div {
-			position: absolute;
-		}
 
-		.label {
-			font-family: 'Star4000 Small';
-			font-size: 24pt;
-			color: c.$column-header-text;
-			@include u.text-shadow();
-			margin-top: -15px;
-			position: absolute;
-		}
+		.chart-container {
+
+			position: absolute;
+			top: 0px;
+			height: p.$standard-scroll-height;
+
+			&.portrait-only {
+				top: 495px;
+			}
+
+			>div {
+				position: absolute;
+			}
+
+			.portrait.enhanced & {
+				height: 470px;
+			}
 
-		.x-axis {
-			bottom: 0px;
-			left: 54px;
-			width: 532px;
-			height: 20px;
 
 			.label {
-				text-align: center;
-				transform: translateX(-50%);
-				white-space: nowrap;
+				font-family: 'Star4000 Small';
+				font-size: 24pt;
+				color: c.$column-header-text;
+				@include u.text-shadow();
+				margin-top: -15px;
+				position: absolute;
+			}
 
-				&.l-1 {
-					left: 0px;
-				}
+			.x-axis {
+				bottom: 0px;
+				left: 54px;
+				width: 532px;
+				height: 20px;
 
-				&.l-2 {
-					left: calc(532px / 4 * 1);
-				}
-
-				&.l-3 {
-					left: calc(532px / 4 * 2);
-				}
-
-				&.l-4 {
-					left: calc(532px / 4 * 3);
-				}
-
-				&.l-5 {
-					left: calc(532px / 4 * 4);
-				}
-
-				// adjust when enhanced
-				.wide.enhanced & {
+				.label {
+					text-align: center;
+					transform: translateX(-50%);
+					white-space: nowrap;
 
 					&.l-1 {
 						left: 0px;
 					}
 
 					&.l-2 {
-						left: calc(726px / 6 * 1);
+						left: calc(532px / 4 * 1);
 					}
 
 					&.l-3 {
-						left: calc(726px / 6 * 2);
+						left: calc(532px / 4 * 2);
 					}
 
 					&.l-4 {
-						left: calc(726px / 6 * 3);
+						left: calc(532px / 4 * 3);
 					}
 
 					&.l-5 {
-						left: calc(726px / 6 * 4);
+						left: calc(532px / 4 * 4);
 					}
 
-					&.l-6 {
-						left: calc(726px / 6 * 5);
-					}
-
-					&.l-7 {
-						left: calc(726px / 6 * 6);
-					}
-				}
-
-				// only in wide + enhanced
-				&.l-6,
-				&.l-7 {
-					display: none;
-
+					// adjust when enhanced
 					.wide.enhanced & {
-						display: block;
+
+						&.l-1 {
+							left: 0px;
+						}
+
+						&.l-2 {
+							left: calc(726px / 6 * 1);
+						}
+
+						&.l-3 {
+							left: calc(726px / 6 * 2);
+						}
+
+						&.l-4 {
+							left: calc(726px / 6 * 3);
+						}
+
+						&.l-5 {
+							left: calc(726px / 6 * 4);
+						}
+
+						&.l-6 {
+							left: calc(726px / 6 * 5);
+						}
+
+						&.l-7 {
+							left: calc(726px / 6 * 6);
+						}
 					}
+
+					// only in wide + enhanced
+					&.l-6,
+					&.l-7 {
+						display: none;
+
+						.wide.enhanced & {
+							display: block;
+						}
+					}
+
 				}
 
 			}
 
-		}
+			.chart {
+				top: 0px;
+				left: 50px;
 
-		.chart {
-			top: 0px;
-			left: 50px;
+				img {
+					width: 532px;
+					height: 285px;
 
-			img {
-				width: 532px;
+					// wide and enhanced
+					.wide.enhanced & {
+						width: 746px;
+					}
+
+					.portrait.enhanced & {
+						height: 450px;
+					}
+				}
+			}
+
+			.y-axis {
+				top: 0px;
+				left: 0px;
+				width: 50px;
 				height: 285px;
 
-				// wide and enhanced
-				.wide.enhanced & {
-					width: 746px;
+				.portrait.enhanced & {
+					height: 450px;
+				}
+
+				.label {
+					text-align: right;
+					right: 0px;
+
+					&.l-1 {
+						top: 0px;
+					}
+
+					&.l-2 {
+						top: calc(280px / 3);
+					}
+
+					&.l-3 {
+						bottom: calc(280px / 3 - 11px);
+					}
+
+					&.l-4 {
+						bottom: 0px;
+					}
+
+					.portrait.enhanced & {
+						&.l-1 {
+							top: 0px;
+						}
+
+						&.l-2 {
+							top: calc(445px / 3);
+						}
+
+						&.l-3 {
+							bottom: calc(445px / 3 - 11px);
+						}
+
+						&.l-4 {
+							bottom: 0px;
+						}
+					}
+				}
+			}
+
+			&.bottom {
+				.y-axis .label {
+					.portrait.enhanced & {
+						&.l-1 {
+							top: 0px;
+						}
+
+						&.l-2 {
+							top: calc(445px / 4);
+						}
+
+						&.l-3 {
+							top: calc(445px / 2 - 11px);
+						}
+
+						&.l-4 {
+							bottom: calc(445px / 4 - 11px);
+						}
+
+						&.l-5 {
+							bottom: 0px;
+						}
+
+						;
+					}
 				}
 			}
 		}
 
-		.y-axis {
-			top: 0px;
-			left: 0px;
-			width: 50px;
-			height: 285px;
+		.chart-container.bottom {
 
-			.label {
-				text-align: right;
-				right: 0px;
-
-				&.l-1 {
-					top: 0px;
-				}
-
-				&.l-2 {
-					top: calc(280px / 3);
-				}
-
-				&.l-3 {
-					bottom: calc(280px / 3 - 11px);
-				}
-
-				&.l-4 {
-					bottom: 0px;
-				}
+			.right {
+				width: p.$standard-width;
+				position: absolute;
+				top: -25px;
 			}
 		}
 

server/styles/scss/_page.scss

@@ -850,4 +850,20 @@ body.kiosk #loading .instructions {
 	.item {
 		display: inline-block;
 	}
+}
+
+.portrait-only {
+	display: none;
+
+	.portrait.enhanced & {
+		display: block;
+	}
+}
+
+.standard-only {
+	display: block;
+
+	.portrait.enhanced & {
+		display: none;
+	}
 }