fly/A320-family
1
0
Fork 0
Code Activity

web MCDU adtapt for new keys: OVFY. PLUSMINUS

Browse source 
- added LONGCLR metakey
- unified javascript for all interfaces
This commit is contained in:
Inuyaksa 2022-01-16 21:26:07 +01:00
parent 4f385c6d6e
commit 0f078eb334
8 changed files with 279 additions and 378 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Nasal/MCDU/MCDU.nas
View file

@ -1530,6 +1530,8 @@ var button = func(btn, i, event = "") {
} else { # up with buttonCLRDown[i]>4 } else { # up with buttonCLRDown[i]>4
buttonCLRDown[i] = 0; buttonCLRDown[i] = 0;
} }
} else if (btn == "LONGCLR") {
mcdu_scratchpad.scratchpads[i].empty();
} else if (btn == "DOT") { } else if (btn == "DOT") {
mcdu_scratchpad.scratchpads[i].addChar("."); mcdu_scratchpad.scratchpads[i].addChar(".");
} else if (btn == "PLUSMINUS") { } else if (btn == "PLUSMINUS") {

BIN
WebPanel/WebPanel1/img/icon-192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

0
WebPanel/WebPanel1/screenshot.jpg → WebPanel/WebPanel1/img/screenshot.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 181 KiB

After

Width:  |  Height:  |  Size: 181 KiB

254
WebPanel/WebPanel1/index.html
View file

@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" translate="no"> <html lang="en" translate="no">
<head> <head>
<title>A320 MCDU</title> <title>A320 MCDU</title>
<meta charset="utf-8"> <meta charset="utf-8">
@ -8,113 +7,6 @@
<link rel="manifest" href="mcdu_manifest.json" /> <link rel="manifest" href="mcdu_manifest.json" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" /> <meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" 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(force) {
if (loading && !force) {
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";
screen.addEventListener('error', function () {
loading = 0;
if (scheduled_load) {
refresh_screen();
}
});
screen.addEventListener('abort', function () {
loading = 0;
if (scheduled_load) {
refresh_screen();
}
});
setInterval(function () { refresh_screen(true); }, 1000);
}, true);
</script>
<style> <style>
body { body {
font-size: 5rem; font-size: 5rem;
@ -201,33 +93,32 @@
<table class="enter" style="width: 100%"> <table class="enter" style="width: 100%">
<tr> <tr>
<td><br></td> <td><br></td>
<td rowspan="8" style="vertical-align: top"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAANgAQMAAACIgIgUAAAAA1BMVEUAAACnej3aAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAgklEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7wazbwABRxu5owAAAABJRU5ErkJggg==" <td rowspan="8" style="vertical-align: top"><img data-element="lcdimage" src="" style="width: 100%" /></td>
style="width: 100%" /></td>
<td><br></td> <td><br></td>
</tr> </tr>
<tr> <tr>
<td button-id="1" button-side="l">—</td> <td data-button="lskbutton:1">—</td>
<td button-id="1" button-side="r">—</td> <td data-button="rskbutton:1">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="2" button-side="l">—</td> <td data-button="lskbutton:2">—</td>
<td button-id="2" button-side="r">—</td> <td data-button="rskbutton:2">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="3" button-side="l">—</td> <td data-button="lskbutton:3">—</td>
<td button-id="3" button-side="r">—</td> <td data-button="rskbutton:3">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="4" button-side="l">—</td> <td data-button="lskbutton:4">—</td>
<td button-id="4" button-side="r">—</td> <td data-button="rskbutton:4">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="5" button-side="l">—</td> <td data-button="lskbutton:5">—</td>
<td button-id="5" button-side="r">—</td> <td data-button="rskbutton:5">—</td>
</tr> </tr>
<tr> <tr>
<td button-id="6" button-side="l">—</td> <td data-button="lskbutton:6">—</td>
<td button-id="6" button-side="r">—</td> <td data-button="rskbutton:6">—</td>
</tr> </tr>
<tr> <tr>
<td><br></td> <td><br></td>
@ -236,107 +127,110 @@
</table> </table>
<table class="menu" style="width: 100%"> <table class="menu" style="width: 100%">
<tr> <tr>
<td class="dirto">DIR</td> <td data-button="pagebutton:dirto" class="dirto">DIR</td>
<td class="prog">PROG</td> <td data-button="pagebutton:prog" class="prog">PROG</td>
<td class="perf">PERF</td> <td data-button="pagebutton:perf" class="perf">PERF</td>
<td class="init">INIT</td> <td data-button="pagebutton:init" class="init">INIT</td>
<td class="data">DATA</td> <td data-button="pagebutton:data" class="data">DATA</td>
<td></td> <td></td>
<td>BRT</td> <td>BRT</td>
</tr> </tr>
<tr> <tr>
<td class="f-pln">F-PLN</td> <td data-button="pagebutton:f-pln" class="f-pln">F-PLN</td>
<td class="radnav">RAD<br>NAV</td> <td data-button="pagebutton:radnav" class="radnav">RAD<br>NAV</td>
<td class="fuel-pred">FUEL<br>PRED</td> <td data-button="pagebutton:fuel-pred" class="fuel-pred">FUEL<br>PRED</td>
<td>SEC<br>F-PLN</td> <td data-button="" >SEC<br>F-PLN</td>
<td class="atc">ATC<br>COMM</td> <td data-button="pagebutton:atc" class="atc">ATC<br>COMM</td>
<td class="mcdu">MCDU<br>MENU</td> <td data-button="pagebutton:mcdu" class="mcdu">MCDU<br>MENU</td>
<td>DIM</td> <td>DIM</td>
</tr> </tr>
</table> </table>
<table class="input" style="float: right; width: 62.5%"> <table class="input" style="float: right; width: 62.5%">
<tr> <tr>
<td>A</td> <td data-button="button:A">A</td>
<td>B</td> <td data-button="button:B">B</td>
<td>C</td> <td data-button="button:C">C</td>
<td>D</td> <td data-button="button:D">D</td>
<td>E</td> <td data-button="button:E">E</td>
</tr> </tr>
<tr> <tr>
<td>F</td> <td data-button="button:F">F</td>
<td>G</td> <td data-button="button:G">G</td>
<td>H</td> <td data-button="button:H">H</td>
<td>I</td> <td data-button="button:I">I</td>
<td>J</td> <td data-button="button:J">J</td>
</tr> </tr>
<tr> <tr>
<td>K</td> <td data-button="button:K">K</td>
<td>L</td> <td data-button="button:L">L</td>
<td>M</td> <td data-button="button:M">M</td>
<td>N</td> <td data-button="button:N">N</td>
<td>O</td> <td data-button="button:O">O</td>
</tr> </tr>
<tr> <tr>
<td>P</td> <td data-button="button:P">P</td>
<td>Q</td> <td data-button="button:Q">Q</td>
<td>R</td> <td data-button="button:R">R</td>
<td>S</td> <td data-button="button:S">S</td>
<td>T</td> <td data-button="button:T">T</td>
</tr> </tr>
<tr> <tr>
<td>U</td> <td data-button="button:U">U</td>
<td>V</td> <td data-button="button:V">V</td>
<td>W</td> <td data-button="button:W">W</td>
<td>X</td> <td data-button="button:X">X</td>
<td>Y</td> <td data-button="button:Y">Y</td>
</tr> </tr>
<tr> <tr>
<td>Z</td> <td data-button="button:Z">Z</td>
<td>/</td> <td data-button="button:SLASH">/</td>
<td style="font-size: 50%">SP</td> <td style="font-size: 50%" data-button="button:SP">SP</td>
<td style="font-size: 33%" class="disabled">OVFY<br>△</td> <td style="font-size: 33%" data-button="button:OVFY">OVFY<br>△</td>
<td style="font-size: 33%">CLR</td> <td style="font-size: 33%" data-button="button:CLR">CLR</td>
</tr> </tr>
</table> </table>
<table class="arrows" style="width: 29.5%"> <table class="arrows" style="width: 29.5%">
<tr> <tr>
<td class="airport">AIR<br>PORT</td> <td data-button="pagebutton:airport" class="airport">AIR<br>PORT</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td class="left">←</td> <td data-button="arrowbutton:left" class="left">←</td>
<td class="up">↑</td> <td data-button="arrowbutton:up" class="up">↑</td>
</tr> </tr>
<tr> <tr>
<td class="right">→</td> <td data-button="arrowbutton:right" class="right">→</td>
<td class="down">↓</td> <td data-button="arrowbutton:down" class="down">↓</td>
</tr> </tr>
</table> </table>
<table class="input" style="width: 30%"> <table class="input" style="width: 30%">
<tr> <tr>
<td>1</td> <td data-button="button:1">1</td>
<td>2</td> <td data-button="button:2">2</td>
<td>3</td> <td data-button="button:3">3</td>
</tr> </tr>
<tr> <tr>
<td>4</td> <td data-button="button:4">4</td>
<td>5</td> <td data-button="button:5">5</td>
<td>6</td> <td data-button="button:6">6</td>
</tr> </tr>
<tr> <tr>
<td>7</td> <td data-button="button:7">7</td>
<td>8</td> <td data-button="button:8">8</td>
<td>9</td> <td data-button="button:9">9</td>
</tr> </tr>
<tr> <tr>
<td>.</td> <td data-button="button:DOT">.</td>
<td>0</td> <td data-button="button:0">0</td>
<td <td
style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */" class="disabled"> style="font-size: 3vw; width: 33.34%;" data-button="button:PLUSMINUS">
+/- +/-
</td> </td>
</tr> </tr>
</table> </table>
<script src="../js/mcdu.js"></script>
</body> </body>
</html> </html>

19
WebPanel/WebPanel1/mcdu_manifest.json Normal file
View file

@ -0,0 +1,19 @@
{
"short_name": "A320MCDU",
"name": "A320 Remote MCDU for FG",
"icons": [
{
"src": "img/icon-192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/aircraft-dir/WebPanel/WebPanel1/?source=home",
"background_color": "#000",
"display": "standalone",
"scope": "/",
"theme_color": "#db4938",
"shortcuts": [ ],
"description": "Airbus 320 Remote MCDU for Flightgear",
"screenshots": [ ]
}

11
WebPanel/WebPanel2/index.html
View file

@ -1,7 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en" translate="no">
<head> <head>
<title>A320 MCDU</title> <title>A320 MCDU</title>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar" content="#333333" /> <meta name="apple-mobile-web-app-status-bar" content="#333333" />
@ -83,9 +84,9 @@
<div data-button="button:9" class="numberbutton number-col3"></div> <div data-button="button:9" class="numberbutton number-col3"></div>
</div> </div>
<div class="number-row4"> <div class="number-row4">
<div data-button="button:." class="numberbutton number-col1"></div> <div data-button="button:DOT" class="numberbutton number-col1"></div>
<div data-button="button:0" class="numberbutton number-col2"></div> <div data-button="button:0" class="numberbutton number-col2"></div>
<div data-button="button:-" class="numberbutton number-col3"></div> <div data-button="button:PLUSMINUS" class="numberbutton number-col3"></div>
</div> </div>
<div class="alphabutton-row1"> <div class="alphabutton-row1">
@ -130,7 +131,7 @@
<div class="alphabutton-row6"> <div class="alphabutton-row6">
<div data-button="button:Z" class="alphabutton alphabutton-col1"></div> <div data-button="button:Z" class="alphabutton alphabutton-col1"></div>
<div data-button="button:/" class="alphabutton alphabutton-col2"></div> <div data-button="button:SLASH" class="alphabutton alphabutton-col2"></div>
<div data-button="button:SP" class="alphabutton alphabutton-col3"></div> <div data-button="button:SP" class="alphabutton alphabutton-col3"></div>
<div data-button="button:OVFY" class="alphabutton alphabutton-col4"></div> <div data-button="button:OVFY" class="alphabutton alphabutton-col4"></div>
<div data-button="button:CLR" class="alphabutton alphabutton-col5"></div> <div data-button="button:CLR" class="alphabutton alphabutton-col5"></div>
@ -140,7 +141,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="js/mcdu.js"> <script src="../js/mcdu.js">
</script> </script>
</body> </body>
</html> </html>

53
WebPanel/WebPanel2/js/mcdu.js → WebPanel/js/mcdu.js
View file

@ -16,8 +16,7 @@ const MCDU = (function () {
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
function init() function init() {
{
body.dataset.lastTouch = 0; body.dataset.lastTouch = 0;
body.addEventListener('touchstart', preventZoomAction, { passive: false }); body.addEventListener('touchstart', preventZoomAction, { passive: false });
@ -76,25 +75,31 @@ const MCDU = (function () {
buttonElement.addEventListener('click', buttonFunction); buttonElement.addEventListener('click', buttonFunction);
buttonElement.addEventListener('touchstart', preventZoomAction, true); buttonElement.addEventListener('touchstart', preventZoomAction, true);
}); });
let btn = document.querySelector("[data-button=\"button:CLR\"]");
if (btn) btn.addEventListener("contextmenu",function(e){
e.preventDefault();
sendButtonpress('button', 'LONGCLR');
});
} }
function registerKeyboardInput() { function registerKeyboardInput() {
const keyTranslation = { const keyTranslation = {
BACKSPACE: 'CLR' BACKSPACE: 'CLR',
DELETE: 'LONGCLR',
'+': 'PLUSMINUS',
'-': 'PLUSMINUS',
'/': 'SLASH',
'.': 'DOT',
'^': 'OVFY',
' ': 'SP'
}; };
body.addEventListener('keyup', (event) => { body.addEventListener('keyup', (event) => {
const key = event.key.toUpperCase(); const key = event.key.toUpperCase();
if (key.match(/^[A-Z0-9/\-+.\ ]$/)) { if (key.match(/^[A-Z0-9]$/)) {
if (key === '+' || key === '-') {
return sendPlusMinusKey();
}
return sendButtonpress('button', key); return sendButtonpress('button', key);
} }
const translatedKey = keyTranslation[key]||false;
const translatedKey = keyTranslation[key]; if (translatedKey) return sendButtonpress('button', translatedKey);
if (translatedKey) {
return sendButtonpress('button', translatedKey);
}
}); });
} }
@ -111,35 +116,11 @@ const MCDU = (function () {
return toggleUsedUniverse; return toggleUsedUniverse;
} }
if (actionKey === 'button' && actionValue === '-') {
return sendPlusMinusKey;
}
return function () { return function () {
sendButtonpress(actionKey, actionValue); sendButtonpress(actionKey, actionValue);
}; };
} }
function sendPlusMinusKey() {
if (lastSentText === '-') {
sendButtonpress('button', 'CLR')
.then(() => {
sendButtonpress('button', '+');
})
return;
}
if (lastSentText === '+') {
sendButtonpress('button', 'CLR')
.then(() => {
sendButtonpress('button', '-');
})
return;
}
sendButtonpress('button', '-');
}
function sendButtonpress(type, text) { function sendButtonpress(type, text) {
//console.log({ type, text }); //console.log({ type, text });
let request = new XMLHttpRequest; let request = new XMLHttpRequest;

20
WebPanel/mcdu.html
View file

@ -17,12 +17,14 @@
background-color: #005670; background-color: #005670;
text-align: center; text-align: center;
color: #e4e4e4; color: #e4e4e4;
font-size: 16px;
padding: 0;
margin: 0;
} }
body { body {
height: 100vh;
width: 100vw;
color: #8db9ca; color: #8db9ca;
padding-top: 1rem;
} }
h1 { h1 {
@ -55,8 +57,9 @@
.choice { .choice {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: calc(49% - 2vw); width: calc(50% - 40px);
padding: 1vh 1vw 75% 1vw; padding: 15px;
padding-bottom: 75%;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 1px solid transparent; border: 1px solid transparent;
@ -69,11 +72,12 @@
.choice img { .choice img {
position: absolute; position: absolute;
top: 0; top: 1rem;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
max-height: 100%; max-height: auto;
max-width: 100%;
border-radius: 8px; border-radius: 8px;
box-shadow: 4px 4px 6px #00000063; box-shadow: 4px 4px 6px #00000063;
} }
@ -99,9 +103,9 @@
<div class="chooser"> <div class="chooser">
<a href="WebPanel1/index.html" class="choice choice--1"> <a href="WebPanel1/index.html" class="choice choice--1">
<span class="button"> <span class="button">
abstract basic
</span> </span>
<img src="WebPanel1/screenshot.jpg"> <img src="WebPanel1/img/screenshot.jpg">
</a> </a>
<a href="WebPanel2/index.html" class="choice choice--2"> <a href="WebPanel2/index.html" class="choice choice--2">
<span class="button"> <span class="button">