Init commit
This commit is contained in:
227
src/index.js
Normal file
227
src/index.js
Normal file
@@ -0,0 +1,227 @@
|
||||
import mapboxgl from 'mapbox-gl';
|
||||
import $ from "jquery";
|
||||
import FlightIndicators from 'flight-indicators-js'
|
||||
import mqtt from 'mqtt/dist/mqtt';
|
||||
import RJSON from 'relaxed-json';
|
||||
import { RulerControl, StylesControl } from 'mapbox-gl-controls';
|
||||
const minimapQ = require('@aesqe/mapboxgl-minimap/mapboxgl-control-minimap')
|
||||
import MiniMap from "@aesqe/mapboxgl-minimap/mapboxgl-control-minimap.js"
|
||||
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container ID
|
||||
style: 'mapbox://styles/mapbox/satellite-streets-v9', // style URL
|
||||
center: [8.545564, 47.397974], // starting position [lng, lat]
|
||||
zoom: 13, // starting zoom
|
||||
projection: 'globe' // display the map as a 3D globe
|
||||
});
|
||||
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
|
||||
|
||||
map.on('style.load', () => {
|
||||
map.setFog({}); // Set the default atmosphere style
|
||||
document.onclick = hideMenu;
|
||||
});
|
||||
map.addControl(new RulerControl(), 'top-right');
|
||||
|
||||
let minimap = new MiniMap({
|
||||
center: [8.545564, 47.397974],
|
||||
zoom: 6,
|
||||
zoomLevels: [],
|
||||
togglePosition: 'topright'
|
||||
});
|
||||
map.addControl(minimap, 'top-right');
|
||||
|
||||
// with custom styles:
|
||||
map.addControl(new StylesControl({
|
||||
styles: [
|
||||
{
|
||||
label: 'ST',
|
||||
styleName: 'Mapbox Streets',
|
||||
styleUrl: 'mapbox://styles/mapbox/streets-v9',
|
||||
}, {
|
||||
label: 'SA',
|
||||
styleName: 'Satellite',
|
||||
styleUrl: 'mapbox://styles/mapbox/satellite-streets-v9',
|
||||
},
|
||||
],
|
||||
onChange: (style) => console.log(style),
|
||||
}), 'top-right');
|
||||
|
||||
function hideMenu() {
|
||||
console.log('hideMenu');
|
||||
document.getElementById("contextMenu")
|
||||
.style.display = "none"
|
||||
}
|
||||
|
||||
map.on('contextmenu', (e) => {
|
||||
console.log(e);
|
||||
|
||||
if (document.getElementById("contextMenu").style.display == "block") {
|
||||
hideMenu();
|
||||
} else {
|
||||
var menu = document.getElementById("contextMenu")
|
||||
menu.style.display = 'block';
|
||||
menu.style.left = e.point.x + "px";
|
||||
menu.style.top = e.point.y + "px";
|
||||
console.log(menu);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// create the popup
|
||||
const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(
|
||||
'<b>Командир:</b> Роман Валильйев'
|
||||
);
|
||||
|
||||
// create DOM element for the marker
|
||||
const el = document.createElement('div');
|
||||
el.id = 'marker';
|
||||
|
||||
const marker = new mapboxgl.Marker({
|
||||
color: "#FFFFFF",
|
||||
draggable: false,
|
||||
rotation: 90,
|
||||
element: document.getElementById("drone")
|
||||
}).setLngLat([37.9202856, 48.6063243])
|
||||
.setPopup(popup)
|
||||
.addTo(map);
|
||||
|
||||
|
||||
const attitudeElement = document.querySelector("#attitude");
|
||||
const attitude = new FlightIndicators(
|
||||
attitudeElement,
|
||||
FlightIndicators.TYPE_ATTITUDE,
|
||||
{ roll: 50, pitch: -20, size: 200, hideBox: true }
|
||||
);
|
||||
|
||||
const headingElement = document.querySelector("#heading")
|
||||
const heading = new FlightIndicators(
|
||||
headingElement,
|
||||
FlightIndicators.TYPE_HEADING,
|
||||
{ heading: 0, hideBox: true }
|
||||
);
|
||||
|
||||
|
||||
const options = {
|
||||
// Clean session
|
||||
clean: true,
|
||||
connectTimeout: 4000,
|
||||
// Auth
|
||||
clientId: 'emqx_test'
|
||||
}
|
||||
const client = mqtt.connect('ws://localhost:9001', options)
|
||||
client.on('connect', function () {
|
||||
console.log('Connected!')
|
||||
client.subscribe('a1/#', function (err) {
|
||||
if (!err) {
|
||||
console.log('Subscribed!');
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
client.on('message', function (topic, message) {
|
||||
let relaxedString = message.toString();
|
||||
try {
|
||||
let jsonString = RJSON.transform(relaxedString);
|
||||
let obj = JSON.parse(jsonString);
|
||||
//console.log(topic, obj);
|
||||
|
||||
if (topic == 'a1/ATTITUDE') {
|
||||
//console.log('ATTITUDE')
|
||||
attitude.setRoll(obj.roll * 100);
|
||||
attitude.setPitch(obj.pitch * 100);
|
||||
} else if (topic == 'a1/VFR_HUD') {
|
||||
//console.log('VFR_HUD');
|
||||
heading.setHeading(obj.heading);
|
||||
//altimeter.setAltitude(obj.alt / 3.2808399);
|
||||
//console.log(obj)
|
||||
marker.setRotation(obj.heading);
|
||||
//variometer.setVario(obj.groundspeed);
|
||||
}
|
||||
|
||||
if (topic == 'a1/SCALED_PRESSURE') {
|
||||
//console.log(obj.press_abs)
|
||||
//altimeter.setPressure(obj.press_abs);
|
||||
}
|
||||
|
||||
if (topic == 'a1/SYS_STATUS') {
|
||||
document.getElementById('batt').innerHTML = obj.battery_remaining
|
||||
//{onboard_control_sensors_present : 2418573356, onboard_control_sensors_enabled : 2418573324, onboard_control_sensors_health : 2418966575, load : 274, voltage_battery : 16199, current_battery : -100, battery_remaining : 100, drop_rate_comm : 0, errors_comm : 0, errors_count1 : 0, errors_count2 : 0, errors_count3 : 0, errors_count4 : 0, onboard_control_sensors_present_extended : 0, onboard_control_sensors_enabled_extended : 0, onboard_control_sensors_health_extended : 0}
|
||||
}
|
||||
|
||||
if (topic == 'a1/GPS_RAW_INT') {
|
||||
document.getElementById('satellites_visible').innerHTML = obj.satellites_visible;
|
||||
//{time_usec : 3834800000, fix_type : 3, lat : 473968579, lon : 85437830, alt : 497973, eph : 0, epv : 0, vel : 2, cog : 13030, satellites_visible : 10, alt_ellipsoid : 497973, h_acc : 1000, v_acc : 1000, vel_acc : 250, hdg_acc : 0, yaw : 0}
|
||||
}
|
||||
|
||||
if (topic == 'a1/GLOBAL_POSITION_INT') {
|
||||
//console.log('GLOBAL_POSITION_INT')
|
||||
marker.setLngLat([obj.lon / 10000000, obj.lat / 10000000]);
|
||||
}
|
||||
|
||||
if (topic == 'a1/HEARTBEAT') {
|
||||
//{type : 2, autopilot : 12, base_mode : 29, custom_mode : 50593792, system_status : 3, mavlink_version : 3}
|
||||
|
||||
let statDOM = document.getElementById('status');
|
||||
let status = 'unknown';
|
||||
switch (obj.system_status) {
|
||||
case 0:
|
||||
status = 'unknown';
|
||||
break;
|
||||
case 1:
|
||||
status = 'boot';
|
||||
break;
|
||||
case 2:
|
||||
status = 'calibrating';
|
||||
break;
|
||||
case 3:
|
||||
status = 'standby';
|
||||
break;
|
||||
case 4:
|
||||
status = 'active';
|
||||
break;
|
||||
case 5:
|
||||
status = 'CRITICAL';
|
||||
break;
|
||||
case 6:
|
||||
status = 'EMERGENCY';
|
||||
break;
|
||||
case 7:
|
||||
status = 'poweroff';
|
||||
break;
|
||||
case 8:
|
||||
status = 'terminating';
|
||||
break;
|
||||
}
|
||||
statDOM.innerHTML = status;
|
||||
|
||||
if (obj.type == 2) { // https://mavlink.io/en/messages/common.html#MAV_TYPE
|
||||
//https://mavlink.io/en/messages/common.html#MAV_MODE_FLAG
|
||||
let MAV_MODE_FLAG_SAFETY_ARMED = obj.base_mode & 128;
|
||||
let MAV_MODE_FLAG_MANUAL_INPUT_ENABLED = obj.base_mode & 64; //false
|
||||
let MAV_MODE_FLAG_HIL_ENABLED = obj.base_mode & 32; //false
|
||||
let MAV_MODE_FLAG_STABILIZE_ENABLED = obj.base_mode & 16;
|
||||
let MAV_MODE_FLAG_GUIDED_ENABLED = obj.base_mode & 8;
|
||||
let MAV_MODE_FLAG_AUTO_ENABLED = obj.base_mode & 4;
|
||||
let MAV_MODE_FLAG_TEST_ENABLED = obj.base_mode & 2; //false
|
||||
let MAV_MODE_FLAG_CUSTOM_MODE_ENABLED = obj.base_mode & 1;
|
||||
|
||||
if (MAV_MODE_FLAG_SAFETY_ARMED === 128) {
|
||||
document.getElementById('armed').innerHTML = 'true';
|
||||
} else {
|
||||
document.getElementById('armed').innerHTML = 'false';
|
||||
}
|
||||
|
||||
console.log(MAV_MODE_FLAG_SAFETY_ARMED, MAV_MODE_FLAG_MANUAL_INPUT_ENABLED, MAV_MODE_FLAG_HIL_ENABLED, MAV_MODE_FLAG_STABILIZE_ENABLED, MAV_MODE_FLAG_GUIDED_ENABLED, MAV_MODE_FLAG_AUTO_ENABLED, MAV_MODE_FLAG_TEST_ENABLED, MAV_MODE_FLAG_CUSTOM_MODE_ENABLED);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
console.log(topic);
|
||||
console.log(relaxedString)
|
||||
}
|
||||
|
||||
//client.end()
|
||||
})
|
||||
Reference in New Issue
Block a user