Update documentation to reflect we can send commands

README.md

@@ -3,10 +3,18 @@
 # UAV-Console
 The UAV console allows you - in the end - to control a swarm of UAVs simultaneously in the air. Currently, the focus is on a first sketchup of the visual interface. Subsequently a REST interface is provided to another process on the server that actually is connected to a boosted radio and sends the messages (in the proper format) into the air.
 
-## A screenshot
+To fake the ground station that usually gets over RF messages from the UAVs, you can build the [gsGuiInterface](https://github.com/mrquincle/FireSoft/tree/master/gsGuiInterface) module in the FireSoft architecture. Define for that "DUMMY" and "NODEJSSERVER" (which will be moved to the configuration file as options soon). If there is no ground stations you will not see the messages from the UAVs. The state table is build up automatically, if the ground stations sends different tuples, they will be displayed automatically as long as there is an "uav_id" field.
+
+## Screenshots
+
+The following shows a screenshot of the visualization of the UAVs:
 
 ![Screenshot](https://github.com/mrquincle/uav-console/raw/master/doc/uav_swarm.png "Screenshot")
 
+The following shows a screenshot where we added commands to control the planes:
+
+![Screenshot](https://github.com/mrquincle/uav-console/raw/master/doc/uav_console.png "Console with commands")
+
 ## How to install and run?
 
 The following installation instructions are okay for Ubuntu or Debian-based systems. Adapt to your own needs.
@@ -15,7 +23,7 @@ The following installation instructions are okay for Ubuntu or Debian-based syst
 * git clone https://github.com/mrquincle/uav-console.git
 * cd uav-console
 * npm install -d # uses information from package.json to install the required packages in node_modules
-* firefox http://localhost:8082
+* firefox http://localhost:8080
 
 It seems to be [practice](http://www.futurealoof.com/posts/nodemodules-in-git.html) to commit also node modules in the nodejs community, hence I did. It should accelerate your install and "npm install -d" should get you even more uptodate if you want to.
 

server.js

@@ -65,7 +65,9 @@ app.get('/drone', function (request,response) {
 	response.send(droneJSON); 
 });
 
-app.listen(process.argv[2]||8080);
+var guiPort = 8080;
+
+app.listen(process.argv[2]||guiPort);
 
 var cmdPort = 8082;
 
@@ -183,5 +185,5 @@ process.on('uncaughtException', function(err) {
 	console.log(JSON.stringify(err));
 });
 
-console.log('Start firefox and point it to http://localhost:8082');
+console.log('Start firefox and point it to http://localhost:' + guiPort);
 

static/index.html

@@ -8,8 +8,36 @@
 
 <h1>UAV Swarm Operator Console</h1>
 
-<div id="map"></div> 
+<div id="container">
 
+<div id="map">
+</div> 
+
+<div id="below-map">
+<p>
+<!-- ko if: chosenUAVId -->
+Current UAV: <span data-bind="text: $root.chosenUAVId()"></span>
+<!-- /ko -->
+</p>
+</div>
+
+<div id="sidebar-left">
+
+<table>
+  <thead>
+    <tr><th>Command</th><th>Value</th></tr>
+  </thead>
+  <tbody data-bind="foreach: dronecommands">
+      <td data-bind="text: parameter"></td>
+      <td><input data-bind="value: value"/></td>
+    </tr>
+  </tbody>
+</table>
+
+<br/>
+<button data-bind="click: sendCommand">Execute command!</button>
+
+</div>
 
 <div id="sidebar">
 <table>
@@ -39,37 +67,17 @@ <h1>UAV Swarm Operator Console</h1>
   </tbody>
 </table>
 
-<!--
--->
-<p>
-<!-- ko if: chosenUAVId -->
-Current UAV: <span data-bind="text: $root.chosenUAVId()"></span>
-<!-- /ko -->
-</p>
-
-<br/>
-<table>
-  <thead>
-    <tr><th>Command</th><th>Value</th></tr>
-  </thead>
-  <tbody data-bind="foreach: dronecommands">
-      <td data-bind="text: parameter"></td>
-      <td><input data-bind="value: value"/></td>
-    </tr>
-  </tbody>
-</table>
-
 <!--
 <button data-bind="click: abortMission, enable: chosenUAVId">Abort Mission</button>
 <button data-bind="click: startLanding, enable: chosenUAVId">Land!</button>
 -->
-<button data-bind="click: sendCommand">Execute!</button>
-
 <!-- only over API
 <button data-bind="click: addUAV">Add UAV</button>
 -->
 </div>
 
+</div>
+
 <div id="main">
 <h2>Short introduction</h2>
 <p>This operator console allows you to see where the UAVs currently are located, plus it gives you the

static/style.css

@@ -2,7 +2,7 @@ body {
   font-family: arial; 
   font-size: 14px; 
   background-color: #EEEEDD;
-  width: 960px; 
+  width: 1280px; 
   margin: 0 auto;
   margin-top: 0.9em; margin-bottom: 0.9em;
 }
@@ -12,23 +12,52 @@ body {
 .map p { margin-top: 0.9em; margin-bottom: 0.9em; }
 
 #map {
-  float:left;
-  width:600px;
-  height:400px;
+  position:absolute;
+  left:38%;
+  margin-left:-100px;
+  top:20px;
+  width:500px;
+  height:500px;
+}
+
+#below-map {
+  position:absolute;
+  left:38%;
+  margin-left:-100px;
+  top:520px;
+  width:500px;
 }
 
 #sidebar {
-  float:right;
+  position:absolute;
+  top:20px;
+  right:0px;
+  width:350px;
+}
+
+#sidebar-left {
+  top:20px;
+  position:absolute;
+  left:0px;
+  right:0px;
   width:350px;
 }
 
+#container {
+    position:relative;
+    height:600px;
+    width:100%;
+    border:thick solid black;
+}
+
 #main {
   padding-top:20px;
   clear:both;
   background: #EEEEDD;
   float:center;
 }
 
+
 #footer {
   clear:both;
   background:#EEEEDD;