3f3442d259
- For mobile devices, you have to insert your local ip to generate a qrcode - Fixed HTML for zoom action and double tap
330 lines
No EOL
7.2 KiB
HTML
330 lines
No EOL
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" translate="no">
|
|
|
|
<head>
|
|
<title>A320 MCDU</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<link rel="manifest" href="mcdu_manifest.json" />
|
|
<meta name="apple-mobile-web-app-status-bar" 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() {
|
|
if (loading) {
|
|
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";
|
|
setInterval(refresh_screen, 1000);
|
|
}, true);
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-size: 5rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: black;
|
|
color: white;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
table {
|
|
margin: 0;
|
|
padding: 0;
|
|
word-wrap: normal;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
tr {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
td {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
outline: 1px solid gray;
|
|
|
|
-ms-user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
-khtml-user-select: none;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
text-overflow: clip;
|
|
}
|
|
|
|
td:active {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
.enter {
|
|
font-size: 60%;
|
|
}
|
|
|
|
.enter tr:first-child {
|
|
font-size: 70%;
|
|
}
|
|
|
|
.enter tr:last-child {
|
|
font-size: 50%;
|
|
}
|
|
|
|
.enter td:first-child,
|
|
.enter td:last-child {
|
|
padding: 0 0.55em;
|
|
}
|
|
|
|
.menu,
|
|
.arrows .airport {
|
|
font-size: 40%;
|
|
line-height: 1em;
|
|
}
|
|
|
|
.menu td {
|
|
height: 2.5em;
|
|
}
|
|
|
|
.arrows td {
|
|
width: 50%;
|
|
padding: 0;
|
|
font-size: 60%;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="width: 100%" oncontextmenu="return false;">
|
|
<table class="enter" style="width: 100%">
|
|
<tr>
|
|
<td><br></td>
|
|
<td rowspan="8" style="vertical-align: top"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAANgAQMAAACIgIgUAAAAA1BMVEUAAACnej3aAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgklEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7wazbwABRxu5owAAAABJRU5ErkJggg=="
|
|
style="width: 100%" /></td>
|
|
<td><br></td>
|
|
</tr>
|
|
<tr>
|
|
<td button-id="1" button-side="l">—</td>
|
|
<td button-id="1" button-side="r">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td button-id="2" button-side="l">—</td>
|
|
<td button-id="2" button-side="r">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td button-id="3" button-side="l">—</td>
|
|
<td button-id="3" button-side="r">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td button-id="4" button-side="l">—</td>
|
|
<td button-id="4" button-side="r">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td button-id="5" button-side="l">—</td>
|
|
<td button-id="5" button-side="r">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td button-id="6" button-side="l">—</td>
|
|
<td button-id="6" button-side="r">—</td>
|
|
</tr>
|
|
<tr>
|
|
<td><br></td>
|
|
<td><br></td>
|
|
</tr>
|
|
</table>
|
|
<table class="menu" style="width: 100%">
|
|
<tr>
|
|
<td class="dirto">DIR</td>
|
|
<td class="prog">PROG</td>
|
|
<td class="perf">PERF</td>
|
|
<td class="init">INIT</td>
|
|
<td class="data">DATA</td>
|
|
<td></td>
|
|
<td>BRT</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="f-pln">F-PLN</td>
|
|
<td class="radnav">RAD<br>NAV</td>
|
|
<td class="fuel-pred">FUEL<br>PRED</td>
|
|
<td>SEC<br>F-PLN</td>
|
|
<td class="atc">ATC<br>COMM</td>
|
|
<td class="mcdu">MCDU<br>MENU</td>
|
|
<td>DIM</td>
|
|
</tr>
|
|
</table>
|
|
<table class="input" style="float: right; width: 62.5%">
|
|
<tr>
|
|
<td>A</td>
|
|
<td>B</td>
|
|
<td>C</td>
|
|
<td>D</td>
|
|
<td>E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>F</td>
|
|
<td>G</td>
|
|
<td>H</td>
|
|
<td>I</td>
|
|
<td>J</td>
|
|
</tr>
|
|
<tr>
|
|
<td>K</td>
|
|
<td>L</td>
|
|
<td>M</td>
|
|
<td>N</td>
|
|
<td>O</td>
|
|
</tr>
|
|
<tr>
|
|
<td>P</td>
|
|
<td>Q</td>
|
|
<td>R</td>
|
|
<td>S</td>
|
|
<td>T</td>
|
|
</tr>
|
|
<tr>
|
|
<td>U</td>
|
|
<td>V</td>
|
|
<td>W</td>
|
|
<td>X</td>
|
|
<td>Y</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Z</td>
|
|
<td>/</td>
|
|
<td style="font-size: 50%">SP</td>
|
|
<td style="font-size: 33%" class="disabled">OVFY<br>△</td>
|
|
<td style="font-size: 33%">CLR</td>
|
|
</tr>
|
|
</table>
|
|
<table class="arrows" style="width: 29.5%">
|
|
<tr>
|
|
<td class="airport">AIR<br>PORT</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="left">←</td>
|
|
<td class="up">↑</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">→</td>
|
|
<td class="down">↓</td>
|
|
</tr>
|
|
</table>
|
|
<table class="input" style="width: 30%">
|
|
<tr>
|
|
<td>1</td>
|
|
<td>2</td>
|
|
<td>3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>5</td>
|
|
<td>6</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td>8</td>
|
|
<td>9</td>
|
|
</tr>
|
|
<tr>
|
|
<td>.</td>
|
|
<td>0</td>
|
|
<td
|
|
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */" class="disabled">
|
|
+/-
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
|
|
</html> |