5.14.4

* Update README to include `ws4kp-international`

* adjust grammar in readme

* tidy links

README.md

@@ -16,6 +16,13 @@ This project is based on the work of [Mike Battaglia](https://github.com/vbguyny
 	* [Icon](https://twcclassics.com/downloads.html) sets
 	* Countless photos and videos of WeatherStar 4000 forecasts used as references.
 
+## Does WeatherStar 4000+ work outside of the USA?
+
+This project is tightly coupled to [NOAA's Weather API](https://www.weather.gov/documentation/services-web-api), which is exclsuive to the United States. Using NOAA's Weather API is a crucial requirement to provide an authentic WeatherStar 4000+ experience.
+
+If you would like to display weather information for international locations (outside of the USA), please checkout a fork of this project created by [@mwood77](https://github.com/mwood77):
+- [`ws4kp-international`](https://github.com/mwood77/ws4kp-international)
+
 ## Run Your WeatherStar
 There are a lot of CORS considerations and issues with api.weather.gov that are easiest to deal with by running a local server to see this in action (or use the live link above). You'll need Node.js >12.0 to run the local server.
 

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.14.0",
+	"version": "5.14.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.14.0",
+			"version": "5.14.4",
 			"license": "MIT",
 			"dependencies": {
 				"ejs": "^3.1.5",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.14.0",
+	"version": "5.14.4",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {

server/scripts/custom.sample.js

@@ -2,8 +2,7 @@
 // it is intended to allow for customizations that do not get published back to the git repo
 // for example, changing the logo
 
-// start running after all content is loaded
-document.addEventListener('DOMContentLoaded', () => {
+const customTask = () => {
 	// get all of the logo images
 	const logos = document.querySelectorAll('.logo img');
 	// loop through each logo
@@ -11,4 +10,16 @@ document.addEventListener('DOMContentLoaded', () => {
 		// change the source
 		elem.src = 'my-custom-logo.gif';
 	});
+};
+
+// start running after all content is loaded, or immediately if page content is already loaded
+if (document.readyState === 'loading') {
+	// Loading hasn't finished yet
+	document.addEventListener('DOMContentLoaded', customTask);
+} else {
+	// `DOMContentLoaded` has already fired
+	customTask();
+}
+document.addEventListener('DOMContentLoaded', () => {
+
 });

server/scripts/index.mjs

@@ -9,6 +9,7 @@ import settings from './modules/settings.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
+	getCustomCode();
 });
 
 const categories = [
@@ -413,3 +414,15 @@ const fullScreenResizeCheck = () => {
 	// store state of fullscreen element for next change detection
 	fullScreenResizeCheck.wasFull = !!document.fullscreenElement;
 };
+
+const getCustomCode = async () => {
+	// fetch the custom file and see if it returns a 200 status
+	const response = await fetch('scripts/custom.js', { method: 'HEAD' });
+	if (response.ok) {
+		// add the script element to the page
+		const customElem = document.createElement('script');
+		customElem.src = 'scripts/custom.js';
+		customElem.type = 'text/javascript';
+		document.body.append(customElem);
+	}
+};

server/scripts/modules/almanac.mjs

@@ -3,7 +3,7 @@ import { loadImg, preloadImg } from './utils/image.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
 import STATUS from './status.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
-import { registerDisplay } from './navigation.mjs';
+import { registerDisplay, timeZone } from './navigation.mjs';
 
 class Almanac extends WeatherDisplay {
 	constructor(navId, elemId) {
@@ -123,10 +123,10 @@ class Almanac extends WeatherDisplay {
 		// sun and moon data
 		this.elem.querySelector('.day-1').innerHTML = Today.toLocaleString({ weekday: 'long' });
 		this.elem.querySelector('.day-2').innerHTML = Tomorrow.toLocaleString({ weekday: 'long' });
-		this.elem.querySelector('.rise-1').innerHTML = DateTime.fromJSDate(info.sun[0].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
-		this.elem.querySelector('.rise-2').innerHTML = DateTime.fromJSDate(info.sun[1].sunrise).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
-		this.elem.querySelector('.set-1').innerHTML = DateTime.fromJSDate(info.sun[0].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
-		this.elem.querySelector('.set-2').innerHTML = DateTime.fromJSDate(info.sun[1].sunset).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
+		this.elem.querySelector('.rise-1').innerHTML = DateTime.fromJSDate(info.sun[0].sunrise).setZone(timeZone()).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
+		this.elem.querySelector('.rise-2').innerHTML = DateTime.fromJSDate(info.sun[1].sunrise).setZone(timeZone()).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
+		this.elem.querySelector('.set-1').innerHTML = DateTime.fromJSDate(info.sun[0].sunset).setZone(timeZone()).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
+		this.elem.querySelector('.set-2').innerHTML = DateTime.fromJSDate(info.sun[1].sunset).setZone(timeZone()).toLocaleString(DateTime.TIME_SIMPLE).toLowerCase();
 
 		const days = info.moon.map((MoonPhase) => {
 			const fill = {};

server/scripts/modules/hourly-graph.mjs

@@ -3,7 +3,7 @@
 import STATUS from './status.mjs';
 import getHourlyData from './hourly.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
-import { registerDisplay } from './navigation.mjs';
+import { registerDisplay, timeZone } from './navigation.mjs';
 import { DateTime } from '../vendor/auto/luxon.mjs';
 
 class HourlyGraph extends WeatherDisplay {
@@ -145,7 +145,7 @@ const drawPath = (path, ctx, options) => {
 };
 
 // format as 1p, 12a, etc.
-const formatTime = (time) => time.toFormat('ha').slice(0, -1);
+const formatTime = (time) => time.setZone(timeZone()).toFormat('ha').slice(0, -1);
 
 // register display
 registerDisplay(new HourlyGraph(4, 'hourly-graph'));

server/scripts/modules/hourly.mjs

@@ -7,7 +7,7 @@ import { temperature as temperatureUnit, distanceKilometers } from './utils/unit
 import { getHourlyIcon } from './icons.mjs';
 import { directionToNSEW } from './utils/calc.mjs';
 import WeatherDisplay from './weatherdisplay.mjs';
-import { registerDisplay } from './navigation.mjs';
+import { registerDisplay, timeZone } from './navigation.mjs';
 import getSun from './almanac.mjs';
 
 class Hourly extends WeatherDisplay {
@@ -56,10 +56,7 @@ class Hourly extends WeatherDisplay {
 		const list = this.elem.querySelector('.hourly-lines');
 		list.innerHTML = '';
 
-		// get a unit converter
-		const temperatureConverter = temperatureUnit();
-
-		const startingHour = DateTime.local();
+		const startingHour = DateTime.local().setZone(timeZone());
 
 		const lines = this.data.map((data, index) => {
 			const fillValues = {};
@@ -69,8 +66,8 @@ class Hourly extends WeatherDisplay {
 			fillValues.hour = formattedHour;
 
 			// temperatures, convert to strings with no decimal
-			const temperature = temperatureConverter(data.temperature).toString().padStart(3);
-			const feelsLike = Math.round(data.apparentTemperature).toString().padStart(3);
+			const temperature = data.temperature.toString().padStart(3);
+			const feelsLike = data.apparentTemperature.toString().padStart(3);
 			fillValues.temp = temperature;
 			// only plot apparent temperature if there is a difference
 			// if (temperature !== feelsLike) line.querySelector('.like').innerHTML = feelsLike;

server/scripts/modules/regionalforecast-utils.mjs

@@ -1,16 +1,21 @@
 import { getWeatherRegionalIconFromIconLink } from './icons.mjs';
 import { preloadImg } from './utils/image.mjs';
 import { json } from './utils/fetch.mjs';
+import { temperature as temperatureUnit } from './utils/units.mjs';
 
-const buildForecast = (forecast, city, cityXY) => ({
-	daytime: forecast.isDaytime,
-	temperature: forecast.temperature || 0,
-	name: formatCity(city.city),
-	icon: forecast.icon,
-	x: cityXY.x,
-	y: cityXY.y,
-	time: forecast.startTime,
-});
+const buildForecast = (forecast, city, cityXY) => {
+	// get a unit converter
+	const temperatureConverter = temperatureUnit('us');
+	return {
+		daytime: forecast.isDaytime,
+		temperature: temperatureConverter(forecast.temperature || 0),
+		name: formatCity(city.city),
+		icon: forecast.icon,
+		x: cityXY.x,
+		y: cityXY.y,
+		time: forecast.startTime,
+	};
+};
 
 const getRegionalObservation = async (point, city) => {
 	try {

server/scripts/modules/utils/units.mjs

@@ -7,6 +7,7 @@ const round2 = (value, decimals) => Math.trunc(value * 10 ** decimals) / 10 ** d
 
 const kphToMph = (Kph) => Math.round(Kph / 1.609_34);
 const celsiusToFahrenheit = (Celsius) => Math.round((Celsius * 9) / 5 + 32);
+const fahrenheitToCelsius = (Fahrenheit) => Math.round((Fahrenheit - 32) * 5 / 9);
 const kilometersToMiles = (Kilometers) => Math.round(Kilometers / 1.609_34);
 const metersToFeet = (Meters) => Math.round(Meters / 0.3048);
 const pascalToInHg = (Pascal) => round2(Pascal * 0.000_295_3, 2);
@@ -35,7 +36,11 @@ const temperature = (defaultUnit = 'si') => {
 	let converter = (passthru) => Math.round(passthru);
 	// change the converter if there is a mismatch
 	if (defaultUnit !== settings.units.value) {
-		converter = celsiusToFahrenheit;
+		if (defaultUnit === 'us') {
+			converter = fahrenheitToCelsius;
+		} else {
+			converter = celsiusToFahrenheit;
+		}
 	}
 	// append units
 	if (settings.units.value === 'si') {

views/index.ejs

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
@@ -14,13 +14,15 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <link rel="manifest" href="manifest.json" />
   <link rel="icon" href="images/Logo192.png" />
+	<meta property="og:image" content="images/social/1200x600.png">
+	<meta property="og:image:width" content="1200">
+	<meta property="og:image:height" content="627">
 
   <% if (production) { %>
   <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
   <script type="text/javascript" src="resources/data.min.js?_=<%=production%>"></script>
   <script type="text/javascript" src="resources/vendor.min.js?_=<%=production%>"></script>
   <script type="text/javascript" src="resources/ws.min.js?_=<%=production%>"></script>
-  <script type="text/javascript" src="scripts/custom.js?_=<%=production%>"></script>
   <% } else { %>
   <link rel="stylesheet" type="text/css" href="styles/main.css" />
   <script type="text/javascript" src="scripts/vendor/auto/jquery.js"></script>
@@ -45,14 +47,10 @@
   <script type="module" src="scripts/modules/radar.mjs"></script>
   <script type="module" src="scripts/modules/settings.mjs"></script>
 	<script type="module" src="scripts/index.mjs"></script>
-	<script type="text/javascript" src="scripts/custom.js"></script>
   <!-- data -->
   <script type="text/javascript" src="scripts/data/travelcities.js"></script>
   <script type="text/javascript" src="scripts/data/regionalcities.js"></script>
   <script type="text/javascript" src="scripts/data/stations.js"></script>
-
-  <script type="text/javascript" src="scripts/custom.js"></script>
-
   <% } %>
 
 </head>