web MCDU adtapt for new keys: OVFY. PLUSMINUS
- added LONGCLR metakey - unified javascript for all interfaces
This commit is contained in:
Inuyaksa
parent
4f385c6d6e
commit
0f078eb334
8 changed files with 279 additions and 378 deletions
|
|
@ -1530,6 +1530,8 @@ var button = func(btn, i, event = "") {
|
||||||
} else { # up with buttonCLRDown[i]>4
|
} else { # up with buttonCLRDown[i]>4
|
||||||
buttonCLRDown[i] = 0;
|
buttonCLRDown[i] = 0;
|
||||||
}
|
}
|
||||||
|
} else if (btn == "LONGCLR") {
|
||||||
|
mcdu_scratchpad.scratchpads[i].empty();
|
||||||
} else if (btn == "DOT") {
|
} else if (btn == "DOT") {
|
||||||
mcdu_scratchpad.scratchpads[i].addChar(".");
|
mcdu_scratchpad.scratchpads[i].addChar(".");
|
||||||
} else if (btn == "PLUSMINUS") {
|
} else if (btn == "PLUSMINUS") {
|
||||||
|
|
|
||||||
BIN
WebPanel/WebPanel1/img/icon-192.png
Normal file
BIN
WebPanel/WebPanel1/img/icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 181 KiB |
|
|
@ -1,6 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" translate="no">
|
<html lang="en" translate="no">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>A320 MCDU</title>
|
<title>A320 MCDU</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
@ -8,113 +7,6 @@
|
||||||
<link rel="manifest" href="mcdu_manifest.json" />
|
<link rel="manifest" href="mcdu_manifest.json" />
|
||||||
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
|
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
|
||||||
<meta name="theme-color" content="#db4938" />
|
<meta name="theme-color" content="#db4938" />
|
||||||
<script>
|
|
||||||
let screen;
|
|
||||||
let screen_src;
|
|
||||||
let blank_src;
|
|
||||||
let loading = 0;
|
|
||||||
let scheduled_load = 0;
|
|
||||||
function refresh_screen(force) {
|
|
||||||
if (loading && !force) {
|
|
||||||
scheduled_load = 1;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
loading = 1;
|
|
||||||
screen.src = screen_src + '&random=' + (new Date).getTime()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function press_button(type, text) {
|
|
||||||
let request = new XMLHttpRequest;
|
|
||||||
request.open(
|
|
||||||
"POST",
|
|
||||||
window.location.protocol + "//" + window.location.host + "/run.cgi?value=nasal"
|
|
||||||
);
|
|
||||||
request.setRequestHeader("Content-Type", "application/json");
|
|
||||||
let body = JSON.stringify({
|
|
||||||
"name": "",
|
|
||||||
"children": [
|
|
||||||
{
|
|
||||||
"name": "script",
|
|
||||||
"index": 0,
|
|
||||||
"value": "mcdu." + type + "(\"" + text + "\", 0);"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
request.send(body);
|
|
||||||
request.addEventListener('load', function () {
|
|
||||||
refresh_screen();
|
|
||||||
}, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
var preventzoomaction = function(e) { //https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html
|
|
||||||
var t2 = e.timeStamp;
|
|
||||||
var t1 = e.currentTarget.dataset.lastTouch || t2;
|
|
||||||
var dt = t2 - t1;
|
|
||||||
var fingers = e.touches.length;
|
|
||||||
e.currentTarget.dataset.lastTouch = t2;
|
|
||||||
|
|
||||||
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
e.target.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('load', function () {
|
|
||||||
|
|
||||||
let tds = document.querySelectorAll('.input td');
|
|
||||||
for (const td of tds) {
|
|
||||||
td.addEventListener('click', function () {
|
|
||||||
if (td.className == "disabled") return;
|
|
||||||
press_button("button", td.textContent);
|
|
||||||
}, true);
|
|
||||||
td.addEventListener('touchstart', preventzoomaction, true);
|
|
||||||
}
|
|
||||||
tds = document.querySelectorAll('.enter td');
|
|
||||||
for (const td of tds) {
|
|
||||||
td.addEventListener('click', function () {
|
|
||||||
press_button(td.getAttribute("button-side") == "l" ? "lskbutton" : "rskbutton", td.getAttribute("button-id"));
|
|
||||||
}, true);
|
|
||||||
td.addEventListener('touchstart', preventzoomaction, true);
|
|
||||||
}
|
|
||||||
tds = document.querySelectorAll('.menu td');
|
|
||||||
for (const td of tds) {
|
|
||||||
td.addEventListener('click', function () {
|
|
||||||
press_button("pagebutton", td.className);
|
|
||||||
}, true);
|
|
||||||
td.addEventListener('touchstart', preventzoomaction, true);
|
|
||||||
}
|
|
||||||
tds = document.querySelectorAll('.arrows td');
|
|
||||||
for (const td of tds) {
|
|
||||||
td.addEventListener('click', function () {
|
|
||||||
press_button(td.className == 'airport' ? "pagebutton" : "arrowbutton", td.className);
|
|
||||||
}, true);
|
|
||||||
td.addEventListener('touchstart', preventzoomaction, true);
|
|
||||||
}
|
|
||||||
screen = document.querySelector('img');
|
|
||||||
screen.addEventListener('load', function () {
|
|
||||||
loading = 0;
|
|
||||||
if (scheduled_load) {
|
|
||||||
scheduled_load = 0;
|
|
||||||
refresh_screen();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
blank_src = screen_src;
|
|
||||||
screen_src = "/screenshot?canvasindex=10&type=png";
|
|
||||||
screen.addEventListener('error', function () {
|
|
||||||
loading = 0;
|
|
||||||
if (scheduled_load) {
|
|
||||||
refresh_screen();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
screen.addEventListener('abort', function () {
|
|
||||||
loading = 0;
|
|
||||||
if (scheduled_load) {
|
|
||||||
refresh_screen();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
setInterval(function () { refresh_screen(true); }, 1000);
|
|
||||||
}, true);
|
|
||||||
</script>
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
|
|
@ -201,33 +93,32 @@
|
||||||
<table class="enter" style="width: 100%">
|
<table class="enter" style="width: 100%">
|
||||||
<tr>
|
<tr>
|
||||||
<td><br></td>
|
<td><br></td>
|
||||||
<td rowspan="8" style="vertical-align: top"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAANgAQMAAACIgIgUAAAAA1BMVEUAAACnej3aAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgklEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7wazbwABRxu5owAAAABJRU5ErkJggg=="
|
<td rowspan="8" style="vertical-align: top"><img data-element="lcdimage" src="" style="width: 100%" /></td>
|
||||||
style="width: 100%" /></td>
|
|
||||||
<td><br></td>
|
<td><br></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td button-id="1" button-side="l">—</td>
|
<td data-button="lskbutton:1">—</td>
|
||||||
<td button-id="1" button-side="r">—</td>
|
<td data-button="rskbutton:1">—</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td button-id="2" button-side="l">—</td>
|
<td data-button="lskbutton:2">—</td>
|
||||||
<td button-id="2" button-side="r">—</td>
|
<td data-button="rskbutton:2">—</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td button-id="3" button-side="l">—</td>
|
<td data-button="lskbutton:3">—</td>
|
||||||
<td button-id="3" button-side="r">—</td>
|
<td data-button="rskbutton:3">—</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td button-id="4" button-side="l">—</td>
|
<td data-button="lskbutton:4">—</td>
|
||||||
<td button-id="4" button-side="r">—</td>
|
<td data-button="rskbutton:4">—</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td button-id="5" button-side="l">—</td>
|
<td data-button="lskbutton:5">—</td>
|
||||||
<td button-id="5" button-side="r">—</td>
|
<td data-button="rskbutton:5">—</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td button-id="6" button-side="l">—</td>
|
<td data-button="lskbutton:6">—</td>
|
||||||
<td button-id="6" button-side="r">—</td>
|
<td data-button="rskbutton:6">—</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><br></td>
|
<td><br></td>
|
||||||
|
|
@ -236,107 +127,110 @@
|
||||||
</table>
|
</table>
|
||||||
<table class="menu" style="width: 100%">
|
<table class="menu" style="width: 100%">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="dirto">DIR</td>
|
<td data-button="pagebutton:dirto" class="dirto">DIR</td>
|
||||||
<td class="prog">PROG</td>
|
<td data-button="pagebutton:prog" class="prog">PROG</td>
|
||||||
<td class="perf">PERF</td>
|
<td data-button="pagebutton:perf" class="perf">PERF</td>
|
||||||
<td class="init">INIT</td>
|
<td data-button="pagebutton:init" class="init">INIT</td>
|
||||||
<td class="data">DATA</td>
|
<td data-button="pagebutton:data" class="data">DATA</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>BRT</td>
|
<td>BRT</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="f-pln">F-PLN</td>
|
<td data-button="pagebutton:f-pln" class="f-pln">F-PLN</td>
|
||||||
<td class="radnav">RAD<br>NAV</td>
|
<td data-button="pagebutton:radnav" class="radnav">RAD<br>NAV</td>
|
||||||
<td class="fuel-pred">FUEL<br>PRED</td>
|
<td data-button="pagebutton:fuel-pred" class="fuel-pred">FUEL<br>PRED</td>
|
||||||
<td>SEC<br>F-PLN</td>
|
<td data-button="" >SEC<br>F-PLN</td>
|
||||||
<td class="atc">ATC<br>COMM</td>
|
<td data-button="pagebutton:atc" class="atc">ATC<br>COMM</td>
|
||||||
<td class="mcdu">MCDU<br>MENU</td>
|
<td data-button="pagebutton:mcdu" class="mcdu">MCDU<br>MENU</td>
|
||||||
<td>DIM</td>
|
<td>DIM</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<table class="input" style="float: right; width: 62.5%">
|
<table class="input" style="float: right; width: 62.5%">
|
||||||
<tr>
|
<tr>
|
||||||
<td>A</td>
|
<td data-button="button:A">A</td>
|
||||||
<td>B</td>
|
<td data-button="button:B">B</td>
|
||||||
<td>C</td>
|
<td data-button="button:C">C</td>
|
||||||
<td>D</td>
|
<td data-button="button:D">D</td>
|
||||||
<td>E</td>
|
<td data-button="button:E">E</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>F</td>
|
<td data-button="button:F">F</td>
|
||||||
<td>G</td>
|
<td data-button="button:G">G</td>
|
||||||
<td>H</td>
|
<td data-button="button:H">H</td>
|
||||||
<td>I</td>
|
<td data-button="button:I">I</td>
|
||||||
<td>J</td>
|
<td data-button="button:J">J</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>K</td>
|
<td data-button="button:K">K</td>
|
||||||
<td>L</td>
|
<td data-button="button:L">L</td>
|
||||||
<td>M</td>
|
<td data-button="button:M">M</td>
|
||||||
<td>N</td>
|
<td data-button="button:N">N</td>
|
||||||
<td>O</td>
|
<td data-button="button:O">O</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>P</td>
|
<td data-button="button:P">P</td>
|
||||||
<td>Q</td>
|
<td data-button="button:Q">Q</td>
|
||||||
<td>R</td>
|
<td data-button="button:R">R</td>
|
||||||
<td>S</td>
|
<td data-button="button:S">S</td>
|
||||||
<td>T</td>
|
<td data-button="button:T">T</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>U</td>
|
<td data-button="button:U">U</td>
|
||||||
<td>V</td>
|
<td data-button="button:V">V</td>
|
||||||
<td>W</td>
|
<td data-button="button:W">W</td>
|
||||||
<td>X</td>
|
<td data-button="button:X">X</td>
|
||||||
<td>Y</td>
|
<td data-button="button:Y">Y</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Z</td>
|
<td data-button="button:Z">Z</td>
|
||||||
<td>/</td>
|
<td data-button="button:SLASH">/</td>
|
||||||
<td style="font-size: 50%">SP</td>
|
<td style="font-size: 50%" data-button="button:SP">SP</td>
|
||||||
<td style="font-size: 33%" class="disabled">OVFY<br>△</td>
|
<td style="font-size: 33%" data-button="button:OVFY">OVFY<br>△</td>
|
||||||
<td style="font-size: 33%">CLR</td>
|
<td style="font-size: 33%" data-button="button:CLR">CLR</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<table class="arrows" style="width: 29.5%">
|
<table class="arrows" style="width: 29.5%">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="airport">AIR<br>PORT</td>
|
<td data-button="pagebutton:airport" class="airport">AIR<br>PORT</td>
|
||||||
<td></td>
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">←</td>
|
<td data-button="arrowbutton:left" class="left">←</td>
|
||||||
<td class="up">↑</td>
|
<td data-button="arrowbutton:up" class="up">↑</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="right">→</td>
|
<td data-button="arrowbutton:right" class="right">→</td>
|
||||||
<td class="down">↓</td>
|
<td data-button="arrowbutton:down" class="down">↓</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<table class="input" style="width: 30%">
|
<table class="input" style="width: 30%">
|
||||||
<tr>
|
<tr>
|
||||||
<td>1</td>
|
<td data-button="button:1">1</td>
|
||||||
<td>2</td>
|
<td data-button="button:2">2</td>
|
||||||
<td>3</td>
|
<td data-button="button:3">3</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>4</td>
|
<td data-button="button:4">4</td>
|
||||||
<td>5</td>
|
<td data-button="button:5">5</td>
|
||||||
<td>6</td>
|
<td data-button="button:6">6</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>7</td>
|
<td data-button="button:7">7</td>
|
||||||
<td>8</td>
|
<td data-button="button:8">8</td>
|
||||||
<td>9</td>
|
<td data-button="button:9">9</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>.</td>
|
<td data-button="button:DOT">.</td>
|
||||||
<td>0</td>
|
<td data-button="button:0">0</td>
|
||||||
<td
|
<td
|
||||||
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */" class="disabled">
|
style="font-size: 3vw; width: 33.34%;" data-button="button:PLUSMINUS">
|
||||||
+/-
|
+/-
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<script src="../js/mcdu.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
19
WebPanel/WebPanel1/mcdu_manifest.json
Normal file
19
WebPanel/WebPanel1/mcdu_manifest.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"short_name": "A320MCDU",
|
||||||
|
"name": "A320 Remote MCDU for FG",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "img/icon-192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "/aircraft-dir/WebPanel/WebPanel1/?source=home",
|
||||||
|
"background_color": "#000",
|
||||||
|
"display": "standalone",
|
||||||
|
"scope": "/",
|
||||||
|
"theme_color": "#db4938",
|
||||||
|
"shortcuts": [ ],
|
||||||
|
"description": "Airbus 320 Remote MCDU for Flightgear",
|
||||||
|
"screenshots": [ ]
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en" translate="no">
|
||||||
<head>
|
<head>
|
||||||
<title>A320 MCDU</title>
|
<title>A320 MCDU</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<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" content="#333333" />
|
<meta name="apple-mobile-web-app-status-bar" content="#333333" />
|
||||||
|
|
@ -83,9 +84,9 @@
|
||||||
<div data-button="button:9" class="numberbutton number-col3"></div>
|
<div data-button="button:9" class="numberbutton number-col3"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="number-row4">
|
<div class="number-row4">
|
||||||
<div data-button="button:." class="numberbutton number-col1"></div>
|
<div data-button="button:DOT" class="numberbutton number-col1"></div>
|
||||||
<div data-button="button:0" class="numberbutton number-col2"></div>
|
<div data-button="button:0" class="numberbutton number-col2"></div>
|
||||||
<div data-button="button:-" class="numberbutton number-col3"></div>
|
<div data-button="button:PLUSMINUS" class="numberbutton number-col3"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="alphabutton-row1">
|
<div class="alphabutton-row1">
|
||||||
|
|
@ -130,7 +131,7 @@
|
||||||
|
|
||||||
<div class="alphabutton-row6">
|
<div class="alphabutton-row6">
|
||||||
<div data-button="button:Z" class="alphabutton alphabutton-col1"></div>
|
<div data-button="button:Z" class="alphabutton alphabutton-col1"></div>
|
||||||
<div data-button="button:/" class="alphabutton alphabutton-col2"></div>
|
<div data-button="button:SLASH" class="alphabutton alphabutton-col2"></div>
|
||||||
<div data-button="button:SP" class="alphabutton alphabutton-col3"></div>
|
<div data-button="button:SP" class="alphabutton alphabutton-col3"></div>
|
||||||
<div data-button="button:OVFY" class="alphabutton alphabutton-col4"></div>
|
<div data-button="button:OVFY" class="alphabutton alphabutton-col4"></div>
|
||||||
<div data-button="button:CLR" class="alphabutton alphabutton-col5"></div>
|
<div data-button="button:CLR" class="alphabutton alphabutton-col5"></div>
|
||||||
|
|
@ -140,7 +141,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="js/mcdu.js">
|
<script src="../js/mcdu.js">
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,185 +1,166 @@
|
||||||
const MCDU = (function () {
|
const MCDU = (function () {
|
||||||
const screenImageBaseUrl = '/screenshot?canvasindex=10&type=jpg';
|
const screenImageBaseUrl = '/screenshot?canvasindex=10&type=jpg';
|
||||||
const refreshInterval = 2000;
|
const refreshInterval = 2000;
|
||||||
|
|
||||||
const body = document.body;
|
const body = document.body;
|
||||||
let currentCacheBust = 0;
|
let currentCacheBust = 0;
|
||||||
let lastSentText = '';
|
let lastSentText = '';
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
toggleUsedUniverse
|
toggleUsedUniverse
|
||||||
}
|
}
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////
|
||||||
////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////
|
||||||
////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
function init()
|
function init() {
|
||||||
{
|
body.dataset.lastTouch = 0;
|
||||||
body.dataset.lastTouch = 0;
|
body.addEventListener('touchstart', preventZoomAction, { passive: false });
|
||||||
body.addEventListener('touchstart', preventZoomAction, { passive: false });
|
|
||||||
|
registerButtons();
|
||||||
registerButtons();
|
registerKeyboardInput();
|
||||||
registerKeyboardInput();
|
setInterval(refreshScreen, refreshInterval);
|
||||||
setInterval(refreshScreen, refreshInterval);
|
refreshScreen();
|
||||||
refreshScreen();
|
}
|
||||||
}
|
|
||||||
|
function refreshScreen() {
|
||||||
function refreshScreen() {
|
loadScreenImage(screenImageBaseUrl)
|
||||||
loadScreenImage(screenImageBaseUrl)
|
.then(setScreenSrc)
|
||||||
.then(setScreenSrc)
|
.catch(setScreenSrc);
|
||||||
.catch(setScreenSrc);
|
}
|
||||||
}
|
|
||||||
|
function setScreenSrc(url) {
|
||||||
function setScreenSrc(url) {
|
url = typeof url === 'string' ? url : '';
|
||||||
url = typeof url === 'string' ? url : '';
|
showScreenImageLoadState(url !== '');
|
||||||
showScreenImageLoadState(url !== '');
|
document.querySelectorAll('[data-element="lcdimage"]').forEach((imageElement) => {
|
||||||
document.querySelectorAll('[data-element="lcdimage"]').forEach((imageElement) => {
|
imageElement.src = url;
|
||||||
imageElement.src = url;
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
function loadScreenImage(baseUrl) {
|
||||||
function loadScreenImage(baseUrl) {
|
currentCacheBust = new Date().getTime();
|
||||||
currentCacheBust = new Date().getTime();
|
return new Promise((resolve, reject) => {
|
||||||
return new Promise((resolve, reject) => {
|
const url = baseUrl + '?cacheBust=' + currentCacheBust;
|
||||||
const url = baseUrl + '?cacheBust=' + currentCacheBust;
|
const img = new Image;
|
||||||
const img = new Image;
|
|
||||||
|
img.addEventListener('error', reject);
|
||||||
img.addEventListener('error', reject);
|
|
||||||
|
img.addEventListener('load', (event) => {
|
||||||
img.addEventListener('load', (event) => {
|
showScreenImageLoadState(true);
|
||||||
showScreenImageLoadState(true);
|
resolve(url);
|
||||||
resolve(url);
|
});
|
||||||
});
|
img.src = url;
|
||||||
img.src = url;
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
function showScreenImageLoadState(isOK) {
|
||||||
function showScreenImageLoadState(isOK) {
|
if (!isOK) {
|
||||||
if (!isOK) {
|
console.log('fail');
|
||||||
console.log('fail');
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
function toggleUsedUniverse() {
|
||||||
function toggleUsedUniverse() {
|
body.setAttribute('data-used-universe', body.getAttribute('data-used-universe') === '1' ? '0' : '1');
|
||||||
body.setAttribute('data-used-universe', body.getAttribute('data-used-universe') === '1' ? '0' : '1');
|
}
|
||||||
}
|
|
||||||
|
function registerButtons() {
|
||||||
function registerButtons() {
|
document.querySelectorAll('[data-button]').forEach((buttonElement) => {
|
||||||
document.querySelectorAll('[data-button]').forEach((buttonElement) => {
|
const buttonFunction = getButtonFunction(buttonElement);
|
||||||
const buttonFunction = getButtonFunction(buttonElement);
|
if (!(typeof buttonFunction === 'function')) {
|
||||||
if (!(typeof buttonFunction === 'function')) {
|
return;
|
||||||
return;
|
}
|
||||||
}
|
buttonElement.addEventListener('click', buttonFunction);
|
||||||
buttonElement.addEventListener('click', buttonFunction);
|
buttonElement.addEventListener('touchstart', preventZoomAction, true);
|
||||||
buttonElement.addEventListener('touchstart', preventZoomAction, true);
|
});
|
||||||
});
|
let btn = document.querySelector("[data-button=\"button:CLR\"]");
|
||||||
}
|
if (btn) btn.addEventListener("contextmenu",function(e){
|
||||||
|
e.preventDefault();
|
||||||
function registerKeyboardInput() {
|
sendButtonpress('button', 'LONGCLR');
|
||||||
const keyTranslation = {
|
});
|
||||||
BACKSPACE: 'CLR'
|
}
|
||||||
};
|
|
||||||
body.addEventListener('keyup', (event) => {
|
function registerKeyboardInput() {
|
||||||
const key = event.key.toUpperCase();
|
const keyTranslation = {
|
||||||
if (key.match(/^[A-Z0-9/\-+.\ ]$/)) {
|
BACKSPACE: 'CLR',
|
||||||
if (key === '+' || key === '-') {
|
DELETE: 'LONGCLR',
|
||||||
return sendPlusMinusKey();
|
'+': 'PLUSMINUS',
|
||||||
}
|
'-': 'PLUSMINUS',
|
||||||
return sendButtonpress('button', key);
|
'/': 'SLASH',
|
||||||
}
|
'.': 'DOT',
|
||||||
|
'^': 'OVFY',
|
||||||
const translatedKey = keyTranslation[key];
|
' ': 'SP'
|
||||||
if (translatedKey) {
|
};
|
||||||
return sendButtonpress('button', translatedKey);
|
body.addEventListener('keyup', (event) => {
|
||||||
}
|
const key = event.key.toUpperCase();
|
||||||
});
|
if (key.match(/^[A-Z0-9]$/)) {
|
||||||
}
|
return sendButtonpress('button', key);
|
||||||
|
}
|
||||||
function getButtonFunction(buttonElement) {
|
const translatedKey = keyTranslation[key]||false;
|
||||||
const buttonActions = buttonElement.getAttribute('data-button').split(':');
|
if (translatedKey) return sendButtonpress('button', translatedKey);
|
||||||
const actionKey = buttonActions[0];
|
});
|
||||||
const actionValue = buttonActions[1];
|
}
|
||||||
|
|
||||||
if(!actionKey) {
|
function getButtonFunction(buttonElement) {
|
||||||
return;
|
const buttonActions = buttonElement.getAttribute('data-button').split(':');
|
||||||
}
|
const actionKey = buttonActions[0];
|
||||||
|
const actionValue = buttonActions[1];
|
||||||
if (actionKey === 'toggleUsedUniverse') {
|
|
||||||
return toggleUsedUniverse;
|
if(!actionKey) {
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
if (actionKey === 'button' && actionValue === '-') {
|
|
||||||
return sendPlusMinusKey;
|
if (actionKey === 'toggleUsedUniverse') {
|
||||||
}
|
return toggleUsedUniverse;
|
||||||
|
}
|
||||||
return function () {
|
|
||||||
sendButtonpress(actionKey, actionValue);
|
return function () {
|
||||||
};
|
sendButtonpress(actionKey, actionValue);
|
||||||
}
|
};
|
||||||
|
}
|
||||||
function sendPlusMinusKey() {
|
|
||||||
if (lastSentText === '-') {
|
function sendButtonpress(type, text) {
|
||||||
sendButtonpress('button', 'CLR')
|
//console.log({ type, text });
|
||||||
.then(() => {
|
let request = new XMLHttpRequest;
|
||||||
sendButtonpress('button', '+');
|
request.open("POST", "/run.cgi?value=nasal");
|
||||||
})
|
request.setRequestHeader("Content-Type", "application/json");
|
||||||
return;
|
let body = JSON.stringify({
|
||||||
}
|
"name": "",
|
||||||
|
"children": [
|
||||||
if (lastSentText === '+') {
|
{
|
||||||
sendButtonpress('button', 'CLR')
|
"name": "script",
|
||||||
.then(() => {
|
"index": 0,
|
||||||
sendButtonpress('button', '-');
|
"value": "mcdu." + type + "(\"" + text + "\", 0);"
|
||||||
})
|
}
|
||||||
return;
|
]
|
||||||
}
|
});
|
||||||
|
request.send(body);
|
||||||
sendButtonpress('button', '-');
|
return new Promise((resolve) => {
|
||||||
}
|
request.addEventListener('load', () => {
|
||||||
|
lastSentText = text;
|
||||||
function sendButtonpress(type, text) {
|
refreshScreen();
|
||||||
// console.log({ type, text });
|
resolve();
|
||||||
let request = new XMLHttpRequest;
|
}, true);
|
||||||
request.open("POST", "/run.cgi?value=nasal");
|
});
|
||||||
request.setRequestHeader("Content-Type", "application/json");
|
}
|
||||||
let body = JSON.stringify({
|
|
||||||
"name": "",
|
//https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html
|
||||||
"children": [
|
function preventZoomAction(event) {
|
||||||
{
|
const t2 = event.timeStamp;
|
||||||
"name": "script",
|
const touchedElement = event.currentTarget;
|
||||||
"index": 0,
|
const t1 = touchedElement.dataset.lastTouch || t2;
|
||||||
"value": "mcdu." + type + "(\"" + text + "\", 0);"
|
const dt = t2 - t1;
|
||||||
}
|
const fingers = event.touches.length;
|
||||||
]
|
touchedElement.dataset.lastTouch = t2;
|
||||||
});
|
|
||||||
request.send(body);
|
if (!dt || dt > 500 || fingers > 1) {
|
||||||
return new Promise((resolve) => {
|
// no double-tap
|
||||||
request.addEventListener('load', () => {
|
return;
|
||||||
lastSentText = text;
|
}
|
||||||
refreshScreen();
|
|
||||||
resolve();
|
event.preventDefault();
|
||||||
}, true);
|
event.target.click();
|
||||||
});
|
}
|
||||||
}
|
})();
|
||||||
|
|
||||||
//https://exceptionshub.com/disable-double-tap-zoom-option-in-browser-on-touch-devices.html
|
|
||||||
function preventZoomAction(event) {
|
|
||||||
const t2 = event.timeStamp;
|
|
||||||
const touchedElement = event.currentTarget;
|
|
||||||
const t1 = touchedElement.dataset.lastTouch || t2;
|
|
||||||
const dt = t2 - t1;
|
|
||||||
const fingers = event.touches.length;
|
|
||||||
touchedElement.dataset.lastTouch = t2;
|
|
||||||
|
|
||||||
if (!dt || dt > 500 || fingers > 1) {
|
|
||||||
// no double-tap
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.target.click();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
@ -17,12 +17,14 @@
|
||||||
background-color: #005670;
|
background-color: #005670;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #e4e4e4;
|
color: #e4e4e4;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
color: #8db9ca;
|
color: #8db9ca;
|
||||||
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -55,8 +57,9 @@
|
||||||
.choice {
|
.choice {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(49% - 2vw);
|
width: calc(50% - 40px);
|
||||||
padding: 1vh 1vw 75% 1vw;
|
padding: 15px;
|
||||||
|
padding-bottom: 75%;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
|
@ -69,11 +72,12 @@
|
||||||
|
|
||||||
.choice img {
|
.choice img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 1rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-height: 100%;
|
max-height: auto;
|
||||||
|
max-width: 100%;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 4px 4px 6px #00000063;
|
box-shadow: 4px 4px 6px #00000063;
|
||||||
}
|
}
|
||||||
|
|
@ -99,9 +103,9 @@
|
||||||
<div class="chooser">
|
<div class="chooser">
|
||||||
<a href="WebPanel1/index.html" class="choice choice--1">
|
<a href="WebPanel1/index.html" class="choice choice--1">
|
||||||
<span class="button">
|
<span class="button">
|
||||||
abstract
|
basic
|
||||||
</span>
|
</span>
|
||||||
<img src="WebPanel1/screenshot.jpg">
|
<img src="WebPanel1/img/screenshot.jpg">
|
||||||
</a>
|
</a>
|
||||||
<a href="WebPanel2/index.html" class="choice choice--2">
|
<a href="WebPanel2/index.html" class="choice choice--2">
|
||||||
<span class="button">
|
<span class="button">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue