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>
<html>
<head>
<title>MCDU</title>
<meta charset="utf-8"/>
<meta charset="utf-8">
<script>
let screen;
let screen_src;
@ -35,37 +36,37 @@
]
});
request.send(body);
request.addEventListener('load', function() {
request.addEventListener('load', function () {
refresh_screen();
}, true);
}
window.addEventListener('load', function() {
window.addEventListener('load', function () {
let tds = document.querySelectorAll('.input td');
for (const td of tds) {
td.addEventListener('click', function() {
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);
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() {
td.addEventListener('click', function () {
press_button("pagebutton", td.className);
}, true);
}
tds = document.querySelectorAll('.arrows td');
for (const td of tds) {
td.addEventListener('click', function() {
td.addEventListener('click', function () {
press_button(td.className == 'airport' ? "pagebutton" : "arrowbutton", td.className);
}, true);
}
screen = document.querySelector('img');
screen.addEventListener('load', function() {
screen.addEventListener('load', function () {
loading = 0;
if (scheduled_load) {
scheduled_load = 0;
@ -77,37 +78,114 @@
}, 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; }
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: 92%">
<table class="enter" style="width: 100%">
<tr>
<td>&nbsp;</td>
<td rowspan="8" style="vertical-align: top"><img src="/screenshot?canvasindex=10&type=png" style="width: 100%"/></td>
<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><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><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 class="menu" style="width: 92%">
<table class="menu" style="width: 100%">
<tr>
<td class="dirto">DIR</td>
<td class="prog">PROG</td>
@ -119,11 +197,11 @@
</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 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>
@ -167,13 +245,13 @@
<td>Z</td>
<td>/</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>
</tr>
</table>
<table class="arrows" style="width: 25%">
<table class="arrows" style="width: 29.5%">
<tr>
<td class="airport">AIR<br/>PORT</td>
<td class="airport">AIR<br>PORT</td>
<td></td>
</tr>
<tr>
@ -204,8 +282,12 @@
<tr>
<td>.</td>
<td>0</td>
<td>-</td>
<td
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */">
+/-
</td>
</tr>
</table>
</body>
</html>