Add comprehensive responsive scanline scaling system with anti-aliasing

- Attempt pixel-perfect scanline rendering for scaled displays and zoom scenarios
- Implement dynamic scanline thickness calculation to prevent sub-pixel rendering issues
- Add enhanced kiosk detection via isKioskLike for better fullscreen optimization
- Optimize scanlines for specific kiosk resolutions (1024x768, 1023x767)
- Add responsive SCSS media queries for different display densities
- Include extensive debugging utilities for scanline troubleshooting
- Improve noSleep error handling with proper promise rejection handling
- Update to modern fullscreen API method names
- Add async/await error handling for fullscreen requests
- Trigger resize after fullscreen engagement to apply optimal scaling
This commit is contained in:
Eddy G
2025-06-24 22:38:25 -04:00
parent be41d66de9
commit 65944dc3b5
4 changed files with 774 additions and 16 deletions

View File

@@ -89,6 +89,7 @@ const init = () => {
const query = parsedParameters.latLonQuery ?? localStorage.getItem('latLonQuery');
const latLon = parsedParameters.latLon ?? localStorage.getItem('latLon');
const fromGPS = localStorage.getItem('latLonFromGPS') && !loadFromParsed;
if (query && latLon && !fromGPS) {
const txtAddress = document.querySelector(TXT_ADDRESS_SELECTOR);
txtAddress.value = query;
@@ -171,16 +172,29 @@ const btnFullScreenClick = () => {
return false;
};
const enterFullScreen = () => {
// This is async because modern browsers return a Promise from requestFullscreen
const enterFullScreen = async () => {
const element = document.querySelector('#divTwc');
// Supports most browsers and their versions.
const requestMethod = element.requestFullScreen || element.webkitRequestFullScreen
|| element.mozRequestFullScreen || element.msRequestFullscreen;
const requestMethod = element.requestFullscreen || element.webkitRequestFullscreen
|| element.mozRequestFullscreen || element.msRequestFullscreen;
if (requestMethod) {
// Native full screen.
requestMethod.call(element, { navigationUI: 'hide' });
try {
// Native full screen with options for optimal display
await requestMethod.call(element, {
navigationUI: 'hide',
allowsInlineMediaPlayback: true,
});
// Allow a moment for fullscreen to engage, then optimize
setTimeout(() => {
resize();
}, 100);
} catch (error) {
console.error('❌ Fullscreen request failed:', error);
}
} else {
// iOS doesn't support FullScreen API.
window.scrollTo(0, 0);
@@ -202,8 +216,8 @@ const exitFullscreen = () => {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.mozCancelFullscreen) {
document.mozCancelFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}