Skip to content

Commit ddfadae

Browse files
bonchanbonchan
authored
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
1 parent 25e39c6 commit ddfadae

File tree

11 files changed

+567
-9
lines changed

11 files changed

+567
-9
lines changed

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,7 @@ debug/
1313
release/
1414

1515
# artefacts for Visual Studio Code
16-
/.vscode/
16+
/.vscode/
17+
npm-debug.log*
18+
yarn-debug.log*
19+
yarn-error.log*

‎css/main.css‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -491,6 +491,7 @@ html.has-log .log-graph-config {
491491

492492
#craftCanvas,
493493
#analyserCanvas,
494+
#mapContainer,
494495
#stickCanvas {
495496
position:absolute;
496497
top:0;
@@ -501,6 +502,7 @@ html.has-log .log-graph-config {
501502

502503
html.has-craft #craftCanvas,
503504
html.has-analyser #analyserCanvas,
505+
html.has-map #mapContainer,
504506
html.has-sticks #stickCanvas {
505507
display:block;
506508
}
@@ -513,6 +515,19 @@ html.has-analyser-fullscreen.has-analyser .analyser input:not(.onlyFullScreenExc
513515
z-index: 10;
514516
}
515517

518+
/* This filters change the color of a black png image. For new colors check: https://codepen.io/sosuke/pen/Pjoqqp */
519+
.isBF #mapContainer .icon {
520+
filter: invert(36%) sepia(28%) saturate(3957%) hue-rotate(28deg) brightness(93%) contrast(103%);
521+
}
522+
523+
.isCF #mapContainer .icon {
524+
filter: invert(28%) sepia(100%) saturate(2050%) hue-rotate(134deg) brightness(100%) contrast(104%);
525+
}
526+
527+
.isINAV #mapContainer .icon {
528+
filter: invert(14%) sepia(100%) saturate(4698%) hue-rotate(244deg) brightness(64%) contrast(130%);
529+
}
530+
516531
.analyser:hover .non-shift #analyserResize {
517532
opacity: 1;
518533
height: auto;
@@ -606,7 +621,7 @@ html.has-analyser-fullscreen.has-analyser .analyser input:not(.onlyFullScreenExc
606621
position: absolute;
607622
}
608623

609-
.analyser {
624+
.analyser, .map-container {
610625
position: absolute;
611626
}
612627

@@ -774,6 +789,7 @@ html .view-analyser-fullscreen {
774789

775790
html.has-analyser-sticks.isBF .view-analyser-sticks,
776791
html.has-analyser.isBF .view-analyser,
792+
html.has-map.isBF .view-map,
777793
html.has-table.isBF .view-table,
778794
html.has-sticks.isBF .view-sticks,
779795
html.has-craft.isBF .view-craft,
@@ -783,6 +799,7 @@ html:not(.video-hidden).isBF .view-video {
783799

784800
html.has-analyser-sticks.isCF .view-analyser-sticks,
785801
html.has-analyser.isCF .view-analyser,
802+
html.has-map.isCF .view-map,
786803
html.has-table.isCF .view-table,
787804
html.has-sticks.isCF .view-sticks,
788805
html.has-craft.isCF .view-craft,
@@ -792,6 +809,7 @@ html:not(.video-hidden).isCF .view-video {
792809

793810
html.has-analyser-sticks.isINAV .view-analyser-sticks,
794811
html.has-analyser.isINAV .view-analyser,
812+
html.has-map.isINAV .view-map,
795813
html.has-table.isINAV .view-table,
796814
html.has-sticks.isINAV .view-sticks,
797815
html.has-craft.isINAV .view-craft,
@@ -1205,6 +1223,11 @@ html:not(.has-log) #status-bar {
12051223
display: none;
12061224
}
12071225

1226+
html:not(.has-gps) .view-map,
1227+
html:not(.has-gps) .map-container {
1228+
display: none !important;
1229+
}
1230+
12081231
#status-bar .bookmark-1,
12091232
#status-bar .bookmark-2,
12101233
#status-bar .bookmark-3,

‎images/markers/craft.png‎

10.5 KB
Loading

‎images/markers/home.png‎

11.7 KB
Loading

‎index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,13 @@
1616
<link rel="stylesheet" href="css/header_dialog.css">
1717
<link rel="stylesheet" href="css/keys_dialog.css">
1818
<link rel="stylesheet" href="css/user_settings_dialog.css">
19+
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
1920

2021
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
22+
<script src="node_modules/leaflet/dist/leaflet.js"></script>
23+
<script src="node_modules/leaflet-marker-rotation/src/rotatedMarker.js" type="module"></script>
24+
<script src="node_modules/Leaflet.MultiOptionsPolyline/Leaflet.MultiOptionsPolyline.js"></script>
25+
2126
</head>
2227

2328
<body>
@@ -252,6 +257,11 @@ <h4>View</h4>
252257
<span class="pull-right">A</span>
253258
</a>
254259
</li>
260+
<li>
261+
<a href="#" id="auto-hide-menu" class="view-map auto-hide-menu" data-toggle="tooltip" title="View/hide map">
262+
<span class="glyphicon glyphicon-map-marker"></span> Map
263+
</a>
264+
</li>
255265
</ul>
256266
</div>
257267
<div class="btn-group view-buttons-expanded" role="group">
@@ -285,6 +295,9 @@ <h4>Overlay</h4>
285295
<button type="button" class="btn btn-default view-analyser" data-toggle="tooltip" title="View/hide analyser display">
286296
<span class="glyphicon glyphicon-equalizer"></span>
287297
</button>
298+
<button type="button" class="btn btn-default view-map" data-toggle="tooltip" title="View/hide map">
299+
<span class="glyphicon glyphicon-map-marker"></span>
300+
</button>
288301
</div>
289302
</div>
290303
</li>
@@ -490,6 +503,7 @@ <h4>Workspace</h4>
490503
<option>100</option>
491504
</datalist>
492505
</div>
506+
<div id="mapContainer" class="map-container"></div>
493507
<canvas width="0" height="0" id="stickCanvas"></canvas>
494508
<span class="log-open-legend-dialog glyphicon glyphicon-cog" data-toggle="tooltip" title="Show the legend"></span>
495509
</div>
@@ -2893,6 +2907,44 @@ <h4 class="modal-title">Advanced User Settings</h4>
28932907
</table>
28942908
</div>
28952909
</div>
2910+
<div class="gui_box grey top-spacer map-settings">
2911+
<div class="gui_box_titlebar">
2912+
<div class="spacer_box_title">Map Settings</div>
2913+
</div>
2914+
<div class="spacer_box">
2915+
<div>
2916+
<label class="option">ACT
2917+
<input class="map-trail-altitude-colored ios-switch" type="checkbox" />
2918+
<div>
2919+
<div></div>
2920+
</div>
2921+
<span>Use Altitude Colored Trail (slower at loading/changing logs)</span>
2922+
</label>
2923+
</div>
2924+
<table>
2925+
<tr>
2926+
<td>
2927+
<label>Position</label>
2928+
</td>
2929+
<td class="position">
2930+
<label>Top</label>
2931+
<input name="map-top" type="number" step="1" min="0" max="100" />
2932+
<p>%</p>
2933+
</td>
2934+
<td class="position">
2935+
<label>Left</label>
2936+
<input name="map-left" type="number" step="1" min="0" max="100" />
2937+
<p>%</p>
2938+
</td>
2939+
<td class="position">
2940+
<label>Size</label>
2941+
<input name="map-size" type="number" step="1" min="0" max="100" />
2942+
<p>%</p>
2943+
</td>
2944+
</tr>
2945+
</table>
2946+
</div>
2947+
</div>
28962948
<div class="gui_box grey top-spacer watermark-settings">
28972949
<div class="gui_box_titlebar">
28982950
<div class="spacer_box_title">Watermark Settings</div>
@@ -3112,6 +3164,7 @@ <h4 class="modal-title">Advanced User Settings</h4>
31123164
<script src="js/configuration.js"></script>
31133165
<script src="js/laptimer.js"></script>
31143166
<script src="js/localization.js"></script>
3167+
<script src="js/graph_map.js"></script>
31153168
<script src="js/main.js"></script>
31163169
<script src="index.js"></script>
31173170

‎js/flightlog.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1059,6 +1059,10 @@ function FlightLog(logData) {
10591059

10601060
return true;
10611061
};
1062+
1063+
this.hasGpsData = function() {
1064+
return this.getStats()?.frame?.G ? true : false;;
1065+
};
10621066
}
10631067

10641068
FlightLog.prototype.accRawToGs = function(value) {

0 commit comments

Comments
 (0)