<!DOCTYPE html>
<html>
<head>
<title>MCDU</title>
<meta charset="utf-8"/>
<script>
let screen;
let screen_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);
}
window.addEventListener('load', function() {
let tds = document.querySelectorAll('.input td');
for (const td of tds) {
td.addEventListener('click', function() {
press_button("button", td.textContent);
}, true);
}
tds = document.querySelectorAll('.enter td');
for (const td of tds) {
td.addEventListener('click', function() {
press_button(td.nextSibling ? "lskbutton" : "rskbutton", td.textContent);
}, true);
}
tds = document.querySelectorAll('.menu td');
for (const td of tds) {
td.addEventListener('click', function() {
press_button("pagebutton", td.className);
}, 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);
}
screen = document.querySelector('img');
screen.addEventListener('load', function() {
loading = 0;
if (scheduled_load) {
scheduled_load = 0;
refresh_screen();
}
});
screen_src = screen.src;
window.setInterval(refresh_screen, 1000);
}, true);
</script>
<style>
body { font-size: 5rem; margin: 0; padding: 0; background-color: black; color: white; }
table { margin: 0; padding: 0 }
tr { margin: 0; padding: 0 }
td { margin: 0; padding: 0; text-align: center; outline: 1px solid gray; }
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%">
<table class="enter" style="width: 92%">
<tr>
<td> </td>
<td rowspan="8" style="vertical-align: top"><img src="/screenshot?canvasindex=10&type=png" style="width: 100%"/></td>
<td> </td>
</tr>
<tr><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td></tr>
<tr><td>6</td><td>6</td></tr>
<tr><td> </td><td> </td></tr>
</table>
<table class="menu" style="width: 92%">
<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: 25%">OVFY</td>
<td style="font-size: 33%">CLR</td>
</tr>
</table>
<table class="arrows" style="width: 25%">
<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>-</td>
</tr>
</table>
</body>
</html>