diff --git a/httpd-settings.xml b/httpd-settings.xml index 56447cd4b..9c4fac57a 100644 --- a/httpd-settings.xml +++ b/httpd-settings.xml @@ -56,6 +56,6 @@ - + /gui/=webgui/ diff --git a/webgui/index.html b/webgui/index.html new file mode 100644 index 000000000..d5b9eb5b4 --- /dev/null +++ b/webgui/index.html @@ -0,0 +1,32 @@ + + +FlightGear Web Gui + + + + + +

FlightGear Web GUI

+

You have landed at the secret webgui page. This url will eventually open the web gui for FlightGear or a fancy instructor station or ...

+

Currently, we only have a few basic parts of that working. You might be interested in +

+

+

+ Check out the javascript code and files in FGDATA/webgui to see how all this is working. If you want to contribute, the FlighGear-Devel mailinglist gets you in touch with the developers. +

+ +
+ +Copyright 1996-2014, The FlightGear Contributors
+FlightGear is free and open source software, licensed under the GNU General Public License Version 2. + + + + diff --git a/webgui/instruments/kingradio.html b/webgui/instruments/kingradio.html new file mode 100644 index 000000000..0d682df6d --- /dev/null +++ b/webgui/instruments/kingradio.html @@ -0,0 +1,52 @@ + + + +FlightGear - Radio Stack + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + diff --git a/webgui/instruments/kx165.css b/webgui/instruments/kx165.css new file mode 100644 index 000000000..cbe98c45f --- /dev/null +++ b/webgui/instruments/kx165.css @@ -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; +} diff --git a/webgui/instruments/kx165.html b/webgui/instruments/kx165.html new file mode 100644 index 000000000..c3397fcc9 --- /dev/null +++ b/webgui/instruments/kx165.html @@ -0,0 +1,70 @@ + + + +KX165 + + + + +
+
+
+
+
+ +
USE
+
+
+ +
STBY
+
+
+
+
+
KX 165 TSO
+
+ +
+
COMM
+
+
+
+ +
+
+
+ +
USE
+
+
+ +
STBY
+
+
+
+
+
 
+
+ +
+
NAV
+
+
+
+ +
+
+ +
+
+ + +
+ + \ No newline at end of file diff --git a/webgui/instruments/kx165.js b/webgui/instruments/kx165.js new file mode 100644 index 000000000..3b8f28415 --- /dev/null +++ b/webgui/instruments/kx165.js @@ -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; + } +}; diff --git a/Docs/gui/fgcommand.js b/webgui/lib/fgcommand.js similarity index 100% rename from Docs/gui/fgcommand.js rename to webgui/lib/fgcommand.js diff --git a/Docs/gui/props.js b/webgui/lib/props.js similarity index 63% rename from Docs/gui/props.js rename to webgui/lib/props.js index 0ca106bf3..ee948e8c8 100644 --- a/Docs/gui/props.js +++ b/webgui/lib/props.js @@ -1,28 +1,31 @@ var PropertyChangeListenerObjects = { - _ws: null, - _listeners: new Array() + _ws : null, + _listeners : new Array() }; -var PropertyChangeListener = function( callback ) { +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]; - for( var i = 0; i < cb.length; i++ ) + for (var i = 0; i < cb.length; i++) cb[i](node); } catch (e) { } }; }; -var SetListener = function( path, callback ) { +var SetListener = function(path, callback) { var o = PropertyChangeListenerObjects._listeners[path]; if (typeof (o) == 'undefined') { o = new Array(); @@ -34,4 +37,3 @@ var SetListener = function( path, callback ) { } o.push(callback); }; - diff --git a/Docs/gui/radio.css b/webgui/radio.css similarity index 100% rename from Docs/gui/radio.css rename to webgui/radio.css diff --git a/Docs/gui/radio.html b/webgui/radio.html similarity index 100% rename from Docs/gui/radio.html rename to webgui/radio.html diff --git a/Docs/gui/radio.js b/webgui/radio.js similarity index 100% rename from Docs/gui/radio.js rename to webgui/radio.js