fly/A320-family
1
0
Fork 0
Code Activity

Merge pull request #217 from NewoIsTaken/patch-1

Browse source 
Make some visual improvements to mcdu.html
This commit is contained in:
merspieler 2021-03-11 21:25:17 +00:00 committed by GitHub
commit a4d1127d47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 125 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
mcdu.html
View file

@ -1,8 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>MCDU</title> <title>MCDU</title>
<meta charset="utf-8"/> <meta charset="utf-8">
<script> <script>
let screen; let screen;
let screen_src; let screen_src;
@ -35,37 +36,37 @@
] ]
}); });
request.send(body); request.send(body);
request.addEventListener('load', function() { request.addEventListener('load', function () {
refresh_screen(); refresh_screen();
}, true); }, true);
} }
window.addEventListener('load', function() { window.addEventListener('load', function () {
let tds = document.querySelectorAll('.input td'); let tds = document.querySelectorAll('.input td');
for (const td of tds) { for (const td of tds) {
td.addEventListener('click', function() { td.addEventListener('click', function () {
press_button("button", td.textContent); press_button("button", td.textContent);
}, true); }, true);
} }
tds = document.querySelectorAll('.enter td'); tds = document.querySelectorAll('.enter td');
for (const td of tds) { for (const td of tds) {
td.addEventListener('click', function() { td.addEventListener('click', function () {
press_button(td.nextSibling ? "lskbutton" : "rskbutton", td.textContent); press_button(td.getAttribute("button-side") == "l" ? "lskbutton" : "rskbutton", td.getAttribute("button-id"));
}, true); }, true);
} }
tds = document.querySelectorAll('.menu td'); tds = document.querySelectorAll('.menu td');
for (const td of tds) { for (const td of tds) {
td.addEventListener('click', function() { td.addEventListener('click', function () {
press_button("pagebutton", td.className); press_button("pagebutton", td.className);
}, true); }, true);
} }
tds = document.querySelectorAll('.arrows td'); tds = document.querySelectorAll('.arrows td');
for (const td of tds) { for (const td of tds) {
td.addEventListener('click', function() { td.addEventListener('click', function () {
press_button(td.className == 'airport' ? "pagebutton" : "arrowbutton", td.className); press_button(td.className == 'airport' ? "pagebutton" : "arrowbutton", td.className);
}, true); }, true);
} }
screen = document.querySelector('img'); screen = document.querySelector('img');
screen.addEventListener('load', function() { screen.addEventListener('load', function () {
loading = 0; loading = 0;
if (scheduled_load) { if (scheduled_load) {
scheduled_load = 0; scheduled_load = 0;
@ -77,37 +78,114 @@
}, true); }, true);
</script> </script>
<style> <style>
body { font-size: 5rem; margin: 0; padding: 0; background-color: black; color: white; } body {
table { margin: 0; padding: 0 } font-size: 5rem;
tr { margin: 0; padding: 0 } margin: 0;
td { margin: 0; padding: 0; text-align: center; outline: 1px solid gray; } padding: 0;
td:active { background-color: white; color: black } background-color: black;
.enter { font-size: 60% } color: white;
.enter tr:first-child { font-size: 70% } font-family: sans-serif;
.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; } table {
.menu td { height: 2.5em; } margin: 0;
.arrows td { width: 50%; padding: 0; font-size: 60%; } padding: 0
img { display: block; } }
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> </style>
</head> </head>
<body style="width: 100%"> <body style="width: 100%">
<table class="enter" style="width: 92%"> <table class="enter" style="width: 100%">
<tr> <tr>
<td>&nbsp;</td> <td><br></td>
<td rowspan="8" style="vertical-align: top"><img src="/screenshot?canvasindex=10&type=png" style="width: 100%"/></td> <td rowspan="8" style="vertical-align: top"><img src="/screenshot?canvasindex=10&type=png"
<td>&nbsp;</td> 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> </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>&nbsp;</td><td>&nbsp;</td></tr>
</table> </table>
<table class="menu" style="width: 92%"> <table class="menu" style="width: 100%">
<tr> <tr>
<td class="dirto">DIR</td> <td class="dirto">DIR</td>
<td class="prog">PROG</td> <td class="prog">PROG</td>
@ -119,11 +197,11 @@
</tr> </tr>
<tr> <tr>
<td class="f-pln">F-PLN</td> <td class="f-pln">F-PLN</td>
<td class="radnav">RAD<br/>NAV</td> <td class="radnav">RAD<br>NAV</td>
<td class="fuel-pred">FUEL<br/>PRED</td> <td class="fuel-pred">FUEL<br>PRED</td>
<td>SEC<br/>F-PLN</td> <td>SEC<br>F-PLN</td>
<td class="atc">ATC<br/>COMM</td> <td class="atc">ATC<br>COMM</td>
<td class="mcdu">MCDU<br/>MENU</td> <td class="mcdu">MCDU<br>MENU</td>
<td>DIM</td> <td>DIM</td>
</tr> </tr>
</table> </table>
@ -167,13 +245,13 @@
<td>Z</td> <td>Z</td>
<td>/</td> <td>/</td>
<td style="font-size: 50%">SP</td> <td style="font-size: 50%">SP</td>
<td style="font-size: 25%">OVFY</td> <td style="font-size: 33%">OVFY<br>△</td>
<td style="font-size: 33%">CLR</td> <td style="font-size: 33%">CLR</td>
</tr> </tr>
</table> </table>
<table class="arrows" style="width: 25%"> <table class="arrows" style="width: 29.5%">
<tr> <tr>
<td class="airport">AIR<br/>PORT</td> <td class="airport">AIR<br>PORT</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
@ -204,8 +282,12 @@
<tr> <tr>
<td>.</td> <td>.</td>
<td>0</td> <td>0</td>
<td>-</td> <td
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */">
+/-
</td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>