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 -->
|
||||
<!-- (not yet implemented) -->
|
||||
<!--url-rewrites>static=html/static</url-rewrites-->
|
||||
<url-rewrites>/gui/=webgui/</url-rewrites>
|
||||
</options>
|
||||
</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;
|
||||
}
|
||||
};
|
||||
|
|
@ -7,11 +7,14 @@ var PropertyChangeListener = function( callback ) {
|
|||
PropertyChangeListenerObjects._ws = new WebSocket('ws://' + location.host + '/PropertyListener');
|
||||
PropertyChangeListenerObjects._ws.onopen = callback;
|
||||
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.onmessage = function(ev) {
|
||||
// console.log("websocket message:" + ev.data);
|
||||
try {
|
||||
var node = JSON.parse(ev.data);
|
||||
var cb = PropertyChangeListenerObjects._listeners[node.path];
|
||||
|
|
@ -34,4 +37,3 @@ var SetListener = function( path, callback ) {
|
|||
}
|
||||
o.push(callback);
|
||||
};
|
||||
|
||||
Loading…
Reference in a new issue