implemented replayFull.html scripts
This commit is contained in:
parent
06790ba8c8
commit
6ded3ec741
44
static/scripts/chartfull.js
Normal file
44
static/scripts/chartfull.js
Normal file
@ -0,0 +1,44 @@
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: new Array(),
|
||||
datasets: [{
|
||||
label: 'Z',
|
||||
backgroundColor: 'rgba(255, 99, 132, 1)',
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
borderWidth: 1,
|
||||
fill: false,
|
||||
pointRadius: 0,
|
||||
lineTension: 0.5,
|
||||
data: new Array()
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
// beginAtZero: true
|
||||
min: -2000,
|
||||
max: 2000
|
||||
}
|
||||
}]
|
||||
},
|
||||
animation: {
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
myChart.data.labels.fill("", 0, GRAPH_RES);
|
||||
myChart.data.datasets.forEach((dataset) => dataset.data.fill(0, 0, GRAPH_RES))
|
||||
function addSerialAltData(data) {
|
||||
myChart.data.labels.push("");
|
||||
myChart.data.datasets.forEach((dataset) => {
|
||||
dataset.data.push(data);
|
||||
});
|
||||
while (myChart.data.labels.length >= GRAPH_RES) {
|
||||
myChart.data.labels.shift();
|
||||
myChart.data.datasets.forEach((dataset) => dataset.data.shift())
|
||||
}
|
||||
myChart.update();
|
||||
};
|
||||
99
static/scripts/mapfull.js
Normal file
99
static/scripts/mapfull.js
Normal file
@ -0,0 +1,99 @@
|
||||
mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg';
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'mapbox://styles/mapbox/satellite-v9',
|
||||
zoom: 0
|
||||
});
|
||||
|
||||
map.on('load', function () {
|
||||
|
||||
map.addSource('routeTCP', { 'type': 'geojson', 'data': null })
|
||||
map.addSource('routeSERIAL', { 'type': 'geojson', 'data': null })
|
||||
|
||||
map.addLayer({
|
||||
'id': 'routeTCP',
|
||||
'type': 'line',
|
||||
'source': 'routeTCP',
|
||||
'layout': {
|
||||
'visibility': 'visible'
|
||||
},
|
||||
'paint': {
|
||||
'line-color': 'rgba(30, 139, 195, 1)',
|
||||
'line-opacity': 1,
|
||||
'line-width': 5
|
||||
}
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
'id': 'routeSERIAL',
|
||||
'type': 'line',
|
||||
'source': 'routeSERIAL',
|
||||
'layout': {
|
||||
'visibility': 'visible'
|
||||
},
|
||||
'paint': {
|
||||
'line-color': 'rgba(214, 69, 65, 1)',
|
||||
'line-opacity': 1,
|
||||
'line-width': 5
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 16 });
|
||||
map.setPitch(30);
|
||||
|
||||
var stateLegendEl = document.getElementById('state-legend');
|
||||
stateLegendEl.style.display = 'block';
|
||||
})
|
||||
|
||||
function updateMapTCPbulk(sensordataList) {
|
||||
console.log("add TCP data to map")
|
||||
let geoJsonTCP = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "LineString",
|
||||
coordinates: []
|
||||
}
|
||||
}]
|
||||
}
|
||||
sensordataList.forEach(sensordata => {
|
||||
if (sensordata.Position[0] === 0 && sensordata.Position[1] === 0 && sensordata.Position[2] === 0) {
|
||||
return;
|
||||
}
|
||||
let lat = sensordata.Position[0]
|
||||
let lon = sensordata.Position[1]
|
||||
geoJsonTCP.features[0].geometry.coordinates.push([lon, lat]);
|
||||
|
||||
})
|
||||
map.getSource('routeTCP').setData(geoJsonTCP);
|
||||
map.panTo(geoJsonTCP.features[0].geometry.coordinates[geoJsonTCP.features[0].geometry.coordinates.length-1]);
|
||||
}
|
||||
|
||||
function updateMapSERIALbulk(sensordataList) {
|
||||
console.log("add SERIAL data to map")
|
||||
let geoJsonSerial = {
|
||||
type: "FeatureCollection",
|
||||
features: [
|
||||
{
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "LineString",
|
||||
coordinates: []
|
||||
}
|
||||
}]
|
||||
}
|
||||
sensordataList.forEach(sensordata => {
|
||||
if (sensordata.Position[0] === 0 && sensordata.Position[1] === 0 && sensordata.Position[2] === 0) {
|
||||
return;
|
||||
}
|
||||
let lat = sensordata.Position[0]
|
||||
let lon = sensordata.Position[1]
|
||||
geoJsonSerial.features[0].geometry.coordinates.push([lon, lat]);
|
||||
|
||||
})
|
||||
map.getSource('routeSERIAL').setData(geoJsonSerial);
|
||||
map.panTo(geoJsonSerial.features[0].geometry.coordinates[geoJsonSerial.features[0].geometry.coordinates.length-1]);
|
||||
}
|
||||
50
static/scripts/refull.js
Normal file
50
static/scripts/refull.js
Normal file
@ -0,0 +1,50 @@
|
||||
var trackingdata = null;
|
||||
|
||||
window.addEventListener("load", function(evt) {
|
||||
//------------------------Buttons------------------------------
|
||||
|
||||
var trackings = null;
|
||||
document.getElementById("messungladen").onclick = function(evt) {
|
||||
fetch('http://localhost:3011/trackings/', { method: 'GET'}).then(results => {
|
||||
return results.json()
|
||||
}).then(r => {
|
||||
console.log(r)
|
||||
if (!'data' in r) {
|
||||
return
|
||||
}
|
||||
trackings = r.data
|
||||
let sel = document.getElementById("meas")
|
||||
sel.innerHTML = ''
|
||||
r.data.forEach(tracking => {
|
||||
console.log(tracking)
|
||||
var option = document.createElement("option");
|
||||
option.text = tracking.TimeCreated + " Size: " + tracking.Size
|
||||
sel.add(option)
|
||||
})
|
||||
sel.disabled = false
|
||||
document.getElementById("replaystarten").disabled = false
|
||||
|
||||
})
|
||||
};
|
||||
|
||||
document.getElementById("replaystarten").onclick = function(evt) {
|
||||
let sel = document.getElementById("meas")
|
||||
console.log(trackings[sel.selectedIndex].UUID)
|
||||
fetch(`http://localhost:3011/trackings/${trackings[sel.selectedIndex].UUID}`, { method: 'GET'}).then(results => {
|
||||
return results.json()
|
||||
}).then(r => {
|
||||
// console.log(r.data.Data)
|
||||
console.log(r.data)
|
||||
if ('SOURCE_TCP' in r.data.Data && r.data.Data.SOURCE_TCP.length > 0) {
|
||||
updateMapTCPbulk(r.data.Data.SOURCE_TCP)
|
||||
}
|
||||
if ('SOURCE_SERIAL' in r.data.Data && r.data.Data.SOURCE_SERIAL.length > 0) {
|
||||
updateMapSERIALbulk(r.data.Data.SOURCE_SERIAL)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -2,33 +2,43 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
|
||||
<script src="static/scripts/websocket.js"></script>
|
||||
<script src="static/scripts/refull.js"></script>
|
||||
<link rel="stylesheet" href="static/replayStyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="controls">
|
||||
<br>
|
||||
<button id="messungladen" style="margin-right: 16px;">Aufnahmen laden</button>
|
||||
|
||||
<div class="float-container">
|
||||
<div class="float-child">
|
||||
<div class="sceneMap" style='width: 1000px; height: 500px;'>
|
||||
<div id="map" style='width: 1000px; height: 500px;'></div>
|
||||
<div id="state-legend" class="legend">
|
||||
<h4>Legende</h4>
|
||||
<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 style="width: 600px; height: 400px;">
|
||||
<canvas id="speedChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<label>Aufnahmen:
|
||||
<select name="meas" id="meas" disabled>
|
||||
</select>
|
||||
</label>
|
||||
<button id="replaystarten" style="margin-right: 16px;" disabled>Öffnen</button>
|
||||
</div>
|
||||
|
||||
<script src="static/scripts/map.js"></script>
|
||||
<div class="sceneMap">
|
||||
<div id="map" style='width: 1000px; height: 500px;'></div>
|
||||
<div id="state-legend" class="legend">
|
||||
<h4>Legende</h4>
|
||||
<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>
|
||||
<canvas id="speedChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div style="width: 600px; height: 400px;">
|
||||
<canvas id="myChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||
<script src="static/scripts/speedChart.js"></script>
|
||||
<script src="static/scripts/mapFull.js"></script>
|
||||
<script src="static/scripts/chartFull.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user