Added map with home position / craft position / flight trail #490 (#613)

* added map ( craft pos, home pos, flight trail) * added multicolor flight trail fixed resizing * removed unused variable * added gitignore rules * refactor to resolve sonar issues * refactor to resolve sonar issues * refactor to resolve sonar issues
betaflight · Dec 1, 2022 · ddfadae · ddfadae
1 parent 25e39c6
commit ddfadae
Show file tree

Hide file tree

Showing 11 changed files with 567 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,7 @@ debug/
 release/
 
 # artefacts for Visual Studio Code
-/.vscode/
+/.vscode/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/css/main.css b/css/main.css
@@ -491,6 +491,7 @@ html.has-log .log-graph-config {
 
 #craftCanvas,
 #analyserCanvas,
+#mapContainer,
 #stickCanvas {
     position:absolute;
     top:0;
@@ -501,6 +502,7 @@ html.has-log .log-graph-config {
 
 html.has-craft #craftCanvas,
 html.has-analyser #analyserCanvas,
+html.has-map #mapContainer,
 html.has-sticks #stickCanvas {
 	display:block;
 }
@@ -513,6 +515,19 @@ html.has-analyser-fullscreen.has-analyser .analyser input:not(.onlyFullScreenExc
     z-index: 10;
 }
 
+/* This filters change the color of a black png image. For new colors check: https://codepen.io/sosuke/pen/Pjoqqp */
+.isBF #mapContainer .icon {
+    filter: invert(36%) sepia(28%) saturate(3957%) hue-rotate(28deg) brightness(93%) contrast(103%);
+}
+
+.isCF #mapContainer .icon {
+    filter: invert(28%) sepia(100%) saturate(2050%) hue-rotate(134deg) brightness(100%) contrast(104%);
+}
+
+.isINAV #mapContainer .icon {
+    filter: invert(14%) sepia(100%) saturate(4698%) hue-rotate(244deg) brightness(64%) contrast(130%);
+}
+
 .analyser:hover .non-shift #analyserResize {
     opacity: 1;
     height: auto;
@@ -606,7 +621,7 @@ html.has-analyser-fullscreen.has-analyser .analyser input:not(.onlyFullScreenExc
 	position: absolute;
 }
 
-.analyser {
+.analyser, .map-container {
 	position: absolute;
 }
 
@@ -774,6 +789,7 @@ html .view-analyser-fullscreen {
 
 html.has-analyser-sticks.isBF .view-analyser-sticks,
 html.has-analyser.isBF .view-analyser,
+html.has-map.isBF .view-map,
 html.has-table.isBF .view-table,
 html.has-sticks.isBF .view-sticks,
 html.has-craft.isBF .view-craft,
@@ -783,6 +799,7 @@ html:not(.video-hidden).isBF .view-video {
 
 html.has-analyser-sticks.isCF .view-analyser-sticks,
 html.has-analyser.isCF .view-analyser,
+html.has-map.isCF .view-map,
 html.has-table.isCF .view-table,
 html.has-sticks.isCF .view-sticks,
 html.has-craft.isCF .view-craft,
@@ -792,6 +809,7 @@ html:not(.video-hidden).isCF .view-video {
 
 html.has-analyser-sticks.isINAV .view-analyser-sticks,
 html.has-analyser.isINAV .view-analyser,
+html.has-map.isINAV .view-map,
 html.has-table.isINAV .view-table,
 html.has-sticks.isINAV .view-sticks,
 html.has-craft.isINAV .view-craft,
@@ -1205,6 +1223,11 @@ html:not(.has-log) #status-bar {
     display: none;
 }
 
+html:not(.has-gps) .view-map,
+html:not(.has-gps) .map-container {
+	display: none !important;
+}
+
 #status-bar .bookmark-1,
 #status-bar .bookmark-2,
 #status-bar .bookmark-3,

diff --git a/images/markers/craft.png b/images/markers/craft.png
diff --git a/images/markers/home.png b/images/markers/home.png
diff --git a/index.html b/index.html
@@ -16,8 +16,13 @@
     <link rel="stylesheet" href="css/header_dialog.css">
     <link rel="stylesheet" href="css/keys_dialog.css">
     <link rel="stylesheet" href="css/user_settings_dialog.css">
+    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
 
     <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
+    <script src="node_modules/leaflet/dist/leaflet.js"></script>
+    <script src="node_modules/leaflet-marker-rotation/src/rotatedMarker.js" type="module"></script>
+    <script src="node_modules/Leaflet.MultiOptionsPolyline/Leaflet.MultiOptionsPolyline.js"></script>
+
 </head>
 
 <body>
@@ -252,6 +257,11 @@ <h4>View</h4>
                                 <span class="pull-right">A</span>
                             </a>
                         </li>
+                        <li>
+                            <a href="#" id="auto-hide-menu" class="view-map auto-hide-menu" data-toggle="tooltip" title="View/hide map">
+                                <span class="glyphicon glyphicon-map-marker"></span> Map
+                            </a>
+                        </li>
                     </ul>
                 </div>
                 <div class="btn-group view-buttons-expanded" role="group">
@@ -285,6 +295,9 @@ <h4>Overlay</h4>
                         <button type="button" class="btn btn-default view-analyser" data-toggle="tooltip" title="View/hide analyser display">
                             <span class="glyphicon glyphicon-equalizer"></span>
                         </button>
+                        <button type="button" class="btn btn-default view-map" data-toggle="tooltip" title="View/hide map">
+                            <span class="glyphicon glyphicon-map-marker"></span>
+                        </button>
                     </div>
                 </div>
             </li>
@@ -490,6 +503,7 @@ <h4>Workspace</h4>
                         <option>100</option>
                     </datalist>
                 </div>
+                <div id="mapContainer" class="map-container"></div>
                 <canvas width="0" height="0" id="stickCanvas"></canvas>
                 <span class="log-open-legend-dialog glyphicon glyphicon-cog" data-toggle="tooltip" title="Show the legend"></span>
             </div>
@@ -2893,6 +2907,44 @@ <h4 class="modal-title">Advanced User Settings</h4>
                                     </table>
                                 </div>
                             </div>
+                            <div class="gui_box grey top-spacer map-settings">
+                                <div class="gui_box_titlebar">
+                                    <div class="spacer_box_title">Map Settings</div>
+                                </div>
+                                <div class="spacer_box">
+                                    <div>
+                                        <label class="option">ACT
+                                            <input class="map-trail-altitude-colored ios-switch" type="checkbox" />
+                                            <div>
+                                                <div></div>
+                                            </div>
+                                            <span>Use Altitude Colored Trail (slower at loading/changing logs)</span>
+                                        </label>
+                                    </div>
+                                    <table>
+                                        <tr>
+                                            <td>
+                                                <label>Position</label>
+                                            </td>
+                                            <td class="position">
+                                                <label>Top</label>
+                                                <input name="map-top" type="number" step="1" min="0" max="100" />
+                                                <p>%</p>
+                                            </td>
+                                            <td class="position">
+                                                <label>Left</label>
+                                                <input name="map-left" type="number" step="1" min="0" max="100" />
+                                                <p>%</p>
+                                            </td>
+                                            <td class="position">
+                                                <label>Size</label>
+                                                <input name="map-size" type="number" step="1" min="0" max="100" />
+                                                <p>%</p>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </div>
+                            </div>
                             <div class="gui_box grey top-spacer watermark-settings">
                                 <div class="gui_box_titlebar">
                                     <div class="spacer_box_title">Watermark Settings</div>
@@ -3112,6 +3164,7 @@ <h4 class="modal-title">Advanced User Settings</h4>
     <script src="js/configuration.js"></script>
     <script src="js/laptimer.js"></script>
     <script src="js/localization.js"></script>
+    <script src="js/graph_map.js"></script>
     <script src="js/main.js"></script>
     <script src="index.js"></script>
 

diff --git a/js/flightlog.js b/js/flightlog.js
@@ -1059,6 +1059,10 @@ function FlightLog(logData) {
 
         return true;
     };
+
+    this.hasGpsData = function() {
+        return this.getStats()?.frame?.G ? true : false;;
+    };
 }
 
 FlightLog.prototype.accRawToGs = function(value) {