add legent to the map

This commit is contained in:
unknown 2020-12-10 16:47:52 +01:00
parent 53545013e0
commit a81535758c
3 changed files with 19 additions and 10 deletions

View File

@ -8,7 +8,7 @@ import (
const (
TCP_PORT = ":3010"
HTTP_PORT = ":3011"
SERIAL_PORT = "COM4"
SERIAL_PORT = "COM6"
)
func main() {

View File

@ -45,8 +45,11 @@ map.on('load', function () {
'id': 'routeTCP',
'type': 'line',
'source': 'routeTCP',
'layout': {
'visibility': 'visible'
},
'paint': {
'line-color': 'yellow',
'line-color': 'blue',
'line-opacity': 0.75,
'line-width': 5
}
@ -56,26 +59,25 @@ map.on('load', function () {
'id': 'routeSERIAL',
'type': 'line',
'source': 'routeSERIAL',
'layout': {
'visibility': 'visible'
},
'paint': {
'line-color': 'blue',
'line-color': 'yellow',
'line-opacity': 0.75,
'line-width': 5
}
});
// setup the viewport
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 17 });
map.setPitch(30);
// on a regular basis, add more coordinates from the saved list and update the map
//var i = 0;
//var timer = window.setInterval(, 10);
var stateLegendEl = document.getElementById('state-legend');
stateLegendEl.style.display = 'block';
})
function updateMapTCP (long, lat) {
//let coordinates = [long, lat]
emptyTCP.features[0].geometry.coordinates.push([long, lat]);
map.getSource('routeTCP').setData(emptyTCP);
map.panTo([long, lat]);

View File

@ -40,9 +40,16 @@ window.addEventListener("load", function(evt) {
//console.log(evt.data)
console.log("JSON geparsed onmessage", dat)
//console.log(dat.SOURCE_TCP.Orientation)
document.getElementById("gyroscope").style.transform = `rotateX(${-((dat.SOURCE_TCP.Orientation[1]+90)%360)}deg) rotateY(${dat.SOURCE_TCP.Orientation[0]}deg) rotateZ(${-dat.SOURCE_TCP.Orientation[2]}deg)`
document.getElementById("gyroscopeTCP").style.transform = `rotateX(${dat.SOURCE_TCP.Orientation[0]}deg) rotateY(${dat.SOURCE_TCP.Orientation[1]}deg) rotateZ(${dat.SOURCE_TCP.Orientation[2]}deg)`
document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
// document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
// document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
// document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
// document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
//document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
//document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
/*
console.log(dat)
orientation[0] += dat[0] * multiplier