eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-14 07:39:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

shorten permalinks close #206

Browse Source
This commit is contained in:
Matt Walsh
2026-04-13 16:19:26 -05:00
parent 27d75ba62d
commit 994c9240b8
8 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@@ -139,8 +139,8 @@ services:
# Following the "Sharing a Permalink" example below, here are a few environment variables defined. Visit that section for a # Following the "Sharing a Permalink" example below, here are a few environment variables defined. Visit that section for a
# more complete list of configuration options. # more complete list of configuration options.
- WSQS_latLonQuery=Orlando International Airport Orlando FL USA - WSQS_latLonQuery=Orlando International Airport Orlando FL USA
- WSQS_hazards_checkbox=false - WSQS_hazards=false
- WSQS_current_weather_checkbox=true - WSQS_current_weather=true
ports: ports:
- 8080:8080 # change the first 8080 to meet your local network needs - 8080:8080 # change the first 8080 to meet your local network needs
restart: unless-stopped restart: unless-stopped
@@ -192,13 +192,13 @@ Selected displays, the forecast city and widescreen setting are sticky from one
Your permalink will be very long. Here is an example for the Orlando International Airport: Your permalink will be very long. Here is an example for the Orlando International Airport:
``` ```
https://weatherstar.netbymatt.com/?hazards-checkbox=false&current-weather-checkbox=true&latest-observations-checkbox=true&hourly-checkbox=false&hourly-graph-checkbox=true&travel-checkbox=false&regional-forecast-checkbox=true&local-forecast-checkbox=true&extended-forecast-checkbox=true&almanac-checkbox=false&spc-outlook-checkbox=true&radar-checkbox=true&settings-wide-checkbox=false&settings-kiosk-checkbox=false&settings-scanLines-checkbox=false&settings-speed-select=1.00&settings-units-select=us&latLonQuery=Orlando+International+Airport%2C+Orlando%2C+FL%2C+USA&latLon=%7B%22lat%22%3A28.431%2C%22lon%22%3A-81.3076%7D https://weatherstar.netbymatt.com/?hazards=false&current-weather=true&latest-observations=true&hourly=false&hourly-graph=true&travel=false&regional-forecast=true&local-forecast=true&extended-forecast=true&almanac=false&spc-outlook=true&radar=true&wide=false&kiosk=false&scanLines=false&speed-select=1.00&units-select=us&latLonQuery=Orlando+International+Airport%2C+Orlando%2C+FL%2C+USA&latLon=%7B%22lat%22%3A28.431%2C%22lon%22%3A-81.3076%7D
``` ```
You can also build your own permalink. Any omitted settings will be filled with defaults. Here are a few examples: You can also build your own permalink. Any omitted settings will be filled with defaults. Here are a few examples:
``` ```
https://weatherstar.netbymatt.com/?latLonQuery=Orlando+International+Airport https://weatherstar.netbymatt.com/?latLonQuery=Orlando+International+Airport
https://weatherstar.netbymatt.com/?kiosk=true https://weatherstar.netbymatt.com/?kiosk=true
https://weatherstar.netbymatt.com/?settings-units-select=metric https://weatherstar.netbymatt.com/?units-select=metric
``` ```
### Kiosk mode ### Kiosk mode
@@ -213,7 +213,7 @@ When serving this via the built-in Express server, it's possible to define envir
Environment variables can be added to the command line as usual, or via a .env file which is parsed with [dotenv](https://github.com/motdotla/dotenv). Both methods have the same effect. Environment variables can be added to the command line as usual, or via a .env file which is parsed with [dotenv](https://github.com/motdotla/dotenv). Both methods have the same effect.
Environment variables that are to be added to the default query string are prefixed with `WSQS_` and then use the same key/value pairs generated by the [Permalink](#sharing-a-permalink-bookmarking) above, with the `- (dash)` character replaced by an `_ (underscore)`. For example, if you wanted to turn the travel forecast on, you would find `travel-checkbox=true` in the permalink, its matching environment variable becomes `WSQS_travel_checkbox=true`. Environment variables that are to be added to the default query string are prefixed with `WSQS_` and then use the same key/value pairs generated by the [Permalink](#sharing-a-permalink-bookmarking) above, with the `- (dash)` character replaced by an `_ (underscore)`. For example, if you wanted to turn the travel forecast on, you would find `travel-checkbox=true` in the permalink, its matching environment variable becomes `WSQS_travel=true`.
When using the Docker container, these environment variables are read on container start-up to generate the static redirect HTML. When using the Docker container, these environment variables are read on container start-up to generate the static redirect HTML.
@@ -221,7 +221,13 @@ When using the Docker container, these environment variables are read on contain
**Speed:** Controls the playback speed multiplier of the displays, from "Very Fast" (1.5x) to "Very Slow" (0.5x) with "Normal" being 1x **Speed:** Controls the playback speed multiplier of the displays, from "Very Fast" (1.5x) to "Very Slow" (0.5x) with "Normal" being 1x
**Widescreen:** Stretches the background to 16:9 to avoid "pillarboxing" on modern displays **Display Mode:**
- Standard: Classic 4:3 display with the classic (not enhanced, below) screen layouts.
- Widescreen: Stretches the background to 16:9 to avoid "pillarboxing" on modern displays
- Widescreen Enhanced: Stretches as above, and makes use of the additional space to provide wider maps, more weather data and/or additional days in the forecast
- Portrait Enhanced: (in progress) Rotates the screen to a 16:9 portrait orientation and enhances the original displays by adjusting them to fit the new orientation.
**Kiosk:** Immediately activates kiosk mode, which hides all settings. Exit by refreshing the page or using `Ctrl-K`. (Kiosk mode is similar to clicking the "Fullscreen" icon, but scales to the current browser viewport instead of activating the browser's actual "Fullscreen" mode.) **Kiosk:** Immediately activates kiosk mode, which hides all settings. Exit by refreshing the page or using `Ctrl-K`. (Kiosk mode is similar to clicking the "Fullscreen" icon, but scales to the current browser viewport instead of activating the browser's actual "Fullscreen" mode.)

2
server/scripts/index.mjs
View File

@@ -141,7 +141,7 @@ const init = async () => {
} }
// Handle kiosk mode initialization // Handle kiosk mode initialization
const urlKioskCheckbox = parsedParameters['settings-kiosk-checkbox']; const urlKioskCheckbox = parsedParameters?.kiosk ?? parsedParameters['settings-kiosk-checkbox'];
// If kiosk=false is specified, disable kiosk mode and clear any stored value // If kiosk=false is specified, disable kiosk mode and clear any stored value
if (urlKioskCheckbox === 'false') { if (urlKioskCheckbox === 'false') {

5
server/scripts/modules/media.mjs
View File

@@ -1,6 +1,5 @@
import { text } from './utils/fetch.mjs'; import { text } from './utils/fetch.mjs';
import Setting from './utils/setting.mjs'; import Setting from './utils/setting.mjs';
import { registerHiddenSetting } from './share.mjs';
let playlist; let playlist;
let currentTrack = 0; let currentTrack = 0;
@@ -33,9 +32,6 @@ document.addEventListener('DOMContentLoaded', () => {
// get the playlist // get the playlist
getMedia(); getMedia();
// register the volume setting
registerHiddenSetting(mediaVolume.elemId, mediaVolume);
}); });
const scanMusicDirectory = async () => { const scanMusicDirectory = async () => {
@@ -246,6 +242,7 @@ const mediaVolume = new Setting('mediaVolume', {
[0.25, '25%'], [0.25, '25%'],
], ],
changeAction: setVolume, changeAction: setVolume,
visible: false,
}); });
const initializePlayer = () => { const initializePlayer = () => {

4
server/scripts/modules/settings.mjs
View File

@@ -273,6 +273,7 @@ const init = () => {
['medium', 'Medium (2x)'], ['medium', 'Medium (2x)'],
['thick', 'Thick (3x)'], ['thick', 'Thick (3x)'],
], ],
visible: false,
}); });
settings.units = new Setting('units', { settings.units = new Setting('units', {
name: 'Units', name: 'Units',
@@ -322,7 +323,7 @@ document.addEventListener('DOMContentLoaded', () => {
const settingHtml = Object.values(settings).map((setting) => { const settingHtml = Object.values(settings).map((setting) => {
if (hiddenSettings.includes(setting.shortName)) { if (hiddenSettings.includes(setting.shortName)) {
// setting is hidden, register it // setting is hidden, register it
registerHiddenSetting(setting.elemId, setting); registerHiddenSetting(setting.shortName, setting);
return false; return false;
} }
// generate HTML for setting // generate HTML for setting
@@ -340,7 +341,6 @@ document.addEventListener('DOMContentLoaded', () => {
} else if (modeSelect) { } else if (modeSelect) {
modeSelect.style.display = 'none'; modeSelect.style.display = 'none';
} }
registerHiddenSetting('settings-scanLineMode-select', settings.scanLineMode);
}); });
export default settings; export default settings;

18
server/scripts/modules/share.mjs
View File

@@ -25,22 +25,28 @@ const createLink = async (e) => {
const queryStringElements = {}; const queryStringElements = {};
elemForEach('input[type=checkbox]', (elem) => { elemForEach('input[type=checkbox]', (elem) => {
if (elem?.id) { // use name, and fallback to id (older prefix/suffix permalinks)
queryStringElements[elem.id] = elem?.checked ?? false; const key = elem?.name ?? elem?.id;
if (key) {
queryStringElements[key] = elem?.checked ?? false;
} }
}); });
// get all select boxes // get all select boxes
elemForEach('select', (elem) => { elemForEach('select', (elem) => {
if (elem?.id) { // use name, and fallback to id (older prefix/suffix permalinks)
queryStringElements[elem.id] = encodeURIComponent(elem?.value ?? ''); const key = elem?.name ?? elem?.id;
if (key) {
queryStringElements[key] = encodeURIComponent(elem?.value ?? '');
} }
}); });
// get all text boxes // get all text boxes
elemForEach('input[type=text]', ((elem) => { elemForEach('input[type=text]', ((elem) => {
if (elem?.id) { // use name, and fallback to id (older prefix/suffix permalinks)
queryStringElements[elem.id] = elem?.value ?? 0; const key = elem?.name ?? elem?.id;
if (key && key !== '') {
queryStringElements[key] = elem?.value ?? 0;
} }
})); }));

12
server/scripts/modules/utils/setting.mjs
View File

@@ -41,7 +41,9 @@ class Setting {
this.elemId = `settings-${shortName}-${this.type}`; this.elemId = `settings-${shortName}-${this.type}`;
// get value from url // get value from url
const urlValue = parseQueryString()?.[this.elemId]; // includes a fallback to the older prefix/suffix version
const queryString = parseQueryString();
const urlValue = queryString?.[shortName] ?? queryString?.[this.elemId];
let urlState; let urlState;
if (this.type === 'checkbox' && urlValue !== undefined) { if (this.type === 'checkbox' && urlValue !== undefined) {
urlState = urlValue === 'true'; urlState = urlValue === 'true';
@@ -92,7 +94,7 @@ class Setting {
const select = document.createElement('select'); const select = document.createElement('select');
select.id = `settings-${this.shortName}-select`; select.id = `settings-${this.shortName}-select`;
select.name = `settings-${this.shortName}-select`; select.name = this.shortName;
select.addEventListener('change', (e) => this.selectChange(e)); select.addEventListener('change', (e) => this.selectChange(e));
this.values.forEach(([value, text]) => { this.values.forEach(([value, text]) => {
@@ -125,7 +127,7 @@ class Setting {
checkbox.type = 'checkbox'; checkbox.type = 'checkbox';
checkbox.value = true; checkbox.value = true;
checkbox.id = `settings-${this.shortName}-checkbox`; checkbox.id = `settings-${this.shortName}-checkbox`;
checkbox.name = `settings-${this.shortName}-checkbox`; checkbox.name = this.shortName;
checkbox.checked = this.myValue; checkbox.checked = this.myValue;
checkbox.addEventListener('change', (e) => this.checkboxChange(e)); checkbox.addEventListener('change', (e) => this.checkboxChange(e));
const span = document.createElement('span'); const span = document.createElement('span');
@@ -148,14 +150,14 @@ class Setting {
textInput.type = 'text'; textInput.type = 'text';
textInput.value = this.myValue; textInput.value = this.myValue;
textInput.id = `settings-${this.shortName}-string`; textInput.id = `settings-${this.shortName}-string`;
textInput.name = `settings-${this.shortName}-string`; textInput.name = this.shortName;
textInput.placeholder = this.placeholder; textInput.placeholder = this.placeholder;
// set button // set button
const setButton = document.createElement('input'); const setButton = document.createElement('input');
setButton.type = 'button'; setButton.type = 'button';
setButton.value = 'Set'; setButton.value = 'Set';
setButton.id = `settings-${this.shortName}-button`; setButton.id = `settings-${this.shortName}-button`;
setButton.name = `settings-${this.shortName}-button`; setButton.name = this.shortName;
setButton.addEventListener('click', () => { setButton.addEventListener('click', () => {
this.stringChange({ target: { value: textInput.value } }); this.stringChange({ target: { value: textInput.value } });
}); });

7
server/scripts/modules/weatherdisplay.mjs
View File

@@ -55,8 +55,9 @@ class WeatherDisplay {
// no checkbox if progress // no checkbox if progress
if (this.elemId === 'progress') return false; if (this.elemId === 'progress') return false;
// get url provided state // get url provided state, and fall back to the older suffix naming convention
const urlValue = parseQueryString()?.[`${this.elemId}-checkbox`]; const queryString = parseQueryString();
const urlValue = queryString?.[this.elemId] ?? queryString?.[`${this.elemId}-checkbox`];
let urlState; let urlState;
if (urlValue !== undefined) { if (urlValue !== undefined) {
urlState = urlValue === 'true'; urlState = urlValue === 'true';
@@ -78,7 +79,7 @@ class WeatherDisplay {
checkbox.type = 'checkbox'; checkbox.type = 'checkbox';
checkbox.value = true; checkbox.value = true;
checkbox.id = `${this.elemId}-checkbox`; checkbox.id = `${this.elemId}-checkbox`;
checkbox.name = `${this.elemId}-checkbox`; checkbox.name = this.elemId;
checkbox.checked = this.isEnabled; checkbox.checked = this.isEnabled;
checkbox.addEventListener('change', (e) => this.checkboxChange(e)); checkbox.addEventListener('change', (e) => this.checkboxChange(e));
const span = document.createElement('span'); const span = document.createElement('span');

4
views/index.ejs
View File

@@ -68,10 +68,10 @@
</head> </head>
<body <% if (query && query['settings-kiosk-checkbox'] === 'true' ) { %>class="kiosk" <% }%>> <body <% if (query && (query['kiosk'] === true || query['settings-kiosk-checkbox'] === 'true' )) { %>class="kiosk" <% }%>>
<div id="divQuery"> <div id="divQuery">
<input id="txtLocation" type="text" value="" placeholder="ZIP Code or City, State" data-1p-ignore /> <input id="txtLocation" name="txtLocation" type="text" value="" placeholder="ZIP Code or City, State" data-1p-ignore />
<div class="buttons"> <div class="buttons">
<button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light" /> <button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light" />
<img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark" /> <img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark" />