ShinobiSystems
/
Shinobi
mirror of https://gitlab.com/Shinobi-Systems/Shinobi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Speed and Heading to Live GPS Display

const-conversion
Moe 2020-07-29 18:41:38 -07:00
parent 22f2d37f1f
commit d31f602e29
4 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/libs/css/dash2.monitors.css
View File

@ -112,3 +112,12 @@ img.circle-img,div.circle-img{border-radius:50%;height:50px;width:50px}
bottom: 10px;
right: 10px;
}
.monitor_item .gps-map-details {
position: absolute;
padding: 5px 7px;
border-radius: 25px;
background:rgba(0,0,0,0.5);
z-index: 9;
top: 10px;
right: 10px;
}

7
web/libs/js/dash2.elementbuilder.js
View File

@ -100,7 +100,12 @@ $.ccio.tm=function(x,d,z,user){
k.mode=$.ccio.init('humanReadMode',d.mode);
var dataTarget = '.monitor_item[mid=\''+d.mid+'\'][ke=\''+d.ke+'\'][auth=\''+user.auth_token+'\']';
tmp+='<div id="monitor_live_'+d.mid+user.auth_token+'" auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" mode="'+k.mode+'" class="grid-stack-item monitor_item glM'+d.mid+user.auth_token+'"><div class="grid-stack-item-content">';
tmp+='<div class="gps-map hidden" id="gps-map-' + d.mid + '"></div>';
tmp+=`<div class="gps-map-info gps-map-details hidden">
<div><i class="fa fa-compass fa-3x gps-info-bearing"></i></div>
<div><i class="fa fa-compass fa-3x gps-info-speed"></i></div>
<div></div>
</div>`;
tmp+='<div class="gps-map gps-map-info hidden" id="gps-map-' + d.mid + '"></div>';
tmp+='<div class="stream-block no-padding mdl-card__media mdl-color-text--grey-50">';
tmp+='<div class="stream-objects"></div>';
tmp+='<div class="stream-hud">'

9
web/libs/js/dash2.gps.js
View File

@ -1,4 +1,10 @@
$(document).ready(function(){
window.setRadialBearing = function(iconElement,addedDegrees,titlePrefix){
//fa-compass
var degrees = -35;
degrees += addedDegrees
iconElement.css('transform','rotate(' + degrees + 'deg)').attr('title',titlePrefix + addedDegrees)
}
var createMapElement = function(options){
$(`#${options.id}`).html(`<div class="gps-map" id="${options.id}_map" style="min-height: 600px;border-radius:5px;overflow:hidden;"></div>`)
var vidViewMap = L.map(options.id + '_map').setView(options.initalView, options.zoom)
@ -32,7 +38,6 @@ $(document).ready(function(){
$.get(getApiPrefix() + '/videos/' + groupKey + '/' + monitorId + '/' + filename + '?json=true',function(video){
var response = {ok: false}
var gps = video.details.gps
console.log(video)
if(gps && gps[0]){
var gpsPoints = {}
var firstMarker = gps[0]
@ -50,7 +55,7 @@ $(document).ready(function(){
id: options.targetMapElement,
initalView: [firstMarker.lat,firstMarker.lng],
marker: [firstMarker.lat,firstMarker.lng],
zoom: 5,
zoom: 2,
})
videoElement.on('timeupdate',function(){
var point = gpsPoints[parseInt(this.currentTime)]

22
web/libs/js/dash2.socketio.js
View File

@ -658,8 +658,10 @@ $.ccio.globalWebsocket=function(d,user){
break;
case'gps':
var gps = d.gps
var mapBoxMarker = $.ccio.mon[user.ke + d.mid + user.auth_token].mapBoxMarker
$(`#gps-map-${d.mid}`).removeClass('hidden')
var activeMonitor = $.ccio.mon[user.ke + d.mid + user.auth_token]
var mapBoxMarker = activeMonitor.mapBoxMarker
var monitorElement = $(`.monitor_item[mid="${d.mid}"]`)
monitorElement.find(`.gps-map-info`).removeClass('hidden')
if(!mapBoxMarker){
var mapBox = L.map(`gps-map-${d.mid}`).setView([gps.lat, gps.lng], 5);
@ -668,13 +670,21 @@ $.ccio.globalWebsocket=function(d,user){
}).addTo(mapBox);
var mapBoxMarker = L.marker([gps.lat, gps.lng]).addTo(mapBox);
$.ccio.mon[user.ke + d.mid + user.auth_token].mapBoxMarker = mapBoxMarker
activeMonitor.mapBoxMarker = mapBoxMarker
activeMonitor.mapBoxBearingElement = monitorElement.find(`.gps-info-bearing`)
activeMonitor.mapBoxSpeedElement = monitorElement.find(`.gps-info-speed`)
}else{
mapBoxMarker.setLatLng([gps.lat, gps.lng]).update()
}
clearTimeout($.ccio.mon[user.ke + d.mid + user.auth_token].mapBoxTimeout)
$.ccio.mon[user.ke + d.mid + user.auth_token].mapBoxTimeout = setTimeout(function(){
$(`#gps-map-${d.mid}`).addClass('hidden')
if(gps.bearing){
setRadialBearing(activeMonitor.mapBoxBearingElement,gps.bearing,'Bearing : ')
}
if(gps.speed){
setRadialBearing(activeMonitor.mapBoxSpeedElement,gps.speed,'Speed (meters/second) : ')
}
clearTimeout(activeMonitor.mapBoxTimeout)
activeMonitor.mapBoxTimeout = setTimeout(function(){
monitorElement.find(`.gps-map-info`).addClass('hidden')
},30000)
break;
}