initial data and graph

server/scripts/modules/icons/icons-small.mjs

@@ -113,9 +113,11 @@ const smallIcon = (link, _isNightTime) => {
 			return addPath('Thunderstorm.gif');
 
 		case 'wind':
+		case 'wind_':
 		case 'wind_few':
 		case 'wind_sct':
 		case 'wind-n':
+		case 'wind_-n':
 		case 'wind_few-n':
 			return addPath('Wind.gif');
 

server/scripts/modules/radar.mjs

@@ -224,4 +224,4 @@ class Radar extends WeatherDisplay {
 }
 
 // register display
-registerDisplay(new Radar(10, 'radar'));
+registerDisplay(new Radar(11, 'radar'));

server/scripts/modules/spc-outlook.mjs

@@ -0,0 +1,115 @@
+// display spc outlook in a bar graph
+
+import STATUS from './status.mjs';
+import { json } from './utils/fetch.mjs';
+import { DateTime } from '../vendor/auto/luxon.mjs';
+import WeatherDisplay from './weatherdisplay.mjs';
+import { registerDisplay } from './navigation.mjs';
+import testPolygon from './utils/polygon.mjs';
+
+// list of interesting files ordered [0] = today, [1] = tomorrow...
+const urlPattern = (day) => `https://www.spc.noaa.gov/products/outlook/day${day}otlk_cat.nolyr.geojson`;
+
+const testAllPoints = (point, data) => {
+	// returns all points where the data matches as an array of days and then matches of the properties of the data
+
+	const result = [];
+	// start with a loop of days
+	data.forEach((day, index) => {
+		// initialize the result
+		result[index] = false;
+		// loop through each category
+		day.features.forEach((feature) => {
+			if (!feature.geometry.coordinates) return;
+			const inPolygon = testPolygon(point, feature.geometry);
+			if (inPolygon) result[index] = feature.properties;
+		});
+	});
+
+	return result;
+};
+
+const barSizes = {
+	TSTM: 60,
+	MRGL: 150,
+	SLGT: 210,
+	ENH: 270,
+	MDT: 330,
+	HIGH: 390,
+};
+
+class SpcOutlook extends WeatherDisplay {
+	constructor(navId, elemId) {
+		super(navId, elemId, 'SPC Outlook', true);
+
+		// calculate file names
+		this.files = [null, null, null].map((v, i) => urlPattern(i + 1));
+
+		// set timings
+		this.timing.totalScreens = 1;
+	}
+
+	async getData(weatherParameters, refresh) {
+		if (!super.getData(weatherParameters, refresh)) return;
+
+		let initialData;
+		try {
+			// get the three categorical files to get started
+			const filePromises = await Promise.allSettled(this.files.map((file) => json(file)));
+			// store the data, promise will always be fulfilled
+			initialData = filePromises.map((outlookDay) => outlookDay.value);
+		} catch (error) {
+			console.error('Unable to get spc outlook');
+			console.error(error.status, error.responseJSON);
+			// if there's no previous data, fail
+			if (!this.data) {
+				this.setStatus(STATUS.failed);
+				return;
+			}
+		}
+		// do the initial parsing of the data
+		this.data = testAllPoints([weatherParameters.longitude, weatherParameters.latitude], initialData);
+
+		// we only get here if there was no error above
+		this.screenIndex = 0;
+		this.setStatus(STATUS.loaded);
+	}
+
+	async drawCanvas() {
+		super.drawCanvas();
+
+		// analyze each day
+		const days = this.data.map((day, index) => {
+			// get the day name
+			const dayName = DateTime.now().plus({ days: index }).toLocaleString({ weekday: 'long' });
+
+			// fill the name
+			const fill = {};
+			fill['day-name'] = dayName;
+
+			// create the element
+			const elem = this.fillTemplate('day', fill);
+
+			// update the bar length
+			const bar = elem.querySelector('.risk-bar');
+			if (day.LABEL) {
+				bar.style.width = `${barSizes[day.LABEL]}px`;
+			} else {
+				bar.style.display = 'none';
+			}
+
+			return elem;
+		});
+
+		// add the days to the display
+		const dayContainer = this.elem.querySelector('.days');
+		dayContainer.innerHTML = '';
+		dayContainer.append(...days);
+
+		// finish drawing
+		this.finishDraw();
+	}
+}
+
+// register display
+registerDisplay(new SpcOutlook(10, 'spc-outlook'));

server/scripts/modules/utils/polygon.mjs

@@ -0,0 +1,51 @@
+// handle multi-polygon and holes
+const testPolygon = (point, _polygons) => {
+	// turn everything into a multi polygon for ease of processing
+	let polygons = [[..._polygons.coordinates]];
+	if (_polygons.type === 'MultiPolygon') polygons = [..._polygons.coordinates];
+
+	let inArea = false;
+
+	polygons.forEach((_polygon) => {
+		// copy the polygon
+		const polygon = [..._polygon];
+		// if a match has been found don't do anything more
+		if (inArea) return;
+
+		// polygons are defined as [[area], [optional hole 1], [optional hole 2], ...]
+		const area = polygon.shift();
+		// test if inside the initial area
+		inArea = pointInPolygon(point, area);
+
+		// if not in the area return false
+		if (!inArea) return;
+
+		// test the holes, if in any hole return false
+		polygon.forEach((hole) => {
+			if (pointInPolygon(point, hole)) {
+				inArea = false;
+			}
+		});
+	});
+	return inArea;
+};
+
+const pointInPolygon = (point, polygon) => {
+	// ray casting method from https://github.com/substack/point-in-polygon
+	const x = point[0];
+	const y = point[1];
+	let inside = false;
+	// eslint-disable-next-line no-plusplus
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i][0];
+		const yi = polygon[i][1];
+		const xj = polygon[j][0];
+		const yj = polygon[j][1];
+		const intersect = ((yi > y) !== (yj > y))
+			&& (x < ((xj - xi) * (y - yi)) / (yj - yi) + xi);
+		if (intersect) inside = !inside;
+	}
+	return inside;
+};
+
+export default testPolygon;