css cleanup

server/scripts/modules/regionalforecast.js

@@ -1,12 +1,12 @@
 // regional forecast and observations
 // type 0 = observations, 1 = first forecast, 2 = second forecast
 
-/* globals WeatherDisplay, utils, STATUS, icons, UNITS, draw, navigation, luxon, StationInfo, RegionalCities */
+/* globals WeatherDisplay, utils, STATUS, icons, UNITS, navigation, luxon, StationInfo, RegionalCities */
 
 // eslint-disable-next-line no-unused-vars
 class RegionalForecast extends WeatherDisplay {
 	constructor(navId, elemId) {
-		super(navId, elemId, 'Regional Forecast');
+		super(navId, elemId, 'Regional Forecast', true, true);
 
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround5_1.png');
@@ -333,14 +333,8 @@ class RegionalForecast extends WeatherDisplay {
 		// break up data into useful values
 		const { regionalData: data, sourceXY, offsetXY } = this.data;
 
-		// fixed offset for all y values when drawing to the map
-		const mapYOff = 90;
-
 		const { DateTime } = luxon;
 		// draw the header graphics
-		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 the appropriate title
 		const titleTop = this.elem.querySelector('.title.dual .top');
@@ -348,7 +342,6 @@ class RegionalForecast extends WeatherDisplay {
 		if (this.screenIndex === 0) {
 			titleTop.innerHTML = 'Regional';
 			titleBottom.innerHTML = 'Observations';
-			draw.titleText(this.context, 'Regional', 'Observations');
 		} else {
 			const forecastDate = DateTime.fromISO(data[0][this.screenIndex].time);
 
@@ -358,10 +351,8 @@ class RegionalForecast extends WeatherDisplay {
 			// draw the title
 			if (data[0][this.screenIndex].daytime) {
 				titleBottom.innerHTML = dayName;
-				draw.titleText(this.context, 'Forecast for', dayName);
 			} else {
 				titleBottom.innerHTML = `${dayName} Night`;
-				draw.titleText(this.context, 'Forecast for', `${dayName} Night`);
 			}
 		}
 
@@ -371,7 +362,6 @@ class RegionalForecast extends WeatherDisplay {
 		map.style.zoom = scale;
 		map.style.top = `-${sourceXY.y}px`;
 		map.style.left = `-${sourceXY.x}px`;
-		this.context.drawImage(await this.baseMap, sourceXY.x, sourceXY.y, (offsetXY.x * 2), (offsetXY.y * 2), 0, mapYOff, 640, 312);
 
 		const cities = data.map((city) => {
 			const fill = {};
@@ -394,30 +384,6 @@ class RegionalForecast extends WeatherDisplay {
 		locationContainer.innerHTML = '';
 		locationContainer.append(...cities);
 
-		await Promise.all(data.map(async (city) => {
-			const period = city[this.screenIndex];
-			// draw the icon if possible
-			const icon = icons.getWeatherRegionalIconFromIconLink(period.icon, !period.daytime);
-			if (icon) {
-				this.gifs.push(await utils.image.superGifAsync({
-					src: icon,
-					max_width: 42,
-					auto_play: true,
-					canvas: this.canvas,
-					x: period.x,
-					y: period.y - 15 + mapYOff,
-				}));
-			}
-
-			// City Name
-			draw.text(this.context, 'Star4000', '20px', '#ffffff', period.x - 40, period.y - 15 + mapYOff, period.name, 2);
-
-			// Temperature
-			let { temperature } = period;
-			if (navigation.units() === UNITS.metric) temperature = Math.round(utils.units.fahrenheitToCelsius(temperature));
-			draw.text(this.context, 'Star4000 Large Compressed', '28px', '#ffff00', period.x - (temperature.toString().length * 15), period.y + 20 + mapYOff, temperature, 2);
-		}));
-
 		this.finishDraw();
 	}
 }

server/styles/compiled.css

@@ -27,7 +27,7 @@
   font-family: "Star4000";
   font-size: 24pt;
   position: absolute;
-  width: 200px;
+  width: 250px;
 }
 .weather-display .header .title.single {
   left: 170px;
@@ -134,10 +134,10 @@
   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;
 }
 .weather-display .main.hourly.main .column-headers .temp {
-  left: 345px;
+  left: 355px;
 }
 .weather-display .main.hourly.main .column-headers .like {
-  left: 425px;
+  left: 435px;
 }
 .weather-display .main.hourly.main .column-headers .wind {
   left: 535px;

server/styles/scss/_hourly.scss

@@ -29,11 +29,11 @@
 			}
 
 			.temp {
-				left: 345px;
+				left: 355px;
 			}
 
 			.like {
-				left: 425px;
+				left: 435px;
 			}
 
 			.wind {

server/styles/scss/_weatherdisplay.scss

@@ -30,7 +30,7 @@
 			font-family: 'Star4000';
 			font-size: 24pt;
 			position: absolute;
-			width: 200px;
+			width: 250px;
 
 			&.single {
 				left: 170px;

views/index.ejs

@@ -102,7 +102,7 @@
 			<div id="latest-observations-html" class="weather-display">
 				<%- include('partials/latest-observations.ejs') %>
 			</div>
-			<div id="regional-forecast-html" class="weather-display show">
+			<div id="regional-forecast-html" class="weather-display">
 				<%- include('partials/regional-forecast.ejs') %>
 			</div>
 		</div>