Mavlink 3D-Map

This tool receives navigation information via MAVLINK, and display vehicles in 3D environment using three.js .

The tool can display multiple view ports, each one has a world camera besides all cameras attached to vehicles. so you can monitor from multiple views at the same time.

Feature

• Reads vehicle location and orientation via mavlink.
• Display vehicles in 3D Map.
• Add cameras to vehicles and allows fpv: P & O buttons used to switch between cameras. If there is SITL connected to the map then it will have its own camera and you can switch to it using P & W. then you can control it using W, S , A , D. You can press R to reset camera orientation.

App Structure

The application has two parts:

• Website that runs and uses websockets.
• UDP2WebSocket this is a nodejs app that receives udp packets from SITL and send equivelant data via websocket to Website.

Mavlink 3D-Map

This tool receives navigation information via MAVLINK, and display vehicles in 3D environment using three.js .

The tool can display multiple view ports, each one has a world camera besides all cameras attached to vehicles. so you can monitor from multiple views at the same time.

Feature

• Reads vehicle location and orientation via mavlink.
• Display vehicles in 3D Map.
• Add cameras to vehicles and allows fpv.

App Structure

The application has three parts:

• Website that runs and uses websockets.
• UDP2WebSocket this is a nodejs app that receives udp packets from SITL and send equivelant data via websocket to Website.

###Example Running two vehicles "Quad & Plane"

####Plane

python3 ~/TDisk/out_gits/ardupilot/Tools/autotest/sim_vehicle.py -j4 -v ArduPlane -M --map --console --instance 80 --out=udpout:127.0.0.1:14550 --out=udpout:192.168.1.139:16450

####Quad

python3 ~/TDisk/out_gits/ardupilot/Tools/autotest/sim_vehicle.py -j4 -v ArduCopter -M --map --console --instance 70 --out=udpout:127.0.0.1:16450 --out=udpout:192.168.1.139:14450 --add-param-file=./quadPlus_2.parm

quadPlaus_2.param is a parameter file that specifies ID of the vehicle so that the system knows it is another vehicle.

QuadPlus_2.param

SYSID_THISMAV 2 FRAME_CLASS 1.000000 FRAME_TYPE 0.000000

instance specified to run SITL on different ports.

Drone:

![Drone](./images/screen6.png "Drone)

Now run websocket:

node udp2websocket.js

Run Website

cd static http-server -c0

http://127.0.0.1:9080/index_4w.html or http://127.0.0.1:9080/index_4wRealMap.html

for VTOL you can add http://127.0.0.1:9080/index_4w.html?vtol

http://127.0.0.1:9080/index_4w.html?vtol

That is all ... you should be able to see vehicles.

You can define your own extra environment robots and objects.

Have fun !