software/js-drone: add frontend for subscriber

software/js-drone/buildout.hash.cfg

@@ -12,26 +12,34 @@
 # Substitution (${...:...}), extension ([buildout] extends = ...) and
 # section inheritance (< = ...) are NOT supported (but you should really
 # not need these here).
+[index-html]
+_update_hash_filename_ = web-gui/index.html.jinja
+md5sum = d652b1b4769bae17b0b8c92ed233144b
+
 [instance-profile]
-filename = instance.cfg
-md5sum = c15e4e308d5669cd87258c841714244f
+filename = instance.cfg.in
+md5sum = c7f9de7830c1a6a57ae8683a1d329977
 
 [instance-default]
-filename = instance-default.cfg
-md5sum = 9a41a0902663fb87d52bc35a03dbcc49
+filename = instance-default.cfg.jinja
+md5sum = 0ed9aac3b3a61c41b8a7b61ab8067c77
 
-[instance-drone]
-filename = instance-drone.cfg
-md5sum = b1910416ffa6f2b6a84fd13cca6109ce
+[instance-peer]
+filename = instance-peer.cfg.jinja.in
+md5sum = 8615afba84028f1a61ca922cb1c0dcc5
 
 [main]
-filename = main.js
+_update_hash_filename_ = drone-scripts/main.js.jinja
 md5sum = 8bc77ebd49e8e6fe060de507bccc44d5
 
 [pubsub]
-filename = pubsub.js
+_update_hash_filename_ = drone-scripts/pubsub.js.jinja
 md5sum = 1555496ad591a31a845f33488d5c335d
 
+[script-js]
+_update_hash_filename_ = web-gui/script.js.jinja
+md5sum = 90bf6eaf67e2941d8a34e2cf2afdae2a
+
 [worker]
-filename = worker.js
+_update_hash_filename_ = drone-scripts/worker.js.jinja
 md5sum = ccbdd75b2a58e8d92d7cb990f2565b37

software/js-drone/instance-default.cfg → software/js-drone/instance-default.cfg.jinja

-{% set autopilot_ip = slapparameter_dict.get('autopilotIp', '192.168.27.1') -%}
-{% set autopilot_port = slapparameter_dict.get('autopilotPort', 7909) -%}
-{% set flight_script = slapparameter_dict.get('flightScript', 'https://lab.nexedi.com/nexedi/flight-scripts/raw/master/default.js') -%}
-{% set is_a_simulation = slapparameter_dict.get('isASimulation', False) -%}
-{% set multicast_ip = slapparameter_dict.get('multicastIp', 'ff15::1111') -%}
-{% set net_if = slapparameter_dict.get('netIf', 'eth0') -%}
-
-{% set drone_guid_list = slapparameter_dict.get('droneGuidList', []) -%}
-{% set subscriber_guid_list = slapparameter_dict.get('subscriberGuidList', []) -%}
-{% set guid_list = drone_guid_list + subscriber_guid_list -%}
+{%- set parameter_dict = dict(default_parameter_dict, **parameter_dict) %}
+{% set guid_list = parameter_dict['droneGuidList'] + parameter_dict['subscriberGuidList'] -%}
 {% set drone_id_list = [] -%}
 {% set subscriber_id_list = [] -%}
-
 {% set part_list = ['publish-connection-information'] -%}
 
 {% for id, guid in enumerate(guid_list) -%}
-{%   set request_drone_section_title = 'request-drone' ~ id -%}
-{%   do part_list.append(request_drone_section_title) %}
-[{{ request_drone_section_title }}]
+{%   set request_peer_section_title = 'request-peer' ~ id -%}
+{%   do part_list.append(request_peer_section_title) %}
+[{{ request_peer_section_title }}]
 <= slap-connection
 recipe = slapos.cookbook:request.serialised
-name = Drone{{ id }}
-software-url = $${:software-release-url}
-software-type = drone
+name = Peer{{ id }}
+software-url = ${:software-release-url}
+software-type = peer
 return = instance-path
 sla-computer_guid = {{ guid }}
-config-autopilotIp = {{ autopilot_ip }}
-config-autopilotPort = {{ dumps(autopilot_port) }}
-config-numberOfDrone = {{ dumps(len(drone_guid_list)) }}
-config-numberOfSubscriber = {{ dumps(len(subscriber_guid_list)) }}
+config-autopilotIp = {{ parameter_dict['autopilotIp'] }}
+config-autopilotPort = {{ dumps(parameter_dict['autopilotPort']) }}
+config-numberOfDrone = {{ dumps(len(parameter_dict['droneGuidList'])) }}
+config-numberOfSubscriber = {{ dumps(len(parameter_dict['subscriberGuidList'])) }}
 config-id = {{ dumps(id) }}
-config-isASimulation = {{ dumps(is_a_simulation) }}
-{% if id < len(drone_guid_list) -%}
+config-isASimulation = {{ dumps(parameter_dict['isASimulation']) }}
+{% if id < len(parameter_dict['droneGuidList']) -%}
 {%   do drone_id_list.append(id) %}
 config-isADrone = {{ dumps(True) }}
-config-flightScript = {{ flight_script }}
+config-flightScript = {{ parameter_dict['flightScript'] }}
 {% else -%}
 {%   do subscriber_id_list.append(id) %}
 config-isADrone = {{ dumps(False) }}
 config-flightScript = https://lab.nexedi.com/nexedi/flight-scripts/raw/api_update/subscribe.js
 {% endif -%}
-config-multicastIp = {{ multicast_ip }}
-config-netIf = {{ net_if }}
+config-multicastIp = {{ parameter_dict['multicastIp'] }}
+config-netIf = {{ parameter_dict['netIf'] }}
 {% endfor %}
 
 [publish-connection-information]

software/js-drone/instance-drone.cfg → software/js-drone/instance-peer.cfg.jinja.in

@@ -6,16 +6,20 @@ parts =
 
 [directory]
 recipe = slapos.cookbook:mkdirectory
+
 home = $${buildout:directory}
 bin = $${:home}/bin
 etc = $${:home}/etc
+srv = $${:home}/srv
 var = $${:home}/var
+
 log = $${:var}/log
+public = $${:srv}/public
+service = $${:etc}/service
 
 [js-dynamic-template]
 recipe = slapos.recipe.template:jinja2
 rendered = $${directory:etc}/$${:_buildout_section_name_}.js
-template = ${buildout:directory}/$${:_buildout_section_name_}.js
 extra-context =
 context =
   import json_module json
@@ -26,15 +30,18 @@ context =
 
 [main]
 <= js-dynamic-template
+template = ${main:target}
 extra-context =
   key log_dir directory:log
   key pubsub_script pubsub:rendered
   key worker_script worker:rendered
 
 [pubsub]
+template = ${pubsub:target}
 <= js-dynamic-template
 
 [worker]
+template = ${worker:target}
 <= js-dynamic-template
 
 [symlink-quickjs-binary]
@@ -46,9 +53,41 @@ init =
   if not os.path.exists(options['target']):
     os.symlink(options['binary-path'], options['target'])
 
+[script-js]
+recipe = slapos.recipe.template:jinja2
+template = ${script-js:target}
+rendered = $${directory:public}/script.js
+websocket-url = [{{ ipv6 }}]:{{ websocket_port }}
+context =
+  raw websocket_url $${:websocket-url}
+
+[index-html]
+recipe = slapos.recipe.template:jinja2
+template = ${index-html:target}
+rendered = $${directory:public}/index.html
+context =
+  raw nb_drones {{ parameter_dict['numberOfDrone'] }}
+
+[httpd-port]
+recipe = slapos.cookbook:free_port
+minimum = 8080
+maximum = 8090
+ip = {{ ipv6 }}
+
+[httpd]
+recipe = slapos.cookbook:simplehttpserver
+host = {{ ipv6 }}
+port = $${httpd-port:port}
+base-path = $${directory:public}
+wrapper = $${directory:service}/http-server
+log-file = $${directory:log}/httpd.log
+use-hash-url = false
+depends = $${index-html:rendered}
+
 [publish-connection-information]
 recipe = slapos.cookbook:publish.serialised
 instance-path = $${directory:home}
-{% if not is_a_drone -%}
-websocket-url = ws://[{{ websocket_ip }}]:{{ websocket_port }}
+{% if not parameter_dict['isADrone'] -%}
+httpd-url = [$${httpd:host}]:$${httpd:port}
+websocket-url = ws://$${script-js:websocket-url}
 {% endif -%}

software/js-drone/instance.cfg → software/js-drone/instance.cfg.in

@@ -9,7 +9,7 @@ offline = true
 [switch-softwaretype]
 recipe = slapos.cookbook:switch-softwaretype
 default = instance-default:output
-drone = instance-drone:output
+peer = instance-peer:output
 RootSoftwareInstance = $${:default}
 
 [slap-configuration]
@@ -22,14 +22,28 @@ cert = $${slap_connection:cert_file}
 
 [dynamic-template-base]
 recipe = slapos.recipe.template:jinja2
-url = ${buildout:directory}/$${:_buildout_section_name_}.cfg
-output = $${buildout:directory}/$${:_buildout_section_name_}
+output = $${buildout:directory}/$${:_buildout_section_name_}.cfg
+extra-context =
+context =
+  jsonkey default_parameter_dict :default-parameters
+  key parameter_dict slap-configuration:configuration
+  $${:extra-context}
+default-parameters =
+  {
+    "autopilotIp": "192.168.27.1",
+    "autopilotPort": 7909,
+    "flightScript": "https://lab.nexedi.com/nexedi/flight-scripts/raw/master/default.js",
+    "isASimulation": false,
+    "multicastIp": "ff15::1111",
+    "netIf": "eth0",
+    "droneGuidList": [],
+    "subscriberGuidList":[]
+  }
 
 [instance-default]
 <= dynamic-template-base
+url = ${instance-default:target}
 extensions = jinja2.ext.do
-context =
-  key slapparameter_dict slap-configuration:configuration
 
 [directory]
 recipe = slapos.cookbook:mkdirectory
@@ -48,7 +62,7 @@ minimum = 6789
 maximum = 6799
 ip = $${slap-configuration:ipv6-random}
 
-[drone-configuration]
+[peer-configuration]
 recipe = slapos.recipe.template:jinja2
 output = $${directory:etc}/configuration.json
 extensions = jinja2.ext.do
@@ -56,17 +70,17 @@ context =
   import json_module json
   key websocket_ip gwsocket-port:ip
   key websocket_port gwsocket-port:port
-  key slapparameter_dict slap-configuration:configuration
+  key parameter_dict slap-configuration:configuration
 inline =
-  {% do slapparameter_dict.__setitem__('websocketIp', websocket_ip) -%}
-  {% do slapparameter_dict.__setitem__('websocketPort', websocket_port) -%}
-  {{ json_module.dumps(slapparameter_dict) }}
+  {% do parameter_dict.__setitem__('websocketIp', websocket_ip) -%}
+  {% do parameter_dict.__setitem__('websocketPort', websocket_port) -%}
+  {{ json_module.dumps(parameter_dict) }}
 
-[instance-drone]
+[instance-peer]
 <= dynamic-template-base
+url = ${instance-peer:output}
 depends = $${user:recipe}
-context =
-  key configuration drone-configuration:output
-  key is_a_drone slap-configuration:configuration.isADrone
-  key websocket_ip gwsocket-port:ip
+extra-context =
+  key configuration peer-configuration:output
+  key ipv6 slap-configuration:ipv6-random
   key websocket_port gwsocket-port:port

software/js-drone/software.cfg

@@ -7,39 +7,39 @@ extends =
 
 parts =
     instance-profile
-    instance-default
-    instance-drone
-    main
-    pubsub
-    worker
     slapos-cookbook
 
-[instance-profile]
-recipe = slapos.recipe.template
+[instance-default]
+recipe = slapos.recipe.build:download
 url = ${:_profile_base_location_}/${:filename}
-output = ${buildout:directory}/template.cfg
 
-[jinja-template-base]
+[template-base]
 recipe = slapos.recipe.template
-url = ${:_profile_base_location_}/${:_buildout_section_name_}.cfg
-output = ${buildout:directory}/${:_buildout_section_name_}.cfg
+url = ${:_profile_base_location_}/${:filename}
 
-[instance-default]
-<= jinja-template-base
+[instance-peer]
+<= template-base
+output = ${buildout:directory}/${:_buildout_section_name_}.cfg.jinja
 
-[instance-drone]
-<= jinja-template-base
+[instance-profile]
+<= template-base
+output = ${buildout:directory}/template.cfg
 
-[download-file-base]
+[download]
 recipe = slapos.recipe.build:download
-url = ${:_profile_base_location_}/${:filename}
-destination = ${buildout:directory}/${:filename}
+url = ${:_profile_base_location_}/${:_update_hash_filename_}
+
+[index-html]
+<= download
 
 [main]
-<= download-file-base
+<= download
 
 [pubsub]
-<= download-file-base
+<= download
+
+[script-js]
+<= download
 
 [worker]
-<= download-file-base
+<= download

software/js-drone/software.cfg.json

@@ -12,11 +12,11 @@
       "index": 0
     },
     "drone": {
-      "title": "Drone",
-      "software-type": "drone",
-      "description": "Drone Instance",
-      "request": "instance-drone-input-schema.json",
-      "response": "instance-drone-output-schema.json",
+      "title": "Peer",
+      "software-type": "peer",
+      "description": "Peer Instance",
+      "request": "instance-peer-input-schema.json",
+      "response": "instance-peer-output-schema.json",
       "index": 1
     }
   }

software/js-drone/test/test.py

@@ -254,6 +254,16 @@ class JSDroneTestCase(SlapOSInstanceTestCase):
       s.setsockopt(socket.IPPROTO_IP, socket.IP_MULTICAST_TTL, 2)
       s.sendto(ua_message, ('::1', OPC_UA_PORT))
 
+  def test_process(self):
+    expected_process_name_list = ['http-server-on-watch']
+    with self.slap.instance_supervisor_rpc as supervisor:
+      process_names = [process['name']
+                       for process in supervisor.getAllProcessInfo()]
+
+    for expected_process_name in expected_process_name_list:
+      self.assertIn(expected_process_name, process_names)
+
+
   def test_requested_instances(self):
     connection_parameter_dict = json.loads(
       self.computer_partition.getConnectionParameterDict()['_'])

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

+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+
+  <meta charset="utf-8">
+  <title>JS-Drone GUI</title>
+
+  <script src="script.js"></script>
+
+  <style>
+    button {
+      padding: 0.5%;
+      font-size: 24px;
+      cursor: pointer;
+      border: none;
+      border-radius: 10px;
+      box-shadow: 0 4px #999;
+    }
+    button:active {
+      box-shadow: 0 2px #666;
+      transform: translateY(4px);
+    }
+    div > * {margin: 1%}
+    label {margin: 2%}
+    table {width: 30%}
+    th, td{
+      padding: 1%;
+      text-align: center;
+      vertical-align: middle;
+    }
+    .connected {color: green}  
+    .container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .disconnected {color: red}
+    .gray-button {background-color: lightgray}
+    .gray-button:hover {background-color: gray}
+    .green-button {background-color: #4caf50}
+    .green-button:hover {background-color: #3e8e41}
+    .red-button {background-color: red}
+    .red-button {background-color: #e42828}
+  </style>
+
+</head>
+<body>
+
+  <header class="container">
+    <label for="web-socket-status">web socket status:</label>
+    <output class="disconnected" id="web-socket-status">Disconnected</output>
+  </header>
+
+  <div class="container">
+    <table>
+      <tr>
+        <th></th>
+        {% for i in range(int(nb_drones)) -%}
+        <th>Drone {{ i }}</th>
+        {% endfor %}
+      </tr>
+      <tr>
+        <th>Flight state</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td class="disconnected" id="flight_state_{{ i }}">Unknown</td>
+        {% endfor %}
+      </tr>
+      <tr>
+        <th>Latitude (°)</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td id="latitude_{{ i }}"></td>
+        {% endfor %}
+      </tr>
+      <tr>
+        <th>Longitude (°)</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td id="longitude_{{ i }}"></td>
+        {% endfor %}
+      </tr>
+      <tr>
+        <th>Altitude (m)</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td id="altitude_{{ i }}"></td>
+        {% endfor %}
+      </tr>
+      <tr>
+        <th>Yaw (°)</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td id="yaw_{{ i }}"></td>
+        {% endfor %}
+      </tr>
+      <tr>
+        <th>Air speed (m/s)</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td id="airspeed_{{ i }}"></td>
+        {% endfor %}
+      </tr>
+      <tr>
+        <th>Climb rate (m/s)</th>
+        {% for i in range(int(nb_drones)) -%}
+        <td id="climb_rate_{{ i }}"></td>
+        {% endfor %}
+      </tr>
+    </table>
+  </div>
+
+  <div class="container">
+    <button id="flight-btn" class="green-button" type="button">
+      Start
+    </button>
+    <button id="switch-btn" class="gray-button" type="button">
+      Switch
+    </button>
+    <button id="quit-btn" class="red-button" type="button">
+      Quit
+    </button>
+  </div>
+
+</body>
+</html>

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

+/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80 */
+
+(function () {
+  "use strict";
+
+  var ALTITUDE_BASE_ID = "altitude_",
+    AIRSPEED_BASE_ID = "airspeed_",
+    CONNECTED_CLASS_NAME = "connected",
+    CLIMB_RATE_BASE_ID = "climb_rate_",
+    DISCONNECTED_CLASS_NAME = "disconnected",
+    FLIGHT_BTN_ID = "flight-btn",
+    FLIGHT_STATUS_BASE_ID = "flight_state_",
+    GREEN_BTN_CLASS_NAME = "green-button",
+    LATITUDE_BASE_ID = "latitude_",
+    LONGITUDE_BASE_ID = "longitude_",
+    QUIT_BTN_ID = "quit-btn",
+    RED_BTN_CLASS_NAME = "red-button",
+    SWITCH_BTN_ID = "switch-btn",
+    WEB_SOCKET_STATUS_OUTPUT_ID = "web-socket-status",
+    YAW_BASE_ID = "yaw_",
+    socket;
+
+  function updateConnexionClass(element, status) {
+    element.classList.remove(status ? DISCONNECTED_CLASS_NAME : CONNECTED_CLASS_NAME);
+    element.classList.add(status ? CONNECTED_CLASS_NAME : DISCONNECTED_CLASS_NAME);    
+  }
+
+  function setWebSocketStatus(connected, status) {
+    var status_output = document.getElementById(WEB_SOCKET_STATUS_OUTPUT_ID);
+    updateConnexionClass(status_output, connected);
+    status_output.value = status;
+  }
+
+  function stopFlight(event) {
+    socket.send("stop");
+    event.target.removeEventListener('click', stopFlight);
+  }
+
+  function startFlight(event) {
+    var button = event.target;
+
+    socket.send("start");
+    button.removeEventListener('click', startFlight);
+    button.innerHTML = "Stop";
+    button.classList.remove(GREEN_BTN_CLASS_NAME);
+    button.classList.add(RED_BTN_CLASS_NAME);
+    button.addEventListener('click', stopFlight);
+  }
+
+  socket = new WebSocket('ws://{{ websocket_url }}');
+
+  socket.onopen = function(event) {
+    setWebSocketStatus(true, "Connected");
+  };
+
+  socket.onmessage = function(event) {
+    var message = JSON.parse(event.data),
+      flight_state_cell;
+    if (message.hasOwnProperty("drone_dict")) {
+      Object.entries(message["drone_dict"]).forEach(function ([id, drone]) {
+        document.getElementById(LATITUDE_BASE_ID + id).innerHTML = drone["latitude"];
+        document.getElementById(LONGITUDE_BASE_ID + id).innerHTML = drone["longitude"];
+        document.getElementById(ALTITUDE_BASE_ID + id).innerHTML = drone["altitude"];
+        document.getElementById(YAW_BASE_ID + id).innerHTML = drone["yaw"];
+        document.getElementById(AIRSPEED_BASE_ID + id).innerHTML = drone["speed"];
+        document.getElementById(CLIMB_RATE_BASE_ID + id).innerHTML = drone["climbRate"];
+      });
+    } else if (message.hasOwnProperty("state") && message.hasOwnProperty("id")) {
+      flight_state_cell = document.getElementById(FLIGHT_STATUS_BASE_ID + message['id']);
+      flight_state_cell.innerHTML = message['state'];
+      updateConnexionClass(flight_state_cell, message['inAir']);
+    } else {
+      console.info(message);
+    }
+  };
+
+  socket.onclose = function(event) {
+    setWebSocketStatus(false, "Closed");
+  };
+
+  socket.onerror = function(event) {
+    console.error(event.reason);
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById(FLIGHT_BTN_ID).addEventListener('click', startFlight);
+    document.getElementById(SWITCH_BTN_ID).addEventListener('click', event => {
+      
+      socket.send("switch");
+    });
+    document.getElementById(QUIT_BTN_ID).addEventListener('click', event => {
+      socket.send("quit");
+    });
+  });
+}());