Add RAW MAVLink support

package.json

@@ -52,6 +52,7 @@
     "leaflet": "1.9.3",
     "localforage": "^1.10.0",
     "mathjs": "^13.0.3",
+    "mavlink-browser": "git+https://github.com/williangalvani/mavlink-browser.git#cockpit_updates",
     "pinia": "^2.0.13",
     "roboto-fontface": "*",
     "semver": "^7.5.4",

src/libs/connection/websocket-connection.ts

@@ -1,3 +1,5 @@
+import { MAVLink20Processor } from 'mavlink-browser'
+
 import * as Protocol from '@/libs/vehicle/protocol/protocol'
 
 import * as Connection from './connection'
@@ -9,15 +11,18 @@ export class WebSocketConnection extends Connection.Abstract {
   _socket: WebSocket
   private _textEncoder = new TextEncoder()
   private _textDecoder = new TextDecoder()
-
+  private mavlinkParser = new MAVLink20Processor()
   /**
    * Websocket constructor
    * @param  {Connection.URI} uri
    * @param  {Protocol.Type} vehicleProtocol
    */
   constructor(uri: Connection.URI, vehicleProtocol: Protocol.Type) {
     super(uri, vehicleProtocol)
-
+    this.mavlinkParser.on('message', (message: any) => {
+      const data = this._textEncoder.encode(this.mavlink2restfy(message))
+      this.onRead.emit_value(data)
+    })
     this._socket = this.createSocket(uri)
   }
 
@@ -72,7 +77,13 @@ export class WebSocketConnection extends Connection.Abstract {
     // We need to have the same abstraction for all onRead
     socket.onmessage = (message: MessageEvent) => {
       try {
-        this.onRead.emit_value(this._textEncoder.encode(message.data))
+        if (String.fromCharCode(message.data[0]) == '{') {
+          this.onRead.emit_value(this._textEncoder.encode(message.data))
+        } else {
+          new Response(message.data).arrayBuffer().then((buffer) => {
+            this.mavlinkParser.parseBuffer(new Uint8Array(buffer))
+          })
+        }
       } catch (error) {
         console.error('Error reading websocket message: ', error)
       }
@@ -84,4 +95,13 @@ export class WebSocketConnection extends Connection.Abstract {
     }
     return socket
   }
+
+  /**
+   *
+   * @param {any} message a "raw" MAVLink message as it comes from Mavlink20Processor
+   * @returns {string} a MAVLink2Rest-like stringified json object
+   */
+  mavlink2restfy(message): any {
+    return JSON.stringify(this.mavlinkParser.toMavlink2RestV1Format(message))
+  }
 }