add speedometer
This commit is contained in:
parent
798367bb5e
commit
b0b0b487dc
@ -0,0 +1,58 @@
|
||||
var options1 = {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'speedTCP',
|
||||
data: [50,50],
|
||||
backgroundColor: [
|
||||
'rgba(231, 76, 60, 1)',
|
||||
'rgba(191, 191, 191, 1)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255 ,1)',
|
||||
'rgba(255, 255, 255 ,1)'
|
||||
],
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'speedSERIAl',
|
||||
data: [20, 80],
|
||||
backgroundColor: [
|
||||
'rgba(0, 177, 106, 1)',
|
||||
'rgba(191, 191, 191, 1)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 255, 255 ,1)',
|
||||
'rgba(255, 255, 255 ,1)'
|
||||
],
|
||||
borderWidth: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
rotation: 1 * Math.PI,
|
||||
circumference: 1 * Math.PI,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
cutoutPercentage: 50
|
||||
}
|
||||
}
|
||||
|
||||
var ctx1 = document.getElementById('speedometer').getContext('2d');
|
||||
var mySpeedometer = new Chart(ctx1, options1);
|
||||
|
||||
function addSpeedData(speedTCP, speedSERIAL){
|
||||
var speedTCPpercent = (speedTCP/250)*100;
|
||||
var speedSERIALpercent = (speedSERIAL/250)*100;
|
||||
mySpeedometer.data.datasets[0].data = [speedTCPpercent, 100-speedTCPpercent];
|
||||
mySpeedometer.data.datasets[1].data = [speedSERIALpercent, 100-speedSERIALpercent];
|
||||
mySpeedometer.update();
|
||||
}
|
||||
@ -32,6 +32,28 @@ 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);
|
||||
}
|
||||
|
||||
ws.onmessage = function(evt) {
|
||||
//print2("RESPONSE: " + evt.data);
|
||||
// let dat = JSON.parse(evt.data)["bmi26x gyroscope"]
|
||||
@ -44,7 +66,6 @@ window.addEventListener("load", function(evt) {
|
||||
//console.log(dat.SOURCE_TCP.Orientation)
|
||||
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)`
|
||||
@ -82,10 +103,6 @@ window.addEventListener("load", function(evt) {
|
||||
|
||||
//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]);
|
||||
}
|
||||
@ -95,6 +112,8 @@ window.addEventListener("load", function(evt) {
|
||||
map.panTo([dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0]])
|
||||
}
|
||||
|
||||
addSpeedData(dat.SOURCE_TCP.Speed, dat.SOURCE_SERIAL.Speed);
|
||||
|
||||
// addData(dat[0])
|
||||
//document.getElementById("gyroscope").style.transform = `rotateX(${-orientation[0]}deg) rotateY(${orientation[1]}deg) rotateZ(${-orientation[2]}deg) translateZ(50px)`
|
||||
}
|
||||
@ -121,29 +140,11 @@ 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'})
|
||||
.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);
|
||||
}
|
||||
fetch('http://localhost:3011/trackings/', { method: 'PATCH', body: 'some data'})
|
||||
.then(results => results.json())
|
||||
.then(console.log);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
@ -45,6 +45,34 @@
|
||||
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;
|
||||
}
|
||||
.speedMax {
|
||||
position: absolute;
|
||||
Left: 100%;
|
||||
transform: translate(-50%, 0);
|
||||
font-size: 30px;
|
||||
bottom: 0;
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
|
||||
|
||||
.scene {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
@ -101,27 +129,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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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><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,12 +157,6 @@
|
||||
|
||||
<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">
|
||||
@ -146,6 +166,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-child">
|
||||
<div class="outer">
|
||||
<label id="speedTCP" style="color: firebrick; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone: </label><br>
|
||||
<label id="speedSERIAL" style="color: forestgreen; font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox: </label><br>
|
||||
<canvas id="speedometer" width="300" height="200"></canvas>
|
||||
<p class="speedMin">0</p>
|
||||
<p class="speedMax">250</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="static/scripts/map.js"></script>
|
||||
<script src="static/scripts/speedometer.js"></script>
|
||||
|
||||
<div class="float-container">
|
||||
<div class="float-child">
|
||||
<div class="scene">
|
||||
<p style="font-size: large">Smartphone</p>
|
||||
@ -171,14 +207,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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/map.js"></script>
|
||||
|
||||
<div style="width: 600px; height: 400px;">
|
||||
<canvas id="myChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<script src="static/scripts/chart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user