From 36ae3ac7bffe275e30024ff26f9f594850826702 Mon Sep 17 00:00:00 2001 From: Miralem Date: Fri, 5 Jun 2020 20:21:19 +0200 Subject: added label that converts cm into m and shows the value --- tabs/mission_control.html | 2 +- tabs/mission_control.js | 109 +++++++++++++++++++++++++--------------------- 2 files changed, 61 insertions(+), 50 deletions(-) (limited to 'tabs') diff --git a/tabs/mission_control.html b/tabs/mission_control.html index 92ef77c3..0a9b6f3a 100644 --- a/tabs/mission_control.html +++ b/tabs/mission_control.html @@ -95,7 +95,7 @@
- +
diff --git a/tabs/mission_control.js b/tabs/mission_control.js index 9f474f52..e4656843 100644 --- a/tabs/mission_control.js +++ b/tabs/mission_control.js @@ -19,7 +19,7 @@ MWNP.WPTYPE = { TABS.mission_control = {}; TABS.mission_control.isYmapLoad = false; TABS.mission_control.initialize = function (callback) { - + let cursorInitialized = false; let curPosStyle; let curPosGeo; @@ -86,7 +86,7 @@ TABS.mission_control.initialize = function (callback) { $('#notLoadMap').show(); } localize(); - + function get_raw_gps_data() { MSP.send_message(MSPCodes.MSP_RAW_GPS, false, false, get_comp_gps_data); } @@ -94,28 +94,28 @@ TABS.mission_control.initialize = function (callback) { function get_comp_gps_data() { MSP.send_message(MSPCodes.MSP_COMP_GPS, false, false, get_altitude_data); } - + function get_altitude_data() { MSP.send_message(MSPCodes.MSP_ALTITUDE, false, false, get_attitude_data); - + } + function get_attitude_data() { MSP.send_message(MSPCodes.MSP_ATTITUDE, false, false, update_gpsTrack); } - function update_gpsTrack() { let lat = GPS_DATA.lat / 10000000; let lon = GPS_DATA.lon / 10000000; - + //Update map if (GPS_DATA.fix >= 2) { - + if (!cursorInitialized) { cursorInitialized = true; - - + + ///////////////////////////////////// //create layer for current position curPosStyle = new ol.style.Style({ @@ -126,23 +126,23 @@ TABS.mission_control.initialize = function (callback) { src: '../images/icons/icon_mission_airplane.png' })) }); - + let currentPositionLayer; curPosGeo = new ol.geom.Point(ol.proj.fromLonLat([lon, lat])); - + let curPosFeature = new ol.Feature({ geometry: curPosGeo }); - + curPosFeature.setStyle(curPosStyle); - + let vectorSource = new ol.source.Vector({ features: [curPosFeature] }); currentPositionLayer = new ol.layer.Vector({ source: vectorSource }); - + /////////////////////////// //create layer for RTH Marker let rthStyle = new ol.style.Style({ @@ -153,53 +153,53 @@ TABS.mission_control.initialize = function (callback) { src: '../images/icons/cf_icon_RTH.png' })) }); - + rthGeo = new ol.geom.Point(ol.proj.fromLonLat([90, 0])); - + let rthFeature = new ol.Feature({ geometry: rthGeo }); - + rthFeature.setStyle(rthStyle); - + let rthVector = new ol.source.Vector({ features: [rthFeature] }); let rthLayer = new ol.layer.Vector({ source: rthVector }); - - + + ////////////////////////////// //create layer for bread crumbs breadCrumbLS = new ol.geom.LineString([ol.proj.fromLonLat([lon, lat]), ol.proj.fromLonLat([lon, lat])]); - + breadCrumbStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ffcc33', width: 6 }) }); - + breadCrumbFeature = new ol.Feature({ geometry: breadCrumbLS }); - + breadCrumbFeature.setStyle(breadCrumbStyle); - + breadCrumbSource = new ol.source.Vector({ features: [breadCrumbFeature] }); - + breadCrumbVector = new ol.layer.Vector({ source: breadCrumbSource }); - - + + ///////////////////////////// //create layer for heading, alt, groundspeed textGeom = new ol.geom.Point([0,0]); - + textStyle = new ol.style.Style({ text: new ol.style.Text({ font: 'bold 35px Calibri,sans-serif', @@ -214,32 +214,32 @@ TABS.mission_control.initialize = function (callback) { text: 'H: XXX\nAlt: XXXm\nSpeed: XXXcm/s' }) }); - - + + textFeature = new ol.Feature({ geometry: textGeom }); - + textFeature.setStyle(textStyle); - + var textSource = new ol.source.Vector({ features: [textFeature] }); - + var textVector = new ol.layer.Vector({ source: textSource }); - + map.addLayer(rthLayer); map.addLayer(breadCrumbVector); map.addLayer(currentPositionLayer); map.addControl(textVector); - + } - + let gpsPos = ol.proj.fromLonLat([lon, lat]); curPosGeo.setCoordinates(gpsPos); - + breadCrumbLS.appendCoordinate(gpsPos); var coords = breadCrumbLS.getCoordinates(); @@ -248,9 +248,9 @@ TABS.mission_control.initialize = function (callback) { coords.shift(); breadCrumbLS.setCoordinates(coords); } - + curPosStyle.getImage().setRotation((SENSOR_DATA.kinematics[2]/360.0) * 6.28318); - + //update data text textGeom.setCoordinates(map.getCoordinateFromPixel([0,0])); let tmpText = textStyle.getText(); @@ -259,8 +259,8 @@ TABS.mission_control.initialize = function (callback) { '\nAlt: ' + SENSOR_DATA.altitude + 'm\nSpeed: ' + GPS_DATA.speed + 'cm/s\n' + 'Dist: ' + GPS_DATA.distanceToHome + 'm'); - - + + //update RTH every 5th GPS update since it really shouldn't change if(rthUpdateInterval >= 5) { @@ -274,7 +274,7 @@ TABS.mission_control.initialize = function (callback) { rthUpdateInterval++; } } - + /* * enable data pulling if not offline * Refreshing data at 5Hz... Could slow this down if we have performance issues @@ -287,11 +287,11 @@ TABS.mission_control.initialize = function (callback) { update_gpsTrack(); return; } - + if (helper.mspQueue.shouldDrop()) { return; } - + get_raw_gps_data(); }); } @@ -480,6 +480,10 @@ TABS.mission_control.initialize = function (callback) { }; ol.inherits(app.Drag, ol.interaction.Pointer); + app.ConvertCentimetersToMeters = function (val) { + return parseInt(val) / 100; + }; + /** * @constructor * @extends {ol.control.Control} @@ -678,12 +682,14 @@ TABS.mission_control.initialize = function (callback) { if (markers[i] == tempMarker) { selectedMarker = tempMarker; - + var geometry = selectedFeature.getGeometry(); var coord = ol.proj.toLonLat(geometry.getCoordinates()); - + selectedFeature.setStyle(getPointIcon(true)); - + + let altitudeMeters = app.ConvertCentimetersToMeters(selectedMarker.alt); + $('#altitudeInMeters').text(` ${altitudeMeters}m`); $('#pointLon').val(Math.round(coord[0] * 10000000) / 10000000); $('#pointLat').val(Math.round(coord[1] * 10000000) / 10000000); $('#pointAlt').val(selectedMarker.alt); @@ -718,6 +724,11 @@ TABS.mission_control.initialize = function (callback) { map.width_ = width; map.height_ = height; }, 200); + $('#pointAlt').keyup(function(){ + let altitudeMeters = app.ConvertCentimetersToMeters($(this).val()); + $('#altitudeInMeters').text(` ${altitudeMeters}m`); + }); + $('#removeAllPoints').on('click', function () { if (markers.length && confirm(chrome.i18n.getMessage('confirm_delete_all_points'))) { removeAllPoints(); @@ -1113,8 +1124,8 @@ TABS.mission_control.initialize = function (callback) { $('#saveMissionButton').removeClass('disabled'); } - - + + }; TABS.mission_control.cleanup = function (callback) { -- cgit v1.2.3