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

full screen works better

Browse source
This commit is contained in:
Matt Walsh 2020-09-25 23:07:13 -05:00
parent ba16c8f1f4
commit 3e9aa97c7e
9 changed files with 66 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.html vendored
View file

File diff suppressed because one or more lines are too long

2
dist/resources/ws.min.css vendored
View file

@ -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
View file

File diff suppressed because one or more lines are too long

96
server/scripts/index.js
View file

@ -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 = () => {

3
server/scripts/modules/navigation.js
View file

@ -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();

4
server/scripts/modules/regionalforecast.js
View file

@ -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() {

50
server/styles/index.css
View file

@ -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;
}
}

2
version.js
View file

@ -1 +1 @@
module.exports = '3.4.1';
module.exports = '3.5.0';

63
views/index.ejs
View file

@ -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 />