<!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.getAttribute("button-side") == "l" ? "lskbutton" : "rskbutton", td.getAttribute("button-id")); }, 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; font-family: sans-serif; } 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: 100%"> <tr> <td><br></td> <td rowspan="8" style="vertical-align: top"><img src="/screenshot?canvasindex=10&type=png" 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%">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%; /* :) */"> +/- </td> </tr> </table> </body> </html>