tags to force height beyond the minimum, then subtract the padding + const originalHTML = template.innerHTML; + const paddingBRs = '
'.repeat(7); + template.innerHTML = originalHTML + paddingBRs; + + // Measure the padded height + const paddedHeight = template.offsetHeight; + const paddedLines = Math.round(paddedHeight / lineHeight); + + // Calculate actual content lines by subtracting the 7 BR lines we added + const actualLines = Math.max(1, paddedLines - 7); + + // Restore original content + template.innerHTML = originalHTML; + + forecastLineCounts.push(actualLines); + + if (debugFlag('localforecast')) { + console.log(`LocalForecast: Forecast ${index} measured ${actualLines} lines (${paddedHeight}px with padding - ${7 * lineHeight}px = ${actualLines * lineHeight}px actual, ${lineHeight}px line-height)`); + } + } + }); + + // Apply height padding for proper scrolling display (keep existing system working) + templates.forEach((forecast) => { + const newHeight = Math.ceil(forecast.offsetHeight / this.pageHeight) * this.pageHeight; + forecast.style.height = `${newHeight}px`; + }); + + // Calculate total screens based on padded height (for navigation system) + const forecastsElem = templates[0].parentNode; + const totalHeight = forecastsElem.scrollHeight; + this.timing.totalScreens = Math.round(totalHeight / this.pageHeight); + + // Now calculate timing based on actual measured line counts, ignoring padding + const maxLinesPerScreen = 7; // 280px / 40px line height + const screenTimings = []; forecastLineCounts.forEach((lines, forecastIndex) => { + if (lines <= maxLinesPerScreen) { + // Single screen for this forecast + screenTimings.push({ forecastIndex, lines, type: 'single' }); + } else { + // Multiple screens for this forecast + let remainingLines = lines; + let isFirst = true; + + while (remainingLines > 0) { + const linesThisScreen = Math.min(remainingLines, maxLinesPerScreen); + const type = isFirst ? 'first-of-multi' : 'remainder'; + + screenTimings.push({ forecastIndex, lines: linesThisScreen, type }); + + remainingLines -= linesThisScreen; + isFirst = false; + } + } + }); + + // Create timing array based on measured line counts + const screenDelays = screenTimings.map((screenInfo, screenIndex) => { + const screenLines = screenInfo.lines; + + // Apply timing rules based on actual screen content lines + let timingMultiplier; + if (screenLines === 1) { + timingMultiplier = 0.6; // 1 line = shortest (3.0s at normal speed) + } else if (screenLines === 2) { + timingMultiplier = 0.8; // 2 lines = shorter (4.0s at normal speed) + } else if (screenLines >= 6) { + timingMultiplier = 1.4; // 6+ lines = longer (7.0s at normal speed) + } else { + timingMultiplier = 1.0; // 3-5 lines = normal (5.0s at normal speed) + } + + // Convert to base counts + const desiredDurationMs = timingMultiplier * originalBaseDuration; + const baseCounts = Math.round(desiredDurationMs / this.timing.baseDelay); + + if (debugFlag('localforecast')) { + console.log(`LocalForecast: Screen ${screenIndex}: ${screenLines} lines, ${timingMultiplier.toFixed(2)}x multiplier, ${desiredDurationMs}ms desired, ${baseCounts} counts (forecast ${screenInfo.forecastIndex}, ${screenInfo.type})`); + } + + return baseCounts; + }); + + // Adjust timing array to match actual screen count if needed + while (screenDelays.length < this.timing.totalScreens) { + // Add fallback timing for extra screens + const fallbackCounts = Math.round(originalBaseDuration / this.timing.baseDelay); + screenDelays.push(fallbackCounts); + console.warn(`LocalForecast: using fallback timing for Screen ${screenDelays.length - 1}: 5 lines, 1.00x multiplier, ${fallbackCounts} counts`); + } + + // Truncate if we have too many calculated screens + if (screenDelays.length > this.timing.totalScreens) { + const removed = screenDelays.splice(this.timing.totalScreens); + console.warn(`LocalForecast: Truncated ${removed.length} excess screen timings`); + } + + // Set the timing array based on screen content + this.timing.delay = screenDelays; + + if (debugFlag('localforecast')) { + console.log(`LocalForecast: Final screen count - calculated: ${screenTimings.length}, actual: ${this.timing.totalScreens}, timing array: ${screenDelays.length}`); + const multipliers = screenDelays.map((counts) => counts * this.timing.baseDelay / originalBaseDuration); + console.log('LocalForecast: Screen multipliers:', multipliers); + console.log('LocalForecast: Expected durations (ms):', screenDelays.map((counts) => counts * this.timing.baseDelay)); + } + } } // format the forecast -// only use the first 6 lines -const parse = (forecast) => forecast.properties.periods.slice(0, 6).map((text) => ({ - // format day and text - DayName: text.name.toUpperCase(), - Text: text.detailedForecast, -})); +// filter out expired periods, then use the first 6 forecasts +const parse = (forecast, forecastUrl) => { + const allPeriods = forecast.properties.periods; + const activePeriods = filterExpiredPeriods(allPeriods, forecastUrl); + + return activePeriods.slice(0, 6).map((text) => ({ + // format day and text + DayName: text.name.toUpperCase(), + Text: text.detailedForecast, + })); +}; // register display registerDisplay(new LocalForecast(7, 'local-forecast')); diff --git a/server/scripts/modules/media.mjs b/server/scripts/modules/media.mjs index 353451e..f928958 100644 --- a/server/scripts/modules/media.mjs +++ b/server/scripts/modules/media.mjs @@ -40,21 +40,32 @@ const scanMusicDirectory = async () => { }; const getMedia = async () => { + let playlistSource = ''; + try { const response = await fetch('playlist.json'); if (response.ok) { playlist = await response.json(); - } else if (response.status === 404 - && response.headers.get('X-Weatherstar') === 'true') { - console.warn("Couldn't get playlist.json, falling back to directory scan"); + playlistSource = 'from server'; + } else if (response.status === 404 && response.headers.get('X-Weatherstar') === 'true') { + // Expected behavior in static deployment mode playlist = await scanMusicDirectory(); + playlistSource = 'via directory scan (static deployment)'; } else { - console.warn(`Couldn't get playlist.json: ${response.status} ${response.statusText}`); playlist = { availableFiles: [] }; + playlistSource = `failed (${response.status} ${response.statusText})`; } - } catch (e) { - console.warn("Couldn't get playlist.json, falling back to directory scan"); + } catch (_e) { + // Network error or other fetch failure - fall back to directory scanning playlist = await scanMusicDirectory(); + playlistSource = 'via directory scan (after fetch failed)'; + } + + const fileCount = playlist?.availableFiles?.length || 0; + if (fileCount > 0) { + console.log(`Loaded playlist ${playlistSource} - found ${fileCount} music file${fileCount === 1 ? '' : 's'}`); + } else { + console.log(`No music files found ${playlistSource}`); } enableMediaPlayer(); diff --git a/server/scripts/modules/navigation.mjs b/server/scripts/modules/navigation.mjs index f252b5d..1fe9e9c 100644 --- a/server/scripts/modules/navigation.mjs +++ b/server/scripts/modules/navigation.mjs @@ -2,8 +2,9 @@ import noSleep from './utils/nosleep.mjs'; import STATUS from './status.mjs'; import { wrap } from './utils/calc.mjs'; -import { json } from './utils/fetch.mjs'; +import { safeJson } from './utils/fetch.mjs'; import { getPoint } from './utils/weather.mjs'; +import { debugFlag } from './utils/debug.mjs'; import settings from './settings.mjs'; document.addEventListener('DOMContentLoaded', () => { @@ -16,8 +17,36 @@ let progress; const weatherParameters = {}; const init = async () => { - // set up resize handler - window.addEventListener('resize', resize); + // set up the resize handler with debounce logic to prevent rapid-fire calls + let resizeTimeout; + + // Handle fullscreen change events and trigger an immediate resize calculation + const fullscreenEvents = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']; + fullscreenEvents.forEach((eventName) => { + document.addEventListener(eventName, () => { + if (debugFlag('fullscreen')) { + console.log(`🖥️ ${eventName} event fired. fullscreenElement=${!!document.fullscreenElement}`); + } + resize(true); + }); + }); + + // De-bounced resize handler to prevent rapid-fire resize calls + window.addEventListener('resize', () => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => resize(), 100); + }); + + // Handle orientation changes (Mobile Safari doesn't always fire resize events on orientation change) + window.addEventListener('orientationchange', () => { + if (debugFlag('resize')) { + console.log('📱 Orientation change detected, forcing resize after short delay'); + } + clearTimeout(resizeTimeout); + // Use a slightly longer delay for orientation changes to allow the browser to settle + resizeTimeout = setTimeout(() => resize(true), 200); + }); + resize(); generateCheckboxes(); @@ -34,62 +63,87 @@ const getWeather = async (latLon, haveDataCallback) => { // get initial weather data const point = await getPoint(latLon.lat, latLon.lon); + // check if point data was successfully retrieved + if (!point) { + return; + } + if (typeof haveDataCallback === 'function') haveDataCallback(point); - // get stations - const stations = await json(point.properties.observationStations); + try { + // get stations using centralized safe handling + const stations = await safeJson(point.properties.observationStations); - const StationId = stations.features[0].properties.stationIdentifier; + if (!stations) { + console.warn('Failed to get Observation Stations'); + return; + } - let { city } = point.properties.relativeLocation.properties; - const { state } = point.properties.relativeLocation.properties; + // check if stations data is valid + if (!stations || !stations.features || stations.features.length === 0) { + console.warn('No Observation Stations found for this location'); + return; + } - if (StationId in StationInfo) { - city = StationInfo[StationId].city; - [city] = city.split('/'); - city = city.replace(/\s+$/, ''); + const StationId = stations.features[0].properties.stationIdentifier; + + let { city } = point.properties.relativeLocation.properties; + const { state } = point.properties.relativeLocation.properties; + + if (StationId in StationInfo) { + city = StationInfo[StationId].city; + [city] = city.split('/'); + city = city.replace(/\s+$/, ''); + } + + // populate the weather parameters + weatherParameters.latitude = latLon.lat; + weatherParameters.longitude = latLon.lon; + weatherParameters.zoneId = point.properties.forecastZone.substr(-6); + weatherParameters.radarId = point.properties.radarStation.substr(-3); + weatherParameters.stationId = StationId; + weatherParameters.weatherOffice = point.properties.cwa; + weatherParameters.city = city; + weatherParameters.state = state; + weatherParameters.timeZone = point.properties.timeZone; + weatherParameters.forecast = point.properties.forecast; + weatherParameters.forecastGridData = point.properties.forecastGridData; + weatherParameters.stations = stations.features; + + // update the main process for display purposes + populateWeatherParameters(weatherParameters); + + // reset the scroll + postMessage({ type: 'current-weather-scroll', method: 'reload' }); + + // draw the progress canvas and hide others + hideAllCanvases(); + if (!settings?.kiosk?.value) { + // In normal mode, hide loading screen and show progress + // (In kiosk mode, keep the loading screen visible until autoplay starts) + document.querySelector('#loading').style.display = 'none'; + if (progress) { + await progress.drawCanvas(); + progress.showCanvas(); + } + } + + // call for new data on each display + displays.forEach((display) => display.getData(weatherParameters)); + } catch (error) { + console.error(`Failed to get weather data: ${error.message}`); } - - // populate the weather parameters - weatherParameters.latitude = latLon.lat; - weatherParameters.longitude = latLon.lon; - weatherParameters.zoneId = point.properties.forecastZone.substr(-6); - weatherParameters.radarId = point.properties.radarStation.substr(-3); - weatherParameters.stationId = StationId; - weatherParameters.weatherOffice = point.properties.cwa; - weatherParameters.city = city; - weatherParameters.state = state; - weatherParameters.timeZone = point.properties.timeZone; - weatherParameters.forecast = point.properties.forecast; - weatherParameters.forecastGridData = point.properties.forecastGridData; - weatherParameters.stations = stations.features; - - // update the main process for display purposes - populateWeatherParameters(weatherParameters); - - // reset the scroll - postMessage({ type: 'current-weather-scroll', method: 'reload' }); - - // draw the progress canvas and hide others - hideAllCanvases(); - document.querySelector('#loading').style.display = 'none'; - if (progress) { - await progress.drawCanvas(); - progress.showCanvas(); - } - - // call for new data on each display - displays.forEach((display) => display.getData(weatherParameters)); }; // receive a status update from a module {id, value} const updateStatus = (value) => { if (value.id < 0) return; - if (!progress) return; - progress.drawCanvas(displays, countLoadedDisplays()); + if (!progress && !settings?.kiosk?.value) return; + + if (progress) progress.drawCanvas(displays, countLoadedDisplays()); // first display is hazards and it must load before evaluating the first display - if (displays[0].status === STATUS.loading) return; + if (!displays[0] || displays[0].status === STATUS.loading) return; // calculate first enabled display const firstDisplayIndex = displays.findIndex((display) => display?.enabled && display?.timing?.totalScreens > 0); @@ -102,7 +156,7 @@ const updateStatus = (value) => { } // if hazards data arrives after the firstDisplayIndex loads, then we need to hot wire this to the first display - if (value.id === 0 && value.status === STATUS.loaded && displays[0].timing.totalScreens === 0) { + if (value.id === 0 && value.status === STATUS.loaded && displays[0] && displays[0].timing && displays[0].timing.totalScreens === 0) { value.id = firstDisplayIndex; value.status = displays[firstDisplayIndex].status; } @@ -153,19 +207,30 @@ const displayNavMessage = (myMessage) => { const navTo = (direction) => { // test for a current display const current = currentDisplay(); - progress.hideCanvas(); + if (progress) progress.hideCanvas(); if (!current) { // special case for no active displays (typically on progress screen) // find the first ready display let firstDisplay; let displayCount = 0; do { - if (displays[displayCount].status === STATUS.loaded && displays[displayCount].timing.totalScreens > 0) firstDisplay = displays[displayCount]; + // Check if displayCount is within bounds and the display exists + if (displayCount < displays.length && displays[displayCount]) { + const display = displays[displayCount]; + if (display.status === STATUS.loaded && display.timing?.totalScreens > 0) { + firstDisplay = display; + } + } displayCount += 1; } while (!firstDisplay && displayCount < displays.length); if (!firstDisplay) return; + // In kiosk mode, hide the loading screen when we start showing the first display + if (settings?.kiosk?.value) { + document.querySelector('#loading').style.display = 'none'; + } + firstDisplay.navNext(msg.command.firstFrame); firstDisplay.showCanvas(); return; @@ -179,11 +244,32 @@ const loadDisplay = (direction) => { const totalDisplays = displays.length; const curIdx = currentDisplayIndex(); let idx; + let foundSuitableDisplay = false; + for (let i = 0; i < totalDisplays; i += 1) { // convert form simple 0-10 to start at current display index +/-1 and wrap idx = wrap(curIdx + (i + 1) * direction, totalDisplays); - if (displays[idx].status === STATUS.loaded && displays[idx].timing.totalScreens > 0) break; + if (displays[idx].status === STATUS.loaded && displays[idx].timing.totalScreens > 0) { + // Prevent infinite recursion by ensuring we don't select the same display + if (idx !== curIdx) { + foundSuitableDisplay = true; + break; + } + } } + + // If no other suitable display was found, but current display is still suitable (e.g. user only enabled one display), stay on it + if (!foundSuitableDisplay && displays[curIdx] && displays[curIdx].status === STATUS.loaded && displays[curIdx].timing.totalScreens > 0) { + idx = curIdx; + foundSuitableDisplay = true; + } + + // if no suitable display was found at all, do NOT proceed to avoid infinite recursion + if (!foundSuitableDisplay) { + console.warn('No suitable display found for navigation'); + return; + } + const newDisplay = displays[idx]; // hide all displays hideAllCanvases(); @@ -202,17 +288,24 @@ const setPlaying = (newValue) => { localStorage.setItem('play', playing); if (playing) { - noSleep(true); + noSleep(true).catch(() => { + // Wake lock failed, but continue normally + }); playButton.title = 'Pause'; playButton.src = 'images/nav/ic_pause_white_24dp_2x.png'; } else { - noSleep(false); + noSleep(false).catch(() => { + // Wake lock disable failed, but continue normally + }); playButton.title = 'Play'; playButton.src = 'images/nav/ic_play_arrow_white_24dp_2x.png'; } - // if we're playing and on the progress screen jump to the next screen - if (!progress) return; - if (playing && !currentDisplay()) navTo(msg.command.firstFrame); + // if we're playing and on the progress screen (or in kiosk mode), jump to the next screen + if (playing && !currentDisplay()) { + if (progress || settings?.kiosk?.value) { + navTo(msg.command.firstFrame); + } + } }; // handle all navigation buttons @@ -237,7 +330,12 @@ const handleNavButton = (button) => { break; case 'menu': setPlaying(false); - progress.showCanvas(); + if (progress) { + progress.showCanvas(); + } else if (settings?.kiosk?.value) { + // In kiosk mode without progress, show the loading screen + document.querySelector('#loading').style.display = 'flex'; + } hideAllCanvases(); break; default: @@ -248,18 +346,222 @@ const handleNavButton = (button) => { // return the specificed display const getDisplay = (index) => displays[index]; -// resize the container on a page resize -const resize = () => { - const targetWidth = settings.wide.value ? 640 + 107 + 107 : 640; - const widthZoomPercent = (document.querySelector('#divTwcBottom').getBoundingClientRect().width) / targetWidth; - const heightZoomPercent = (window.innerHeight) / 480; +// Helper function to detect iOS (using technique from nosleep.js) +const isIOS = () => { + const { userAgent } = navigator; + const iOSRegex = /CPU.*OS ([0-9_]{1,})[0-9_]{0,}|(CPU like).*AppleWebKit.*Mobile/i; + return iOSRegex.test(userAgent) && !window.MSStream; +}; - const scale = Math.min(widthZoomPercent, heightZoomPercent); - if (scale < 1.0 || document.fullscreenElement || settings.kiosk) { - document.querySelector('#container').style.zoom = scale; - } else { - document.querySelector('#container').style.zoom = 'unset'; +// Track the last applied scale to avoid redundant operations +let lastAppliedScale = null; +let lastAppliedKioskMode = null; + +// resize the container on a page resize +const resize = (force = false) => { + // Ignore resize events caused by pinch-to-zoom on mobile + if (window.visualViewport && Math.abs(window.visualViewport.scale - 1) > 0.01) { + return; } + + const isFullscreen = !!document.fullscreenElement; + const isKioskMode = settings.kiosk?.value || false; + const isMobileSafariKiosk = isIOS() && isKioskMode; // Detect Mobile Safari in kiosk mode (regardless of standalone status) + const targetWidth = settings.wide.value ? 640 + 107 + 107 : 640; + + // Use window width instead of bottom container width to avoid zero-dimension issues + const widthZoomPercent = window.innerWidth / targetWidth; + const heightZoomPercent = window.innerHeight / 480; + + // Standard scaling: fit within both dimensions + const scale = Math.min(widthZoomPercent, heightZoomPercent); + + // For Mobile Safari in kiosk mode, always use centering behavior regardless of scale + // For other platforms, only use fullscreen/centering behavior for actual fullscreen or kiosk mode where content fits naturally + const isKioskLike = isFullscreen || (isKioskMode && scale >= 1.0) || isMobileSafariKiosk; + + if (debugFlag('resize') || debugFlag('fullscreen')) { + console.log(`🖥️ Resize: force=${force} isKioskLike=${isKioskLike} window=${window.innerWidth}x${window.innerHeight} targetWidth=${targetWidth} widthZoom=${widthZoomPercent.toFixed(3)} heightZoom=${heightZoomPercent.toFixed(3)} finalScale=${scale.toFixed(3)} fullscreenElement=${!!document.fullscreenElement} isIOS=${isIOS()} standalone=${window.navigator.standalone} isMobileSafariKiosk=${isMobileSafariKiosk} kioskMode=${settings.kiosk?.value} wideMode=${settings.wide.value}`); + } + + // Prevent zero or negative scale values + if (scale <= 0) { + console.warn('Invalid scale calculated, skipping resize'); + return; + } + + // Skip redundant resize operations if scale and mode haven't changed (unless forced) + const scaleChanged = Math.abs((lastAppliedScale || 0) - scale) > 0.001; + const modeChanged = lastAppliedKioskMode !== isKioskLike; + + if (!force && !scaleChanged && !modeChanged) { + return; // No meaningful change, skip resize operation + } + + // Update tracking variables + lastAppliedScale = scale; + lastAppliedKioskMode = isKioskLike; + window.currentScale = scale; // Make scale available to settings module + + const wrapper = document.querySelector('#divTwc'); + const mainContainer = document.querySelector('#divTwcMain'); + + // BASELINE: content fits naturally, no scaling needed + if (!isKioskLike && scale >= 1.0 && !isKioskMode) { + if (debugFlag('fullscreen')) { + console.log('🖥️ Resetting fullscreen/kiosk styles to normal'); + } + + // Reset wrapper styles (only properties that are actually set in fullscreen/scaling modes) + wrapper.style.removeProperty('width'); + wrapper.style.removeProperty('height'); + wrapper.style.removeProperty('overflow'); + wrapper.style.removeProperty('transform'); + wrapper.style.removeProperty('transform-origin'); + + // Reset container styles that might have been applied during fullscreen + mainContainer.style.removeProperty('transform'); + mainContainer.style.removeProperty('transform-origin'); + mainContainer.style.removeProperty('width'); + mainContainer.style.removeProperty('height'); + mainContainer.style.removeProperty('position'); + mainContainer.style.removeProperty('left'); + mainContainer.style.removeProperty('top'); + mainContainer.style.removeProperty('margin-left'); + mainContainer.style.removeProperty('margin-top'); + + applyScanlineScaling(1.0); + return; + } + + // MOBILE SCALING: Use wrapper scaling for mobile devices (but not Mobile Safari kiosk mode) + if ((scale < 1.0 || (isKioskMode && !isKioskLike)) && !isMobileSafariKiosk) { + /* + * MOBILE SCALING (Wrapper Scaling) + * + * Why scale the wrapper instead of mainContainer? + * - For mobile devices where content is larger than viewport, we need to scale the entire layout + * - The wrapper (#divTwc) contains both the main content AND the bottom navigation bar + * - Scaling the wrapper ensures both elements are scaled together as a unit + * - No centering is applied - content aligns to top-left for typical mobile behavior + * - Uses explicit dimensions to prevent layout issues and eliminate gaps after scaling + */ + wrapper.style.setProperty('transform', `scale(${scale})`); + wrapper.style.setProperty('transform-origin', 'top left'); // Scale from top-left corner + + // Set explicit dimensions to prevent layout issues on mobile + const wrapperWidth = settings.wide.value ? 854 : 640; + // Calculate total height: main content (480px) + bottom navigation bar + const bottomBar = document.querySelector('#divTwcBottom'); + const bottomBarHeight = bottomBar ? bottomBar.offsetHeight : 40; // fallback to ~40px + const totalHeight = 480 + bottomBarHeight; + const scaledHeight = totalHeight * scale; // Height after scaling + + wrapper.style.setProperty('width', `${wrapperWidth}px`); + wrapper.style.setProperty('height', `${scaledHeight}px`); // Use scaled height to eliminate gap + applyScanlineScaling(scale); + return; + } + + // KIOSK/FULLSCREEN SCALING: Two different positioning approaches for different platforms + const wrapperWidth = settings.wide.value ? 854 : 640; + const wrapperHeight = 480; + + // Reset wrapper styles to avoid double scaling (wrapper remains unstyled) + wrapper.style.removeProperty('width'); + wrapper.style.removeProperty('height'); + wrapper.style.removeProperty('transform'); + wrapper.style.removeProperty('transform-origin'); + + // Platform-specific positioning logic + let transformOrigin; + let leftPosition; + let topPosition; + let marginLeft; + let marginTop; + + if (isMobileSafariKiosk) { + /* + * MOBILE SAFARI KIOSK MODE (Manual offset calculation) + * + * Why this approach? + * - Mobile Safari in kiosk mode has unique viewport behaviors that don't work well with standard CSS centering + * - We want orientation-specific centering: vertical in portrait, horizontal in landscape + * - The standard CSS centering method can cause layout issues in Mobile Safari's constrained environment + */ + const scaledWidth = wrapperWidth * scale; + const scaledHeight = wrapperHeight * scale; + + // Determine if we're in portrait or landscape + const isPortrait = window.innerHeight > window.innerWidth; + + let offsetX = 0; + let offsetY = 0; + + if (isPortrait) { + offsetY = (window.innerHeight - scaledHeight) / 2; // center vertically, align to left edge + } else { + offsetX = (window.innerWidth - scaledWidth) / 2; // center horizontally, align to top edge + } + + if (debugFlag('fullscreen')) { + console.log(`📱 Mobile Safari kiosk centering: ${isPortrait ? 'portrait' : 'landscape'} wrapper=${wrapperWidth}x${wrapperHeight} scale=${scale.toFixed(3)} offset=${offsetX.toFixed(1)},${offsetY.toFixed(1)}`); + } + + // Set positioning values for manual offset calculation + transformOrigin = 'top left'; // Scale from top-left corner + leftPosition = `${offsetX}px`; // Exact pixel positioning + topPosition = `${offsetY}px`; // Exact pixel positioning + marginLeft = null; // Clear any previous centering margins + marginTop = null; // Clear any previous centering margins + } else { + /* + * STANDARD FULLSCREEN/KIOSK MODE (CSS-based Centering) + * + * Why this approach? + * - Should work reliably across all other browsers and scenarios (desktop, non-Safari mobile, etc.) + * - Uses standard CSS centering techniques that browsers handle efficiently + * - Always centers both horizontally and vertically + */ + const scaledWidth = wrapperWidth * scale; + const scaledHeight = wrapperHeight * scale; + const offsetX = (window.innerWidth - scaledWidth) / 2; + const offsetY = (window.innerHeight - scaledHeight) / 2; + + if (debugFlag('fullscreen')) { + console.log(`🖥️ Applying fullscreen/kiosk scaling: wrapper=${wrapperWidth}x${wrapperHeight} scale=${scale.toFixed(3)} offset=${offsetX.toFixed(1)},${offsetY.toFixed(1)} transform: scale(${scale}) translate(${offsetX / scale}px, ${offsetY / scale}px)`); + } + + // Set positioning values for CSS-based centering + transformOrigin = 'center center'; // Scale from center point + leftPosition = '50%'; // Position at 50% from left + topPosition = '50%'; // Position at 50% from top + marginLeft = `-${wrapperWidth / 2}px`; // Pull back by half width + marginTop = `-${wrapperHeight / 2}px`; // Pull back by half height + } + + // Apply shared mainContainer properties (same for both kiosk modes) + mainContainer.style.setProperty('transform', `scale(${scale})`, 'important'); + mainContainer.style.setProperty('transform-origin', transformOrigin, 'important'); + mainContainer.style.setProperty('width', `${wrapperWidth}px`, 'important'); + mainContainer.style.setProperty('height', `${wrapperHeight}px`, 'important'); + mainContainer.style.setProperty('position', 'absolute', 'important'); + mainContainer.style.setProperty('left', leftPosition, 'important'); + mainContainer.style.setProperty('top', topPosition, 'important'); + + // Apply or clear margin properties based on positioning method + if (marginLeft !== null) { + mainContainer.style.setProperty('margin-left', marginLeft, 'important'); + } else { + mainContainer.style.removeProperty('margin-left'); + } + if (marginTop !== null) { + mainContainer.style.setProperty('margin-top', marginTop, 'important'); + } else { + mainContainer.style.removeProperty('margin-top'); + } + + applyScanlineScaling(scale); }; // reset all statuses to loading on all displays, used to keep the progress bar accurate during refresh @@ -267,6 +569,164 @@ const resetStatuses = () => { displays.forEach((display) => { display.status = STATUS.loading; }); }; +// Apply scanline scaling to try and prevent banding by avoiding fractional scaling +const applyScanlineScaling = (scale) => { + const container = document.querySelector('#container'); + if (!container || !container.classList.contains('scanlines')) { + return; + } + + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + const devicePixelRatio = window.devicePixelRatio || 1; + const currentMode = settings?.scanLineMode?.value || 'auto'; + let cssThickness; + let scanlineDebugInfo = null; + + // Helper function to round CSS values intelligently based on scale and DPR + // At high scales, precise fractional pixels render fine; at low scales, alignment matters more + const roundCSSValue = (value) => { + // On 1x DPI displays, use exact calculated values + if (devicePixelRatio === 1) { + return value; + } + + // At high scales (>2x), the browser scaling dominates and fractional pixels render well + // Prioritize nice fractions for better visual consistency + if (scale > 2.0) { + // Try quarter-pixel boundaries first (0.25, 0.5, 0.75, 1.0, etc.) + const quarterRounded = Math.round(value * 4) / 4; + if (Math.abs(quarterRounded - value) <= 0.125) { // Within 0.125px tolerance + return quarterRounded; + } + // Fall through to half-pixel boundaries for high scale fallback + } + + // At lower scales (and high scale fallback), pixel alignment matters more for crisp rendering + // Round UP to the next half-pixel to ensure scanlines are never thinner than intended + const halfPixelRounded = Math.ceil(value * 2) / 2; + return halfPixelRounded; + }; + + // Manual modes: use smart rounding in scaled scenarios to avoid banding + if (currentMode === 'thin') { + const rawValue = 1 / scale; + const cssValue = scale === 1.0 ? rawValue : roundCSSValue(rawValue); + cssThickness = `${cssValue}px`; + scanlineDebugInfo = { + css: cssValue, + visual: 1, + target: '1px visual thickness', + reason: scale === 1.0 ? 'Thin: 1px visual user override (exact)' : 'Thin: 1px visual user override (rounded)', + isManual: true, + }; + } else if (currentMode === 'medium') { + const rawValue = 2 / scale; + const cssValue = scale === 1.0 ? rawValue : roundCSSValue(rawValue); + cssThickness = `${cssValue}px`; + scanlineDebugInfo = { + css: cssValue, + visual: 2, + target: '2px visual thickness', + reason: scale === 1.0 ? 'Medium: 2px visual user override (exact)' : 'Medium: 2px visual user override (rounded)', + isManual: true, + }; + } else if (currentMode === 'thick') { + const rawValue = 3 / scale; + const cssValue = scale === 1.0 ? rawValue : roundCSSValue(rawValue); + cssThickness = `${cssValue}px`; + scanlineDebugInfo = { + css: cssValue, + visual: 3, + target: '3px visual thickness', + reason: scale === 1.0 ? 'Thick: 3px visual user override (exact)' : 'Thick: 3px visual user override (rounded)', + isManual: true, + }; + } else { + // Auto mode: choose thickness based on scaling behavior + + let visualThickness; + let reason; + + if (scale === 1.0) { + // Unscaled mode: use reasonable thickness based on device characteristics + const isHighDPIMobile = devicePixelRatio >= 2 && viewportWidth <= 768 && viewportHeight <= 768; + const isHighDPITablet = devicePixelRatio >= 2 && viewportWidth <= 1024 && viewportHeight <= 1024; + + if (isHighDPIMobile) { + // High-DPI mobile: use thin scanlines but not too thin + const cssValue = roundCSSValue(1.5 / devicePixelRatio); + cssThickness = `${cssValue}px`; + reason = `Auto: ${cssValue}px unscaled (high-DPI mobile, DPR=${devicePixelRatio})`; + } else if (isHighDPITablet) { + // High-DPI tablets: use slightly thicker scanlines for better visibility + const cssValue = roundCSSValue(1.5 / devicePixelRatio); + cssThickness = `${cssValue}px`; + reason = `Auto: ${cssValue}px unscaled (high-DPI tablet, DPR=${devicePixelRatio})`; + } else if (devicePixelRatio >= 2) { + // High-DPI desktop: use scanlines that look similar to scaled mode + const cssValue = roundCSSValue(1.5 / devicePixelRatio); + cssThickness = `${cssValue}px`; + reason = `Auto: ${cssValue}px unscaled (high-DPI desktop, DPR=${devicePixelRatio})`; + } else { + // Standard DPI desktop: use 2px for better visibility + cssThickness = '2px'; + reason = 'Auto: 2px unscaled (standard DPI desktop)'; + } + } else if (scale < 1.0) { + // Mobile scaling: use thinner scanlines for small displays + visualThickness = 1; + const cssValue = roundCSSValue(visualThickness / scale); + cssThickness = `${cssValue}px`; + reason = `Auto: ${cssValue}px scaled (mobile, scale=${scale})`; + } else if (scale >= 3.0) { + // Very high scale (large displays/high DPI): use thick scanlines for visibility + visualThickness = 3; + const cssValue = roundCSSValue(visualThickness / scale); + cssThickness = `${cssValue}px`; + reason = `Auto: ${cssValue}px scaled (large display/high scale, scale=${scale})`; + } else { + // Medium scale kiosk/fullscreen: use medium scanlines with smart rounding + visualThickness = 2; + const rawValue = visualThickness / scale; + const cssValue = roundCSSValue(rawValue); + cssThickness = `${cssValue}px`; + reason = `Auto: ${cssValue}px scaled (kiosk/fullscreen, scale=${scale})`; + + if (debugFlag('scanlines')) { + console.log(`↕️ Kiosk/fullscreen rounding: raw=${rawValue}, rounded=${cssValue}, DPR=${devicePixelRatio}, scale=${scale}`); + } + } + + // Extract numeric value from cssThickness for debug info + const cssNumericValue = parseFloat(cssThickness); + + scanlineDebugInfo = { + css: cssNumericValue, + visual: scale === 1.0 ? cssNumericValue : visualThickness, // For unscaled mode, visual thickness equals CSS thickness + target: scale === 1.0 ? `${cssNumericValue}px CSS (unscaled)` : `${visualThickness}px visual thickness`, + reason, + isManual: false, + }; + } + + container.style.setProperty('--scanline-thickness', cssThickness); + + // Output debug information if enabled + if (debugFlag('scanlines')) { + const actualRendered = scanlineDebugInfo.css * scale; + const physicalRendered = actualRendered * devicePixelRatio; + const visualThickness = scanlineDebugInfo.visual || actualRendered; // Use visual thickness if available + + console.log(`↕️ Scanline optimization: ${cssThickness} CSS × ${scale.toFixed(3)} scale = ${actualRendered.toFixed(3)}px rendered (${visualThickness}px visual target) × ${devicePixelRatio}x DPI = ${physicalRendered.toFixed(3)}px physical - ${scanlineDebugInfo.reason}`); + console.log(`↕️ Display: ${viewportWidth}×${viewportHeight}, Scale factors: width=${(window.innerWidth / (settings.wide.value ? 854 : 640)).toFixed(3)}, height=${(window.innerHeight / 480).toFixed(3)}, DPR=${devicePixelRatio}`); + console.log(`↕️ Thickness: CSS=${cssThickness}, Visual=${visualThickness.toFixed(1)}px, Rendered=${actualRendered.toFixed(3)}px, Physical=${physicalRendered.toFixed(3)}px`); + } +}; + +// Make applyScanlineScaling available for direct calls from Settings +window.applyScanlineScaling = applyScanlineScaling; + // allow displays to register themselves const registerDisplay = (display) => { if (displays[display.navId]) console.warn(`Display nav ID ${display.navId} already in use`); @@ -321,4 +781,5 @@ export { message, latLonReceived, timeZone, + isIOS, }; diff --git a/server/scripts/modules/radar-utils.mjs b/server/scripts/modules/radar-utils.mjs index 15a15ba..e95a2d2 100644 --- a/server/scripts/modules/radar-utils.mjs +++ b/server/scripts/modules/radar-utils.mjs @@ -33,91 +33,108 @@ const getXYFromLatitudeLongitudeDoppler = (pos, offsetX, offsetY) => { }; const removeDopplerRadarImageNoise = (RadarContext) => { - const RadarImageData = RadarContext.getImageData(0, 0, RadarContext.canvas.width, RadarContext.canvas.height); - - // examine every pixel, - // change any old rgb to the new-rgb - for (let i = 0; i < RadarImageData.data.length; i += 4) { - // i + 0 = red - // i + 1 = green - // i + 2 = blue - // i + 3 = alpha (0 = transparent, 255 = opaque) - let R = RadarImageData.data[i]; - let G = RadarImageData.data[i + 1]; - let B = RadarImageData.data[i + 2]; - let A = RadarImageData.data[i + 3]; - - // is this pixel the old rgb? - if ((R === 0 && G === 0 && B === 0) - || (R === 0 && G === 236 && B === 236) - || (R === 1 && G === 160 && B === 246) - || (R === 0 && G === 0 && B === 246)) { - // change to your new rgb - - // Transparent - R = 0; - G = 0; - B = 0; - A = 0; - } else if ((R === 0 && G === 255 && B === 0)) { - // Light Green 1 - R = 49; - G = 210; - B = 22; - A = 255; - } else if ((R === 0 && G === 200 && B === 0)) { - // Light Green 2 - R = 0; - G = 142; - B = 0; - A = 255; - } else if ((R === 0 && G === 144 && B === 0)) { - // Dark Green 1 - R = 20; - G = 90; - B = 15; - A = 255; - } else if ((R === 255 && G === 255 && B === 0)) { - // Dark Green 2 - R = 10; - G = 40; - B = 10; - A = 255; - } else if ((R === 231 && G === 192 && B === 0)) { - // Yellow - R = 196; - G = 179; - B = 70; - A = 255; - } else if ((R === 255 && G === 144 && B === 0)) { - // Orange - R = 190; - G = 72; - B = 19; - A = 255; - } else if ((R === 214 && G === 0 && B === 0) - || (R === 255 && G === 0 && B === 0)) { - // Red - R = 171; - G = 14; - B = 14; - A = 255; - } else if ((R === 192 && G === 0 && B === 0) - || (R === 255 && G === 0 && B === 255)) { - // Brown - R = 115; - G = 31; - B = 4; - A = 255; - } - - RadarImageData.data[i] = R; - RadarImageData.data[i + 1] = G; - RadarImageData.data[i + 2] = B; - RadarImageData.data[i + 3] = A; + // Validate canvas context and dimensions before calling getImageData + if (!RadarContext || !RadarContext.canvas) { + console.error('Invalid radar context provided to removeDopplerRadarImageNoise'); + return; } - RadarContext.putImageData(RadarImageData, 0, 0); + const { canvas } = RadarContext; + if (canvas.width <= 0 || canvas.height <= 0) { + console.error(`Invalid canvas dimensions in removeDopplerRadarImageNoise: ${canvas.width}x${canvas.height}`); + return; + } + + try { + const RadarImageData = RadarContext.getImageData(0, 0, canvas.width, canvas.height); + + // examine every pixel, + // change any old rgb to the new-rgb + for (let i = 0; i < RadarImageData.data.length; i += 4) { + // i + 0 = red + // i + 1 = green + // i + 2 = blue + // i + 3 = alpha (0 = transparent, 255 = opaque) + let R = RadarImageData.data[i]; + let G = RadarImageData.data[i + 1]; + let B = RadarImageData.data[i + 2]; + let A = RadarImageData.data[i + 3]; + + // is this pixel the old rgb? + if ((R === 0 && G === 0 && B === 0) + || (R === 0 && G === 236 && B === 236) + || (R === 1 && G === 160 && B === 246) + || (R === 0 && G === 0 && B === 246)) { + // change to your new rgb + + // Transparent + R = 0; + G = 0; + B = 0; + A = 0; + } else if ((R === 0 && G === 255 && B === 0)) { + // Light Green 1 + R = 49; + G = 210; + B = 22; + A = 255; + } else if ((R === 0 && G === 200 && B === 0)) { + // Light Green 2 + R = 0; + G = 142; + B = 0; + A = 255; + } else if ((R === 0 && G === 144 && B === 0)) { + // Dark Green 1 + R = 20; + G = 90; + B = 15; + A = 255; + } else if ((R === 255 && G === 255 && B === 0)) { + // Dark Green 2 + R = 10; + G = 40; + B = 10; + A = 255; + } else if ((R === 231 && G === 192 && B === 0)) { + // Yellow + R = 196; + G = 179; + B = 70; + A = 255; + } else if ((R === 255 && G === 144 && B === 0)) { + // Orange + R = 190; + G = 72; + B = 19; + A = 255; + } else if ((R === 214 && G === 0 && B === 0) + || (R === 255 && G === 0 && B === 0)) { + // Red + R = 171; + G = 14; + B = 14; + A = 255; + } else if ((R === 192 && G === 0 && B === 0) + || (R === 255 && G === 0 && B === 255)) { + // Brown + R = 115; + G = 31; + B = 4; + A = 255; + } + + RadarImageData.data[i] = R; + RadarImageData.data[i + 1] = G; + RadarImageData.data[i + 2] = B; + RadarImageData.data[i + 3] = A; + } + + RadarContext.putImageData(RadarImageData, 0, 0); + } catch (error) { + console.error(`Error in removeDopplerRadarImageNoise: ${error.message}. Canvas size: ${canvas.width}x${canvas.height}`); + // Don't re-throw the error, just log it and continue processing + } }; export { diff --git a/server/scripts/modules/radar.mjs b/server/scripts/modules/radar.mjs index 9211297..2ffc03e 100644 --- a/server/scripts/modules/radar.mjs +++ b/server/scripts/modules/radar.mjs @@ -1,7 +1,7 @@ // current weather conditions display import STATUS from './status.mjs'; import { DateTime } from '../vendor/auto/luxon.mjs'; -import { text } from './utils/fetch.mjs'; +import { safeText } from './utils/fetch.mjs'; import WeatherDisplay from './weatherdisplay.mjs'; import { registerDisplay, timeZone } from './navigation.mjs'; import * as utils from './radar-utils.mjs'; @@ -57,35 +57,60 @@ class Radar extends WeatherDisplay { } const baseUrl = `https://${RADAR_HOST}/archive/data/`; - const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png'; - const baseUrls = []; - let date = DateTime.utc().minus({ days: 1 }).startOf('day'); + const baseUrlEnd = '/GIS/uscomp/?F=0&P=n0r*.png'; // This URL returns an index of .png files for the given date - // make urls for yesterday and today - while (date <= DateTime.utc().startOf('day')) { - baseUrls.push(`${baseUrl}${date.toFormat('yyyy/LL/dd')}${baseUrlEnd}`); - date = date.plus({ days: 1 }); + // Always get today's data + const today = DateTime.utc().startOf('day'); + const todayStr = today.toFormat('yyyy/LL/dd'); + const yesterday = today.minus({ days: 1 }); + const yesterdayStr = yesterday.toFormat('yyyy/LL/dd'); + const todayUrl = `${baseUrl}${todayStr}${baseUrlEnd}`; + + // Get today's data, then we'll see if we need yesterday's + const todayList = await safeText(todayUrl); + + // Count available images from today + let todayImageCount = 0; + if (todayList) { + const parser = new DOMParser(); + const xmlDoc = parser.parseFromString(todayList, 'text/html'); + const anchors = xmlDoc.querySelectorAll('a'); + todayImageCount = Array.from(anchors).filter((elem) => elem.innerHTML?.match(/n0r_\d{12}\.png/)).length; } - const lists = (await Promise.all(baseUrls.map(async (url) => { - try { - // get a list of available radars - return text(url); - } catch (error) { - console.log('Unable to get list of radars'); - console.error(error); - this.setStatus(STATUS.failed); - return false; - } - }))).filter((d) => d); + // Only fetch yesterday's data if we don't have enough images from today + // or if it's very early in the day when recent images might still be from yesterday + const currentTimeUTC = DateTime.utc(); + const minutesSinceMidnight = currentTimeUTC.hour * 60 + currentTimeUTC.minute; + const requiredTimeWindow = this.dopplerRadarImageMax * 5; // 5 minutes per image + const needYesterday = todayImageCount < this.dopplerRadarImageMax || minutesSinceMidnight < requiredTimeWindow; - // convert to an array of gif urls + // Build the final lists array + const lists = []; + if (needYesterday) { + const yesterdayUrl = `${baseUrl}${yesterdayStr}${baseUrlEnd}`; + const yesterdayList = await safeText(yesterdayUrl); + if (yesterdayList) { + lists.push(yesterdayList); // Add yesterday's data first + } + } + if (todayList) { + lists.push(todayList); // Add today's data + } + + // convert to an array of png urls const pngs = lists.flatMap((html, htmlIdx) => { const parser = new DOMParser(); const xmlDoc = parser.parseFromString(html, 'text/html'); - // add the base url + // add the base url - reconstruct the URL for each list const base = xmlDoc.createElement('base'); - base.href = baseUrls[htmlIdx]; + if (htmlIdx === 0 && needYesterday) { + // First item is yesterday's data when we fetched it + base.href = `${baseUrl}${yesterdayStr}${baseUrlEnd}`; + } else { + // This is today's data (or the only data if yesterday wasn't fetched) + base.href = `${baseUrl}${todayStr}${baseUrlEnd}`; + } xmlDoc.head.append(base); const anchors = xmlDoc.querySelectorAll('a'); const urls = []; @@ -119,69 +144,73 @@ class Radar extends WeatherDisplay { // reset the "used" flag on pre-processed radars // items that were not used during this process are deleted (either expired via time or change of location) processedRadars.forEach((radar) => { radar.used = false; }); - // remove any radars that aren't - // Load the most recent doppler radar images. - const radarInfo = await Promise.all(urls.map(async (url) => { - // store the time - const timeMatch = url.match(/_(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)\./); - const [, year, month, day, hour, minute] = timeMatch; + try { + const radarInfo = await Promise.all(urls.map(async (url) => { + // store the time + const timeMatch = url.match(/_(\d{4})(\d\d)(\d\d)(\d\d)(\d\d)\./); + const [, year, month, day, hour, minute] = timeMatch; - const radarKeyedTimestamp = `${radarKey}:${year}${month}${day}${hour}${minute}`; + const radarKeyedTimestamp = `${radarKey}:${year}${month}${day}${hour}${minute}`; - // check for a pre-processed radar - const preProcessed = processedRadars.find((radar) => radar.key === radarKeyedTimestamp); + // check for a pre-processed radar + const preProcessed = processedRadars.find((radar) => radar.key === radarKeyedTimestamp); - // use the pre-processed radar, or get a new one - const processedRadar = preProcessed?.dataURL ?? await processRadar({ - url, - RADAR_HOST, - OVERRIDES, - radarSourceXY, - }); - - // store the radar - if (!preProcessed) { - processedRadars.push({ - key: radarKeyedTimestamp, - dataURL: processedRadar, - used: true, + // use the pre-processed radar, or get a new one + const processedRadar = preProcessed?.dataURL ?? await processRadar({ + url, + RADAR_HOST, + OVERRIDES, + radarSourceXY, }); - } else { - // set used flag - preProcessed.used = true; - } - const time = DateTime.fromObject({ - year, - month, - day, - hour, - minute, - }, { - zone: 'UTC', - }).setZone(timeZone()); + // store the radar + if (!preProcessed) { + processedRadars.push({ + key: radarKeyedTimestamp, + dataURL: processedRadar, + used: true, + }); + } else { + // set used flag + preProcessed.used = true; + } - const elem = this.fillTemplate('frame', { map: { type: 'img', src: processedRadar } }); - return { - time, - elem, - }; - })); + const time = DateTime.fromObject({ + year, + month, + day, + hour, + minute, + }, { + zone: 'UTC', + }).setZone(timeZone()); - // put the elements in the container - const scrollArea = this.elem.querySelector('.scroll-area'); - scrollArea.innerHTML = ''; - scrollArea.append(...radarInfo.map((r) => r.elem)); + const elem = this.fillTemplate('frame', { map: { type: 'img', src: processedRadar } }); + return { + time, + elem, + }; + })); - // set max length - this.timing.totalScreens = radarInfo.length; + // put the elements in the container + const scrollArea = this.elem.querySelector('.scroll-area'); + scrollArea.innerHTML = ''; + scrollArea.append(...radarInfo.map((r) => r.elem)); - this.times = radarInfo.map((radar) => radar.time); - this.setStatus(STATUS.loaded); + // set max length + this.timing.totalScreens = radarInfo.length; - // clean up any unused stored radars - processedRadars = processedRadars.filter((radar) => radar.used); + this.times = radarInfo.map((radar) => radar.time); + this.setStatus(STATUS.loaded); + + // clean up any unused stored radars + processedRadars = processedRadars.filter((radar) => radar.used); + } catch (_error) { + // Radar fetch failed - skip this display in animation by setting totalScreens = 0 + this.timing.totalScreens = 0; + if (this.isEnabled) this.setStatus(STATUS.failed); + } } async drawCanvas() { diff --git a/server/scripts/modules/regionalforecast-utils.mjs b/server/scripts/modules/regionalforecast-utils.mjs index e5cf702..edd0229 100644 --- a/server/scripts/modules/regionalforecast-utils.mjs +++ b/server/scripts/modules/regionalforecast-utils.mjs @@ -1,7 +1,10 @@ import { getSmallIcon } from './icons.mjs'; import { preloadImg } from './utils/image.mjs'; -import { json } from './utils/fetch.mjs'; +import { safeJson } from './utils/fetch.mjs'; import { temperature as temperatureUnit } from './utils/units.mjs'; +import augmentObservationWithMetar from './utils/metar.mjs'; +import { debugFlag } from './utils/debug.mjs'; +import { enhanceObservationWithMapClick } from './utils/mapclick.mjs'; const buildForecast = (forecast, city, cityXY) => { // get a unit converter @@ -19,23 +22,66 @@ const buildForecast = (forecast, city, cityXY) => { const getRegionalObservation = async (point, city) => { try { - // get stations - const stations = await json(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/stations?limit=1`); + // get stations using centralized safe handling + const stations = await safeJson(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/stations?limit=1`); + + if (!stations || !stations.features || stations.features.length === 0) { + if (debugFlag('verbose-failures')) { + console.warn(`Unable to get regional stations for ${city.city}`); + } + return false; + } // get the first station const station = stations.features[0].id; - // get the observation data - const observation = await json(`${station}/observations/latest`); + const stationId = stations.features[0].properties.stationIdentifier; + // get the observation data using centralized safe handling + const observation = await safeJson(`${station}/observations/latest`); + + if (!observation) { + if (debugFlag('verbose-failures')) { + console.warn(`Unable to get regional observations for station ${stationId}`); + } + return false; + } + + // Enhance observation data with METAR parsing for missing fields + let augmentedObservation = augmentObservationWithMetar(observation.properties); + + // Define required fields for regional observations (more lenient than current weather) + const requiredFields = [ + { name: 'temperature', check: (props) => props.temperature?.value === null }, + { name: 'textDescription', check: (props) => props.textDescription === null || props.textDescription === '' }, + { name: 'icon', check: (props) => props.icon === null }, + ]; + + // Use enhanced observation with MapClick fallback + const enhancedResult = await enhanceObservationWithMapClick(augmentedObservation, { + requiredFields, + stationId, + debugContext: 'regionalforecast', + }); + + augmentedObservation = enhancedResult.data; + const { missingFields } = enhancedResult; + + // Check final data quality + if (missingFields.length > 0) { + if (debugFlag('regionalforecast')) { + console.log(`Regional Observations for station ${stationId} is missing fields: ${missingFields.join(', ')} (skipping)`); + } + return false; + } + // preload the image - if (!observation.properties.icon) return false; - const icon = getSmallIcon(observation.properties.icon, !observation.properties.daytime); + if (!augmentedObservation.icon) return false; + const icon = getSmallIcon(augmentedObservation.icon, !augmentedObservation.daytime); if (!icon) return false; preloadImg(icon); // return the observation - return observation.properties; + return augmentedObservation; } catch (error) { - console.log(`Unable to get regional observations for ${city.Name ?? city.city}`); - console.error(error.status, error.responseJSON); + console.error(`Unexpected error getting Regional Observation for ${city.city}: ${error.message}`); return false; } }; diff --git a/server/scripts/modules/regionalforecast.mjs b/server/scripts/modules/regionalforecast.mjs index 6e440b4..81ac972 100644 --- a/server/scripts/modules/regionalforecast.mjs +++ b/server/scripts/modules/regionalforecast.mjs @@ -3,15 +3,17 @@ import STATUS from './status.mjs'; import { distance as calcDistance } from './utils/calc.mjs'; -import { json } from './utils/fetch.mjs'; +import { safeJson, safePromiseAll } from './utils/fetch.mjs'; import { temperature as temperatureUnit } from './utils/units.mjs'; import { getSmallIcon } from './icons.mjs'; import { preloadImg } from './utils/image.mjs'; -import { DateTime, Interval } from '../vendor/auto/luxon.mjs'; +import { DateTime } from '../vendor/auto/luxon.mjs'; import WeatherDisplay from './weatherdisplay.mjs'; import { registerDisplay } from './navigation.mjs'; import * as utils from './regionalforecast-utils.mjs'; import { getPoint } from './utils/weather.mjs'; +import { debugFlag } from './utils/debug.mjs'; +import filterExpiredPeriods from './utils/forecast-utils.mjs'; // map offset const mapOffsetXY = { @@ -77,19 +79,27 @@ class RegionalForecast extends WeatherDisplay { // get a unit converter const temperatureConverter = temperatureUnit(); - // get now as DateTime for calculations below - const now = DateTime.now(); - - // get regional forecasts and observations (the two are intertwined due to the design of api.weather.gov) - const regionalDataAll = await Promise.all(regionalCities.map(async (city) => { + // get regional forecasts and observations using centralized safe Promise handling + const regionalDataAll = await safePromiseAll(regionalCities.map(async (city) => { try { const point = city?.point ?? (await getAndFormatPoint(city.lat, city.lon)); - if (!point) throw new Error('No pre-loaded point'); + if (!point) { + if (debugFlag('verbose-failures')) { + console.warn(`Unable to get Points for '${city.Name ?? city.city}'`); + } + return false; + } // start off the observation task const observationPromise = utils.getRegionalObservation(point, city); - const forecast = await json(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/forecast`); + const forecast = await safeJson(`https://api.weather.gov/gridpoints/${point.wfo}/${point.x},${point.y}/forecast`); + if (!forecast) { + if (debugFlag('verbose-failures')) { + console.warn(`Regional Forecast request for ${city.Name ?? city.city} failed`); + } + return false; + } // get XY on map for city const cityXY = utils.getXYForCity(city, minMaxLatLon.maxLat, minMaxLatLon.minLon, this.weatherParameters.state); @@ -112,29 +122,23 @@ class RegionalForecast extends WeatherDisplay { // preload the icon preloadImg(getSmallIcon(regionalObservation.icon, !regionalObservation.daytime)); - // return a pared-down forecast - // 0th object should contain the current conditions, but when WFOs go offline or otherwise don't post - // an updated forecast it's possible that the 0th object is in the past. - // so we go on a search for the current time in the start/end times provided in the forecast periods - const { periods } = forecast.properties; - const currentPeriod = periods.reduce((prev, period, index) => { - const start = DateTime.fromISO(period.startTime); - const end = DateTime.fromISO(period.endTime); - const interval = Interval.fromDateTimes(start, end); - if (interval.contains(now)) { - return index; - } - return prev; - }, 0); + // filter out expired periods first, then use the next two periods for forecast + const activePeriods = filterExpiredPeriods(forecast.properties.periods); + + // ensure we have enough periods for forecast + if (activePeriods.length < 3) { + console.warn(`Insufficient active periods for ${city.Name ?? city.city}: only ${activePeriods.length} periods available`); + return false; + } + // group together the current observation and next two periods return [ regionalObservation, - utils.buildForecast(forecast.properties.periods[currentPeriod + 1], city, cityXY), - utils.buildForecast(forecast.properties.periods[currentPeriod + 2], city, cityXY), + utils.buildForecast(activePeriods[1], city, cityXY), + utils.buildForecast(activePeriods[2], city, cityXY), ]; } catch (error) { - console.log(`No regional forecast data for '${city.name ?? city.city}'`); - console.log(error); + console.error(`Unexpected error getting Regional Forecast data for '${city.name ?? city.city}': ${error.message}`); return false; } })); @@ -215,12 +219,19 @@ class RegionalForecast extends WeatherDisplay { } const getAndFormatPoint = async (lat, lon) => { - const point = await getPoint(lat, lon); - return { - x: point.properties.gridX, - y: point.properties.gridY, - wfo: point.properties.gridId, - }; + try { + const point = await getPoint(lat, lon); + if (!point) { + return null; + } + return { + x: point.properties.gridX, + y: point.properties.gridY, + wfo: point.properties.gridId, + }; + } catch (error) { + throw new Error(`Unexpected error getting point for ${lat},${lon}: ${error.message}`); + } }; // register display diff --git a/server/scripts/modules/settings.mjs b/server/scripts/modules/settings.mjs index 0e38d53..4c9795c 100644 --- a/server/scripts/modules/settings.mjs +++ b/server/scripts/modules/settings.mjs @@ -1,12 +1,115 @@ import Setting from './utils/setting.mjs'; -document.addEventListener('DOMContentLoaded', () => { - init(); -}); - -// default speed +// Initialize settings immediately so other modules can access them const settings = { speed: { value: 1.0 } }; +// Track settings that need DOM changes after early initialization +const deferredDomSettings = new Set(); + +// Declare change functions first, before they're referenced in init() to avoid the Temporal Dead Zone (TDZ) +const wideScreenChange = (value) => { + const container = document.querySelector('#divTwc'); + if (!container) { + // DOM not ready; defer enabling if set + if (value) { + deferredDomSettings.add('wide'); + } + return; + } + + if (value) { + container.classList.add('wide'); + } else { + container.classList.remove('wide'); + } + // Trigger resize to recalculate scaling for new width + window.dispatchEvent(new Event('resize')); +}; + +const kioskChange = (value) => { + const body = document.querySelector('body'); + if (!body) { + // DOM not ready; defer enabling if set + if (value) { + deferredDomSettings.add('kiosk'); + } + return; + } + + if (value) { + body.classList.add('kiosk'); + window.dispatchEvent(new Event('resize')); + } else { + body.classList.remove('kiosk'); + window.dispatchEvent(new Event('resize')); + } + + // Conditionally store the kiosk setting based on the "Sticky Kiosk" setting + // (Need to check if the method exists to handle initialization race condition) + if (settings.kiosk?.conditionalStoreToLocalStorage) { + settings.kiosk.conditionalStoreToLocalStorage(value, settings.stickyKiosk?.value); + } +}; + +const scanLineChange = (value) => { + const container = document.getElementById('container'); + const navIcons = document.getElementById('ToggleScanlines'); + + if (!container || !navIcons) { + // DOM not ready; defer enabling if set + if (value) { + deferredDomSettings.add('scanLines'); + } + return; + } + + if (value) { + container.classList.add('scanlines'); + navIcons.classList.add('on'); + } else { + // Remove all scanline classes + container.classList.remove('scanlines', 'scanlines-auto', 'scanlines-fine', 'scanlines-normal', 'scanlines-thick', 'scanlines-classic', 'scanlines-retro'); + navIcons.classList.remove('on'); + } +}; + +const scanLineModeChange = (_value) => { + // Only apply if scanlines are currently enabled + if (settings.scanLines?.value) { + // Call the scanline update function directly with current scale + if (typeof window.applyScanlineScaling === 'function') { + // Get current scale from navigation module or use 1.0 as fallback + const scale = window.currentScale || 1.0; + window.applyScanlineScaling(scale); + } + } +}; + +// Simple global helper to change scanline mode when remote debugging or in kiosk mode +window.changeScanlineMode = (mode) => { + if (typeof settings === 'undefined' || !settings.scanLineMode) { + console.error('Settings system not available'); + return false; + } + + const validModes = ['auto', 'thin', 'medium', 'thick']; + if (!validModes.includes(mode)) { + return false; + } + + settings.scanLineMode.value = mode; + return true; +}; + +const unitChange = () => { + // reload the data at the top level to refresh units + // after the initial load + if (unitChange.firstRunDone) { + window.location.reload(); + } + unitChange.firstRunDone = true; +}; + const init = () => { // create settings see setting.mjs for defaults settings.wide = new Setting('wide', { @@ -20,6 +123,12 @@ const init = () => { defaultValue: false, changeAction: kioskChange, sticky: false, + stickyRead: true, + }); + settings.stickyKiosk = new Setting('stickyKiosk', { + name: 'Sticky Kiosk', + defaultValue: false, + sticky: true, }); settings.speed = new Setting('speed', { name: 'Speed', @@ -39,6 +148,19 @@ const init = () => { changeAction: scanLineChange, sticky: true, }); + settings.scanLineMode = new Setting('scanLineMode', { + name: 'Scan Line Style', + type: 'select', + defaultValue: 'auto', + changeAction: scanLineModeChange, + sticky: true, + values: [ + ['auto', 'Auto (Adaptive)'], + ['thin', 'Thin (1x)'], + ['medium', 'Medium (2x)'], + ['thick', 'Thick (3x)'], + ], + }); settings.units = new Setting('units', { name: 'Units', type: 'select', @@ -62,54 +184,32 @@ const init = () => { ], visible: false, }); +}; - // generate html objects +init(); + +// generate html objects +document.addEventListener('DOMContentLoaded', () => { + // Apply any settings that were deferred due to the DOM not being ready when setting were read + if (deferredDomSettings.size > 0) { + console.log('Applying deferred DOM settings:', Array.from(deferredDomSettings)); + + // Re-apply each pending setting by calling its changeAction with current value + deferredDomSettings.forEach((settingName) => { + const setting = settings[settingName]; + if (setting && setting.changeAction && typeof setting.changeAction === 'function') { + setting.changeAction(setting.value); + } + }); + + deferredDomSettings.clear(); + } + + // Then generate the settings UI const settingHtml = Object.values(settings).map((d) => d.generate()); - - // write to page const settingsSection = document.querySelector('#settings'); settingsSection.innerHTML = ''; settingsSection.append(...settingHtml); -}; - -const wideScreenChange = (value) => { - const container = document.querySelector('#divTwc'); - if (value) { - container.classList.add('wide'); - } else { - container.classList.remove('wide'); - } -}; - -const kioskChange = (value) => { - const body = document.querySelector('body'); - if (value) { - body.classList.add('kiosk'); - window.dispatchEvent(new Event('resize')); - } else { - body.classList.remove('kiosk'); - } -}; - -const scanLineChange = (value) => { - const container = document.getElementById('container'); - const navIcons = document.getElementById('ToggleScanlines'); - if (value) { - container.classList.add('scanlines'); - navIcons.classList.add('on'); - } else { - container.classList.remove('scanlines'); - navIcons.classList.remove('on'); - } -}; - -const unitChange = () => { - // reload the data at the top level to refresh units - // after the initial load - if (unitChange.firstRunDone) { - window.location.reload(); - } - unitChange.firstRunDone = true; -}; +}); export default settings; diff --git a/server/scripts/modules/spc-outlook.mjs b/server/scripts/modules/spc-outlook.mjs index 94ef41b..03f799b 100644 --- a/server/scripts/modules/spc-outlook.mjs +++ b/server/scripts/modules/spc-outlook.mjs @@ -1,11 +1,12 @@ // display spc outlook in a bar graph import STATUS from './status.mjs'; -import { json } from './utils/fetch.mjs'; +import { safeJson, safePromiseAll } from './utils/fetch.mjs'; import { DateTime } from '../vendor/auto/luxon.mjs'; import WeatherDisplay from './weatherdisplay.mjs'; import { registerDisplay } from './navigation.mjs'; import testPolygon from './utils/polygon.mjs'; +import { debugFlag } from './utils/debug.mjs'; // list of interesting files ordered [0] = today, [1] = tomorrow... const urlPattern = (day) => `https://www.spc.noaa.gov/products/outlook/day${day}otlk_cat.nolyr.geojson`; @@ -18,8 +19,10 @@ const testAllPoints = (point, data) => { data.forEach((day, index) => { // initialize the result result[index] = false; - // if there's no data (file didn't load), exit early - if (day === undefined) return; + // ensure day exists and has features array + if (!day || !day.features || !Array.isArray(day.features)) { + return; + } // loop through each category day.features.forEach((feature) => { if (!feature.geometry.coordinates) return; @@ -46,7 +49,7 @@ class SpcOutlook extends WeatherDisplay { // don't display on progress/navigation screen this.showOnProgress = false; - // calculate file names + // calculate file names, one for each day this.files = [null, null, null].map((v, i) => urlPattern(i + 1)); // set timings @@ -56,27 +59,43 @@ class SpcOutlook extends WeatherDisplay { async getData(weatherParameters, refresh) { if (!super.getData(weatherParameters, refresh)) return; - // initial data does not need to be reloaded on a location change, only during silent refresh - if (!this.initialData || refresh) { + // SPC outlook data does not need to be reloaded on a location change, only during silent refresh + if (!this.rawOutlookData || refresh) { try { - // get the three categorical files to get started - const filePromises = await Promise.allSettled(this.files.map((file) => json(file))); - // store the data, promise will always be fulfilled - this.initialData = filePromises.map((outlookDay) => outlookDay.value); - } catch (error) { - console.error('Unable to get spc outlook'); - console.error(error.status, error.responseJSON); - // if there's no previous data, fail - if (!this.initialData) { - this.setStatus(STATUS.failed); + // get the data for today, tomorrow, and the day after + const filePromises = this.files.map((file) => safeJson(file, { + retryCount: 1, // Retry one time + timeout: 10000, // 10 second timeout for SPC outlook data + })); + // wait for all the data to be fetched; always returns an array of (potentially null) results + this.rawOutlookData = await safePromiseAll(filePromises); + + // Filter out null results (like failed requests) and ensure the response has GeoJSON-looking data + this.rawOutlookData = this.rawOutlookData.filter((value) => value && value.features); + + if (this.rawOutlookData.length === 0) { + if (debugFlag('verbose-failures')) { + console.warn('SPC Outlook has zero days of data'); + } + if (this.isEnabled) this.setStatus(STATUS.failed); return; } + + if (this.rawOutlookData.length < this.files.length) { + if (debugFlag('verbose-failures')) { + console.warn(`SPC Outlook only loaded ${this.rawOutlookData.length} of ${this.files.length} days successfully`); + } + } + } catch (error) { + console.error(`Unexpected error getting SPC Outlook data: ${error.message}`); + if (this.isEnabled) this.setStatus(STATUS.failed); + return; } } - // do the initial parsing of the data - this.data = testAllPoints([weatherParameters.longitude, weatherParameters.latitude], this.initialData); + // parse the data + this.data = testAllPoints([weatherParameters.longitude, weatherParameters.latitude], this.rawOutlookData); - // if all the data returns false the there's nothing to do, skip this screen + // check if there's a "risk" for any of the three days, otherwise skip the SPC Outlook screen if (this.data.reduce((prev, cur) => prev || !!cur, false)) { this.timing.totalScreens = 1; } else { diff --git a/server/scripts/modules/travelforecast.mjs b/server/scripts/modules/travelforecast.mjs index bf3b9f1..d5b4f02 100644 --- a/server/scripts/modules/travelforecast.mjs +++ b/server/scripts/modules/travelforecast.mjs @@ -1,34 +1,34 @@ // travel forecast display import STATUS from './status.mjs'; -import { json } from './utils/fetch.mjs'; +import { safeJson, safePromiseAll } from './utils/fetch.mjs'; import { getSmallIcon } from './icons.mjs'; import { DateTime } from '../vendor/auto/luxon.mjs'; import WeatherDisplay from './weatherdisplay.mjs'; import { registerDisplay } from './navigation.mjs'; import settings from './settings.mjs'; +import calculateScrollTiming from './utils/scroll-timing.mjs'; +import { debugFlag } from './utils/debug.mjs'; class TravelForecast extends WeatherDisplay { constructor(navId, elemId, defaultActive) { // special height and width for scrolling super(navId, elemId, 'Travel Forecast', defaultActive); - // set up the timing - this.timing.baseDelay = 20; - // page sizes are 4 cities, calculate the number of pages necessary plus overflow - const pagesFloat = TravelCities.length / 4; - const pages = Math.floor(pagesFloat) - 2; // first page is already displayed, last page doesn't happen - const extra = pages % 1; - const timingStep = 75 * 4; - this.timing.delay = [150 + timingStep]; - // add additional pages - for (let i = 0; i < pages; i += 1) this.timing.delay.push(timingStep); - // add the extra (not exactly 4 pages portion) - if (extra !== 0) this.timing.delay.push(Math.round(this.extra * this.cityHeight)); - // add the final 3 second delay - this.timing.delay.push(150); - // add previous data cache this.previousData = []; + + // cache for scroll calculations + // This cache is essential because baseCountChange() is called 25 times per second (every 40ms) + // during scrolling. Travel forecast scroll duration varies based on the number of cities configured. + // Without caching, we'd perform hundreds of expensive DOM layout queries during each scroll cycle. + // The cache reduces this to one calculation when content changes, then reuses cached values to try + // and get smoother scrolling. + this.scrollCache = { + displayHeight: 0, + contentHeight: 0, + maxOffset: 0, + travelLines: null, + }; } async getData(weatherParameters, refresh) { @@ -45,22 +45,27 @@ class TravelForecast extends WeatherDisplay { // get point then forecast if (!city.point) throw new Error('No pre-loaded point'); let forecast; - try { - forecast = await json(`https://api.weather.gov/gridpoints/${city.point.wfo}/${city.point.x},${city.point.y}/forecast`, { - data: { - units: settings.units.value, - }, - }); + forecast = await safeJson(`https://api.weather.gov/gridpoints/${city.point.wfo}/${city.point.x},${city.point.y}/forecast`, { + data: { + units: settings.units.value, + }, + }); + + if (forecast) { // store for the next run this.previousData[index] = forecast; - } catch (e) { + } else if (this.previousData?.[index]) { // if there's previous data use it - if (this.previousData?.[index]) { - forecast = this.previousData?.[index]; - } else { - // otherwise re-throw for the standard error handling - throw (e); + if (debugFlag('travelforecast')) { + console.warn(`Using previous forecast data for ${city.Name} travel forecast`); } + forecast = this.previousData?.[index]; + } else { + // no current data and no previous data available + if (debugFlag('verbose-failures')) { + console.warn(`No travel forecast for ${city.Name} available`); + } + return { name: city.Name, error: true }; } // determine today or tomorrow (shift periods by 1 if tomorrow) const todayShift = forecast.properties.periods[0].isDaytime ? 0 : 1; @@ -73,14 +78,13 @@ class TravelForecast extends WeatherDisplay { icon: getSmallIcon(forecast.properties.periods[todayShift].icon), }; } catch (error) { - console.error(`GetTravelWeather for ${city.Name} failed`); - console.error(error.status, error.responseJSON); + console.error(`Unexpected error getting Travel Forecast for ${city.Name}: ${error.message}`); return { name: city.Name, error: true }; } }); - // wait for all forecasts - const forecasts = await Promise.all(forecastPromises); + // wait for all forecasts using centralized safe Promise handling + const forecasts = await safePromiseAll(forecastPromises); this.data = forecasts; // test for some data available in at least one forecast @@ -129,6 +133,9 @@ class TravelForecast extends WeatherDisplay { return this.fillTemplate('travel-row', fillValues); }).filter((d) => d); list.append(...lines); + + // update timing based on actual content + this.setTiming(list); } async drawCanvas() { @@ -157,20 +164,50 @@ class TravelForecast extends WeatherDisplay { // base count change callback baseCountChange(count) { + // get the travel lines element and cache measurements if needed + const travelLines = this.elem.querySelector('.travel-lines'); + if (!travelLines) return; + + // update cache if needed (when content changes or first run) + if (this.scrollCache.travelLines !== travelLines || this.scrollCache.displayHeight === 0) { + this.scrollCache.displayHeight = this.elem.querySelector('.main').offsetHeight; + this.scrollCache.contentHeight = travelLines.offsetHeight; + this.scrollCache.maxOffset = Math.max(0, this.scrollCache.contentHeight - this.scrollCache.displayHeight); + this.scrollCache.travelLines = travelLines; + + // Set up hardware acceleration on the travel lines element + travelLines.style.willChange = 'transform'; + travelLines.style.backfaceVisibility = 'hidden'; + } + // calculate scroll offset and don't go past end - let offsetY = Math.min(this.elem.querySelector('.travel-lines').offsetHeight - 289, (count - 150)); + let offsetY = Math.min(this.scrollCache.maxOffset, (count - this.scrollTiming.initialCounts) * this.scrollTiming.pixelsPerCount); // don't let offset go negative if (offsetY < 0) offsetY = 0; - // copy the scrolled portion of the canvas - this.elem.querySelector('.main').scrollTo(0, offsetY); + // use transform instead of scrollTo for hardware acceleration + travelLines.style.transform = `translateY(-${Math.round(offsetY)}px)`; } // necessary to get the lastest long canvas when scrolling getLongCanvas() { return this.longCanvas; } + + setTiming(list) { + const container = this.elem.querySelector('.main'); + const timingConfig = calculateScrollTiming(list, container, { + staticDisplay: 5.0, // special static display time for travel forecast + }); + + // Apply the calculated timing + this.timing.baseDelay = timingConfig.baseDelay; + this.timing.delay = timingConfig.delay; + this.scrollTiming = timingConfig.scrollTiming; + + this.calcNavTiming(); + } } // effectively returns early on the first found date diff --git a/server/scripts/modules/utils/cache.mjs b/server/scripts/modules/utils/cache.mjs new file mode 100644 index 0000000..d4c3413 --- /dev/null +++ b/server/scripts/modules/utils/cache.mjs @@ -0,0 +1,40 @@ +import { rewriteUrl } from './url-rewrite.mjs'; + +// Clear cache utility for client-side use +const clearCacheEntry = async (url, baseUrl = '') => { + try { + // Rewrite the URL to get the local proxy path + const rewrittenUrl = rewriteUrl(url); + const urlObj = typeof rewrittenUrl === 'string' ? new URL(rewrittenUrl, baseUrl || window.location.origin) : rewrittenUrl; + let cachePath = urlObj.pathname + urlObj.search; + + // Strip the route designator (first path segment) to match actual cache keys + const firstSlashIndex = cachePath.indexOf('/', 1); // Find second slash + if (firstSlashIndex > 0) { + cachePath = cachePath.substring(firstSlashIndex); + } + + // Call the cache clear endpoint + const fetchUrl = baseUrl ? `${baseUrl}/cache${cachePath}` : `/cache${cachePath}`; + const response = await fetch(fetchUrl, { + method: 'DELETE', + }); + + if (response.ok) { + const result = await response.json(); + if (result.cleared) { + console.log(`🗑️ Cleared cache entry: ${cachePath}`); + return true; + } + console.log(`🔍 Cache entry not found: ${cachePath}`); + return false; + } + console.warn(`⚠️ Failed to clear cache entry: ${response.status} ${response.statusText}`); + return false; + } catch (error) { + console.error(`❌ Error clearing cache entry for ${url}:`, error.message); + return false; + } +}; + +export default clearCacheEntry; diff --git a/server/scripts/modules/utils/calc.mjs b/server/scripts/modules/utils/calc.mjs index b4c7469..40d6548 100644 --- a/server/scripts/modules/utils/calc.mjs +++ b/server/scripts/modules/utils/calc.mjs @@ -1,5 +1,9 @@ // wind direction const directionToNSEW = (Direction) => { + // Handle null, undefined, or invalid direction values + if (Direction === null || Direction === undefined || typeof Direction !== 'number' || Number.isNaN(Direction)) { + return 'VAR'; // Variable (or unknown) direction + } const val = Math.floor((Direction / 22.5) + 0.5); const arr = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']; return arr[(val % 16)]; diff --git a/server/scripts/modules/utils/cors.mjs b/server/scripts/modules/utils/cors.mjs deleted file mode 100644 index 038a4c7..0000000 --- a/server/scripts/modules/utils/cors.mjs +++ /dev/null @@ -1,12 +0,0 @@ -// rewrite some urls for local server -const rewriteUrl = (_url) => { - let url = _url; - 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; -}; - -export { - // eslint-disable-next-line import/prefer-default-export - rewriteUrl, -}; diff --git a/server/scripts/modules/utils/data-loader.mjs b/server/scripts/modules/utils/data-loader.mjs new file mode 100644 index 0000000..59cf7b7 --- /dev/null +++ b/server/scripts/modules/utils/data-loader.mjs @@ -0,0 +1,53 @@ +// Data loader utility for fetching JSON data with cache-busting + +let dataCache = {}; + +// Load data with version-based cache busting +const loadData = async (dataType, version = '') => { + if (dataCache[dataType]) { + return dataCache[dataType]; + } + + try { + const url = `/data/${dataType}.json${version ? `?_=${version}` : ''}`; + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`Failed to load ${dataType}: ${response.status}`); + } + + const data = await response.json(); + dataCache[dataType] = data; + return data; + } catch (error) { + console.error(`Error loading ${dataType}:`, error); + throw error; + } +}; + +// Load all data types +const loadAllData = async (version = '') => { + const [travelCities, regionalCities, stationInfo] = await Promise.all([ + loadData('travelcities', version), + loadData('regionalcities', version), + loadData('stations', version), + ]); + + // Set global variables for backward compatibility + window.TravelCities = travelCities; + window.RegionalCities = regionalCities; + window.StationInfo = stationInfo; + + return { travelCities, regionalCities, stationInfo }; +}; + +// Clear cache (useful for development) +const clearDataCache = () => { + dataCache = {}; +}; + +export { + loadData, + loadAllData, + clearDataCache, +}; diff --git a/server/scripts/modules/utils/debug.mjs b/server/scripts/modules/utils/debug.mjs new file mode 100644 index 0000000..0578933 --- /dev/null +++ b/server/scripts/modules/utils/debug.mjs @@ -0,0 +1,148 @@ +// Debug flag management system +// Supports comma-separated debug flags or "all" for everything +// URL parameter takes priority over OVERRIDES.DEBUG + +let debugFlags = null; // memoized parsed flags +let runtimeFlags = null; // runtime modifications via debugEnable/debugDisable/debugSet + +/** + * Parse debug flags from URL parameter or environment variable + * @returns {Set
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
-
- WeatherStar 4000+
- v<%- version %>
- Enter your location above to continue
+
+
+
+
-
+
+
+
+ WeatherStar 4000+
+ v<%- version %>
+ Enter your location above to continue
+
+ <%- include('partials/progress.ejs') %>
+
+
+ <%- include('partials/hourly.ejs') %>
+
+
+ <%- include('partials/hourly-graph.ejs') %>
+
+
+ <%- include('partials/travel.ejs') %>
+
+
+ <%- include('partials/current-weather.ejs') %>
+
+
+ <%- include('partials/local-forecast.ejs') %>
+
+
+ <%- include('partials/latest-observations.ejs') %>
+
+
+ <%- include('partials/regional-forecast.ejs') %>
+
+
+ <%- include('partials/almanac.ejs') %>
+
+
+ <%- include('partials/spc-outlook.ejs') %>
+
+
+ <%- include('partials/extended-forecast.ejs') %>
+
+
+ <%- include('partials/radar.ejs') %>
+
+
+ <%- include('partials/hazards.ejs') %>
-
- <%- include('partials/progress.ejs') %>
-
-
- <%- include('partials/hourly.ejs') %>
-
-
- <%- include('partials/hourly-graph.ejs') %>
-
-
- <%- include('partials/travel.ejs') %>
-
-
- <%- include('partials/current-weather.ejs') %>
-
-
- <%- include('partials/local-forecast.ejs') %>
-
-
- <%- include('partials/latest-observations.ejs') %>
-
-
- <%- include('partials/regional-forecast.ejs') %>
-
-
- <%- include('partials/almanac.ejs') %>
-
-
- <%- include('partials/spc-outlook.ejs') %>
-
-
- <%- include('partials/extended-forecast.ejs') %>
-
-
- <%- include('partials/radar.ejs') %>
-
-
- <%- include('partials/hazards.ejs') %>
@@ -142,55 +146,56 @@
- 
- 
- 
-
-
-
-
- 
- 
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- -
- More information
+
-
-
-
+ More information
+
+
+
+ Selected displays
+
+
+
+
+ Settings
+
+
+
+ Sharing
+
+ Copy Permalink
+
+
+
+ Forecast Information
+
+ Location:
+ Station Id:
+ Radar Id:
+ Zone Id:
+ Music: Not playing
+ Ws4kp Version: <%- version %> +
+ Station Id:
+ Radar Id:
+ Zone Id:
+ Music: Not playing
+ Ws4kp Version: <%- version %> +
Selected displays
-
-
-
-
- Settings
-
-
-
- Sharing
-
- Copy Permalink
-
-
- Forecast Information
-
- Location:
- Station Id:
- Radar Id:
- Zone Id:
- Music: Not playing
- Ws4kp Version: <%- version %> -
-
\ No newline at end of file
+- Station Id:
- Radar Id:
- Zone Id:
- Music: Not playing
- Ws4kp Version: <%- version %> -