fly/fgdata
1
0
Fork 0
Code Activity

Add a sample JSON based web form

Browse source 
This is a sample for the new httpd and it's JSON capability.
Need to run fgfs with --httpd=<YourHttpPort> and point your browser
at http://localhost:<YourHttpPort>/gui/radio.html
This commit is contained in:
Torsten Dreyer 2014-03-07 12:07:13 +01:00
parent 9844056ab7
commit 0ea6d47156
3 changed files with 224 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
Docs/gui/radio.css Normal file
View file

@ -0,0 +1,30 @@
body {
background-color: #c0c0c0;
}
#header {
background-color: #303030;
color: #e0e0e0;
}
#header h3 {
padding-left: 0.3em;
border-bottom: 1px solid #808080;
}
input.frq {
background-color: #202020;
color: red;
font-family: Monospace;
font-weight: bold;
padding: 0.2em;
}
table#frequencies {
border: 4px groove;
background-color: #404040;
}
table#frequencies tr td {
padding: 0.2em;
}

86
Docs/gui/radio.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<title>FlightGear - Radio Settings</title>
<meta charset="UTF-8" />
<meta name="description" content="FlightGear - Radio Settings" />
<link href="radio.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Radio Frequencies</h1>
</div>
<div id="body">
<table id="frequencies">
<tr>
<th colspan="3">Selected</th>
<th>&nbsp;</td>
<th colspan="2">Standby</th>
<th colspan="2">Radial</th>
</tr>
<tr>
<td>COM1</td>
<td><input type="text" id="com1u" class="frq" name="com1u" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td><input type="button" id="com1swap" name="com1swap" value="<>"/></td>
<td><input type="text" id="com1s" class="frq" name="com1s" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>COM2</td>
<td><input type="text" id="com2u" class="frq" name="com2u" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td><input type="button" id="com2swap" name="com2swap" value="<>"/></td>
<td><input type="text" id="com2s" class="frq" name="com2s" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>NAV1</td>
<td><input type="text" id="nav1u" class="frq" name="nav1u" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td><input type="button" id="nav1swap" name="nav1swap" value="<>"/></td>
<td><input type="text" id="nav1s" class="frq" name="nav1s" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td><input type="text" id="nav1rad" class="frq" name="nav1rad" size="3" maxlength="3" value=""/></td>
<td>deg</td>
</tr>
<tr>
<td>NAV2</td>
<td><input type="text" id="nav2u" class="frq" name="nav2u" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td><input type="button" id="nav2swap" name="nav2swap" value="<>"/></td>
<td><input type="text" id="nav2s" class="frq" name="nav2s" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td><input type="text" id="nav2rad" class="frq" name="nav2rad" size="3" maxlength="3" value=""/></td>
<td>deg</td>
</tr>
<tr>
<td>ADF</td>
<td><input type="text" id="adf1u" class="frq" name="adf1u" size="7" maxlength="7" value=""/></td>
<td>kHz</td>
<td><input type="button" id="adf1swap" name="adf1swap" value="<>"/></td>
<td><input type="text" id="adf1s" class="frq" name="adf1s" size="7" maxlength="7" value=""/></td>
<td>kHz</td>
<td><input type="text" id="adf1rad" class="frq" name="adf1rad" size="3" maxlength="3" value=""/></td>
<td>deg</td>
</tr>
<tr>
<td>DME</td>
<td><input type="text" id="dme1u" class="frq" name="dme1u" size="7" maxlength="7" value=""/></td>
<td>MHz</td>
<td colspan="5">&nbsp;</td>
</tr>
</table>
</div>
<div id="footer">
</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="radio.js" type="text/javascript"></script>
</body>
</html>

108
Docs/gui/radio.js Normal file
View file

@ -0,0 +1,108 @@
var props =
{
load : function( path, callback, base ) {
if( typeof(base) == 'undefined' ) base = "/json/";
var reply;
$.getJSON( base + path, function( data ) {
callback( props.makeNode( data ) );
});
},
save : function( node, url ) {
alert( "can't save yet :-(" );
},
makeNode: function( node ) {
if( typeof(node) == 'undefined' ) return node;
node.getNode = function( name ) {
var reply;
$.each( node.children, function( key, child ) {
if( child.name == name ) {
reply = child;
}
});
return reply;
}
return node;
}
}
var reloadProperties = function() {
props.load( "instrumentation/comm/frequencies", function(props) {
$("#com1u").val( props.getNode("selected-mhz-fmt").value );
$("#com1s").val( props.getNode("standby-mhz-fmt").value );
});
props.load( "instrumentation/comm[1]/frequencies", function(props) {
$("#com2u").val( props.getNode("selected-mhz-fmt").value );
$("#com2s").val( props.getNode("standby-mhz-fmt").value );
});
props.load( "instrumentation/nav/frequencies", function(props) {
$("#nav1u").val( props.getNode("selected-mhz-fmt").value );
$("#nav1s").val( props.getNode("standby-mhz-fmt").value );
});
props.load( "instrumentation/nav/radials", function(props) {
$("#nav1rad").val( props.getNode("selected-deg").value );
});
props.load( "instrumentation/nav[1]/frequencies", function(props) {
$("#nav2u").val( props.getNode("selected-mhz-fmt").value );
$("#nav2s").val( props.getNode("standby-mhz-fmt").value );
});
props.load( "instrumentation/nav[1]/radials", function(props) {
$("#nav2rad").val( props.getNode("selected-deg").value );
});
props.load( "instrumentation/adf/frequencies", function(props) {
$("#adf1u").val( props.getNode("selected-khz").value );
$("#adf1s").val( props.getNode("standby-khz").value );
});
props.load( "instrumentation/adf", function(props) {
$("#adf1rad").val( props.getNode("rotation-deg").value );
});
props.load( "instrumentation/dme/frequencies", function(props) {
$("#dme1u").val( props.getNode("selected-mhz").value );
});
}
$( document ).ready(function() {
$("#com1swap").click( function() {
var v = $("#com1u").val();
$("#com1u").val( $("#com1s").val() );
$("#com1s").val(v);
});
$("#com2swap").click( function() {
var v = $("#com2u").val();
$("#com2u").val( $("#com2s").val() );
$("#com2s").val(v);
});
$("#nav1swap").click( function() {
var v = $("#nav1u").val();
$("#nav1u").val( $("#nav1s").val() );
$("#nav1s").val(v);
});
$("#nav2swap").click( function() {
var v = $("#nav2u").val();
$("#nav2u").val( $("#nav2s").val() );
$("#nav2s").val(v);
});
$("#adf1swap").click( function() {
var v = $("#adf1u").val();
$("#adf1u").val( $("#adf1s").val() );
$("#adf1s").val(v);
});
reloadProperties();
window.setInterval(reloadProperties, 5000 );
});