5.13.4

5.13.3

.eslintrc.js

@@ -8,7 +8,6 @@ module.exports = {
 	},
 	extends: [
 		'airbnb-base',
-		'plugin:sonarjs/recommended',
 	],
 	globals: {
 		Atomics: 'readonly',
@@ -22,16 +21,17 @@ module.exports = {
 
 	},
 	parserOptions: {
-		ecmaVersion: 2021,
+		ecmaVersion: 2023,
 	},
 	plugins: [
-		'unicorn',
-		'sonarjs',
 	],
 	rules: {
 		indent: [
 			'error',
 			'tab',
+			{ 
+				SwitchCase: 1
+			},
 		],
 		'no-tabs': 0,
 		'no-console': 0,
@@ -67,24 +67,6 @@ module.exports = {
 				json: 'always',
 			},
 		],
-		// unicorn
-		'unicorn/numeric-separators-style': 'error',
-		'unicorn/prefer-query-selector': 'error',
-		'unicorn/catch-error-name': 'error',
-		'unicorn/no-negated-condition': 'error',
-		'unicorn/better-regex': 'error',
-		'unicorn/consistent-function-scoping': 'error',
-		'unicorn/prefer-array-flat-map': 'error',
-		'unicorn/prefer-array-find': 'error',
-		'unicorn/prefer-regexp-test': 'error',
-		'unicorn/consistent-destructuring': 'error',
-		'unicorn/prefer-date-now': 'error',
-		'unicorn/prefer-ternary': 'error',
-		'unicorn/prefer-dom-node-append': 'error',
-		'unicorn/explicit-length-check': 'error',
-		'unicorn/prefer-at': 'error',
-		// sonarjs
-		'sonarjs/cognitive-complexity': 0,
 	},
 	ignorePatterns: [
 		'*.min.js',

.github/workflows/build-docker.yaml

@@ -10,19 +10,22 @@ jobs:
       packages: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - id: short-sha
-        uses: benjlevesque/short-sha@v1.2
+        uses: actions/checkout@v4
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
         with:
           images: |
             ghcr.io/netbymatt/ws4kp
+          flavor: |
+            latest=false
           tags: |
             type=raw,priority=1000,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=branch
-            ${{ steps.short-sha.outputs.sha }}
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
       - name: Set up Buildx
@@ -44,4 +47,4 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
-          cache-to: type=gha,mode=max
+          cache-to: type=gha,mode=max

.vscode/settings.json

@@ -7,8 +7,6 @@
 			"format": "compressed",
 			"extensionName": ".css",
 			"savePath": "/server/styles",
-			"savePathSegmentKeys": null,
-			"savePathReplaceSegmentsWith": null
 		}
 	],
 	"search.exclude": {
@@ -18,4 +16,11 @@
 		"**/compiled.css": true,
 		"**/*.min.js": true,
 	},
+	"editor.formatOnSave": true,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
+	"eslint.validate": [
+		"javascript"
+	]
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2017 Michael Battaglia
+Copyright (c) 2020-2024 Matt Walsh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -77,15 +77,28 @@ I've made several changes to this Weather Star 4000 simulation compared to the o
 * The nearby cities displayed on screens such as "Latest Observations" and "Regional Forecast" are likely not the same as they were in the 90's. The weather monitoring equipment at these stations move over time for one reason or another, and coming up with a simple formulaic way of finding nearby stations is sufficient to give the same look-and-feel as the original.
 * "Flavors" are not present in this simulation. Flavors refer to the order of the weather information that was shown on the original units. Instead, the order of the displays has been fixed and a checkboxes can be used to turn on and off individual displays. The travel forecast has been defaulted to off so only local information shows for new users.
 
+## Sharing a permalink (bookmarking)
+Selected displays, the forecast city and widescreen setting are sticky from one session to the next. However if you would like to share your exact configuration or bookmark it click the "Copy Permalink" (or get "Get Parmalink") near the bottom of the page. A URL will be copied to your clipboard with all of you selected displays and location (or copy it from the page if your browser doesn't support clipboard transfers directly). You can then share this link or add it to your bookmarks.
+
+## Kiosk mode
+Kiosk mode can be activated by a checkbox on the page. Note that there is no way out of kiosk mode (except refresh or closing the browser), and the play/pause and other controls will not be available. This is deliberate as a browser's kiosk mode it intended not to be exited or significantly modified.
+
+It's also possible to enter kiosk mode using a permalink. First generate a [Permalink](#sharing-a-permalink-bookmarking), then to the end of it add `&kiosk=true`. Opening this link will load all of the selected displays included in the Permalink, enter kiosk mode immediately upon loading and start playing the forecast.
+
 ## Wish list
 
 As time allows I will be working on the following enhancements.
 
 * Better error reporting when api.weather.gov is down (happens more often than you would think)
 
-And the following technical fixes.
+## Community Notes
 
-* Caching of the animated gifs, specifically after they are decompressed
+Thanks to the WeatherStar community for providing these discussions to further extend your retro forecasts!
+
+* [Stream as FFMPEG](https://github.com/netbymatt/ws4kp/issues/37#issuecomment-2008491948)
+
+## Customization
+A hook is provided as `/server/scripts/custom.js` to allow customizations to your own fork of this project, without accidentally pushing your customizations back upstream to the git repository. An sample file is provided at `/server/scripts/custom.sample.js` and should be renamed to `custom.js` activate it.
 
 ## Issue reporting and feature requests
 

dist/resources/vendor.min.js

@@ -19,4 +19,4 @@ function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t
  * @author John Doherty <www.johndoherty.info>
  * @license MIT
  */
-function(e,t){"use strict";"function"!=typeof e.CustomEvent&&(e.CustomEvent=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var A=t.createEvent("CustomEvent");return A.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),A},e.CustomEvent.prototype=e.Event.prototype),t.addEventListener("touchstart",(function(e){if("true"===e.target.getAttribute("data-swipe-ignore"))return;s=e.target,i=Date.now(),n=e.touches[0].clientX,A=e.touches[0].clientY,r=0,o=0}),!1),t.addEventListener("touchmove",(function(e){if(!n||!A)return;var t=e.touches[0].clientX,i=e.touches[0].clientY;r=n-t,o=A-i}),!1),t.addEventListener("touchend",(function(e){if(s!==e.target)return;var u=parseInt(a(s,"data-swipe-threshold","20"),10),l=a(s,"data-swipe-unit","px"),c=parseInt(a(s,"data-swipe-timeout","500"),10),d=Date.now()-i,f="",p=e.changedTouches||e.touches||[];"vh"===l&&(u=Math.round(u/100*t.documentElement.clientHeight));"vw"===l&&(u=Math.round(u/100*t.documentElement.clientWidth));Math.abs(r)>Math.abs(o)?Math.abs(r)>u&&d<c&&(f=r>0?"swiped-left":"swiped-right"):Math.abs(o)>u&&d<c&&(f=o>0?"swiped-up":"swiped-down");if(""!==f){var h={dir:f.replace(/swiped-/,""),touchType:(p[0]||{}).touchType||"direct",xStart:parseInt(n,10),xEnd:parseInt((p[0]||{}).clientX||-1,10),yStart:parseInt(A,10),yEnd:parseInt((p[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent("swiped",{bubbles:!0,cancelable:!0,detail:h})),s.dispatchEvent(new CustomEvent(f,{bubbles:!0,cancelable:!0,detail:h}))}n=null,A=null,i=null}),!1);var n=null,A=null,r=null,o=null,i=null,s=null;function a(e,n,A){for(;e&&e!==t.documentElement;){var r=e.getAttribute(n);if(r)return r;e=e.parentNode}return A}}(window,document),function(){"use strict";var e=Math.PI,t=Math.sin,n=Math.cos,A=Math.tan,r=Math.asin,o=Math.atan2,i=Math.acos,s=e/180,a=864e5,u=2440588,l=2451545;function c(e){return new Date((e+.5-u)*a)}function d(e){return function(e){return e.valueOf()/a-.5+u}(e)-l}var f=23.4397*s;function p(e,r){return o(t(e)*n(f)-A(r)*t(f),n(e))}function h(e,A){return r(t(A)*n(f)+n(A)*t(f)*t(e))}function g(e,r,i){return o(t(e),n(e)*t(r)-A(i)*n(r))}function m(e,A,o){return r(t(A)*t(o)+n(A)*n(o)*n(e))}function v(e,t){return s*(280.16+360.9856235*e)-t}function y(e){return s*(357.5291+.98560028*e)}function b(n){return n+s*(1.9148*t(n)+.02*t(2*n)+3e-4*t(3*n))+102.9372*s+e}function x(e){var t=b(y(e));return{dec:h(t,0),ra:p(t,0)}}var C={getPosition:function(e,t,n){var A=s*-n,r=s*t,o=d(e),i=x(o),a=v(o,A)-i.ra;return{azimuth:g(a,r,i.dec),altitude:m(a,r,i.dec)}}},E=C.times=[[-.833,"sunrise","sunset"],[-.3,"sunriseEnd","sunsetStart"],[-6,"dawn","dusk"],[-12,"nauticalDawn","nauticalDusk"],[-18,"nightEnd","night"],[6,"goldenHourEnd","goldenHour"]];C.addTime=function(e,t,n){E.push([e,t,n])};var w=9e-4;function B(t,n,A){return w+(t+n)/(2*e)+A}function S(e,n,A){return l+e+.0053*t(n)-.0069*t(2*A)}function I(e,A,r,o,s,a,u){var l=function(e,A,r){return i((t(e)-t(A)*t(r))/(n(A)*n(r)))}(e,r,o);return S(B(l,A,s),a,u)}function k(e){var A=s*(134.963+13.064993*e),r=s*(93.272+13.22935*e),o=s*(218.316+13.176396*e)+6.289*s*t(A),i=5.128*s*t(r),a=385001-20905*n(A);return{ra:p(o,i),dec:h(o,i),dist:a}}function T(e,t){return new Date(e.valueOf()+t*a/24)}C.getTimes=function(t,n,A,r){var o,i,a,u,l,f=s*-A,p=s*n,g=function(e){return-2.076*Math.sqrt(e)/60}(r=r||0),m=function(t,n){return Math.round(t-w-n/(2*e))}(d(t),f),v=B(0,f,m),x=y(v),C=b(x),k=h(C,0),T=S(v,x,C),D={solarNoon:c(T),nadir:c(T-.5)};for(o=0,i=E.length;o<i;o+=1)l=T-((u=I(((a=E[o])[0]+g)*s,f,p,k,m,x,C))-T),D[a[1]]=c(l),D[a[2]]=c(u);return D},C.getMoonPosition=function(e,r,i){var a=s*-i,u=s*r,l=d(e),c=k(l),f=v(l,a)-c.ra,p=m(f,u,c.dec),h=o(t(f),A(u)*n(c.dec)-t(c.dec)*n(f));return p+=function(e){return e<0&&(e=0),2967e-7/Math.tan(e+.00312536/(e+.08901179))}(p),{azimuth:g(f,u,c.dec),altitude:p,distance:c.dist,parallacticAngle:h}},C.getMoonIllumination=function(e){var A=d(e||new Date),r=x(A),s=k(A),a=149598e3,u=i(t(r.dec)*t(s.dec)+n(r.dec)*n(s.dec)*n(r.ra-s.ra)),l=o(a*t(u),s.dist-a*n(u)),c=o(n(r.dec)*t(r.ra-s.ra),t(r.dec)*n(s.dec)-n(r.dec)*t(s.dec)*n(r.ra-s.ra));return{fraction:(1+n(l))/2,phase:.5+.5*l*(c<0?-1:1)/Math.PI,angle:c}},C.getMoonTimes=function(e,t,n,A){var r=new Date(e);A?r.setUTCHours(0,0,0,0):r.setHours(0,0,0,0);for(var o,i,a,u,l,c,d,f,p,h,g,m,v,y=.133*s,b=C.getMoonPosition(r,t,n).altitude-y,x=1;x<=24&&(o=C.getMoonPosition(T(r,x),t,n).altitude-y,f=((l=(b+(i=C.getMoonPosition(T(r,x+1),t,n).altitude-y))/2-o)*(d=-(c=(i-b)/2)/(2*l))+c)*d+o,h=0,(p=c*c-4*l*o)>=0&&(g=d-(v=Math.sqrt(p)/(2*Math.abs(l))),m=d+v,Math.abs(g)<=1&&h++,Math.abs(m)<=1&&h++,g<-1&&(g=m)),1===h?b<0?a=x+g:u=x+g:2===h&&(a=x+(f<0?m:g),u=x+(f<0?g:m)),!a||!u);x+=2)b=i;var E={};return a&&(E.rise=T(r,a)),u&&(E.set=T(r,u)),a||u||(E[f>0?"alwaysUp":"alwaysDown"]=!0),E},"object"==typeof exports&&"undefined"!=typeof module?module.exports=C:"function"==typeof define&&define.amd?define(C):window.SunCalc=C}();
+function(e,t){"use strict";"function"!=typeof e.CustomEvent&&(e.CustomEvent=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var A=t.createEvent("CustomEvent");return A.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),A},e.CustomEvent.prototype=e.Event.prototype),t.addEventListener("touchstart",(function(e){if("true"===e.target.getAttribute("data-swipe-ignore"))return;s=e.target,i=Date.now(),n=e.touches[0].clientX,A=e.touches[0].clientY,r=0,o=0,a=e.touches.length}),!1),t.addEventListener("touchmove",(function(e){if(!n||!A)return;var t=e.touches[0].clientX,i=e.touches[0].clientY;r=n-t,o=A-i}),!1),t.addEventListener("touchend",(function(e){if(s!==e.target)return;var l=parseInt(u(s,"data-swipe-threshold","20"),10),c=u(s,"data-swipe-unit","px"),d=parseInt(u(s,"data-swipe-timeout","500"),10),f=Date.now()-i,p="",h=e.changedTouches||e.touches||[];"vh"===c&&(l=Math.round(l/100*t.documentElement.clientHeight));"vw"===c&&(l=Math.round(l/100*t.documentElement.clientWidth));Math.abs(r)>Math.abs(o)?Math.abs(r)>l&&f<d&&(p=r>0?"swiped-left":"swiped-right"):Math.abs(o)>l&&f<d&&(p=o>0?"swiped-up":"swiped-down");if(""!==p){var g={dir:p.replace(/swiped-/,""),touchType:(h[0]||{}).touchType||"direct",fingers:a,xStart:parseInt(n,10),xEnd:parseInt((h[0]||{}).clientX||-1,10),yStart:parseInt(A,10),yEnd:parseInt((h[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent("swiped",{bubbles:!0,cancelable:!0,detail:g})),s.dispatchEvent(new CustomEvent(p,{bubbles:!0,cancelable:!0,detail:g}))}n=null,A=null,i=null}),!1);var n=null,A=null,r=null,o=null,i=null,s=null,a=0;function u(e,n,A){for(;e&&e!==t.documentElement;){var r=e.getAttribute(n);if(r)return r;e=e.parentNode}return A}}(window,document),function(){"use strict";var e=Math.PI,t=Math.sin,n=Math.cos,A=Math.tan,r=Math.asin,o=Math.atan2,i=Math.acos,s=e/180,a=864e5,u=2440588,l=2451545;function c(e){return new Date((e+.5-u)*a)}function d(e){return function(e){return e.valueOf()/a-.5+u}(e)-l}var f=23.4397*s;function p(e,r){return o(t(e)*n(f)-A(r)*t(f),n(e))}function h(e,A){return r(t(A)*n(f)+n(A)*t(f)*t(e))}function g(e,r,i){return o(t(e),n(e)*t(r)-A(i)*n(r))}function m(e,A,o){return r(t(A)*t(o)+n(A)*n(o)*n(e))}function v(e,t){return s*(280.16+360.9856235*e)-t}function y(e){return s*(357.5291+.98560028*e)}function b(n){return n+s*(1.9148*t(n)+.02*t(2*n)+3e-4*t(3*n))+102.9372*s+e}function x(e){var t=b(y(e));return{dec:h(t,0),ra:p(t,0)}}var C={getPosition:function(e,t,n){var A=s*-n,r=s*t,o=d(e),i=x(o),a=v(o,A)-i.ra;return{azimuth:g(a,r,i.dec),altitude:m(a,r,i.dec)}}},E=C.times=[[-.833,"sunrise","sunset"],[-.3,"sunriseEnd","sunsetStart"],[-6,"dawn","dusk"],[-12,"nauticalDawn","nauticalDusk"],[-18,"nightEnd","night"],[6,"goldenHourEnd","goldenHour"]];C.addTime=function(e,t,n){E.push([e,t,n])};var w=9e-4;function B(t,n,A){return w+(t+n)/(2*e)+A}function S(e,n,A){return l+e+.0053*t(n)-.0069*t(2*A)}function I(e,A,r,o,s,a,u){var l=function(e,A,r){return i((t(e)-t(A)*t(r))/(n(A)*n(r)))}(e,r,o);return S(B(l,A,s),a,u)}function k(e){var A=s*(134.963+13.064993*e),r=s*(93.272+13.22935*e),o=s*(218.316+13.176396*e)+6.289*s*t(A),i=5.128*s*t(r),a=385001-20905*n(A);return{ra:p(o,i),dec:h(o,i),dist:a}}function T(e,t){return new Date(e.valueOf()+t*a/24)}C.getTimes=function(t,n,A,r){var o,i,a,u,l,f=s*-A,p=s*n,g=function(e){return-2.076*Math.sqrt(e)/60}(r=r||0),m=function(t,n){return Math.round(t-w-n/(2*e))}(d(t),f),v=B(0,f,m),x=y(v),C=b(x),k=h(C,0),T=S(v,x,C),D={solarNoon:c(T),nadir:c(T-.5)};for(o=0,i=E.length;o<i;o+=1)l=T-((u=I(((a=E[o])[0]+g)*s,f,p,k,m,x,C))-T),D[a[1]]=c(l),D[a[2]]=c(u);return D},C.getMoonPosition=function(e,r,i){var a=s*-i,u=s*r,l=d(e),c=k(l),f=v(l,a)-c.ra,p=m(f,u,c.dec),h=o(t(f),A(u)*n(c.dec)-t(c.dec)*n(f));return p+=function(e){return e<0&&(e=0),2967e-7/Math.tan(e+.00312536/(e+.08901179))}(p),{azimuth:g(f,u,c.dec),altitude:p,distance:c.dist,parallacticAngle:h}},C.getMoonIllumination=function(e){var A=d(e||new Date),r=x(A),s=k(A),a=149598e3,u=i(t(r.dec)*t(s.dec)+n(r.dec)*n(s.dec)*n(r.ra-s.ra)),l=o(a*t(u),s.dist-a*n(u)),c=o(n(r.dec)*t(r.ra-s.ra),t(r.dec)*n(s.dec)-n(r.dec)*t(s.dec)*n(r.ra-s.ra));return{fraction:(1+n(l))/2,phase:.5+.5*l*(c<0?-1:1)/Math.PI,angle:c}},C.getMoonTimes=function(e,t,n,A){var r=new Date(e);A?r.setUTCHours(0,0,0,0):r.setHours(0,0,0,0);for(var o,i,a,u,l,c,d,f,p,h,g,m,v,y=.133*s,b=C.getMoonPosition(r,t,n).altitude-y,x=1;x<=24&&(o=C.getMoonPosition(T(r,x),t,n).altitude-y,f=((l=(b+(i=C.getMoonPosition(T(r,x+1),t,n).altitude-y))/2-o)*(d=-(c=(i-b)/2)/(2*l))+c)*d+o,h=0,(p=c*c-4*l*o)>=0&&(g=d-(v=Math.sqrt(p)/(2*Math.abs(l))),m=d+v,Math.abs(g)<=1&&h++,Math.abs(m)<=1&&h++,g<-1&&(g=m)),1===h?b<0?a=x+g:u=x+g:2===h&&(a=x+(f<0?m:g),u=x+(f<0?g:m)),!a||!u);x+=2)b=i;var E={};return a&&(E.rise=T(r,a)),u&&(E.set=T(r,u)),a||u||(E[f>0?"alwaysUp":"alwaysDown"]=!0),E},"object"==typeof exports&&"undefined"!=typeof module?module.exports=C:"function"==typeof define&&define.amd?define(C):window.SunCalc=C}();

gulp/publish-frontend.mjs

@@ -1,23 +1,26 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const gulp = require('gulp');
-const concat = require('gulp-concat');
-const terser = require('gulp-terser');
-const ejs = require('gulp-ejs');
-const rename = require('gulp-rename');
-const htmlmin = require('gulp-htmlmin');
-const del = require('del');
-const s3Upload = require('gulp-s3-upload');
-const webpack = require('webpack-stream');
-const TerserPlugin = require('terser-webpack-plugin');
-const path = require('path');
-
-const clean = () => del(['./dist**']);
+import {
+	src, dest, series, parallel,
+} from 'gulp';
+import concat from 'gulp-concat';
+import terser from 'gulp-terser';
+import ejs from 'gulp-ejs';
+import rename from 'gulp-rename';
+import htmlmin from 'gulp-htmlmin';
+import { deleteAsync } from 'del';
+import s3Upload from 'gulp-s3-upload';
+import webpack from 'webpack-stream';
+import TerserPlugin from 'terser-webpack-plugin';
+import { readFile } from 'fs/promises';
 
 // get cloudfront
-const AWS = require('aws-sdk');
+import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
 
-AWS.config.update({ region: 'us-east-1' });
-const cloudfront = new AWS.CloudFront({ apiVersion: '2020-01-01' });
+const clean = () => deleteAsync(['./dist**']);
+
+const cloudfront = new CloudFrontClient({ region: 'us-east-1' });
+
+const RESOURCES_PATH = './dist/resources';
 
 const jsSourcesData = [
 	'server/scripts/data/travelcities.js',
@@ -33,7 +36,7 @@ const webpackOptions = {
 		filename: 'ws.min.js',
 	},
 	resolve: {
-		roots: [path.resolve(__dirname, './')],
+		roots: ['./'],
 	},
 	optimization: {
 		minimize: true,
@@ -51,10 +54,10 @@ const webpackOptions = {
 	},
 };
 
-gulp.task('compress_js_data', () => gulp.src(jsSourcesData)
+const compressJsData = () => src(jsSourcesData)
 	.pipe(concat('data.min.js'))
 	.pipe(terser())
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const jsVendorSources = [
 	'server/scripts/vendor/auto/jquery.js',
@@ -64,10 +67,10 @@ const jsVendorSources = [
 	'server/scripts/vendor/auto/suncalc.js',
 ];
 
-gulp.task('compress_js_vendor', () => gulp.src(jsVendorSources)
+const compressJsVendor = () => src(jsVendorSources)
 	.pipe(concat('vendor.min.js'))
 	.pipe(terser())
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const mjsSources = [
 	'server/scripts/modules/currentweatherscroll.mjs',
@@ -87,39 +90,40 @@ const mjsSources = [
 	'server/scripts/index.mjs',
 ];
 
-gulp.task('build_js', () => gulp.src(mjsSources)
+const buildJs = () => src(mjsSources)
 	.pipe(webpack(webpackOptions))
-	.pipe(gulp.dest('dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const cssSources = [
 	'server/styles/main.css',
 ];
-gulp.task('copy_css', () => gulp.src(cssSources)
+const copyCss = () => src(cssSources)
 	.pipe(concat('ws.min.css'))
-	.pipe(gulp.dest('./dist/resources')));
+	.pipe(dest(RESOURCES_PATH));
 
 const htmlSources = [
 	'views/*.ejs',
 ];
-gulp.task('compress_html', () => {
-	// eslint-disable-next-line global-require
-	const { version } = require('../package.json');
-	return gulp.src(htmlSources)
+const compressHtml = async () => {
+	const packageJson = await readFile('package.json');
+	const { version } = JSON.parse(packageJson);
+
+	return src(htmlSources)
 		.pipe(ejs({
 			production: version,
 			version,
 		}))
 		.pipe(rename({ extname: '.html' }))
 		.pipe(htmlmin({ collapseWhitespace: true }))
-		.pipe(gulp.dest('./dist'));
-});
+		.pipe(dest('./dist'));
+};
 
 const otherFiles = [
 	'server/robots.txt',
 	'server/manifest.json',
 ];
-gulp.task('copy_other_files', () => gulp.src(otherFiles, { base: 'server/' })
-	.pipe(gulp.dest('./dist')));
+const copyOtherFiles = () => src(otherFiles, { base: 'server/' })
+	.pipe(dest('./dist'));
 
 const s3 = s3Upload({
 	useIAM: true,
@@ -130,7 +134,7 @@ const uploadSources = [
 	'dist/**',
 	'!dist/**/*.map',
 ];
-gulp.task('upload', () => gulp.src(uploadSources, { base: './dist' })
+const upload = () => src(uploadSources, { base: './dist' })
 	.pipe(s3({
 		Bucket: 'weatherstar',
 		StorageClass: 'STANDARD',
@@ -140,21 +144,21 @@ gulp.task('upload', () => gulp.src(uploadSources, { base: './dist' })
 				return 'max-age=2592000'; // 1 month
 			},
 		},
-	})));
+	}));
 
 const imageSources = [
 	'server/fonts/**',
 	'server/images/**',
 ];
-gulp.task('upload_images', () => gulp.src(imageSources, { base: './server' })
+const uploadImages = () => src(imageSources, { base: './server', encoding: false })
 	.pipe(
 		s3({
 			Bucket: 'weatherstar',
 			StorageClass: 'STANDARD',
 		}),
-	));
+	);
 
-gulp.task('invalidate', async () => cloudfront.createInvalidation({
+const invalidate = () => cloudfront.send(new CreateInvalidationCommand({
 	DistributionId: 'E9171A4KV8KCW',
 	InvalidationBatch: {
 		CallerReference: (new Date()).toLocaleString(),
@@ -163,8 +167,12 @@ gulp.task('invalidate', async () => cloudfront.createInvalidation({
 			Items: ['/*'],
 		},
 	},
-}).promise());
+}));
+
+const buildDist = series(clean, parallel(buildJs, compressJsData, compressJsVendor, copyCss, compressHtml, copyOtherFiles));
 
 // upload_images could be in parallel with upload, but _images logs a lot and has little changes
 // by running upload last the majority of the changes will be at the bottom of the log for easy viewing
-module.exports = gulp.series(clean, gulp.parallel('build_js', 'compress_js_data', 'compress_js_vendor', 'copy_css', 'compress_html', 'copy_other_files'), 'upload_images', 'upload', 'invalidate');
+const publishFrontend = series(buildDist, uploadImages,	upload,	invalidate);
+
+export default publishFrontend;

gulp/update-vendor.mjs

@@ -1,12 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const gulp = require('gulp');
-const del = require('del');
-const rename = require('gulp-rename');
+import { src, series, dest } from 'gulp';
+import { deleteAsync } from 'del';
+import rename from 'gulp-rename';
 
-const clean = (cb) => {
-	del(['./server/scripts/vendor/auto/**']);
-	cb();
-};
+const clean = () => deleteAsync(['./server/scripts/vendor/auto/**']);
 
 const vendorFiles = [
 	'./node_modules/luxon/build/es6/luxon.js',
@@ -17,13 +14,15 @@ const vendorFiles = [
 	'./node_modules/swiped-events/src/swiped-events.js',
 ];
 
-const copy = () => gulp.src(vendorFiles)
+const copy = () => src(vendorFiles)
 	.pipe(rename((path) => {
 		path.dirname = path.dirname.toLowerCase();
 		path.basename = path.basename.toLowerCase();
 		path.extname = path.extname.toLowerCase();
 		if (path.basename === 'luxon') path.extname = '.mjs';
 	}))
-	.pipe(gulp.dest('./server/scripts/vendor/auto'));
+	.pipe(dest('./server/scripts/vendor/auto'));
 
-module.exports = gulp.series(clean, copy);
+const updateVendor = series(clean, copy);
+
+export default updateVendor;

gulpfile.js

@@ -1,4 +0,0 @@
-const gulp = require('gulp');
-
-gulp.task('update-vendor', require('./gulp/update-vendor'));
-gulp.task('publish-frontend', require('./gulp/publish-frontend'));

gulpfile.mjs

@@ -0,0 +1,7 @@
+import updateVendor from './gulp/update-vendor.mjs';
+import publishFrontend from './gulp/publish-frontend.mjs';
+
+export {
+	updateVendor,
+	publishFrontend,
+};

index.js

@@ -1,5 +1,4 @@
 // express
-// eslint-disable-next-line import/no-extraneous-dependencies
 const express = require('express');
 
 const app = express();

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.10.0",
+	"version": "5.13.4",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.js",
 	"scripts": {
@@ -20,30 +20,32 @@
 	},
 	"homepage": "https://github.com/netbymatt/ws4kp#readme",
 	"devDependencies": {
-		"del": "^6.0.0",
-		"ejs": "^3.1.5",
-		"eslint": "^8.21.0",
-		"eslint-config-airbnb-base": "^15.0.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-sonarjs": "^0.21.0",
-		"eslint-plugin-unicorn": "^46.0.0",
-		"express": "^4.17.1",
-		"gulp": "^4.0.2",
-		"gulp-concat": "^2.6.1",
-		"gulp-ejs": "^5.1.0",
-		"gulp-htmlmin": "^5.0.1",
-		"gulp-rename": "^2.0.0",
-		"gulp-s3-upload": "^1.7.3",
-		"gulp-sass": "^5.1.0",
-		"gulp-terser": "^2.0.0",
+		"del": "^7.1.0",
 		"jquery": "^3.6.0",
 		"jquery-touchswipe": "^1.6.19",
 		"luxon": "^3.0.0",
 		"nosleep.js": "^0.12.0",
-		"sass": "^1.54.0",
 		"suncalc": "^1.8.0",
 		"swiped-events": "^1.1.4",
+		"@aws-sdk/client-cloudfront": "^3.609.0",
+		"gulp-awspublish": "^8.0.0",
+		"gulp-s3-upload": "^1.7.3",
+		"eslint": "^8.2.0",
+		"eslint-config-airbnb-base": "^15.0.0",
+		"eslint-plugin-import": "^2.10.0",
+		"gulp": "^5.0.0",
+		"gulp-concat": "^2.6.1",
+		"gulp-ejs": "^5.1.0",
+		"gulp-htmlmin": "^5.0.1",
+		"gulp-rename": "^2.0.0",
+		"gulp-sass": "^5.1.0",
+		"gulp-terser": "^2.0.0",
 		"terser-webpack-plugin": "^5.3.6",
-		"webpack-stream": "^7.0.0"
+		"webpack-stream": "^7.0.0",
+		"sass": "^1.54.0"
+	},
+	"dependencies": {
+		"express": "^4.17.1",
+		"ejs": "^3.1.5"
 	}
 }

server/scripts/custom.sample.js

@@ -0,0 +1,14 @@
+// this file is loaded by the main html page (when renamed to custom.js)
+// 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', () => {
+	// get all of the logo images
+	const logos = document.querySelectorAll('.logo img');
+	// loop through each logo
+	logos.forEach((elem) => {
+		// change the source
+		elem.src = 'my-custom-logo.gif';
+	});
+});

server/scripts/index.mjs

@@ -4,6 +4,8 @@ import {
 	message as navMessage, isPlaying, resize, resetStatuses, latLonReceived, stopAutoRefreshTimer, registerRefreshData,
 } from './modules/navigation.mjs';
 import { round2 } from './modules/utils/units.mjs';
+import { parseQueryString } from './modules/share.mjs';
+import settings from './modules/settings.mjs';
 
 document.addEventListener('DOMContentLoaded', () => {
 	init();
@@ -41,9 +43,12 @@ const init = () => {
 	btnGetGps.addEventListener('click', btnGetGpsClick);
 	if (!navigator.geolocation) btnGetGps.style.display = 'none';
 
-	document.querySelector('#divTwc').addEventListener('click', () => {
+	document.querySelector('#divTwc').addEventListener('mousemove', () => {
 		if (document.fullscreenElement) updateFullScreenNavigate();
 	});
+	// local change detection when exiting full screen via ESC key (or other non button click methods)
+	window.addEventListener('resize', fullScreenResizeCheck);
+	fullScreenResizeCheck.wasFull = false;
 
 	document.querySelector(TXT_ADDRESS_SELECTOR).addEventListener('keydown', (key) => { if (key.code === 'Enter') formSubmit(); });
 	document.querySelector('#btnGetLatLng').addEventListener('click', () => formSubmit());
@@ -81,10 +86,15 @@ const init = () => {
 		return false;
 	};
 
-	// Auto load the previous query
-	const query = localStorage.getItem('latLonQuery');
-	const latLon = localStorage.getItem('latLon');
-	const fromGPS = localStorage.getItem('latLonFromGPS');
+	// attempt to parse the url parameters
+	const parsedParameters = parseQueryString();
+
+	const loadFromParsed = parsedParameters.latLonQuery && parsedParameters.latLon;
+
+	// Auto load the parsed parameters and fall back to the previous query
+	const query = parsedParameters.latLonQuery ?? localStorage.getItem('latLonQuery');
+	const latLon = parsedParameters.latLon ?? localStorage.getItem('latLon');
+	const fromGPS = localStorage.getItem('latLonFromGPS') && !loadFromParsed;
 	if (query && latLon && !fromGPS) {
 		const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
 		txtAddress.value = query;
@@ -94,7 +104,9 @@ const init = () => {
 		btnGetGpsClick();
 	}
 
-	const play = localStorage.getItem('play');
+	// if kiosk mode was set via the query string, also play immediately
+	settings.kiosk.value = parsedParameters['settings-kiosk-checkbox'] === 'true';
+	const play = parsedParameters['settings-kiosk-checkbox'] ?? localStorage.getItem('play');
 	if (play === null || play === 'true') postMessage('navButton', 'play');
 
 	document.querySelector('#btnClearQuery').addEventListener('click', () => {
@@ -176,11 +188,11 @@ const enterFullScreen = () => {
 
 	// Supports most browsers and their versions.
 	const requestMethod = element.requestFullScreen || element.webkitRequestFullScreen
-			|| element.mozRequestFullScreen || element.msRequestFullscreen;
+		|| element.mozRequestFullScreen || element.msRequestFullscreen;
 
 	if (requestMethod) {
 		// Native full screen.
-		requestMethod.call(element, { navigationUI: 'hide' }); // https://bugs.chromium.org/p/chromium/issues/detail?id=933436#c7
+		requestMethod.call(element, { navigationUI: 'hide' });
 	} else {
 		// iOS doesn't support FullScreen API.
 		window.scrollTo(0, 0);
@@ -208,10 +220,15 @@ const exitFullscreen = () => {
 		document.msExitFullscreen();
 	}
 	resize();
+	exitFullScreenVisibilityChanges();
+};
+
+const exitFullScreenVisibilityChanges = () => {
 	// change hover text and image
 	const img = document.querySelector(TOGGLE_FULL_SCREEN_SELECTOR);
 	img.src = 'images/nav/ic_fullscreen_white_24dp_2x.png';
 	img.title = 'Enter fullscreen';
+	document.querySelector('#divTwc').classList.remove('no-cursor');
 	const divTwcBottom = document.querySelector('#divTwcBottom');
 	divTwcBottom.classList.remove('hidden');
 	divTwcBottom.classList.add('visible');
@@ -219,7 +236,6 @@ const exitFullscreen = () => {
 
 const btnNavigateMenuClick = () => {
 	postMessage('navButton', 'menu');
-	updateFullScreenNavigate();
 	return false;
 };
 
@@ -238,35 +254,32 @@ const loadData = (_latLon, haveDataCallback) => {
 
 const swipeCallBack = (direction) => {
 	switch (direction) {
-	case 'left':
-		btnNavigateNextClick();
-		break;
+		case 'left':
+			btnNavigateNextClick();
+			break;
 
-	case 'right':
-	default:
-		btnNavigatePreviousClick();
-		break;
+		case 'right':
+		default:
+			btnNavigatePreviousClick();
+			break;
 	}
 };
 
 const btnNavigateRefreshClick = () => {
 	resetStatuses();
 	loadData();
-	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigateNextClick = () => {
 	postMessage('navButton', 'next');
-	updateFullScreenNavigate();
 
 	return false;
 };
 
 const btnNavigatePreviousClick = () => {
 	postMessage('navButton', 'previous');
-	updateFullScreenNavigate();
 
 	return false;
 };
@@ -278,6 +291,7 @@ const updateFullScreenNavigate = () => {
 	const divTwcBottom = document.querySelector('#divTwcBottom');
 	divTwcBottom.classList.remove('hidden');
 	divTwcBottom.classList.add('visible');
+	document.querySelector('#divTwc').classList.remove('no-cursor');
 
 	if (navigateFadeIntervalId) {
 		clearTimeout(navigateFadeIntervalId);
@@ -288,6 +302,7 @@ const updateFullScreenNavigate = () => {
 		if (document.fullscreenElement) {
 			divTwcBottom.classList.remove('visible');
 			divTwcBottom.classList.add('hidden');
+			document.querySelector('#divTwc').classList.add('no-cursor');
 		}
 	}, 2000);
 };
@@ -297,41 +312,41 @@ const documentKeydown = (e) => {
 
 	if (document.fullscreenElement || document.activeElement === document.body) {
 		switch (key) {
-		case ' ': // Space
-			// don't scroll
-			e.preventDefault();
-			btnNavigatePlayClick();
-			return false;
+			case ' ': // Space
+				// don't scroll
+				e.preventDefault();
+				btnNavigatePlayClick();
+				return false;
 
-		case 'ArrowRight':
-		case 'PageDown':
-			// don't scroll
-			e.preventDefault();
-			btnNavigateNextClick();
-			return false;
+			case 'ArrowRight':
+			case 'PageDown':
+				// don't scroll
+				e.preventDefault();
+				btnNavigateNextClick();
+				return false;
 
-		case 'ArrowLeft':
-		case 'PageUp':
-			// don't scroll
-			e.preventDefault();
-			btnNavigatePreviousClick();
-			return false;
+			case 'ArrowLeft':
+			case 'PageUp':
+				// don't scroll
+				e.preventDefault();
+				btnNavigatePreviousClick();
+				return false;
 
-		case 'ArrowUp': // Home
-			e.preventDefault();
-			btnNavigateMenuClick();
-			return false;
+			case 'ArrowUp': // Home
+				e.preventDefault();
+				btnNavigateMenuClick();
+				return false;
 
-		case '0': // "O" Restart
-			btnNavigateRefreshClick();
-			return false;
+			case '0': // "O" Restart
+				btnNavigateRefreshClick();
+				return false;
 
-		case 'F':
-		case 'f':
-			btnFullScreenClick();
-			return false;
+			case 'F':
+			case 'f':
+				btnFullScreenClick();
+				return false;
 
-		default:
+			default:
 		}
 	}
 	return false;
@@ -339,7 +354,6 @@ const documentKeydown = (e) => {
 
 const btnNavigatePlayClick = () => {
 	postMessage('navButton', 'playToggle');
-	updateFullScreenNavigate();
 
 	return false;
 };
@@ -384,3 +398,18 @@ const btnGetGpsClick = async () => {
 		txtAddress.value = `${location.city}, ${location.state}`;
 	});
 };
+
+// check for change in full screen triggered by browser and run local functions
+const fullScreenResizeCheck = () => {
+	if (fullScreenResizeCheck.wasFull && !document.fullscreenElement) {
+		// leaving full screen
+		exitFullScreenVisibilityChanges();
+	}
+	if (!fullScreenResizeCheck.wasFull && document.fullscreenElement) {
+		// entering full screen
+		// can't do much here because a UI interaction is required to change the full screen div element
+	}
+
+	// store state of fullscreen element for next change detection
+	fullScreenResizeCheck.wasFull = !!document.fullscreenElement;
+};

server/scripts/modules/almanac.mjs

@@ -94,7 +94,7 @@ class Almanac extends WeatherDisplay {
 		if (iteration % 2 === 0) test = (lastPhase, testPhase) => lastPhase > threshold && testPhase <= threshold;
 
 		do {
-		// store last phase
+			// store last phase
 			const lastPhase = phase;
 			// calculate new phase after step
 			moonDate = moonDate.plus(step);
@@ -103,7 +103,7 @@ class Almanac extends WeatherDisplay {
 			if (phase > 0.9) phase -= 1.0;
 			// compare
 			if (test(lastPhase, phase)) {
-			// last iteration is three, return value
+				// last iteration is three, return value
 				if (iteration >= 3) break;
 				// iterate recursively
 				return this.getMoonTransition(threshold, phaseName, moonDate, iteration + 1);
@@ -160,15 +160,15 @@ class Almanac extends WeatherDisplay {
 
 const imageName = (type) => {
 	switch (type) {
-	case 'Full':
-		return 'images/2/Full-Moon.gif';
-	case 'Last':
-		return 'images/2/Last-Quarter.gif';
-	case 'New':
-		return 'images/2/New-Moon.gif';
-	case 'First':
-	default:
-		return 'images/2/First-Quarter.gif';
+		case 'Full':
+			return 'images/2/Full-Moon.gif';
+		case 'Last':
+			return 'images/2/Last-Quarter.gif';
+		case 'New':
+			return 'images/2/New-Moon.gif';
+		case 'First':
+		default:
+			return 'images/2/First-Quarter.gif';
 	}
 };
 

server/scripts/modules/currentweather.mjs

@@ -56,7 +56,9 @@ class CurrentWeather extends WeatherDisplay {
 					|| observations.features[0].properties.windSpeed.value === null
 					|| observations.features[0].properties.textDescription === null
 					|| observations.features[0].properties.textDescription === ''
-					|| observations.features[0].properties.icon === null) {
+					|| observations.features[0].properties.icon === null
+					|| observations.features[0].properties.dewpoint.value === null
+					|| observations.features[0].properties.barometricPressure.value === null) {
 					observations = undefined;
 					throw new Error(`Unable to get observations: ${station.properties.stationIdentifier}, trying next station`);
 				}

server/scripts/modules/hazards.mjs

@@ -10,6 +10,12 @@ const hazardLevels = {
 	Severe: 5,
 };
 
+const hazardModifiers = {
+	'Hurricane Warning': 2,
+	'Tornado Warning': 3,
+	'Severe Thunderstorm Warning': 1,
+};
+
 class Hazards extends WeatherDisplay {
 	constructor(navId, elemId, defaultActive) {
 		// special height and width for scrolling
@@ -34,8 +40,9 @@ class Hazards extends WeatherDisplay {
 			url.searchParams.append('limit', 5);
 			const alerts = await json(url, { retryCount: 3, stillWaiting: () => this.stillWaiting() });
 			const unsortedAlerts = alerts.features ?? [];
-			const sortedAlerts = unsortedAlerts.sort((a, b) => (hazardLevels[b.properties.severity] ?? 0) - (hazardLevels[a.properties.severity] ?? 0));
-			const filteredAlerts = sortedAlerts.filter((hazard) => hazard.properties.severity !== 'Unknown');
+			const hasImmediate = unsortedAlerts.reduce((acc, hazard) => acc || hazard.properties.urgency === 'Immediate', false);
+			const sortedAlerts = unsortedAlerts.sort((a, b) => (calcSeverity(b.properties.severity, b.properties.event)) - (calcSeverity(a.properties.severity, a.properties.event)));
+			const filteredAlerts = sortedAlerts.filter((hazard) => hazard.properties.severity !== 'Unknown' && (!hasImmediate || (hazard.properties.urgency === 'Immediate')));
 			this.data = filteredAlerts;
 
 			// show alert indicator
@@ -66,7 +73,7 @@ class Hazards extends WeatherDisplay {
 		const lines = this.data.map((data) => {
 			const fillValues = {};
 			// text
-			fillValues['hazard-text'] = `${data.properties.event}<br/><br/>${data.properties.description.replace('\n', '<br/><br/>')}`;
+			fillValues['hazard-text'] = `${data.properties.event}<br/><br/>${data.properties.description.replaceAll('\n\n', '<br/><br/>').replaceAll('\n', ' ')}`;
 
 			return this.fillTemplate('hazard', fillValues);
 		});
@@ -134,7 +141,26 @@ class Hazards extends WeatherDisplay {
 			this.getDataCallbacks.push(() => resolve(this.data));
 		});
 	}
+
+	// after we roll through the hazards once, don't display again until the next refresh (10 minutes)
+	screenIndexFromBaseCount() {
+		const superValue = super.screenIndexFromBaseCount();
+		// false is returned when we reach the end of the scroll
+		if (superValue === false) {
+			// set total screens to zero to take this out of the rotation
+			this.timing.totalScreens = 0;
+		}
+		// return the value as expected
+		return superValue;
+	}
 }
 
+const calcSeverity = (severity, event) => {
+	// base severity plus some modifiers for specific types of warnings
+	const baseSeverity = hazardLevels[severity] ?? 0;
+	const modifiedSeverity = hazardModifiers[event] ?? 0;
+	return baseSeverity + modifiedSeverity;
+};
+
 // register display
 registerDisplay(new Hazards(0, 'hazards', true));

server/scripts/modules/hourly.mjs

@@ -109,7 +109,7 @@ class Hourly extends WeatherDisplay {
 	// base count change callback
 	baseCountChange(count) {
 		// calculate scroll offset and don't go past end
-		let offsetY = Math.min(this.elem.querySelector('.hourly-lines').getBoundingClientRect().height - 289, (count - 150));
+		let offsetY = Math.min(this.elem.querySelector('.hourly-lines').offsetHeight - 289, (count - 150));
 
 		// don't let offset go negative
 		if (offsetY < 0) offsetY = 0;

server/scripts/modules/icons.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/consistent-function-scoping */
 /* spell-checker: disable */
 
 const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
@@ -21,136 +20,138 @@ const getWeatherRegionalIconFromIconLink = (link, _isNightTime) => {
 
 	// find the icon
 	switch (conditionName + (isNightTime ? '-n' : '')) {
-	case 'skc':
-	case 'hot':
-	case 'haze':
-		return addPath('Sunny.gif');
+		case 'skc':
+		case 'hot':
+		case 'haze':
+			return addPath('Sunny.gif');
 
-	case 'skc-n':
-	case 'nskc':
-	case 'nskc-n':
-	case 'cold-n':
-		return addPath('Clear-1992.gif');
+		case 'skc-n':
+		case 'nskc':
+		case 'nskc-n':
+		case 'cold-n':
+			return addPath('Clear-1992.gif');
 
-	case 'bkn':
-		return addPath('Mostly-Cloudy-1994-2.gif');
+		case 'bkn':
+			return addPath('Mostly-Cloudy-1994-2.gif');
 
-	case 'bkn-n':
-	case 'few-n':
-	case 'nfew-n':
-	case 'nfew':
-		return addPath('Partly-Clear-1994-2.gif');
+		case 'bkn-n':
+		case 'few-n':
+		case 'nfew-n':
+		case 'nfew':
+			return addPath('Partly-Clear-1994-2.gif');
 
-	case 'sct':
-	case 'few':
-		return addPath('Partly-Cloudy.gif');
+		case 'sct':
+		case 'few':
+			return addPath('Partly-Cloudy.gif');
 
-	case 'sct-n':
-	case 'nsct':
-	case 'nsct-n':
-		return addPath('Mostly-Clear.gif');
+		case 'sct-n':
+		case 'nsct':
+		case 'nsct-n':
+			return addPath('Mostly-Clear.gif');
 
-	case 'ovc':
-	case 'ovc-n':
-		return addPath('Cloudy.gif');
+		case 'ovc':
+		case 'ovc-n':
+			return addPath('Cloudy.gif');
 
-	case 'fog':
-	case 'fog-n':
-		return addPath('Fog.gif');
+		case 'fog':
+		case 'fog-n':
+			return addPath('Fog.gif');
 
-	case 'rain_sleet':
-		return addPath('Sleet.gif');
+		case 'rain_sleet':
+			return addPath('Sleet.gif');
 
-	case 'rain_showers':
-	case 'rain_showers_high':
-		return addPath('Scattered-Showers-1994-2.gif');
+		case 'rain_showers':
+		case 'rain_showers_high':
+			return addPath('Scattered-Showers-1994-2.gif');
 
-	case 'rain_showers-n':
-	case 'rain_showers_high-n':
-		return addPath('Scattered-Showers-Night-1994-2.gif');
+		case 'rain_showers-n':
+		case 'rain_showers_high-n':
+			return addPath('Scattered-Showers-Night-1994-2.gif');
 
-	case 'rain':
-	case 'rain-n':
-		return addPath('Rain-1992.gif');
+		case 'rain':
+		case 'rain-n':
+			return addPath('Rain-1992.gif');
 
-		// case 'snow':
-		// 	return addPath('Light-Snow.gif');
-		// 	break;
+			// case 'snow':
+			// 	return addPath('Light-Snow.gif');
+			// 	break;
 
-		// case 'cc_snowshowers.gif':
-		// 	//case "heavy-snow.gif":
-		// 	return addPath('AM-Snow-1994.gif');
-		// 	break;
+			// case 'cc_snowshowers.gif':
+			// 	//case "heavy-snow.gif":
+			// 	return addPath('AM-Snow-1994.gif');
+			// 	break;
 
-	case 'snow':
-	case 'snow-n':
-		if (value > 50)	return addPath('Heavy-Snow-1994-2.gif');
-		return addPath('Light-Snow.gif');
+		case 'snow':
+		case 'snow-n':
+			if (value > 50) return addPath('Heavy-Snow-1994-2.gif');
+			return addPath('Light-Snow.gif');
 
-	case 'rain_snow':
-	case 'rain_snow-n':
-		return addPath('Rain-Snow-1992.gif');
+		case 'rain_snow':
+		case 'rain_snow-n':
+			return addPath('Rain-Snow-1992.gif');
 
-	case 'snow_fzra':
-	case 'snow_fzra-n':
-		return addPath('Freezing-Rain-Snow-1992.gif');
+		case 'snow_fzra':
+		case 'snow_fzra-n':
+			return addPath('Freezing-Rain-Snow-1992.gif');
 
-	case 'fzra':
-	case 'fzra-n':
-	case 'rain_fzra':
-	case 'rain_fzra-n':
-		return addPath('Freezing-Rain-1992.gif');
+		case 'fzra':
+		case 'fzra-n':
+		case 'rain_fzra':
+		case 'rain_fzra-n':
+			return addPath('Freezing-Rain-1992.gif');
 
-	case 'snow_sleet':
-	case 'snow_sleet-n':
-		return addPath('Snow and Sleet.gif');
+		case 'snow_sleet':
+		case 'snow_sleet-n':
+			return addPath('Snow and Sleet.gif');
 
-	case 'sleet':
-	case 'sleet-n':
-		return addPath('Sleet.gif');
+		case 'sleet':
+		case 'sleet-n':
+			return addPath('Sleet.gif');
 
-	case 'tsra_sct':
-	case 'tsra':
-		return addPath('Scattered-Tstorms-1994-2.gif');
+		case 'tsra_sct':
+		case 'tsra':
+			return addPath('Scattered-Tstorms-1994-2.gif');
 
-	case 'tsra_sct-n':
-	case 'tsra-n':
-		return addPath('Scattered-Tstorms-Night-1994-2.gif');
+		case 'tsra_sct-n':
+		case 'tsra-n':
+			return addPath('Scattered-Tstorms-Night-1994-2.gif');
 
-	case 'tsra_hi':
-	case 'tsra_hi-n':
-	case 'hurricane':
-	case 'tropical_storm':
-		return addPath('Thunderstorm.gif');
+		case 'tsra_hi':
+		case 'tsra_hi-n':
+		case 'hurricane':
+		case 'tropical_storm':
+		case 'hurricane-n':
+		case 'tropical_storm-n':
+			return addPath('Thunderstorm.gif');
 
-	case 'wind':
-	case 'wind_few':
-	case 'wind_sct':
-	case 'wind_bkn':
-	case 'wind_ovc':
-	case 'wind-n':
-	case 'wind_few-n':
-	case 'wind_bkn-n':
-	case 'wind_ovc-n':
-		return addPath('Wind.gif');
+		case 'wind':
+		case 'wind_few':
+		case 'wind_sct':
+		case 'wind_bkn':
+		case 'wind_ovc':
+		case 'wind-n':
+		case 'wind_few-n':
+		case 'wind_bkn-n':
+		case 'wind_ovc-n':
+			return addPath('Wind.gif');
 
-	case 'wind_skc':
-		return addPath('Sunny-Wind-1994.gif');
+		case 'wind_skc':
+			return addPath('Sunny-Wind-1994.gif');
 
-	case 'wind_skc-n':
-	case 'wind_sct-n':
-		return addPath('Clear-Wind-1994.gif');
+		case 'wind_skc-n':
+		case 'wind_sct-n':
+			return addPath('Clear-Wind-1994.gif');
 
-	case 'blizzard':
-	case 'blizzard-n':
-		return addPath('Blowing Snow.gif');
+		case 'blizzard':
+		case 'blizzard-n':
+			return addPath('Blowing Snow.gif');
 
-	case 'cold':
-		return addPath('cold.gif');
+		case 'cold':
+			return addPath('cold.gif');
 
-	default:
-		console.log(`Unable to locate regional icon for ${conditionName} ${link} ${isNightTime}`);
-		return false;
+		default:
+			console.log(`Unable to locate regional icon for ${conditionName} ${link} ${isNightTime}`);
+			return false;
 	}
 };
 
@@ -176,120 +177,122 @@ const getWeatherIconFromIconLink = (link, _isNightTime) => {
 
 	// find the icon
 	switch (conditionName + (isNightTime ? '-n' : '')) {
-	case 'skc':
-	case 'hot':
-	case 'haze':
-	case 'cold':
-		return addPath('CC_Clear1.gif');
+		case 'skc':
+		case 'hot':
+		case 'haze':
+		case 'cold':
+			return addPath('CC_Clear1.gif');
 
-	case 'skc-n':
-	case 'nskc':
-	case 'nskc-n':
-	case 'cold-n':
-		return addPath('CC_Clear0.gif');
+		case 'skc-n':
+		case 'nskc':
+		case 'nskc-n':
+		case 'cold-n':
+			return addPath('CC_Clear0.gif');
 
-	case 'sct':
-	case 'few':
-	case 'bkn':
-		return addPath('CC_PartlyCloudy1.gif');
+		case 'sct':
+		case 'few':
+		case 'bkn':
+			return addPath('CC_PartlyCloudy1.gif');
 
-	case 'bkn-n':
-	case 'few-n':
-	case 'nfew-n':
-	case 'nfew':
-	case 'sct-n':
-	case 'nsct':
-	case 'nsct-n':
-		return addPath('CC_PartlyCloudy0.gif');
+		case 'bkn-n':
+		case 'few-n':
+		case 'nfew-n':
+		case 'nfew':
+		case 'sct-n':
+		case 'nsct':
+		case 'nsct-n':
+			return addPath('CC_PartlyCloudy0.gif');
 
-	case 'ovc':
-	case 'novc':
-	case 'ovc-n':
-		return addPath('CC_Cloudy.gif');
+		case 'ovc':
+		case 'novc':
+		case 'ovc-n':
+			return addPath('CC_Cloudy.gif');
 
-	case 'fog':
-	case 'fog-n':
-		return addPath('CC_Fog.gif');
+		case 'fog':
+		case 'fog-n':
+			return addPath('CC_Fog.gif');
 
-	case 'rain_sleet':
-	case 'rain_sleet-n':
-	case 'sleet':
-	case 'sleet-n':
-		return addPath('Sleet.gif');
+		case 'rain_sleet':
+		case 'rain_sleet-n':
+		case 'sleet':
+		case 'sleet-n':
+			return addPath('Sleet.gif');
 
-	case 'rain_showers':
-	case 'rain_showers_high':
-		return addPath('CC_Showers.gif');
+		case 'rain_showers':
+		case 'rain_showers_high':
+			return addPath('CC_Showers.gif');
 
-	case 'rain_showers-n':
-	case 'rain_showers_high-n':
-		return addPath('CC_Showers.gif');
+		case 'rain_showers-n':
+		case 'rain_showers_high-n':
+			return addPath('CC_Showers.gif');
 
-	case 'rain':
-	case 'rain-n':
-		return addPath('CC_Rain.gif');
+		case 'rain':
+		case 'rain-n':
+			return addPath('CC_Rain.gif');
 
-		// case 'snow':
-		// 	return addPath('Light-Snow.gif');
-		// 	break;
+			// case 'snow':
+			// 	return addPath('Light-Snow.gif');
+			// 	break;
 
-		// case 'cc_snowshowers.gif':
-		// 	//case "heavy-snow.gif":
-		// 	return addPath('AM-Snow-1994.gif');
-		// 	break;
+			// case 'cc_snowshowers.gif':
+			// 	//case "heavy-snow.gif":
+			// 	return addPath('AM-Snow-1994.gif');
+			// 	break;
 
-	case 'snow':
-	case 'snow-n':
-		if (value > 50)	return addPath('CC_Snow.gif');
-		return addPath('CC_SnowShowers.gif');
+		case 'snow':
+		case 'snow-n':
+			if (value > 50) return addPath('CC_Snow.gif');
+			return addPath('CC_SnowShowers.gif');
 
-	case 'rain_snow':
-		return addPath('CC_RainSnow.gif');
+		case 'rain_snow':
+			return addPath('CC_RainSnow.gif');
 
-	case 'snow_fzra':
-	case 'snow_fzra-n':
-	case 'fzra':
-	case 'fzra-n':
-	case 'rain_fzra':
-	case 'rain_fzra-n':
-		return addPath('CC_FreezingRain.gif');
+		case 'snow_fzra':
+		case 'snow_fzra-n':
+		case 'fzra':
+		case 'fzra-n':
+		case 'rain_fzra':
+		case 'rain_fzra-n':
+			return addPath('CC_FreezingRain.gif');
 
-	case 'snow_sleet':
-		return addPath('Snow-Sleet.gif');
+		case 'snow_sleet':
+			return addPath('Snow-Sleet.gif');
 
-	case 'tsra_sct':
-	case 'tsra':
-		return addPath('EF_ScatTstorms.gif');
+		case 'tsra_sct':
+		case 'tsra':
+			return addPath('EF_ScatTstorms.gif');
 
-	case 'tsra_sct-n':
-	case 'tsra-n':
-		return addPath('CC_TStorm.gif');
+		case 'tsra_sct-n':
+		case 'tsra-n':
+			return addPath('CC_TStorm.gif');
 
-	case 'tsra_hi':
-	case 'tsra_hi-n':
-	case 'hurricane':
-	case 'tropical_storm':
-		return addPath('CC_TStorm.gif');
+		case 'tsra_hi':
+		case 'tsra_hi-n':
+		case 'hurricane':
+		case 'tropical_storm':
+		case 'hurricane-n':
+		case 'tropical_storm-n':
+			return addPath('CC_TStorm.gif');
 
-	case 'wind_few':
-	case 'wind_sct':
-	case 'wind_bkn':
-	case 'wind_ovc':
-	case 'wind_skc':
-	case 'wind_few-n':
-	case 'wind_bkn-n':
-	case 'wind_ovc-n':
-	case 'wind_skc-n':
-	case 'wind_sct-n':
-		return addPath('CC_Windy.gif');
+		case 'wind_few':
+		case 'wind_sct':
+		case 'wind_bkn':
+		case 'wind_ovc':
+		case 'wind_skc':
+		case 'wind_few-n':
+		case 'wind_bkn-n':
+		case 'wind_ovc-n':
+		case 'wind_skc-n':
+		case 'wind_sct-n':
+			return addPath('CC_Windy.gif');
 
-	case 'blizzard':
-	case 'blizzard-n':
-		return addPath('Blowing-Snow.gif');
+		case 'blizzard':
+		case 'blizzard-n':
+			return addPath('Blowing-Snow.gif');
 
-	default:
-		console.log(`Unable to locate icon for ${conditionName} ${link} ${isNightTime}`);
-		return false;
+		default:
+			console.log(`Unable to locate icon for ${conditionName} ${link} ${isNightTime}`);
+			return false;
 	}
 };
 

server/scripts/modules/navigation.mjs

@@ -238,30 +238,30 @@ const setPlaying = (newValue) => {
 // handle all navigation buttons
 const handleNavButton = (button) => {
 	switch (button) {
-	case 'play':
-		setPlaying(true);
-		break;
-	case 'playToggle':
-		setPlaying(!playing);
-		break;
-	case 'stop':
-		setPlaying(false);
-		break;
-	case 'next':
-		setPlaying(false);
-		navTo(msg.command.nextFrame);
-		break;
-	case 'previous':
-		setPlaying(false);
-		navTo(msg.command.previousFrame);
-		break;
-	case 'menu':
-		setPlaying(false);
-		progress.showCanvas();
-		hideAllCanvases();
-		break;
-	default:
-		console.error(`Unknown navButton ${button}`);
+		case 'play':
+			setPlaying(true);
+			break;
+		case 'playToggle':
+			setPlaying(!playing);
+			break;
+		case 'stop':
+			setPlaying(false);
+			break;
+		case 'next':
+			setPlaying(false);
+			navTo(msg.command.nextFrame);
+			break;
+		case 'previous':
+			setPlaying(false);
+			navTo(msg.command.previousFrame);
+			break;
+		case 'menu':
+			setPlaying(false);
+			progress.showCanvas();
+			hideAllCanvases();
+			break;
+		default:
+			console.error(`Unknown navButton ${button}`);
 	}
 };
 
@@ -275,7 +275,7 @@ const resize = () => {
 	const heightZoomPercent = (window.innerHeight) / 480;
 
 	const scale = Math.min(widthZoomPercent, heightZoomPercent);
-	if (scale < 1.0 || document.fullscreenElement) {
+	if (scale < 1.0 || document.fullscreenElement || settings.kiosk) {
 		document.querySelector('#container').style.transform = `scale(${scale})`;
 	} else {
 		document.querySelector('#container').style.transform = 'unset';

server/scripts/modules/radar.mjs

@@ -157,7 +157,7 @@ class Radar extends WeatherDisplay {
 					minute,
 				}, {
 					zone: 'UTC',
-				}).setZone();
+				}).setZone(timeZone());
 			} else {
 				time = DateTime.fromHTTP(response.headers.get('last-modified')).setZone(timeZone());
 			}

server/scripts/modules/settings.mjs

@@ -4,19 +4,28 @@ document.addEventListener('DOMContentLoaded', () => {
 	init();
 });
 
-const settings = {};
+// default speed
+const settings = { speed: { value: 1.0 } };
 
 const init = () => {
 	// create settings
-	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange);
+	settings.wide = new Setting('wide', 'Widescreen', 'boolean', false, wideScreenChange, true);
+	settings.kiosk = new Setting('kiosk', 'Kiosk', 'boolean', false, kioskChange, false);
+	settings.speed = new Setting('speed', 'Speed', 'select', 1.0, null, true, [
+		[0.5, 'Very Fast'],
+		[0.75, 'Fast'],
+		[1.0, 'Normal'],
+		[1.25, 'Slow'],
+		[1.5, 'Very Slow'],
+	]);
 
-	// generate checkboxes
-	const checkboxes = Object.values(settings).map((d) => d.generateCheckbox());
+	// generate html objects
+	const settingHtml = Object.values(settings).map((d) => d.generate());
 
 	// write to page
 	const settingsSection = document.querySelector('#settings');
 	settingsSection.innerHTML = '';
-	settingsSection.append(...checkboxes);
+	settingsSection.append(...settingHtml);
 };
 
 const wideScreenChange = (value) => {
@@ -28,4 +37,14 @@ const wideScreenChange = (value) => {
 	}
 };
 
+const kioskChange = (value) => {
+	const body = document.querySelector('body');
+	if (value) {
+		body.classList.add('kiosk');
+		window.dispatchEvent(new Event('resize'));
+	} else {
+		body.classList.remove('kiosk');
+	}
+};
+
 export default settings;

server/scripts/modules/share.mjs

@@ -0,0 +1,112 @@
+document.addEventListener('DOMContentLoaded', () => init());
+
+// shorthand mappings for frequently used values
+const specialMappings = {
+	kiosk: 'settings-kiosk-checkbox',
+};
+
+const init = () => {
+	// add action to existing link
+	const shareLink = document.querySelector('#share-link');
+	shareLink.addEventListener('click', createLink);
+
+	// if navigator.clipboard does not exist, change text
+	if (!navigator?.clipboard) {
+		shareLink.textContent = 'Get Permalink';
+	}
+};
+
+const createLink = async (e) => {
+	// cancel default event (click on hyperlink)
+	e.preventDefault();
+	// get all checkboxes on page
+	const checkboxes = document.querySelectorAll('input[type=checkbox]');
+
+	// list to receive checkbox statuses
+	const queryStringElements = {};
+
+	[...checkboxes].forEach((elem) => {
+		if (elem?.id) {
+			queryStringElements[elem.id] = elem?.checked ?? false;
+		}
+	});
+
+	// get all select boxes
+	const selects = document.querySelectorAll('select');
+	[...selects].forEach((elem) => {
+		if (elem?.id) {
+			queryStringElements[elem.id] = elem?.value ?? 0;
+		}
+	});
+
+	// add the location string
+	queryStringElements.latLonQuery = localStorage.getItem('latLonQuery');
+	queryStringElements.latLon = localStorage.getItem('latLon');
+
+	const queryString = (new URLSearchParams(queryStringElements)).toString();
+
+	const url = new URL(`?${queryString}`, document.location.href);
+
+	// send to proper function based on availability of clipboard
+	if (navigator?.clipboard) {
+		copyToClipboard(url);
+	} else {
+		writeLinkToPage(url);
+	}
+};
+
+const copyToClipboard = async (url) => {
+	try {
+		// write to clipboard
+		await navigator.clipboard.writeText(url.toString());
+		// alert user
+		const confirmSpan = document.querySelector('#share-link-copied');
+		confirmSpan.style.display = 'inline';
+
+		// hide confirm text after 5 seconds
+		setTimeout(() => {
+			confirmSpan.style.display = 'none';
+		}, 5000);
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+const writeLinkToPage = (url) => {
+	// get elements
+	const shareLinkInstructions = document.querySelector('#share-link-instructions');
+	const shareLinkUrl = shareLinkInstructions.querySelector('#share-link-url');
+	// populate url and display
+	shareLinkUrl.value = url;
+	shareLinkInstructions.style.display = 'inline';
+	// highlight for convenience
+	shareLinkUrl.focus();
+	shareLinkUrl.select();
+};
+
+const parseQueryString = () => {
+	// return memoized result
+	if (parseQueryString.params) return parseQueryString.params;
+	const urlSearchParams = new URLSearchParams(window.location.search);
+
+	// turn into an array of key-value pairs
+	const paramsArray = [...urlSearchParams];
+
+	// add additional expanded keys
+	paramsArray.forEach((paramPair) => {
+		const expandedKey = specialMappings[paramPair[0]];
+		if (expandedKey) {
+			paramsArray.push([expandedKey, paramPair[1]]);
+		}
+	});
+
+	// memoize result
+	parseQueryString.params = Object.fromEntries(paramsArray);
+
+	return parseQueryString.params;
+};
+
+export {
+	createLink,
+	parseQueryString,
+};

server/scripts/modules/status.mjs

@@ -9,20 +9,20 @@ const STATUS = {
 
 const calcStatusClass = (statusCode) => {
 	switch (statusCode) {
-	case STATUS.loading:
-		return 'loading';
-	case STATUS.loaded:
-		return 'press-here';
-	case STATUS.failed:
-		return 'failed';
-	case STATUS.noData:
-		return 'no-data';
-	case STATUS.disabled:
-		return 'disabled';
-	case STATUS.retrying:
-		return 'retrying';
-	default:
-		return '';
+		case STATUS.loading:
+			return 'loading';
+		case STATUS.loaded:
+			return 'press-here';
+		case STATUS.failed:
+			return 'failed';
+		case STATUS.noData:
+			return 'no-data';
+		case STATUS.disabled:
+			return 'disabled';
+		case STATUS.retrying:
+			return 'retrying';
+		default:
+			return '';
 	}
 };
 

server/scripts/modules/travelforecast.mjs

@@ -131,7 +131,7 @@ class TravelForecast extends WeatherDisplay {
 	// base count change callback
 	baseCountChange(count) {
 		// calculate scroll offset and don't go past end
-		let offsetY = Math.min(this.elem.querySelector('.travel-lines').getBoundingClientRect().height - 289, (count - 150));
+		let offsetY = Math.min(this.elem.querySelector('.travel-lines').offsetHeight - 289, (count - 150));
 
 		// don't let offset go negative
 		if (offsetY < 0) offsetY = 0;

server/scripts/modules/utils/cors.mjs

@@ -1,8 +1,8 @@
 // rewrite some urls for local server
 const rewriteUrl = (_url) => {
 	let url = _url;
-	url = url.replace('https://api.weather.gov/', window.location.href);
-	url = url.replace('https://www.cpc.ncep.noaa.gov/', window.location.href);
+	url = url.replace('https://api.weather.gov/', `${window.location.protocol}//${window.location.host}/`);
+	url = url.replace('https://www.cpc.ncep.noaa.gov/', `${window.location.protocol}//${window.location.host}/`);
 	return url;
 };
 

server/scripts/modules/utils/fetch.mjs

@@ -21,7 +21,7 @@ const fetchAsync = async (_url, responseType, _params = {}) => {
 	if (params.cors === true) corsUrl = rewriteUrl(_url);
 	const url = new URL(corsUrl, `${window.location.origin}/`);
 	// match the security protocol when not on localhost
-	url.protocol = window.location.hostname === 'localhost' ? url.protocol : window.location.protocol;
+	// url.protocol = window.location.hostname === 'localhost' ? url.protocol : window.location.protocol;
 	// add parameters if necessary
 	if (params.data) {
 		Object.keys(params.data).forEach((key) => {
@@ -39,14 +39,14 @@ const fetchAsync = async (_url, responseType, _params = {}) => {
 	if (!response.ok) throw new Error(`Fetch error ${response.status} ${response.statusText} while fetching ${response.url}`);
 	// return the requested response
 	switch (responseType) {
-	case 'json':
-		return response.json();
-	case 'text':
-		return response.text();
-	case 'blob':
-		return response.blob();
-	default:
-		return response;
+		case 'json':
+			return response.json();
+		case 'text':
+			return response.text();
+		case 'blob':
+			return response.blob();
+		default:
+			return response;
 	}
 };
 
@@ -84,11 +84,11 @@ const delay = (time, func, ...args) => new Promise((resolve) => {
 
 const retryDelay = (retryNumber) => {
 	switch (retryNumber) {
-	case 1: return 1000;
-	case 2: return 2000;
-	case 3: return 5000;
-	case 4: return 10_000;
-	default: return 30_000;
+		case 1: return 1000;
+		case 2: return 2000;
+		case 3: return 5000;
+		case 4: return 10_000;
+		default: return 30_000;
 	}
 };
 

server/scripts/modules/utils/setting.mjs

@@ -1,24 +1,77 @@
+import { parseQueryString } from '../share.mjs';
+
 const SETTINGS_KEY = 'Settings';
 
 class Setting {
-	constructor(shortName, name, type, defaultValue, changeAction) {
+	constructor(shortName, name, type, defaultValue, changeAction, sticky, values) {
 		// store values
 		this.shortName = shortName;
 		this.name = name;
 		this.defaultValue = defaultValue;
 		this.myValue = defaultValue;
-		this.type = type;
-		// a defualt blank change function is provded
-		this.changeAction = changeAction ?? (() => {});
+		this.type = type ?? 'checkbox';
+		this.sticky = sticky;
+		this.values = values;
+		// a default blank change function is provided
+		this.changeAction = changeAction ?? (() => { });
+
+		// get value from url
+		const urlValue = parseQueryString()?.[`settings-${shortName}-${type}`];
+		let urlState;
+		if (type === 'checkbox' && urlValue !== undefined) {
+			urlState = urlValue === 'true';
+		}
+		if (type === 'select' && urlValue !== undefined) {
+			urlState = parseFloat(urlValue);
+		}
 
 		// get existing value if present
-		const storedValue = this.getFromLocalStorage();
-		if (storedValue !== null) {
+		const storedValue = urlState ?? this.getFromLocalStorage();
+		if (sticky && storedValue !== null) {
 			this.myValue = storedValue;
 		}
 
 		// call the change function on startup
-		this.changeAction(this.myValue);
+		switch (type) {
+			case 'select':
+				this.selectChange({ target: { value: this.myValue } });
+				break;
+			case 'checkbox':
+			default:
+				this.checkboxChange({ target: { checked: this.myValue } });
+		}
+	}
+
+	generateSelect() {
+		// create a radio button set in the selected displays area
+		const label = document.createElement('label');
+		label.for = `settings-${this.shortName}-select`;
+		label.id = `settings-${this.shortName}-label`;
+
+		const span = document.createElement('span');
+		span.innerHTML = `${this.name} `;
+		label.append(span);
+
+		const select = document.createElement('select');
+		select.id = `settings-${this.shortName}-select`;
+		select.name = `settings-${this.shortName}-select`;
+		select.addEventListener('change', (e) => this.selectChange(e));
+
+		this.values.forEach(([value, text]) => {
+			const option = document.createElement('option');
+			option.value = value.toFixed(2);
+
+			option.innerHTML = text;
+			select.append(option);
+		});
+		label.append(select);
+
+		this.element = label;
+
+		// set the initial value
+		this.selectHighlight(this.myValue);
+
+		return label;
 	}
 
 	generateCheckbox() {
@@ -38,7 +91,7 @@ class Setting {
 
 		label.append(checkbox, span);
 
-		this.checkbox = label;
+		this.element = label;
 
 		return label;
 	}
@@ -52,7 +105,17 @@ class Setting {
 		this.changeAction(this.myValue);
 	}
 
+	selectChange(e) {
+		// update the value
+		this.myValue = parseFloat(e.target.value);
+		this.storeToLocalStorage(this.myValue);
+
+		// call the change action
+		this.changeAction(this.myValue);
+	}
+
 	storeToLocalStorage(value) {
+		if (!this.sticky) return;
 		const allSettingsString = localStorage?.getItem(SETTINGS_KEY) ?? '{}';
 		const allSettings = JSON.parse(allSettingsString);
 		allSettings[this.shortName] = value;
@@ -66,12 +129,12 @@ class Setting {
 				const storedValue = JSON.parse(allSettings)?.[this.shortName];
 				if (storedValue !== undefined) {
 					switch (this.type) {
-					case 'boolean':
-						return storedValue;
-					case 'int':
-						return storedValue;
-					default:
-						return null;
+						case 'boolean':
+							return storedValue;
+						case 'select':
+							return storedValue;
+						default:
+							return null;
 					}
 				}
 			}
@@ -86,7 +149,37 @@ class Setting {
 	}
 
 	set value(newValue) {
+		// update the state
 		this.myValue = newValue;
+		switch (this.type) {
+			case 'select':
+				this.selectHighlight(newValue);
+				break;
+			case 'checkbox':
+			default:
+				this.element.checked = newValue;
+		}
+		this.storeToLocalStorage(this.myValue);
+
+		// call change action
+		this.changeAction(this.myValue);
+	}
+
+	selectHighlight(newValue) {
+		// set the dropdown to the provided value
+		this.element.querySelectorAll('option').forEach((elem) => {
+			elem.selected = newValue.toFixed(2) === elem.value;
+		});
+	}
+
+	generate() {
+		switch (this.type) {
+			case 'select':
+				return this.generateSelect();
+			case 'checkbox':
+			default:
+				return this.generateCheckbox();
+		}
 	}
 }
 

server/scripts/modules/weatherdisplay.mjs

@@ -5,6 +5,8 @@ import { DateTime } from '../vendor/auto/luxon.mjs';
 import {
 	msg, displayNavMessage, isPlaying, updateStatus, timeZone,
 } from './navigation.mjs';
+import { parseQueryString } from './share.mjs';
+import settings from './settings.mjs';
 
 class WeatherDisplay {
 	constructor(navId, elemId, name, defaultEnabled) {
@@ -50,8 +52,15 @@ class WeatherDisplay {
 		// no checkbox if progress
 		if (this.elemId === 'progress') return false;
 
-		// get the saved status of the checkbox
-		let savedStatus = window.localStorage.getItem(`display-enabled: ${this.elemId}`);
+		// get url provided state
+		const urlValue = parseQueryString()?.[`${this.elemId}-checkbox`];
+		let urlState;
+		if (urlValue !== undefined) {
+			urlState = urlValue === 'true';
+		}
+
+		// get the saved status of the checkbox, but defer to a value set in the url
+		let savedStatus = urlState ?? window.localStorage.getItem(`display-enabled: ${this.elemId}`);
 		if (savedStatus === null) savedStatus = defaultEnabled;
 		this.isEnabled = !!((savedStatus === 'true' || savedStatus === true));
 
@@ -161,7 +170,7 @@ class WeatherDisplay {
 			// auto clock refresh
 			if (!this.dateTimeInterval) {
 				// only draw if canvas is active to conserve battery
-				setInterval(() => this.active && this.drawCurrentDateTime(), 100);
+				this.dateTimeInterval = setInterval(() => this.active && this.drawCurrentDateTime(), 100);
 			}
 		}
 	}
@@ -350,7 +359,7 @@ class WeatherDisplay {
 
 	// start and stop base counter
 	startNavCount() {
-		if (!this.navInterval) this.navInterval = setInterval(() => this.navBaseTime(), this.timing.baseDelay);
+		if (!this.navInterval) this.navInterval = setInterval(() => this.navBaseTime(), this.timing.baseDelay * settings.speed.value);
 	}
 
 	resetNavBaseCount() {

server/scripts/vendor/auto/swiped-events.js

@@ -35,6 +35,7 @@
     var yDiff = null;
     var timeDown = null;
     var startEl = null;
+    var touchCount = 0;
 
     /**
      * Fires swiped event if swipe detected on touchend
@@ -84,6 +85,7 @@
             var eventData = {
                 dir: eventType.replace(/swiped-/, ''),
                 touchType: (changedTouches[0] || {}).touchType || 'direct',
+                fingers: touchCount, // Number of fingers used
                 xStart: parseInt(xDown, 10),
                 xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
                 yStart: parseInt(yDown, 10),
@@ -102,7 +104,6 @@
         yDown = null;
         timeDown = null;
     }
-
     /**
      * Records current location on touchstart event
      * @param {object} e - browser event object
@@ -120,6 +121,7 @@
         yDown = e.touches[0].clientY;
         xDiff = 0;
         yDiff = 0;
+        touchCount = e.touches.length;
     }
 
     /**

server/styles/scss/_page.scss

@@ -1,4 +1,5 @@
 @use 'shared/_utils'as u;
+@use 'shared/_colors'as c;
 
 @font-face {
 	font-family: "Star4000";
@@ -18,6 +19,10 @@ body {
 			color: lightblue;
 		}
 	}
+
+	&.kiosk {
+		margin: 0px;
+	}
 }
 
 #divQuery {
@@ -301,13 +306,18 @@ body {
 	background: url(../images/BackGround1_1_wide.png)
 }
 
-#divTwc:fullscreen #container {
+#divTwc:fullscreen #container,
+.kiosk #divTwc #container {
 	// background-image: none;
 	width: unset;
 	height: unset;
 	transform-origin: unset;
 }
 
+.kiosk #divTwc #container {
+	transform-origin: 0 0;
+}
+
 #loading {
 	width: 640px;
 	height: 480px;
@@ -343,7 +353,8 @@ body {
 	margin-bottom: 15px;
 }
 
-#enabledDisplays {
+#enabledDisplays,
+#settings {
 	margin-bottom: 15px;
 	@include u.status-colors();
 
@@ -395,18 +406,29 @@ body {
 	transform: scale(0.75);
 }
 
-#divTwc:fullscreen {
+#divTwc:fullscreen,
+.kiosk #divTwc {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	align-content: center;
+
+	&.no-cursor {
+		cursor: none;
+	}
 }
 
-#divTwc:fullscreen #display {
+.kiosk #divTwc {
+	justify-content: unset;
+}
+
+#divTwc:fullscreen #display,
+.kiosk #divTwc #display {
 	position: relative;
 }
 
-#divTwc:fullscreen #divTwcBottom {
+#divTwc:fullscreen #divTwcBottom,
+.kiosk #divTwc #divTwcBottom {
 	display: flex;
 	flex-direction: row;
 	background-color: rgb(0 0 0 / 0.5);
@@ -416,6 +438,14 @@ body {
 	bottom: 0px;
 }
 
+.kiosk {
+	#divTwc #divTwcBottom {
+		>div {
+			display: none;
+		}
+	}
+}
+
 .navButton {
 	cursor: pointer;
 }
@@ -423,10 +453,10 @@ body {
 .visible {
 	visibility: visible;
 	opacity: 1;
-	transition: opacity 1s linear;
+	transition: opacity 0.1s linear;
 }
 
-.hidden {
+#divTwc:fullscreen .hidden {
 	visibility: hidden;
 	opacity: 0;
 	transition: visibility 0s 1s, opacity 1s linear
@@ -697,4 +727,26 @@ body {
 			}
 		}
 	}
+}
+
+#share-link-copied {
+	color: c.$title-color;
+	display: none;
+}
+
+#share-link-instructions {
+	display: none;
+}
+
+.kiosk {
+
+	#divQuery,
+	>.info,
+	>.heading,
+	#enabledDisplays,
+	#settings,
+	#divInfo,
+	#divRefresh {
+		display: none;
+	}
 }

views/index.ejs

@@ -45,7 +45,7 @@
   <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>
@@ -151,6 +151,16 @@
 	<div id='settings'>
 	</div>
 
+	<div class='heading'>Sharing</div>
+	<div class='info'>
+		<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
+		<div id="share-link-instructions">
+			Copy this long URL:
+			<input type='text' id="share-link-url"></div>
+		</div>
+	</div>
+
+	<div class='heading'>Forecast Information</div>
   <div id="divInfo">
     Location: <span id="spanCity"></span> <span id="spanState"></span><br />
     Station Id: <span id="spanStationId"></span><br />

ws4kp.code-workspace

@@ -53,5 +53,10 @@
 		},
 		"files.exclude": {},
 		"files.eol": "\n",
+		"editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+			"source.fixAll.eslint": "explicit"
+		}
+
 	},
 }