software/js-drone: add timestamps to the gui

Indicate the time of the last received message in format hh:mm:ss .

software/js-drone/README.md

@@ -47,6 +47,7 @@ For each drone is displayed:
 * the yaw angle in degrees
 * the speed (ground speed for multicopters, airspeed for fixed wings) in meters per second
 * the climb rate in meters per second
+* the timestamp of the position in format hh:mm:ss
 
 
 ### Buttons

software/js-drone/buildout.hash.cfg

@@ -14,7 +14,7 @@
 # not need these here).
 [index-html]
 _update_hash_filename_ = web-gui/index.html.jinja2
-md5sum = 94479f7e7299650fc41878fab06e6555
+md5sum = 8c18ed73d4b8212106f226d95c0ae3f3
 
 [instance-profile]
 filename = instance.cfg.in
@@ -38,7 +38,7 @@ md5sum = 1555496ad591a31a845f33488d5c335d
 
 [script-js]
 _update_hash_filename_ = web-gui/script.js.jinja2
-md5sum = a88028c1248d2b6a91b7d3cb03047196
+md5sum = dfa140d70d8a9cadc6cee865be4e8c26
 
 [worker]
 _update_hash_filename_ = drone-scripts/worker.js.jinja2

software/js-drone/web-gui/index.html.jinja2

@@ -124,6 +124,12 @@
         <td id="climb_rate_{{ i }}"></td>
         {% endfor %}
       </tr>
+      <tr>
+        <th>Timestamp (hh:mm:ss)</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td id="timestamp_{{ i }}"></td>
+        {% endfor %}
+      </tr>
     </table>
   </div>
 

software/js-drone/web-gui/script.js.jinja2

@@ -19,6 +19,7 @@
     QUIT_BTN_ID = "quit-btn",
     RED_BTN_CLASS_NAME = "red-button",
     SWITCH_BTN_ID = "switch-btn",
+    TIMESTAMP_BASE_ID = "timestamp_",
     WEB_SOCKET_STATUS_OUTPUT_ID = "web-socket-status",
     YAW_BASE_ID = "yaw_",
     socket;
@@ -62,6 +63,7 @@
 
   socket.onmessage = function (event) {
     var color_array,
+      date,
       flight_state_cell,
       i,
       message = JSON.parse(event.data),
@@ -78,6 +80,7 @@
         document.getElementById(YAW_BASE_ID + id).innerHTML = drone["yaw"];
         document.getElementById(SPEED_BASE_ID + id).innerHTML = drone["speed"];
         document.getElementById(CLIMB_RATE_BASE_ID + id).innerHTML = drone["climbRate"];
+        document.getElementById(TIMESTAMP_BASE_ID + id).innerHTML = new Date(drone["timestamp"]).toLocaleTimeString('fr-FR');
       });
     } else if (message.hasOwnProperty("state") && message.hasOwnProperty("id")) {
       flight_state_cell = document.getElementById(FLIGHT_STATUS_BASE_ID + message['id']);