Move the web gui to its own folder
serve FGDATA/webgui as url /gui/ and move the files out of FGDATA/Docs (which was a bad place for those).
This commit is contained in:
Torsten Dreyer
parent
26836af986
commit
e46764624d
11 changed files with 352 additions and 9 deletions
|
|
@ -56,6 +56,6 @@
|
||||||
|
|
||||||
<!-- all paths are relative to fg-root -->
|
<!-- all paths are relative to fg-root -->
|
||||||
<!-- (not yet implemented) -->
|
<!-- (not yet implemented) -->
|
||||||
<!--url-rewrites>static=html/static</url-rewrites-->
|
<url-rewrites>/gui/=webgui/</url-rewrites>
|
||||||
</options>
|
</options>
|
||||||
</PropertyList>
|
</PropertyList>
|
||||||
|
|
|
||||||
32
webgui/index.html
Normal file
32
webgui/index.html
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html >
|
||||||
|
<head><title>FlightGear Web Gui</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<a href="http://www.flightgear.org"><img src="/img/fglogosm.jpg"></a>
|
||||||
|
<h3>FlightGear Web GUI</h3>
|
||||||
|
<p>You have landed at the secret webgui page. This url will eventually open the web gui for FlightGear or a fancy instructor station or ...</p>
|
||||||
|
<p>Currently, we only have a few basic parts of that working. You might be interested in
|
||||||
|
<ul>
|
||||||
|
<li><a href="/">The Documentation</a></li>
|
||||||
|
<li><a href="/props/">The property tree browser</a></li>
|
||||||
|
<li><a href="/json/?d=2&i=y">The json service</a></li>
|
||||||
|
<li><a href="/gui/instruments/kingradio.html">A work-in-progress radiostack</a></li>
|
||||||
|
<li>We also have a powerful interface to the <a href="/run.cgi?value=pause">fgcommand</a>. Read the sourcecode to become eligible to use it.</li>
|
||||||
|
<li>And there is a websocket at /PropertyListener to get immediate notifications of changing property values.</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Check out the javascript code and files in FGDATA/webgui to see how all this is working. If you want to contribute, the <a href="http://wiki.flightgear.org/index.php/Mailing_list">FlighGear-Devel mailinglist</a> gets you in touch with the developers.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<font size="-1">
|
||||||
|
Copyright 1996-2014, The FlightGear Contributors<br>
|
||||||
|
FlightGear is free and open source software, licensed under the GNU General Public License Version 2.
|
||||||
|
</font>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
52
webgui/instruments/kingradio.html
Normal file
52
webgui/instruments/kingradio.html
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>FlightGear - Radio Stack</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="description" content="FlightGear - Radio Stack" />
|
||||||
|
<link href="kx165.css" type="text/css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
<div id="comnav1"></div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
|
||||||
|
<div id="comnav2"></div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
|
||||||
|
<div id="dme"></div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
|
||||||
|
<div id="kr87"></div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--script src="jquery-1.11.0.js"></script-->
|
||||||
|
<script src="http://code.jquery.com/jquery-1.11.0.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
<script src="../lib/fgcommand.js" type="text/javascript"></script>
|
||||||
|
<script src="../lib/props.js" type="text/javascript"></script>
|
||||||
|
<script src="kx165.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
PropertyChangeListener(function() {
|
||||||
|
|
||||||
|
// load kx165.html, select the element with class .kx165
|
||||||
|
// and fill the element with id kx165-1 in above html
|
||||||
|
$('#comnav1').load("kx165.html .kx165", function() {
|
||||||
|
KX165.bind(0, this);
|
||||||
|
});
|
||||||
|
$('#comnav2').load("kx165.html .kx165", function() {
|
||||||
|
KX165.bind(1, this);
|
||||||
|
});
|
||||||
|
//$('#dme').load("kn62.html .kn62", function() {
|
||||||
|
// KX165.bind(1, this);
|
||||||
|
//});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
120
webgui/instruments/kx165.css
Normal file
120
webgui/instruments/kx165.css
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
|
||||||
|
.leddisplay {
|
||||||
|
color: red;
|
||||||
|
border: 0;
|
||||||
|
font-size: 32pt;
|
||||||
|
background-color: Black;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swapbutton {
|
||||||
|
font-size: 120%;
|
||||||
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
background-color: white;
|
||||||
|
display: inline-block;
|
||||||
|
transform: scale(1.5, 1); /* W3C */
|
||||||
|
-webkit-transform: scale(1.5, 1); /* Safari and Chrome */
|
||||||
|
-moz-transform: scale(1.5, 1); /* Firefox */
|
||||||
|
-ms-transform: scale(1.5, 1); /* IE 9 */
|
||||||
|
-o-transform: scale(1.5, 1);
|
||||||
|
display: inline-block; /* Opera */
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfrequencies {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navfrequencies {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comswapbuttonrow {
|
||||||
|
padding: 1ex 1em 1ex 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navswapbuttonrow {
|
||||||
|
/* top right bottom left */
|
||||||
|
padding: 1ex 0 1ex 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: silver;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 10pt;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.navswapbuttonrow,.comswapbuttonrow {
|
||||||
|
color: silver;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 10pt;
|
||||||
|
font-weight: bold;
|
||||||
|
clear: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navfrequencies,.navswapbuttonrow {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com,.nav {
|
||||||
|
border-bottom: 1ex ridge silver;
|
||||||
|
background-color: Black;
|
||||||
|
border-bottom: 0.8ex groove black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comuse, .navuse {
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
.comstby, .navstby {
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com,.nav,.comuse,.navuse {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comstby,.navstby {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfrequencies,.navfrequencies {
|
||||||
|
border: 1ex ridge silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.com,.nav,.comuse,.comstby {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comswapbuttonrow,.navswapbuttonrow {
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comswapbuttonrow {
|
||||||
|
border-left: 1ex ridge silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navswapbuttonrow {
|
||||||
|
border-right: 1ex ridge silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftcol {
|
||||||
|
float: left;
|
||||||
|
width: 30%;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centercol {
|
||||||
|
float: left;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightcol {
|
||||||
|
float: right;
|
||||||
|
width: 30%;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
70
webgui/instruments/kx165.html
Normal file
70
webgui/instruments/kx165.html
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>KX165</title>
|
||||||
|
<link href="kx165.css" type="text/css" rel="stylesheet" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
<div class="kx165">
|
||||||
|
<div class="com">
|
||||||
|
<div class="comfrequencies">
|
||||||
|
<div class="comuse">
|
||||||
|
<input class="leddisplay" type="text" id="com-use" maxlength="6"
|
||||||
|
size="6" value="123.45" />
|
||||||
|
<div class="label">USE</div>
|
||||||
|
</div>
|
||||||
|
<div class="comstby">
|
||||||
|
<input class="leddisplay" type="text" id="com-standby" maxlength="6"
|
||||||
|
size="6" value="123.45" />
|
||||||
|
<div class="label">STBY</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
</div>
|
||||||
|
<div class="comswapbuttonrow">
|
||||||
|
<div class="leftcol">KX 165 TSO</div>
|
||||||
|
<div class="centercol">
|
||||||
|
<input type="button" id="com-swap" class="swapbutton"
|
||||||
|
value="↔" />
|
||||||
|
</div>
|
||||||
|
<div class="rightcol">COMM</div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav">
|
||||||
|
<div class="navfrequencies">
|
||||||
|
<div class="navuse">
|
||||||
|
<input class="leddisplay" type="text" id="nav-use" maxlength="6"
|
||||||
|
size="6" value="118.00" />
|
||||||
|
<div class="label">USE</div>
|
||||||
|
</div>
|
||||||
|
<div class="navstby">
|
||||||
|
<input class="leddisplay" type="text" id="nav-standby" maxlength="6"
|
||||||
|
size="6" value="118.00" />
|
||||||
|
<div class="label">STBY</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
</div>
|
||||||
|
<div class="navswapbuttonrow">
|
||||||
|
<div class="leftcol"> </div>
|
||||||
|
<div class="centercol">
|
||||||
|
<input type="button" id="nav-swap" class="swapbutton"
|
||||||
|
value="↔" />
|
||||||
|
</div>
|
||||||
|
<div class="rightcol">NAV</div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="float: right;"></div>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
67
webgui/instruments/kx165.js
Normal file
67
webgui/instruments/kx165.js
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
var KX165 = {
|
||||||
|
baseNode : "/instrumentation/",
|
||||||
|
use : "selected-mhz",
|
||||||
|
standby : "standby-mhz",
|
||||||
|
|
||||||
|
swap : function(what, idx) {
|
||||||
|
var base = this.makeNodeName(idx, what);
|
||||||
|
fgCommand.propertySwap(base + this.use, base + this.standby);
|
||||||
|
},
|
||||||
|
|
||||||
|
set : function(what, which, idx, val) {
|
||||||
|
fgCommand.propertyAssign(this.makeNodeName(idx, what, which), val);
|
||||||
|
},
|
||||||
|
|
||||||
|
bind : function(idx, div) {
|
||||||
|
|
||||||
|
// click handler for swap buttons
|
||||||
|
$(div).find("#com-swap").click(function() {
|
||||||
|
KX165.swap("comm", idx);
|
||||||
|
});
|
||||||
|
$(div).find("#nav-swap").click(function() {
|
||||||
|
KX165.swap("nav", idx);
|
||||||
|
});
|
||||||
|
|
||||||
|
// change handler for frequency input fields
|
||||||
|
$(div).find("#com-use").change(function(evt) {
|
||||||
|
KX165.set("comm", KX165.use, idx, evt.target.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(div).find("#com-standby").change(function(evt) {
|
||||||
|
KX165.set("comm", KX165.standby, idx, evt.target.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(div).find("#nav-use").change(function(evt) {
|
||||||
|
KX165.set("nav", KX165.use, idx, evt.target.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(div).find("#nav-standby").change(function(evt) {
|
||||||
|
KX165.set("nav", KX165.standby, idx, evt.target.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// listen for changed properties
|
||||||
|
SetListener( KX165.makeNodeName( idx, "comm", KX165.use ) + "-fmt", function(n) {
|
||||||
|
$(div).find("#com-use").val( n.value );
|
||||||
|
});
|
||||||
|
SetListener( KX165.makeNodeName( idx, "comm", KX165.standby ) + "-fmt", function(n) {
|
||||||
|
$(div).find("#com-standby").val( n.value );
|
||||||
|
});
|
||||||
|
SetListener( KX165.makeNodeName( idx, "nav", KX165.use ) + "-fmt", function(n) {
|
||||||
|
$(div).find("#nav-use").val( n.value );
|
||||||
|
});
|
||||||
|
SetListener( KX165.makeNodeName( idx, "nav", KX165.standby ) + "-fmt", function(n) {
|
||||||
|
$(div).find("#nav-standby").val( n.value );
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
makeNodeName : function(idx, section, leaf) {
|
||||||
|
// build /instrumentation/comm[n]/frequencies/selected-mhz
|
||||||
|
var reply = this.baseNode + section;
|
||||||
|
if (idx > 0)
|
||||||
|
reply += "[" + idx + "]";
|
||||||
|
reply += "/frequencies/";
|
||||||
|
if( typeof(leaf) != 'undefined' )
|
||||||
|
reply += leaf;
|
||||||
|
return reply;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -1,28 +1,31 @@
|
||||||
var PropertyChangeListenerObjects = {
|
var PropertyChangeListenerObjects = {
|
||||||
_ws: null,
|
_ws : null,
|
||||||
_listeners: new Array()
|
_listeners : new Array()
|
||||||
};
|
};
|
||||||
|
|
||||||
var PropertyChangeListener = function( callback ) {
|
var PropertyChangeListener = function(callback) {
|
||||||
PropertyChangeListenerObjects._ws = new WebSocket('ws://' + location.host + '/PropertyListener');
|
PropertyChangeListenerObjects._ws = new WebSocket('ws://' + location.host + '/PropertyListener');
|
||||||
PropertyChangeListenerObjects._ws.onopen = callback;
|
PropertyChangeListenerObjects._ws.onopen = callback;
|
||||||
PropertyChangeListenerObjects._ws.onclose = function(ev) {
|
PropertyChangeListenerObjects._ws.onclose = function(ev) {
|
||||||
console.log("websocket closed");
|
alert('Lost connection to FlightGear. Please reload this page and/or restart FlightGear.');
|
||||||
|
PropertyChangeListenerObjects._ws = null;
|
||||||
|
};
|
||||||
|
PropertyChangeListenerObjects._ws.onerror = function(ev) {
|
||||||
|
alert('Error communicating with FlightGear. Please reload this page and/or restart FlightGear.');
|
||||||
PropertyChangeListenerObjects._ws = null;
|
PropertyChangeListenerObjects._ws = null;
|
||||||
};
|
};
|
||||||
PropertyChangeListenerObjects._ws.onmessage = function(ev) {
|
PropertyChangeListenerObjects._ws.onmessage = function(ev) {
|
||||||
// console.log("websocket message:" + ev.data);
|
|
||||||
try {
|
try {
|
||||||
var node = JSON.parse(ev.data);
|
var node = JSON.parse(ev.data);
|
||||||
var cb = PropertyChangeListenerObjects._listeners[node.path];
|
var cb = PropertyChangeListenerObjects._listeners[node.path];
|
||||||
for( var i = 0; i < cb.length; i++ )
|
for (var i = 0; i < cb.length; i++)
|
||||||
cb[i](node);
|
cb[i](node);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
var SetListener = function( path, callback ) {
|
var SetListener = function(path, callback) {
|
||||||
var o = PropertyChangeListenerObjects._listeners[path];
|
var o = PropertyChangeListenerObjects._listeners[path];
|
||||||
if (typeof (o) == 'undefined') {
|
if (typeof (o) == 'undefined') {
|
||||||
o = new Array();
|
o = new Array();
|
||||||
|
|
@ -34,4 +37,3 @@ var SetListener = function( path, callback ) {
|
||||||
}
|
}
|
||||||
o.push(callback);
|
o.push(callback);
|
||||||
};
|
};
|
||||||
|
|
||||||
Loading…
Reference in a new issue