Add a sample JSON based web form
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
parent
9844056ab7
commit
0ea6d47156
3 changed files with 224 additions and 0 deletions
30
Docs/gui/radio.css
Normal file
30
Docs/gui/radio.css
Normal 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
86
Docs/gui/radio.html
Normal 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> </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"> </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"> </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"> </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
108
Docs/gui/radio.js
Normal 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 );
|
||||||
|
});
|
||||||
|
|
||||||
Loading…
Reference in a new issue