Update of Telemetry Dashboard for multiple vehicle management

[izzy-barr]

Hello - I have made updates to Telemetry Dashboard for handling multiple vehicles (with the primary goal of being able to manage drone swarms or multiple vehicles). This was the main part of my MEng dissertation project at Durham University: "Low Cost Drone Swarm Management" and I believe pulling it back to the main branch is an essential step in growing drone swarms in the ArduPilot environment, as my research highlighted. I'm aware that there are limitation to developing swarms at a low cost, but this aims to make it more accessible and the development of Telemetry Dashboard is not just for swarm management, as it benefits any fleet size including one vehicle, which it was originally designed for. I hope with the development of this WebTool, it can be used more widely with the added features of the vehicle class, Add/ Remove/ Connect/ Disconnect buttons, Local & Primary Vehicle Selectors, the Vehicle Info Pop-up, vehicle colour and icons according to vehicle type.

The overarching additions in this PR are as follows, in the Telemetry Dashboard folder:

• Default_Layout.json -> changed layout for two vehicles (although all add/remove/copy widget logic still holds, so very much customisable still for the user), changed sandbox scripts with same edits made as in the individual .json files (more details below)
• index.html -> added Vehicle.js script, updated Connection Tip template for multiple vehicles
• ReadMe.md -> updated to outline new features
• TelemetryDashboard.js -> added new UI and attached logic in Connection Tip with Add/Remove/Connect/Disconnect buttons, WebSocket & Name inputs and Primary Vehicle Selector which updates according to connected WebSockets, assigns unique ID for each input to track vehicles and their messages across the dashboard
• Vehicle.js -> outlines vehicle object, handles WebSockets etc, a lot relocated from TelemetryDashboard.js, tags its messages with msg._vehicleID for comparison in selection

In TelemetryDashboard/ Widgets folder:

• Base_Class.js -> added local vehicle selector for each content-showing widget (Attitude, Graph, Map, MAVLink_Inspector, Messages, Stats, Value), allows multi-select for Graph & Map widgets, gets connected vehicles from vehicleMap and updates lists, handles primary vehicle selected (fills all widgets with that vehicle) and vehicle disconnect (removing widget content if vehicle selected)
• SandBox.html -> added Vehicle Info Popup template and vehicle icon templates used in Map widget, changed border colour to be that of vehicle colour if vehicle selected in widget (defaults back to grey if multiple or none selected)

In TelemetryDashboard/ SandBox Widgets folder:

• Attitude.json, Messages.json, Value.json -> added selected vehicle variable and listens for disconnect/deselect to remove vehicle content from widget - done for all widgets below too
• Graph.json -> creates new plot line for each vehicle, moving plot_data and vehicle_data into a function, changed colour & label of plot to vehicle's colour & user-inputted name
• Map.json -> loads tippy and other related scripts for Vehicle Info Popup, identifies vehicle type and assigns icon and vehicle colour accordingly, creates Vehicle Info Popup only once but refreshes info shown depending on vehicle clicked (shows vehicle name, WebSocket, coordinates, colour which can be changed here in realtime, the dormant script command feature which just prints to the console, and MAVLink Inspector), changed id to msg._vehicleID so independent of sysID, altered MAVLink Inspector to fit in Vehicle Info Pop-up (still its own widget too)
• MAVLink_Inspector.json -> changed id to msg._vehicleID so independent of sysID
• Stats.json -> added handle_options function

Additionally updated blurb in Dev/ index.html and images/ TelemetryDashboard_icon.png for a new image.

A question you may be asking is why not use sysID for message tagging? The answer is that using ._vehicleID, the unique vehicle object property, it is independent of sysID, which is ultimately user-set and if there are accidentally two vehicles in the dashboard with the same sysID, the messages cannot be filtered correctly and end up with a concatenation effect. This was accidentally done during testing proving the need.

This has been tested with SITL on a single device (single vehicle, multi-vehicle and standard swarm (ie Follow Mode)), in virtual machines (single vehicle, multi-vehicle, standard swarm and custom swarm scripts) and using two real drones (custom swarm scripts). I've also tested it on Ubuntu, Windows and macOS with Firefox, Edge & Chrome (Safari is not compatible).

There are two known bugs in the system which inconvenience the user slightly, rather than being harmful to the system. These are: the Vehicle Info Pop-up tree branch expanding beyond the widget; and the plots not removing on deselect in the Graphs. I hope to continue working on these after the conclusion of my Finals exams.

To see demonstrations of the new dashboard working, please see Video Testing.

I have left in //IB comments where I have made changes in the .json files specifically in the SandBox scripts to make it easier to identify what I've added, but have removed them in the other scripts as their layout makes it easier to identify what has been changed. If there are any queries, I'd be happy to answer them. And apologies this ended up quite a large PR - I tried splitting it down but the files are too closely dependent on one another.

I hope you like it and many thanks, Izzy