lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

more modern full screen handling

Browse source
This commit is contained in:
Matt Walsh 2020-09-25 16:36:43 -05:00
parent 51bc2c5f4a
commit ba16c8f1f4
5 changed files with 28 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
server/scripts/index.js
View file

@ -63,11 +63,6 @@ const index = (() => {
$('#btnGetGps').on('click', btnGetGps_click); $('#btnGetGps').on('click', btnGetGps_click);
$(window).on('resize', OnFullScreen);
$(window).on('resize', window_resize);
$(document).on('mousemove', document_mousemove);
$(document).on('mousedown', document_mousemove);
divTwc.on('mousedown', document_mousemove);
$(document).on('keydown', document_keydown); $(document).on('keydown', document_keydown);
document.addEventListener('touchmove', e => { if (_FullScreenOverride) e.preventDefault(); }); document.addEventListener('touchmove', e => { if (_FullScreenOverride) e.preventDefault(); });
$('.ToggleFullScreen').on('click', btnFullScreen_click); $('.ToggleFullScreen').on('click', btnFullScreen_click);
@ -247,130 +242,12 @@ const index = (() => {
}; };
const FullScreenResize = () => { const FullScreenResize = () => {
const WindowWidth = $(window).width();
const WindowHeight = $(window).height();
const inFullScreen = InFullScreen();
let IFrameWidth;
let IFrameHeight;
let LeftWidth;
let RightWidth;
let TopHeight;
let BottomHeight;
let Offset;
if (inFullScreen) {
if ((WindowWidth / WindowHeight) >= 1.583333333333333) {
divTwcTop.hide();
divTwcBottom.hide();
divTwcLeft.show();
divTwcRight.show();
divTwcMiddle.attr('style', 'width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
LeftWidth = ((WindowWidth - (WindowHeight * 1.33333333333333333333)) / 2);
if (LeftWidth < 60) {
LeftWidth = 60;
}
divTwcLeft.attr('style', 'width:' + LeftWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
divTwcLeft.css('visibility', 'visible');
RightWidth = ((WindowWidth - (WindowHeight * 1.33333333333333333333)) / 2);
if (RightWidth < 60) {
RightWidth = 60;
}
divTwcRight.attr('style', 'width:' + RightWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
divTwcRight.css('visibility', 'visible');
IFrameWidth = WindowWidth - LeftWidth - RightWidth;
$('#display').attr('style', 'width:' + IFrameWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
} else {
divTwcTop.show();
divTwcBottom.show();
divTwcLeft.hide();
divTwcRight.hide();
Offset = 0;
TopHeight = ((WindowHeight - ((WindowWidth - Offset) * 0.75)) / 2);
if (TopHeight < 0) {
TopHeight = 0;
}
divTwcTop.attr('style', 'width:100%; height:' + TopHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
BottomHeight = ((WindowHeight - ((WindowWidth - Offset) * 0.75)) / 2);
if (BottomHeight < 30) {
BottomHeight = 30;
}
divTwcBottom.attr('style', 'width:100%; height:' + BottomHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
divTwcBottom.css('visibility', 'visible');
IFrameHeight = WindowHeight - TopHeight - BottomHeight;
$('#display').attr('style', 'width:100%; height:' + IFrameHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
divTwcMiddle.attr('style', 'width:100%; height:' + IFrameHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
}
}
if (!inFullScreen) {
divTwcTop.hide();
divTwcBottom.hide();
divTwcLeft.hide();
divTwcRight.hide();
divTwc.attr('style', '');
divTwcMiddle.attr('style', '');
$(window).off('resize', FullScreenResize);
}
if (inFullScreen) {
$('body').css('overflow', 'hidden');
$('.ToggleFullScreen').val('Exit Full Screen');
if (!GetFullScreenElement()) {
EnterFullScreen();
}
} else {
$('body').css('overflow', '');
$('.ToggleFullScreen').val('Full Screen');
}
divTwcNavContainer.show(); divTwcNavContainer.show();
}; };
const _lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
const _unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
const OnFullScreen = () => {
if (InFullScreen()) {
divTwc.attr('style', 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
FullScreenResize();
$(window).on('resize', FullScreenResize);
//FullScreenResize();
if (_lockOrientation) try { _lockOrientation('landscape-primary'); } catch (ex) { console.log('Unable to lock screen orientation.'); }
} else {
divTwc.attr('style', '');
divTwcMiddle.attr('style', '');
$(window).off('resize', FullScreenResize);
FullScreenResize();
if (_unlockOrientation) try { _unlockOrientation(); } catch (ex) { console.log('Unable to unlock screen orientation.'); }
}
};
const InFullScreen = () => ((_FullScreenOverride) || (GetFullScreenElement()) || (window.innerHeight === screen.height) || (window.innerHeight === (screen.height - 1)));
const GetFullScreenElement = () => {
if (_FullScreenOverride) return document.body;
return (document.fullScreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
};
const btnFullScreen_click = () => { const btnFullScreen_click = () => {
if (!InFullScreen()) { if (!document.fullScreenElement) {
EnterFullScreen(); EnterFullScreen();
} else { } else {
ExitFullscreen(); ExitFullscreen();
@ -388,7 +265,7 @@ const index = (() => {
}; };
const EnterFullScreen = () => { const EnterFullScreen = () => {
const element = document.body; const element = document.getElementById('divTwc');
// Supports most browsers and their versions. // 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;
@ -457,9 +334,6 @@ const index = (() => {
const display = $('#display'); const display = $('#display');
display.on('mousemove', document_mousemove);
display.on('mousedown', document_mousemove);
display.on('keydown', document_keydown); display.on('keydown', document_keydown);
const SwipeCallBack = (event, direction) => { const SwipeCallBack = (event, direction) => {
@ -522,19 +396,6 @@ const index = (() => {
return false; return false;
}; };
const window_resize = () => {
const $window = $(window);
if ($window.height() === _WindowHeight || $window.width() === _WindowWidth) return;
_WindowHeight = $window.height();
_WindowWidth = $window.width();
postMessage('navButton', 'reset');
UpdateFullScreenNavigate();
};
let _NavigateFadeIntervalId = null; let _NavigateFadeIntervalId = null;
const UpdateFullScreenNavigate = () => { const UpdateFullScreenNavigate = () => {
@ -551,7 +412,7 @@ const index = (() => {
} }
_NavigateFadeIntervalId = window.setTimeout(() => { _NavigateFadeIntervalId = window.setTimeout(() => {
if (InFullScreen()) { if (document.fullScreenElement) {
$('body').addClass('HideCursor'); $('body').addClass('HideCursor');
divTwcLeft.fadeOut2(); divTwcLeft.fadeOut2();
@ -562,16 +423,11 @@ const index = (() => {
}, 2000); }, 2000);
}; };
const document_mousemove = (e) => {
if (InFullScreen() && (e.originalEvent.movementX === 0 && e.originalEvent.movementY === 0 && e.originalEvent.buttons === 0)) return;
UpdateFullScreenNavigate();
};
const document_keydown = (e) => { const document_keydown = (e) => {
const code = (e.keyCode || e.which); const code = (e.keyCode || e.which);
if (InFullScreen() || document.activeElement === document.body) { if (document.fullScreenElement || document.activeElement === document.body) {
switch (code) { switch (code) {
case 32: // Space case 32: // Space
btnNavigatePlay_click(); btnNavigatePlay_click();

2
server/scripts/modules/currentweather.js
View file

@ -93,7 +93,7 @@ class CurrentWeather extends WeatherDisplay {
data.VisibilityUnit = ' mi.'; data.VisibilityUnit = ' mi.';
data.WindSpeed = utils.units.kphToMph(data.WindSpeed); data.WindSpeed = utils.units.kphToMph(data.WindSpeed);
data.WindUnit = 'MPH'; data.WindUnit = 'MPH';
data.Pressure = utils.units.pascalToInHg(data.Pressure); data.Pressure = utils.units.pascalToInHg(data.Pressure).toFixed(2);
data.HeatIndex = utils.units.celsiusToFahrenheit(data.HeatIndex); data.HeatIndex = utils.units.celsiusToFahrenheit(data.HeatIndex);
data.WindChill = utils.units.celsiusToFahrenheit(data.WindChill); data.WindChill = utils.units.celsiusToFahrenheit(data.WindChill);
data.WindGust = utils.units.kphToMph(data.WindGust); data.WindGust = utils.units.kphToMph(data.WindGust);

2
server/scripts/modules/weatherdisplay.js
View file

@ -98,7 +98,7 @@ class WeatherDisplay {
// create a canvas // create a canvas
const canvas = document.createElement('template'); const canvas = document.createElement('template');
canvas.innerHTML = `<canvas id='${elemId+'Canvas'}' width='${width}' height='${height}'/ style='display: none;'>`; canvas.innerHTML = `<canvas id='${elemId+'Canvas'}' width='${width}' height='${height}' style='display: none;' />`;
// add to the page // add to the page
const container = document.getElementById('container'); const container = document.getElementById('container');

34
server/styles/index.css
View file

@ -1,4 +1,4 @@
@font-face @font-face
{ {
font-family: "Star4000"; font-family: "Star4000";
src: url('../fonts/Star4000.woff') format('woff'); src: url('../fonts/Star4000.woff') format('woff');
@ -54,19 +54,19 @@ input, button
display: block; display: block;
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
width: 640px; width: 100%;
max-width: 640px;
} }
#divTwcMiddle #divTwcMiddle
{ {
display: flex; /* display: flex; */
} }
#divTwcLeft #divTwcLeft
{ {
visibility: hidden; display: none;
text-align: right; text-align: right;
display: flex;
flex-direction: column; flex-direction: column;
vertical-align: middle; vertical-align: middle;
} }
@ -81,9 +81,8 @@ input, button
#divTwcRight #divTwcRight
{ {
visibility: hidden;
text-align: left; text-align: left;
display: flex; display: none;
flex-direction: column; flex-direction: column;
vertical-align: middle; vertical-align: middle;
} }
@ -133,11 +132,12 @@ input, button
#divTwcNav #divTwcNav
{ {
width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: #000000; background-color: #000000;
color: #ffffff; color: #ffffff;
width: 640px; max-width: 640px;
} }
#divTwcNav > div #divTwcNav > div
{ {
@ -216,9 +216,10 @@ input, button
{ {
font-family: "Star4000"; font-family: "Star4000";
margin: 0 0 0 0; margin: 0 0 0 0;
overflow: hidden; /* overflow: hidden; */
width: 640px; /* width: 100%; */
height: 480px; /* height: 480px; */
/* max-width: 640px; */
} }
jsgif jsgif
@ -256,11 +257,15 @@ jsgif
} }
#container { #container {
position: absolute; /* position: absolute; */
width: 100%;
/* max-width: 640px; */
} }
#container canvas { #container canvas {
position: absolute; /* position: absolute; */
width: 100%;
max-width: 640px;
} }
.heading { .heading {
font-weight: bold; font-weight: bold;
@ -273,3 +278,6 @@ jsgif
display: block; display: block;
max-width: 300px; max-width: 300px;
} }
#divTwcNav img {
zoom: 200%;
}

18
views/index.ejs
View file

@ -16,7 +16,7 @@
<meta name="author" content="Matt Walsh" /> <meta name="author" content="Matt Walsh" />
<meta name="application-name" content="WeatherStar 4000+" /> <meta name="application-name" content="WeatherStar 4000+" />
<meta name="viewport" content="width=660,user-scalable=no" /> <meta name="viewport" content="width=500,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
@ -132,8 +132,6 @@
<a id="aRefreshBottom" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /></a> <a id="aRefreshBottom" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /></a>
</div> </div>
<div id="divTwcBottomRight"> <div id="divTwcBottomRight">
<a id="aVolumeBottom" href="#" class="ToggleVolume"><img src="images/nav/ic_volume_off_white_24dp_1x.png" title="Mute" /></a>
<a id="aNarrationBottom" href="#" class="ToggleNarration"><img src="images/nav/ic_no_hearing_white_24dp_1x.png" title="Turn on Narration" /></a>
<a id="aFullScreenBottom" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" /></a> <a id="aFullScreenBottom" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen" /></a>
</div> </div>
</div> </div>
@ -173,30 +171,16 @@
Zone Id: <span id="spanZoneId"></span><br /> Zone Id: <span id="spanZoneId"></span><br />
</div> </div>
<br />
<div id="divRefresh"> <div id="divRefresh">
Last Update: <span id="spanLastRefresh">(None)</span><br /> Last Update: <span id="spanLastRefresh">(None)</span><br />
<input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label> <input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox" /><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label>
</div> </div>
<br />
<div id="divUnits"> <div id="divUnits">
Units: Units:
<input id="radEnglish" name="radUnits" type="radio" value="ENGLISH" /><label for="radEnglish">English</label> <input id="radEnglish" name="radUnits" type="radio" value="ENGLISH" /><label for="radEnglish">English</label>
<input id="radMetric" name="radUnits" type="radio" value="METRIC" /><label for="radMetric">Metric</label> <input id="radMetric" name="radUnits" type="radio" value="METRIC" /><label for="radMetric">Metric</label>
</div> </div>
<br />
<div id="divScrollText">
<form id="frmScrollText">
<input id="chkScrollText" name="chkScrollText" type="checkbox" /><label id="lblScrollText" for="chkScrollText">Scroll Text: </label><input id="txtScrollText" autocomplete="off" value="" /><input id="btnScrollText" type="submit" value="Set" />
</form>
</div>
<br />
</body> </body>
</html> </html>