Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/iNavFlight/inav-configurator.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPawel Spychalski (DzikuVx) <pspychalski@gmail.com>2018-11-10 22:32:03 +0300
committerPawel Spychalski (DzikuVx) <pspychalski@gmail.com>2018-11-10 22:32:03 +0300
commitaa904668473862ccf6208c71aa3d70064e731372 (patch)
treea46ba1612ec5f3a8fb3aca2f4d909ef97d8e7420
parent655b76233039904cf218627411fceca5a8fde68e (diff)
GPS tab refactoring
Diffstat
-rw-r--r--gulpfile.js14
-rwxr-xr-xmain.html2
-rw-r--r--src/css/tabs/gps.css8
-rw-r--r--src/css/tabs/mission_planer.css2
-rw-r--r--tabs/gps.html8
-rw-r--r--tabs/gps.js107
-rw-r--r--tabs/map.html106
7 files changed, 92 insertions, 155 deletions
diff --git a/gulpfile.js b/gulpfile.js
index e39c64ca..01d5fed4 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -48,7 +48,8 @@ sources.css = [
'./src/css/font-awesome/css/font-awesome.css',
'./src/css/dropdown-lists/css/style_lists.css',
'./js/libraries/switchery/switchery.css',
- './js/libraries/jbox/jBox.css'
+ './js/libraries/jbox/jBox.css',
+ './node_modules/openlayers/dist/ol.css'
];
sources.js = [
@@ -106,14 +107,7 @@ sources.js = [
'./js/msp_balanced_interval.js',
'./tabs/advanced_tuning.js',
'./js/peripherals.js',
- './js/appUpdater.js'
-];
-
-sources.mapCss = [
- './node_modules/openlayers/dist/ol.css'
-];
-
-sources.mapJs = [
+ './js/appUpdater.js',
'./node_modules/openlayers/dist/ol.js'
];
@@ -142,8 +136,6 @@ sources.hexParserJs = [
var output = {
css: 'styles.css',
js: 'script.js',
- mapCss: 'map.css',
- mapJs: 'map.js',
receiverCss: 'receiver-msp.css',
receiverJs: 'receiver-msp.js',
debugTraceJs: 'debug-trace.js',
diff --git a/main.html b/main.html
index 5cc80b9b..a31d2e50 100755
--- a/main.html
+++ b/main.html
@@ -4,8 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="./build/styles.css" media="all"/>
<script type="text/javascript" src="./build/script.js"></script>
- <link type="text/css" rel="stylesheet" href="./build/map.css" media="all"/>
- <script type="text/javascript" src="./build/map.js"></script>
<title></title>
</head>
<body>
diff --git a/src/css/tabs/gps.css b/src/css/tabs/gps.css
index 94bc6ead..daf9d3f4 100644
--- a/src/css/tabs/gps.css
+++ b/src/css/tabs/gps.css
@@ -34,10 +34,10 @@
margin-top: 30%;
}
-.tab-gps #loadmap {
+/* .tab-gps #loadmap {
margin-top: 0;
display: none;
-}
+} */
.tab-gps #connect a {
font-weight: bold;
@@ -95,7 +95,7 @@
border-top-right-radius: 0;
}
-.tab-gps iframe {
+#gps-map {
height: 400px;
width: 100%;
float: left;
@@ -118,7 +118,7 @@ progress[value]::-webkit-progress-value {
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
- .tab-gps iframe {
+ #gps-map {
height: 347px;
width: 100%;
float: left;
diff --git a/src/css/tabs/mission_planer.css b/src/css/tabs/mission_planer.css
index 351448d3..c61acc4a 100644
--- a/src/css/tabs/mission_planer.css
+++ b/src/css/tabs/mission_planer.css
@@ -66,9 +66,7 @@
.tab-mission-control .content_wrapper {
display: flex;
- /*height: 150px;*/
height: 90%;
- /*width: 75%;*/
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
diff --git a/tabs/gps.html b/tabs/gps.html
index a8cb21da..a4abd4b4 100644
--- a/tabs/gps.html
+++ b/tabs/gps.html
@@ -88,14 +88,10 @@
<div class="cf_column threefourth_left">
<div class="gui_box grey gps_map">
<div class="gui_box_titlebar" style="margin-bottom: 0;">
- <div class="spacer_box_title" data-i18n="gpsMapHead"></div>
+ <div class="spacer_box_title" data-i18n="gpsMapHead"></div>
</div>
- <div id="waiting" >
- <div class="info" data-i18n="gpsMapMessage2"></span>
- </div>
- </div>
<div id="loadmap">
- <iframe src="tabs/map.html" id="map"></iframe>
+ <div id="gps-map"></div>
</div>
</div>
diff --git a/tabs/gps.js b/tabs/gps.js
index b64e996a..b2bf028b 100644
--- a/tabs/gps.js
+++ b/tabs/gps.js
@@ -14,9 +14,46 @@ TABS.gps.initialize = function (callback) {
load_html();
+ let cursorInitialized = false;
+ let iconStyle;
+ let mapHandler;
+ let iconGeometry;
+ let iconFeature;
+
function process_html() {
localize();
+ let mapView = new ol.View({
+ center: ol.proj.fromLonLat([0, 0]),
+ zoom: 15
+ });
+
+ let mapLayer;
+
+ if (globalSettings.mapProviderType == 'bing') {
+ mapLayer = new ol.source.BingMaps({
+ key: globalSettings.mapApiKey,
+ imagerySet: 'AerialWithLabels',
+ maxZoom: 19
+ });
+ } else {
+ mapLayer = new ol.source.OSM();
+ }
+
+ mapHandler = new ol.Map({
+ target: document.getElementById('gps-map'),
+ layers: [
+ new ol.layer.Tile({
+ source: mapLayer
+ })
+ ],
+ view: mapView
+ });
+
+ let center = ol.proj.fromLonLat([0, 0]);
+ mapView.setCenter(center);
+ mapView.setZoom(2);
+
function get_raw_gps_data() {
MSP.send_message(MSPCodes.MSP_RAW_GPS, false, false, get_comp_gps_data);
}
@@ -31,23 +68,16 @@ TABS.gps.initialize = function (callback) {
function update_ui() {
- if (GPS_DATA.fix > 0) {
- $('#loadmap').show();
- $('#waiting').hide();
- } else {
- $('#loadmap').hide();
- $('#waiting').show();
- }
-
- var lat = GPS_DATA.lat / 10000000;
- var lon = GPS_DATA.lon / 10000000;
+ let lat = GPS_DATA.lat / 10000000;
+ let lon = GPS_DATA.lon / 10000000;
- var gpsFixType = chrome.i18n.getMessage('gpsFixNone');
- if (GPS_DATA.fix >= 2)
+ let gpsFixType = chrome.i18n.getMessage('gpsFixNone');
+ if (GPS_DATA.fix >= 2) {
gpsFixType = chrome.i18n.getMessage('gpsFix3D');
- else if (GPS_DATA.fix >= 1)
+ } else if (GPS_DATA.fix >= 1) {
gpsFixType = chrome.i18n.getMessage('gpsFix2D');
-
+ }
+
$('.GPS_info td.fix').html(gpsFixType);
$('.GPS_info td.alt').text(GPS_DATA.alt + ' m');
$('.GPS_info td.lat').text(lat.toFixed(4) + ' deg');
@@ -56,7 +86,7 @@ TABS.gps.initialize = function (callback) {
$('.GPS_info td.sats').text(GPS_DATA.numSat);
$('.GPS_info td.distToHome').text(GPS_DATA.distanceToHome + ' m');
- var gpsRate = 0;
+ let gpsRate = 0;
if (GPS_DATA.messageDt > 0) {
gpsRate = 1000 / GPS_DATA.messageDt;
}
@@ -69,15 +99,44 @@ TABS.gps.initialize = function (callback) {
$('.GPS_stat td.epv').text((GPS_DATA.epv / 100).toFixed(2) + ' m');
$('.GPS_stat td.hdop').text((GPS_DATA.hdop / 100).toFixed(2));
- var message = {
- action: 'update',
- lat: lat,
- lon: lon
- };
-
- var frame = document.getElementById('map');
-
- frame.contentWindow.postMessage(message, '*');
+ //Update map
+ if (GPS_DATA.fix >= 2) {
+
+ if (!cursorInitialized) {
+ cursorInitialized = true;
+
+ iconStyle = new ol.style.Style({
+ image: new ol.style.Icon(({
+ anchor: [0.5, 1],
+ opacity: 1,
+ scale: 0.5,
+ src: '../images/icons/cf_icon_position.png'
+ }))
+ });
+
+ let currentPositionLayer;
+ iconGeometry = new ol.geom.Point(ol.proj.fromLonLat([0, 0]));
+ iconFeature = new ol.Feature({
+ geometry: iconGeometry
+ });
+
+ iconFeature.setStyle(iconStyle);
+
+ let vectorSource = new ol.source.Vector({
+ features: [iconFeature]
+ });
+ currentPositionLayer = new ol.layer.Vector({
+ source: vectorSource
+ });
+
+ mapHandler.addLayer(currentPositionLayer);
+ }
+
+ let center = ol.proj.fromLonLat([lon, lat]);
+ mapView.setCenter(center);
+ mapView.setZoom(14);
+ iconGeometry.setCoordinates(center);
+ }
}
/*
diff --git a/tabs/map.html b/tabs/map.html
deleted file mode 100644
index b1637d55..00000000
--- a/tabs/map.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <title>Asynchronous Loading</title>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
- <meta charset="utf-8">
- <link type="text/css" rel="stylesheet" href="../build/map.css" media="all"/>
- <script type="text/javascript" src="../build/map.js"></script>
-
- <style>
- html, body, #map-canvas {
- height: 100%;
- margin: 0;
- padding: 0;
- }
- </style>
- <script>
- window.addEventListener('message', function (e) {
- try {
- switch (e.data.action) {
- case 'update':
- var center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
-
- mapView.setCenter(center);
- iconGeometry.setCoordinates(center);
- break;
-
- }
- } catch (e) {
- console.log(e);
- }
- });
- </script>
-</head>
-<body>
- <div id="map-canvas"></div>
-
- <script type="text/javascript">
-
- var mapView = new ol.View({
- center: ol.proj.fromLonLat([0, 0]),
- zoom: 15
- });
-
- let globalSettings = {
- mapProviderType: null,
- mapApiKey: null
- };
-
- chrome.storage.local.get('map_provider_type', function (result) {
- if (typeof result.map_provider_type === 'undefined') {
- result.map_provider_type = 'osm';
- }
- globalSettings.mapProviderType = result.map_provider_type;
- });
- chrome.storage.local.get('map_api_key', function (result) {
- if (typeof result.map_api_key === 'undefined') {
- result.map_api_key = '';
- }
- globalSettings.mapApiKey = result.map_api_key;
- });
- console.log(globalSettings);
- var mapHandler = new ol.Map({
- target: 'map-canvas',
- layers: [
- new ol.layer.Tile({
- // source: new ol.source.OSM()
- source: new ol.source.BingMaps({
- key: globalSettings.mapApiKey,
- imagerySet: 'AerialWithLabels',
- maxZoom: 19
- })
- })
- ],
- view: mapView
- });
-
- var iconStyle = new ol.style.Style({
- image: new ol.style.Icon(({
- anchor: [0.5, 1],
- opacity: 1,
- scale: 0.5,
- src: '../images/icons/cf_icon_position.png'
- }))
- });
-
- var currentPositionLayer;
- var iconGeometry = new ol.geom.Point(ol.proj.fromLonLat([0, 0]));
- var iconFeature = new ol.Feature({
- geometry: iconGeometry
- });
-
- iconFeature.setStyle(iconStyle);
-
- var vectorSource = new ol.source.Vector({
- features: [iconFeature]
- });
- currentPositionLayer = new ol.layer.Vector({
- source: vectorSource
- });
-
- mapHandler.addLayer(currentPositionLayer);
-
- </script>
-
-</body> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-15 21:34:20 +0300