1
0
Fork 0

MCDU web, qrcode with local-it, fixes on html

- For mobile devices, you have to insert your local ip to generate a qrcode
- Fixed HTML for zoom action and double tap
This commit is contained in:
Inuyaksa 2021-06-12 18:53:54 +02:00
parent c7743820cd
commit 3f3442d259
5 changed files with 66 additions and 14 deletions

View file

@ -458,7 +458,7 @@
</binding>
</item>
<item>
<label>MCDU (web)</label>
<label>Remote MCDU</label>
<binding>
<command>nasal</command>
<script>

View file

@ -16,7 +16,7 @@ var dep = "";
var arr = "";
var n1_left = 0;
var n1_right = 0;
var modelat = 0;
var modelat = "";
var mode = 0;
var gs = 0;
var cruiseft = 0;

View file

@ -22,7 +22,8 @@ It is highly reccomended to purchase a NAVIGRAPH subscription and download their
To install navdata, create a folder FMSDATA, and add it to your additional scenery folders, at the top of the list. Inside that folder, place all the XXXX.procedures.xml files, in the format FMSDATA/X/X/X/XXXX.procedures.xml. For instance, FMSDATA/Airports/E/G/K/EGKK.procedures.xml.
## Remote MCDU
If you want to run the MCDU on a phone or tablet for better realism and easier input, put mcdu.html into the FGDATA/Phi folder, run FlightGear with enabled HTTP server (i.e. command line --httpd=<Port; e.g. 8080>) and open http://<FlightGear Computer IP/Hostname; e.g. 127.0.0.1/localhost>:<Port; e.g. 8080>/mcdu.html in the browser on your phone or tablet.
If you want to run the MCDU on a your smarthphone or tablet for better realism and easier input, run FlightGear with enabled HTTP server (i.e. command line --httpd=<Port; e.g. 8080>) then go to main menu -> Instruments -> Remote MCDU.
You can generate a QR-code to lauch directly on your smartphone/tablet, first insert your local ip. Your device must run on the same local network of your computer.
## Installation
If you have issues installing, please check INSTALL.MD!

View file

@ -2,13 +2,12 @@
<html lang="en" translate="no">
<head>
<title>MCDU</title>
<title>A320 MCDU</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="manifest" href="mcdu_manifest.json" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>
let screen;
let screen_src;
@ -46,31 +45,50 @@
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 () {
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 () {
@ -98,7 +116,6 @@
table {
margin: 0;
padding: 0;
touch-action: none;
word-wrap: normal;
overflow-wrap: normal;
}
@ -113,7 +130,7 @@
padding: 0;
text-align: center;
outline: 1px solid gray;
touch-action: manipulation;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;

View file

@ -10,11 +10,17 @@
<layout>vbox</layout>
<pref-width>480</pref-width>
<nasal>
<open>
props.globals.initNode("/sim/http/mcduweb/local-ip", "", "STRING");
</open>
</nasal>
<group>
<layout>hbox</layout>
<text>
<halign>left</halign>
<label>MCDU web on browser/tablet/smartphone</label>
<label>Remote MCDU for browser/tablet/smartphone</label>
</text>
<button>
@ -56,7 +62,7 @@
</text>
</group>
<group>
<layout>vbox</layout>
@ -95,7 +101,38 @@
</text>
</group>
<group>
<layout>hbox</layout>
<input>
<width>220</width>
<height>25</height>
<padding>5</padding>
<label>Local IP</label>
<property>/sim/http/mcduweb/local-ip</property>
<binding>
<command>dialog-apply</command>
</binding>
<live type="bool">true</live>
</input>
<button>
<legend>get qrcode</legend>
<pref-height>25</pref-height>
<pref-width>180</pref-width>
<padding>5</padding>
<binding>
<command>nasal</command>
<script>
var _url = "";
if (size(getprop("/sim/http/mcduweb/local-ip"))>6) {
if ( getprop("sim/http/running",0) == 1 ) _url = "http://" ~ getprop("/sim/http/mcduweb/local-ip") ~ ":" ~ getprop("/sim/http/options/listening-port") ~ "/aircraft-dir/WebPanel/mcdu.html";
root.createChild("image").set("src", "https://qr.eletto.dev/" ~ _url).setSize(300,300).setTranslation(10,10);
}
</script>
</binding>
</button>
</group>
<canvas>
<name>mcduwebqr</name>
<valign>center</valign>
@ -110,9 +147,6 @@
var mcdu_canvas_dlg = canvas.get(cmdarg());
var root = mcdu_canvas_dlg.createGroup();
mcdu_canvas_dlg.setColorBackground(1, 1, 1, 1);
var _url = "";
if( getprop("sim/http/running",0) == 1 ) _url = "http://localhost:" ~ getprop("/sim/http/options/listening-port") ~ "/aircraft-dir/WebPanel/mcdu.html";
root.createChild("image").set("src", "https://qr.eletto.dev/" ~ _url).setSize(300,300).setTranslation(10,10);
]]>
</load>
<unload>