tvolkmann/gyrogpsc
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 1 Wiki Activity

Merge branch 'frank-dev2' into timo

Browse Source
This commit is contained in:
Timo Volkmann 2020-12-28 11:14:33 +01:00
commit c7140d8394
6 changed files with 489 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/scripts/chart.js
View File

@ -18,8 +18,8 @@ var myChart = new Chart(ctx, {
yAxes: [{
ticks: {
// beginAtZero: true
min: -100,
max: 100
min: -2000,
max: 2000
}
}]
},
@ -30,7 +30,7 @@ var myChart = new Chart(ctx, {
});
myChart.data.labels.fill("", 0, GRAPH_RES);
myChart.data.datasets.forEach((dataset) => dataset.data.fill(0, 0, GRAPH_RES))
function addData(data) {
function addSerialAltData(data) {
myChart.data.labels.push("");
myChart.data.datasets.forEach((dataset) => {
dataset.data.push(data);

72
static/scripts/compass.js Normal file
View File

@ -0,0 +1,72 @@
var options2 = {
type: 'doughnut',
data: {
datasets: [
{
label: 'compassTCP',
data: [360,0],
backgroundColor: [
'rgba(30, 139, 195, 1)',
'rgba(30, 139, 195, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 4
},
{
label: 'compassSERIAL',
data: [360,0],
backgroundColor: [
'rgba(214, 69, 65, 1)',
'rgba(214, 69, 65, 1)',
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 4
}
]
},
options: {
rotation: 2 * Math.PI,
circumference: 2 * Math.PI,
legend: {
display: false,
enabled: false
},
tooltips: {
enabled: false,
display: false
},
cutoutPercentage: 50
}
}
var ctx2 = document.getElementById('compass').getContext('2d');
var myCompass = new Chart(ctx2, options2);
function addCompassSerial(deg){
var c = Math.abs(90-deg);
if(deg<90){
myCompass.data.datasets[1].data = [360-c,c];
}
if(deg>90){
myCompass.data.datasets[1].data = [c,360-c];
}
myCompass.update();
}
function addCompassTCP(deg){
var c = Math.abs(90-deg);
if(deg<90){
myCompass.data.datasets[0].data = [360-c,c];
}
if(deg>90){
myCompass.data.datasets[0].data = [c,360-c];
}
myCompass.update();
}

6
static/scripts/map.js
View File

@ -41,7 +41,7 @@ map.on('load', function () {
'visibility': 'visible'
},
'paint': {
'line-color': 'blue',
'line-color': 'rgba(30, 139, 195, 1)',
'line-opacity': 0.75,
'line-width': 5
}
@ -55,7 +55,7 @@ map.on('load', function () {
'visibility': 'visible'
},
'paint': {
'line-color': 'yellow',
'line-color': 'rgba(214, 69, 65, 1)',
'line-opacity': 0.75,
'line-width': 5
}
@ -93,5 +93,5 @@ function updateMapTCP (TCPlong, TCPlat) {
function updateMapSERIAL (SERIALlong, SERIALlat) {
emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
map.getSource('routeSERIAL').setData(emptySERIAL);
map.panTo([SERIALlong, SERIALlat]);
//map.panTo([SERIALlong, SERIALlat]);
}

165
static/scripts/speedometer.js
View File

@ -0,0 +1,165 @@
var options1 = {
type: 'doughnut',
data: {
datasets: [
{
label: 'speedTCP',
data: [50,50],
backgroundColor: [
'rgba(30, 139, 195, 1)',
'rgba(191, 191, 191, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 0
},
{
label: 'speedSERIAl',
data: [50, 50],
backgroundColor: [
'rgba(214, 69, 65, 1)',
'rgba(191, 191, 191, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 0
}
]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false,
enabled: false
},
tooltips: {
enabled: false,
display: false
},
cutoutPercentage: 40
}
}
var options2 = {
type: 'doughnut',
data: {
datasets: [
{
label: 'speedMarks',
data: [50,50,50,50],
backgroundColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderWidth: 0
},
{
label: 'transparent',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'transparent1',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'transparent2',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'transparent3',
data: [100],
backgroundColor: [
'rgba(0, 0, 0, 0)'
],
borderColor: [
'rgba(0, 0, 0, 0)'
],
borderWidth: 2
},
{
label: 'speedMarks1',
data: [50,50,50,50],
backgroundColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderColor: [
'rgba(30, 130, 76, 1)',
'rgba(244, 208, 63, 1)',
'rgba(235, 151, 78, 1)',
'rgba(217, 30, 24, 1)'
],
borderWidth: 0
},
]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false,
enabled: false
},
tooltips: {
enabled: false,
display: false
},
cutoutPercentage: 65
}
}
var ctx1 = document.getElementById('speedometer').getContext('2d');
var mySpeedometer = new Chart(ctx1, options1);
var ctx2 = document.getElementById('speedometerSpeeds').getContext('2d');
var mySpeedometer2 = new Chart(ctx2, options2);
function addSpeedSerial(speedSERIAL){
var speedSERIALkmh = (speedSERIAL * 3.6)
var speedSERIALpercent = (speedSERIALkmh/250)*100
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
document.getElementById("speedSERIAL").innerHTML = "Speed Ublox (km/h): " + speedSERIALkmh.toFixed(1)
mySpeedometer.update();
}
function addSpeedTcp(speedTCP){
var speedTCPkmh = (speedTCP * 3.6)
var speedTCPpercent = (speedTCPkmh/250)*100;
mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
document.getElementById("speedTCP").innerHTML = "Speed Smartphone (km/h): " + speedTCPkmh.toFixed(1)
mySpeedometer.update();
}

129
static/scripts/websocket.js
View File

@ -32,6 +32,33 @@ window.addEventListener("load", function(evt) {
ws = null;
print2("CLOSE");
}
if(checkBoxSmartphone.checked && checkBoxUblox.checked){
fetch('http://localhost:3011/trackings?serial=true&tcp=true', { method: 'POST', body: 'some test data'})
.then(results => results.json())
.then(console.log);
}
else if(!(checkBoxSmartphone.checked) && checkBoxUblox.checked){
fetch('http://localhost:3011/trackings?serial=true&tcp=false', { method: 'POST', body: 'some test data'})
.then(results => results.json())
.then(console.log);
}
else if(checkBoxSmartphone.checked && !(checkBoxUblox.checked)){
fetch('http://localhost:3011/trackings?serial=false&tcp=true', { method: 'POST', body: 'some test data'})
.then(results => results.json())
.then(console.log);
}
else if(!(checkBoxSmartphone.checked) && !(checkBoxUblox.checked)){
fetch('http://localhost:3011/trackings?serial=false&tcp=false', { method: 'POST', body: 'some test data'})
.then(results => results.json())
.then(console.log);
}
document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"
checkBoxSmartphone.disabled = true;
checkBoxUblox.disabled = true;
ws.onmessage = function(evt) {
//print2("RESPONSE: " + evt.data);
// let dat = JSON.parse(evt.data)["bmi26x gyroscope"]
@ -41,32 +68,66 @@ window.addEventListener("load", function(evt) {
dataSmartphone.push(dat)
//console.log(evt.data)
console.log("JSON geparsed onmessage", dat)
//console.log(dat.SOURCE_TCP.Orientation)
try{
if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
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)`
addData(dat.SOURCE_TCP.Orientation[0])
}
if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && !(dat.SOURCE_SERIAL.Orientation[1] === 0) && !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
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)`
}
if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_TCP.Position[1] === 0)){
if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
document.getElementById("TCPlong").innerHTML = "Smartphone long: " + dat.SOURCE_TCP.Position[1]
document.getElementById("TCPlat").innerHTML = "Smartphone lat: " + dat.SOURCE_TCP.Position[0]
updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
map.panTo([dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]])
}
if(!(dat.SOURCE_TCP.Speed === 0)){
addSpeedTcp(dat.SOURCE_TCP.Speed);
}
if(!(dat.SOURCE_TCP.HeadDevice === 0)){
addCompassTCP(dat.SOURCE_TCP.HeadDevice)
document.getElementById("compassTCP").innerHTML = "Smartphone: " + dat.SOURCE_TCP.HeadDevice.toFixed(0) + "°"
}
}
catch{
console.log("no TCP data")
}
if(!(dat.SOURCE_SERIAL.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
try{
if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
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)`
}
if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
document.getElementById("SERIALlong").innerHTML = "Ublox long: " + dat.SOURCE_SERIAL.Position[1]
document.getElementById("SERIALlat").innerHTML = "Ublox lat: " + dat.SOURCE_SERIAL.Position[0]
updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
}
if(!(dat.SOURCE_SERIAL.Speed === 0)){
addSpeedSerial(dat.SOURCE_SERIAL.Speed);
}
if(!(dat.SOURCE_SERIAL.HeadDevice === 0)){
addCompassSerial(dat.SOURCE_SERIAL.HeadDevice)
document.getElementById("compassSERIAL").innerHTML = "Ublox: " + dat.SOURCE_SERIAL.HeadDevice.toFixed(0) + "°"
}
}catch{
console.log("no serial data")
}
try{
if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[1] === 0)){
document.getElementById("diffLong").innerHTML = "Differenz long: " + Math.abs(dat.SOURCE_TCP.Position[1] - dat.SOURCE_SERIAL.Position[1])
}
if(!(dat.SOURCE_TCP.Position[0] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
document.getElementById("diffLat").innerHTML = "Differenz lat: " + Math.abs(dat.SOURCE_TCP.Position[0] - dat.SOURCE_SERIAL.Position[0])
}
}
catch{
console.log("no data to compare")
}
if(!(dat.SOURCE_SERIAL.Position[2] === 0)){
addSerialAltData(dat.SOURCE_SERIAL.Position[2])
}
/*
console.log(dat)
@ -79,25 +140,8 @@ window.addEventListener("load", function(evt) {
// }
// addData(orientation[0] / multiplier)
*/
//updateMap(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0], dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
var long = dat.SOURCE_TCP.Position[1]
var lat = dat.SOURCE_TCP.Position[0]
console.log(long , lat)
if(!(dat.SOURCE_TCP.Position[1] === 0) && !(dat.SOURCE_TCP.Position[0] === 0)){
updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0]);
}
if(!(dat.SOURCE_SERIAL.Position[1] === 0) && !(dat.SOURCE_SERIAL.Position[0] === 0)){
updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]);
map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
}
// addData(dat[0])
//document.getElementById("gyroscope").style.transform = `rotateX(${-orientation[0]}deg) rotateY(${orientation[1]}deg) rotateZ(${-orientation[2]}deg) translateZ(50px)`
}
ws.onerror = function(evt) {
print("ERROR: " + evt.data);
}
@ -121,29 +165,34 @@ window.addEventListener("load", function(evt) {
//------------------------Buttons------------------------------
document.getElementById("livetracking").onclick = function(evt) {
document.getElementById("messung starten").onclick = function(evt) {
if (ws) {
print2("LIVETRACKING");
if(checkBoxSmartphone.checked && checkBoxUblox.checked){
fetch('http://localhost:3011/trackings?serial=true&tcp=true', { method: 'POST', body: 'some test data'})
fetch('http://localhost:3011/trackings/', { method: 'PATCH', body: 'some data'})
.then(results => results.json())
.then(console.log);
document.getElementById("tracking state").innerHTML = "Tracking state: RECORD"
}
else if(!(checkBoxSmartphone.checked) && checkBoxUblox.checked){
fetch('http://localhost:3011/trackings?serial=true&tcp=false', { method: 'POST', body: 'some test data'})
return false;
};
document.getElementById("messung beenden").onclick = function(evt) {
if (ws) {
fetch('http://localhost:3011/trackings/', { method: 'PUT', body: 'some data'})
.then(results => results.json())
.then(console.log);
document.getElementById("tracking state").innerHTML = "Tracking state: LIVE"
}
else if(checkBoxSmartphone.checked && !(checkBoxUblox.checked)){
fetch('http://localhost:3011/trackings?serial=false&tcp=true', { method: 'POST', body: 'some test data'})
return false;
};
document.getElementById("alles beenden").onclick = function(evt) {
if (ws) {
fetch('http://localhost:3011/trackings/', { method: 'DELETE', body: 'some data'})
.then(results => results.json())
.then(console.log);
}
else if(!(checkBoxSmartphone.checked) && !(checkBoxUblox.checked)){
fetch('http://localhost:3011/trackings?serial=false&tcp=false', { method: 'POST', body: 'some test data'})
.then(results => results.json())
.then(console.log);
}
checkBoxSmartphone.disabled = false;
checkBoxUblox.disabled = false;
ws.close();
}
return false;
};

166
templates/index.html
View File

@ -45,6 +45,91 @@
padding: 20px;
}
.outer {
position: relative;
width: 300px;
height: 200px;
margin: 50px;
}
canvas {
position: absolute;
}
.speedMin {
position: absolute;
left: 0%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 0;
margin-bottom: -50px;
}
.speed14 {
position: absolute;
left: 8%;
transform: translate(-50%, 0);
font-size: 20px;
bottom: 0;
margin-bottom: 90px;
}
.speedMed {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 20px;
bottom: 0;
margin-bottom: 140px;
}
.speed34 {
position: absolute;
left: 92%;
transform: translate(-50%, 0);
font-size: 20px;
bottom: 0;
margin-bottom: 90px;
}
.speedMax {
position: absolute;
Left: 100%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 0;
margin-bottom: -50px;
}
.compassNorth {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 70%;
margin-bottom: 50px;
}
.compassSouth {
position: absolute;
Left: 50%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: -70%;
margin-bottom: 50px;
}
.compassWest {
position: absolute;
left: 0%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 50%;
margin-bottom: -50px;
}
.compassEast {
position: absolute;
Left: 100%;
transform: translate(-50%, 0);
font-size: 30px;
bottom: 50%;
margin-bottom: -50px;
}
.scene {
width: 200px;
height: 200px;
@ -101,27 +186,25 @@
<body>
<table style="font-size: small">
<tr>
<td valign="top" width="50%">
<p>Click "Open" to create a connection to the server. {{.}}
</p>
<form>
<td valign="top" width="100%">
<p>"Verbinden" clicken um eine Verbindung mit dem Server aufzubauen. {{.}}</p>
<label><input type="checkbox" id="checkbox1" value="smartphone"> TCP</label><br>
<label><input type="checkbox" id="checkbox2" value="ublox"> SERIAL</label><br>
<button id="open">Verbinden</button>
<button id="close">Trennen</button>
<p style="display: none" >
<input id="input" type="text" value="Hello world!">
<button id="send">Send</button>
</p>
</form>
<p style="display: none" ><input id="input" type="text" value="Hello world!"><button id="send">Send</button></p>
<label><input type="checkbox" id="checkbox1" value="smartphone"> Smartphone</label><br>
<label><input type="checkbox" id="checkbox2" value="ublox"> Ublox</label><br>
<button id="livetracking">Livetracking</button>
<button id="messung starten">Messung starten</button>
<button id="messung beenden">Messung beenden</button>
<button id="messung speichern">Messung speichern</button>
<button id="messung verwerfen">Messung verwerfen</button>
<button id="messung laden">Messung laden</button></li>
<button id="messung laden">Messung laden</button>
<button id="alles beenden">Alles Beenden</button><br>
<label id="tracking state" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking state: </label><br>
<label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
<label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
<label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
<label id="SERIALlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
<label id="diffLong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz long: </label>
<label id="diffLat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz lat: </label>
</td>
<td valign="top" width="100%">
<div id="output"></div>
@ -131,22 +214,14 @@
<div class="float-container">
<div class="float-child">
<label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
<label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
<label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
<label id="SERIALlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label><br>
<label id="diffLong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz long: </label>
<label id="diffLat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Differenz lat: </label>
<div class="scene" style='width: 500px; height: 500px;'>
<div id="map" style='width: 500px; height: 500px;'></div>
<div id="state-legend" class="legend">
<h4>Legende</h4>
<div><span style="background-color: yellow"></span>Ublox</div>
<div><span style="background-color: blue"></span>Smartphone</div>
<div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
<div><span style="background-color: rgba(30, 139, 195, 1)"></span>Smartphone</div>
</div>
</div>
</div>
<div class="float-child">
<div class="scene">
<p style="font-size: large">Smartphone</p>
<div id="gyroscopeTCP" class="cube">
@ -158,7 +233,6 @@
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<div class="scene">
<p style="font-size: large">Ublox</p>
<div id="gyroscopeSERIAL" class="cube">
@ -171,14 +245,48 @@
</div>
</div>
</div>
<div class="float-child">
<div class="outer">
<label id="speedTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
<label id="speedSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
<div>
<canvas id="speedometer" width="320" height="230"></canvas>
<canvas id="speedometerSpeeds" width="320" height="230"></canvas>
<p class="speedMin">0</p>
<p class="speed14">62</p>
<p class="speedMed">125</p>
<p class="speed34">188</p>
<p class="speedMax">250</p>
</div>
</div><br>
<div class="outer">
<label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
<label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label><br>
<canvas id="compass" width="300" height="200"></canvas>
<p class="compassNorth">N</p>
<p class="compassEast">E</p>
<p class="compassWest">W</p>
<p class="compassSouth">S</p>
</div>
</div>
<div class="float-child">
</div>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="static/scripts/map.js"></script>
<script src="static/scripts/speedometer.js"></script>
<script src="static/scripts/compass.js"></script>
<div style="width: 600px; height: 400px;">
<div class="float-container">
<div class="float-child">
<div style="width: 600px; height: 400px;">
<canvas id="myChart" width="400" height="200"></canvas>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="static/scripts/chart.js"></script>
</body>
</html>