full screen works better
This commit is contained in:
parent
ba16c8f1f4
commit
3e9aa97c7e
2
dist/index.html
vendored
2
dist/index.html
vendored
File diff suppressed because one or more lines are too long
2
dist/resources/ws.min.css
vendored
2
dist/resources/ws.min.css
vendored
|
@ -1 +1 @@
|
|||
@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}body{font-family:Star4000}button,input{font-family:Star4000}#imgGetGps{height:13px;vertical-align:middle}#txtAddress{width:490px;font-size:16pt}#btnClearQuery,#btnGetGps,#btnGetLatLng{font-size:16pt}.autocomplete-suggestions{background-color:#fff;border:1px solid #000}.autocomplete-suggestion{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16pt}.autocomplete-selected{background-color:#00f;color:#fff}#divTwc{display:block;background-color:#000;color:#fff;width:640px}#divTwcMiddle{display:flex}#divTwcLeft{visibility:hidden;text-align:right;display:flex;flex-direction:column;vertical-align:middle}#divTwcLeft>div{flex:1;padding-right:12px;display:flex;flex-direction:column;justify-content:center}#divTwcRight{visibility:hidden;text-align:left;display:flex;flex-direction:column;vertical-align:middle}#divTwcRight>div{flex:1;padding-left:12px;display:flex;flex-direction:column;justify-content:center}#divTwcBottom{visibility:hidden;display:flex;flex-direction:row;background-color:#000;color:#fff;width:100%}#divTwcBottom>div{padding-left:6px;padding-right:6px}#divTwcBottomLeft{flex:1;text-align:left}#divTwcBottomMiddle{flex:0;text-align:center}#divTwcBottomRight{flex:1;text-align:right}#divTwcNavContainer{display:none}#divTwcNav{display:flex;flex-direction:row;background-color:#000;color:#fff;width:640px}#divTwcNav>div{padding-left:6px;padding-right:6px}#divTwcNavLeft{flex:1;text-align:left}#divTwcNavMiddle{flex:0;text-align:center}#divTwcNavRight{flex:1;text-align:right}#imgPause1x,#imgPause2x{visibility:hidden;position:absolute}.HideCursor{cursor:none!important}#txtScrollText{width:475px}@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}@font-face{font-family:"Star 4 Radar";src:url('../fonts/Star 4 Radar.woff') format('woff')}@font-face{font-family:'Star4000 Extended';src:url('../fonts/Star4000 Extended.woff') format('woff')}@font-face{font-family:Star4000LCN;src:url(../fonts/Star4000LCN.woff) format('woff')}@font-face{font-family:'Star4000 Large Compressed';src:url('../fonts/Star4000 Large Compressed.woff') format('woff')}@font-face{font-family:'Star4000 Large';src:url('../fonts/Star4000 Large.woff') format('woff')}@font-face{font-family:'Star4000 Small';src:url('../fonts/Star4000 Small.woff') format('woff')}#display{font-family:Star4000;margin:0;overflow:hidden;width:640px;height:480px}jsgif{display:none}#Star4000{font-family:Star4000}#Star4000Extended{font-family:'Star4000 Extended'}#Star4000LargeCompressed{font-family:'Star4000 Large Compressed'}#Star4000Large{font-family:'Star4000 Large'}#Star4000LargeCompressedNumbers{font-family:Star4000LCN}#Star4000Small{font-family:'Star4000 Small'}#Star4Radar{font-family:'Star 4 Radar'}#container{position:absolute}#container canvas{position:absolute}.heading{font-weight:700;margin-top:15px}#enabledDisplays{margin-bottom:15px}#enabledDisplays label{display:block;max-width:300px}
|
||||
@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}body{font-family:Star4000}button,input{font-family:Star4000}#imgGetGps{height:13px;vertical-align:middle}#txtAddress{width:490px;font-size:16pt}#btnClearQuery,#btnGetGps,#btnGetLatLng{font-size:16pt}.autocomplete-suggestions{background-color:#fff;border:1px solid #000}.autocomplete-suggestion{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16pt}.autocomplete-selected{background-color:#00f;color:#fff}#divTwc{display:block;background-color:#000;color:#fff;width:100%;max-width:640px}#divTwcLeft{display:none;text-align:right;flex-direction:column;vertical-align:middle}#divTwcLeft>div{flex:1;padding-right:12px;display:flex;flex-direction:column;justify-content:center}#divTwcRight{text-align:left;display:none;flex-direction:column;vertical-align:middle}#divTwcRight>div{flex:1;padding-left:12px;display:flex;flex-direction:column;justify-content:center}#divTwcBottom{display:flex;flex-direction:row;background-color:#000;color:#fff;width:100%}#divTwcBottom>div{padding-left:6px;padding-right:6px}#divTwcBottomLeft{flex:1;text-align:left}#divTwcBottomMiddle{flex:0;text-align:center}#divTwcBottomRight{flex:1;text-align:right}#divTwcNavContainer{display:none}#divTwcNav{width:100%;display:flex;flex-direction:row;background-color:#000;color:#fff;max-width:640px}#divTwcNav>div{padding-left:6px;padding-right:6px}#divTwcNavLeft{flex:1;text-align:left}#divTwcNavMiddle{flex:0;text-align:center}#divTwcNavRight{flex:1;text-align:right}#imgPause1x,#imgPause2x{visibility:hidden;position:absolute}.HideCursor{cursor:none!important}#txtScrollText{width:475px}@font-face{font-family:Star4000;src:url(../fonts/Star4000.woff) format('woff')}@font-face{font-family:"Star 4 Radar";src:url('../fonts/Star 4 Radar.woff') format('woff')}@font-face{font-family:'Star4000 Extended';src:url('../fonts/Star4000 Extended.woff') format('woff')}@font-face{font-family:Star4000LCN;src:url(../fonts/Star4000LCN.woff) format('woff')}@font-face{font-family:'Star4000 Large Compressed';src:url('../fonts/Star4000 Large Compressed.woff') format('woff')}@font-face{font-family:'Star4000 Large';src:url('../fonts/Star4000 Large.woff') format('woff')}@font-face{font-family:'Star4000 Small';src:url('../fonts/Star4000 Small.woff') format('woff')}#display{font-family:Star4000;margin:0;width:100%}jsgif{display:none}#Star4000{font-family:Star4000}#Star4000Extended{font-family:'Star4000 Extended'}#Star4000LargeCompressed{font-family:'Star4000 Large Compressed'}#Star4000Large{font-family:'Star4000 Large'}#Star4000LargeCompressedNumbers{font-family:Star4000LCN}#Star4000Small{font-family:'Star4000 Small'}#Star4Radar{font-family:'Star 4 Radar'}#container{position:relative;width:100%;max-width:640px}#container canvas{width:100%}.heading{font-weight:700;margin-top:15px}#enabledDisplays{margin-bottom:15px}#enabledDisplays label{display:block;max-width:300px}#divTwcBottom img{zoom:150%}#divTwc:fullscreen{display:flex;align-items:center;justify-content:center}#divTwc:fullscreen #display{position:relative}#divTwc:fullscreen #divTwcBottom{display:flex;flex-direction:row;background-color:rgb(0 0 0 / .5);color:#fff;width:100%;position:absolute;bottom:0}@media screen and (orientation:portrait){#divTwc:fullscreen canvas{width:100vw;max-width:100vw;height:auto}}@media screen and (orientation:landscape){#divTwc:fullscreen canvas{height:100vh;max-height:100vh;width:auto}}
|
6
dist/resources/ws.min.js
vendored
6
dist/resources/ws.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -11,15 +11,7 @@ const index = (() => {
|
|||
const _AutoRefreshTotalIntervalMs = 600000; // 10 min.
|
||||
const _NoSleep = new NoSleep();
|
||||
|
||||
let divTwc;
|
||||
let divTwcTop;
|
||||
let divTwcMiddle;
|
||||
let divTwcBottom;
|
||||
let divTwcLeft;
|
||||
let divTwcRight;
|
||||
let divTwcNavContainer;
|
||||
let txtScrollText;
|
||||
|
||||
|
||||
let _AutoSelectQuery = false;
|
||||
|
||||
|
@ -29,28 +21,8 @@ const index = (() => {
|
|||
|
||||
let _FullScreenOverride = false;
|
||||
|
||||
let _WindowHeight = 0;
|
||||
let _WindowWidth = 0;
|
||||
|
||||
const init = () => {
|
||||
_WindowHeight = $(window).height();
|
||||
_WindowWidth = $(window).width();
|
||||
|
||||
divTwc = $('#divTwc');
|
||||
divTwcTop = $('#divTwcTop');
|
||||
divTwcMiddle = $('#divTwcMiddle');
|
||||
divTwcBottom = $('#divTwcBottom');
|
||||
divTwcLeft = $('#divTwcLeft');
|
||||
divTwcRight = $('#divTwcRight');
|
||||
divTwcNavContainer = $('#divTwcNavContainer');
|
||||
txtScrollText = $('#txtScrollText');
|
||||
|
||||
$('#frmScrollText').on('submit', frmScrollText_submit);
|
||||
txtScrollText.on('focus', (e) => {
|
||||
$(e.target).select();
|
||||
});
|
||||
$('#chkScrollText').on('change', chkScrollText_change);
|
||||
|
||||
$('#txtAddress').on('focus', (e) => {
|
||||
$(e.target).select();
|
||||
}).focus();
|
||||
|
@ -63,10 +35,13 @@ const index = (() => {
|
|||
|
||||
$('#btnGetGps').on('click', btnGetGps_click);
|
||||
|
||||
$('#divTwc').on('click', (e) => {
|
||||
if (document.fullscreenElement) UpdateFullScreenNavigate(e);
|
||||
});
|
||||
|
||||
$(document).on('keydown', document_keydown);
|
||||
document.addEventListener('touchmove', e => { if (_FullScreenOverride) e.preventDefault(); });
|
||||
$('.ToggleFullScreen').on('click', btnFullScreen_click);
|
||||
FullScreenResize();
|
||||
|
||||
const categories = [
|
||||
'Land Features',
|
||||
|
@ -133,17 +108,6 @@ const index = (() => {
|
|||
const TwcPlay = localStorage.getItem('TwcPlay');
|
||||
if (TwcPlay === null || TwcPlay === 'true') postMessage('navButton', 'play');
|
||||
|
||||
const TwcScrollText = localStorage.getItem('TwcScrollText');
|
||||
if (TwcScrollText) {
|
||||
txtScrollText.val(TwcScrollText);
|
||||
}
|
||||
const TwcScrollTextChecked = localStorage.getItem('TwcScrollTextChecked');
|
||||
if (TwcScrollTextChecked && TwcScrollTextChecked === 'true') {
|
||||
$('#chkScrollText').prop('checked', 'checked');
|
||||
} else {
|
||||
$('#chkScrollText').prop('checked', '');
|
||||
}
|
||||
|
||||
$('#btnClearQuery').on('click', () => {
|
||||
$('#spanCity').text('');
|
||||
$('#spanState').text('');
|
||||
|
@ -151,8 +115,6 @@ const index = (() => {
|
|||
$('#spanRadarId').text('');
|
||||
$('#spanZoneId').text('');
|
||||
|
||||
$('#chkScrollText').prop('checked', '');
|
||||
txtScrollText.val('');
|
||||
localStorage.removeItem('TwcScrollText');
|
||||
localStorage.removeItem('TwcScrollTextChecked');
|
||||
|
||||
|
@ -241,13 +203,9 @@ const index = (() => {
|
|||
localStorage.setItem('TwcQuery', $('#txtAddress').val());
|
||||
};
|
||||
|
||||
const FullScreenResize = () => {
|
||||
divTwcNavContainer.show();
|
||||
};
|
||||
|
||||
const btnFullScreen_click = () => {
|
||||
|
||||
if (!document.fullScreenElement) {
|
||||
if (!document.fullscreenElement) {
|
||||
EnterFullScreen();
|
||||
} else {
|
||||
ExitFullscreen();
|
||||
|
@ -324,15 +282,8 @@ const index = (() => {
|
|||
|
||||
postMessage('latLon', latLon);
|
||||
|
||||
FullScreenResize();
|
||||
|
||||
if ($('#chkScrollText').is(':checked')) {
|
||||
postMessage('assignScrollText', txtScrollText.val());
|
||||
}
|
||||
|
||||
postMessage('units', $('input[type=\'radio\'][name=\'radUnits\']:checked').val());
|
||||
|
||||
|
||||
const display = $('#display');
|
||||
display.on('keydown', document_keydown);
|
||||
|
||||
|
@ -400,23 +351,15 @@ const index = (() => {
|
|||
|
||||
const UpdateFullScreenNavigate = () => {
|
||||
$(document.activeElement).blur();
|
||||
|
||||
$('body').removeClass('HideCursor');
|
||||
divTwcLeft.fadeIn2();
|
||||
divTwcRight.fadeIn2();
|
||||
divTwcBottom.fadeIn2();
|
||||
|
||||
if (_NavigateFadeIntervalId) {
|
||||
window.clearTimeout(_NavigateFadeIntervalId);
|
||||
clearTimeout(_NavigateFadeIntervalId);
|
||||
_NavigateFadeIntervalId = null;
|
||||
}
|
||||
|
||||
_NavigateFadeIntervalId = window.setTimeout(() => {
|
||||
if (document.fullScreenElement) {
|
||||
$('body').addClass('HideCursor');
|
||||
|
||||
divTwcLeft.fadeOut2();
|
||||
divTwcRight.fadeOut2();
|
||||
_NavigateFadeIntervalId = setTimeout(() => {
|
||||
if (document.fullscreenElement) {
|
||||
divTwcBottom.fadeOut2();
|
||||
}
|
||||
|
||||
|
@ -427,7 +370,7 @@ const index = (() => {
|
|||
|
||||
const code = (e.keyCode || e.which);
|
||||
|
||||
if (document.fullScreenElement || document.activeElement === document.body) {
|
||||
if (document.fullscreenElement || document.activeElement === document.body) {
|
||||
switch (code) {
|
||||
case 32: // Space
|
||||
btnNavigatePlay_click();
|
||||
|
@ -645,27 +588,6 @@ const index = (() => {
|
|||
$('#spanZoneId').text(weatherParameters.zoneId);
|
||||
};
|
||||
|
||||
const frmScrollText_submit = () => {
|
||||
chkScrollText_change();
|
||||
return false;
|
||||
};
|
||||
|
||||
const chkScrollText_change = (e) => {
|
||||
const chkScrollText = $(e.target);
|
||||
txtScrollText.blur();
|
||||
|
||||
let ScrollText = txtScrollText.val();
|
||||
localStorage.setItem('TwcScrollText', ScrollText);
|
||||
|
||||
const ScrollTextChecked = chkScrollText.is(':checked');
|
||||
localStorage.setItem('TwcScrollTextChecked', ScrollTextChecked);
|
||||
|
||||
if (chkScrollText.is(':checked') === false) {
|
||||
ScrollText = '';
|
||||
}
|
||||
postMessage('assignScrollText', ScrollText);
|
||||
};
|
||||
|
||||
// track state of nosleep locally to avoid a null case error when nosleep.disable is called without first calling .enable
|
||||
let wakeLock = false;
|
||||
const noSleepEnable = () => {
|
||||
|
|
|
@ -90,7 +90,8 @@ const navigation = (() => {
|
|||
// update the main process for display purposes
|
||||
postMessage('weatherParameters', weatherParameters);
|
||||
|
||||
// draw the progress canvas
|
||||
// draw the progress canvas and hide others
|
||||
hideAllCanvases();
|
||||
progress = new Progress(-1,'progress');
|
||||
await progress.drawCanvas();
|
||||
progress.showCanvas();
|
||||
|
|
|
@ -96,7 +96,7 @@ class RegionalForecast extends WeatherDisplay {
|
|||
};
|
||||
|
||||
// preload the icon
|
||||
utils.image.preload(icons.getWeatherRegionalIconFromIconLink(regionalObservation.icon, !regionalObservation.daytime))
|
||||
utils.image.preload(icons.getWeatherRegionalIconFromIconLink(regionalObservation.icon, !regionalObservation.daytime));
|
||||
|
||||
// return a pared-down forecast
|
||||
// 0th object is the current conditions
|
||||
|
@ -333,7 +333,7 @@ class RegionalForecast extends WeatherDisplay {
|
|||
|
||||
// to fit on the map, remove anything after punctuation and then limit to 15 characters
|
||||
formatCity(city) {
|
||||
return city.match(/[^-;/\\,]*/)[0].substr(0,12)
|
||||
return city.match(/[^-;/\\,]*/)[0].substr(0,12);
|
||||
}
|
||||
|
||||
async drawCanvas() {
|
||||
|
|
|
@ -60,7 +60,6 @@ input, button
|
|||
|
||||
#divTwcMiddle
|
||||
{
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
#divTwcLeft
|
||||
|
@ -97,7 +96,7 @@ input, button
|
|||
|
||||
#divTwcBottom
|
||||
{
|
||||
visibility: hidden;
|
||||
/* visibility: hidden; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #000000;
|
||||
|
@ -217,7 +216,7 @@ input, button
|
|||
font-family: "Star4000";
|
||||
margin: 0 0 0 0;
|
||||
/* overflow: hidden; */
|
||||
/* width: 100%; */
|
||||
width: 100%;
|
||||
/* height: 480px; */
|
||||
/* max-width: 640px; */
|
||||
}
|
||||
|
@ -257,15 +256,15 @@ jsgif
|
|||
}
|
||||
|
||||
#container {
|
||||
/* position: absolute; */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/* max-width: 640px; */
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
#container canvas {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
/* max-width: 640px; */
|
||||
}
|
||||
.heading {
|
||||
font-weight: bold;
|
||||
|
@ -278,6 +277,41 @@ jsgif
|
|||
display: block;
|
||||
max-width: 300px;
|
||||
}
|
||||
#divTwcNav img {
|
||||
zoom: 200%;
|
||||
#divTwcBottom img {
|
||||
zoom: 150%;
|
||||
}
|
||||
#divTwc:fullscreen {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#divTwc:fullscreen #display {
|
||||
|
||||
position: relative;
|
||||
}
|
||||
#divTwc:fullscreen #divTwcBottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: rgb(0 0 0 / 0.5);
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
#divTwc:fullscreen canvas {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
#divTwc:fullscreen canvas {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
width: auto;
|
||||
}
|
||||
}
|
|
@ -1 +1 @@
|
|||
module.exports = '3.4.1';
|
||||
module.exports = '3.5.0';
|
|
@ -16,7 +16,7 @@
|
|||
<meta name="author" content="Matt Walsh" />
|
||||
<meta name="application-name" content="WeatherStar 4000+" />
|
||||
|
||||
<meta name="viewport" content="width=500,initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
|
@ -77,50 +77,13 @@
|
|||
|
||||
<img id="imgPause1x" src="images/nav/ic_pause_white_24dp_1x.png" />
|
||||
<img id="imgPause2x" src="images/nav/ic_pause_white_24dp_2x.png" />
|
||||
<div id="version" style="display:none"><%- version %> </div>
|
||||
|
||||
<div id="divTwc">
|
||||
<div id="divTwcTop"></div>
|
||||
<div id="divTwcMiddle">
|
||||
<div id="divTwcLeft">
|
||||
<div>
|
||||
<div>
|
||||
<a id="aMenuLeft" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_2x.png" title="Menu" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<a id="aPreviousLeft" href="#" class="NavigatePrevious"><img src="images/nav/ic_skip_previous_white_24dp_2x.png" title="Previous" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<a id="aNextLeft" href="#" class="NavigateNext"><img src="images/nav/ic_skip_next_white_24dp_2x.png" title="Next" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<a id="aPlayLeft" href="#" class="NavigatePlay"><img src="images/nav/ic_play_arrow_white_24dp_2x.png" title="Play" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='display'>
|
||||
<div id="version" style="display:none"><%- version %> </div>
|
||||
<div id="container">
|
||||
</div>
|
||||
<div id='display'>
|
||||
<div id="container">
|
||||
</div>
|
||||
<div id="divTwcRight">
|
||||
<div>
|
||||
<div>
|
||||
<a id="aRefreshRight" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<a id="aFullScreenRight" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_exit_white_24dp_2x.png" title="Exit Fullscreen" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="divTwcBottom">
|
||||
<div id="divTwcBottomLeft">
|
||||
<a id="aMenuBottom" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" /></a>
|
||||
|
@ -136,22 +99,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="divTwcNavContainer">
|
||||
<div id="divTwcNav">
|
||||
<div id="divTwcNavLeft">
|
||||
<a id="aMenu" href="#" class="NavigateMenu"><img src="images/nav/ic_menu_white_24dp_1x.png" title="Menu" /></a>
|
||||
<a id="aPrevious" href="#" class="NavigatePrevious"><img src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous" /></a>
|
||||
<a id="aNext" href="#" class="NavigateNext"><img src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next" /></a>
|
||||
<a id="aPlay" href="#" class="NavigatePlay"><img src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play" /></a>
|
||||
</div>
|
||||
<div id="divTwcNavMiddle">
|
||||
<a id="aRefresh" href="#" class="NavigateRefresh"><img src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh" /></a>
|
||||
</div>
|
||||
<div id="divTwcNavRight">
|
||||
<a id="aFullScreen" href="#" class="ToggleFullScreen"><img src="images/nav/ic_fullscreen_white_24dp_1x.png" title="Fullscreen" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
|
|
Loading…
Reference in a new issue