langspielplatte/iot-lab2020
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Änderungen hinzugefügt. Sensoren waren kaputt, daher mussten wir Workarounds basteln.

Browse Source
This commit is contained in:
langspielplatte
2020-09-18 09:36:30 +02:00
parent 1ac1c40332
commit 3746a32b31
24 changed files with 945 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
Versuchstag-4/index.html
View File

@@ -30,9 +30,45 @@
<script type="text/javascript" src="smoothie.js"></script>
Parking control: <button id="btn_start">Start</button>
<button id="btn_stop">Stop</button>
<br>
<!--Aufgabe 4-->
<!--Für jeden Datensatz muss eine Zeichenfläche 'canvas' definiert werden-->
<table border="1">
<tr>
<td>Geschwindigkeit:<br>
<canvas class="canvas" id="speed" width="400" height="150"></canvas><br></td>
<td>Himmelrichtung:<br>
<canvas class="canvas" id="compass" width="400" height="150"></canvas><br></td>
</tr>
<tr>
<td>Abstand vom Auto zum Hindernis:<br></td>
<td>IR:<br>
<canvas class="canvas" id="dist0" width="400" height="150"></canvas><br></td>
</tr>
<tr>
<td>Front:<br>
<canvas class="canvas" id="dist1" width="400" height="150"></canvas><br></td>
<td>Rear:<br>
<canvas class="canvas" id="dist2" width="400" height="150"></canvas><br></td>
</tr>
<tr>
<td>Länge der Parklücke:<br>
<canvas class="canvas" id="length" width="400" height="150"></canvas><br></td>
<td>Encoder Traveled distance:<br>
<canvas class="canvas" id="travel" width="400" height="150"></canvas><br></td>
</tr>
</table>
<!--Einparken -->
<!--Es müssen Knöpfe zum Starten und Stoppen des Parkvorgangs definiert werden-->
@@ -41,16 +77,45 @@
// Aufgabe 4
//
// Damit die Daten dargestellt werden können muss ein Websocket geöffnet werden, der bei jeder neuen Nachricht die Daten aus dieser Nachricht rausholt und visualisiert.
var dataSocket = ;
var dataSocket = new WebSocket("ws://192.168.1.42:8081/ws");
// THE IP NEED TO BE CHANGED!
var reply = 'nop';
document.getElementById("btn_stop").addEventListener('click',
()=>{
reply = 'stop_true';
dataSocket.send(reply);
console.log("ParkCtrl: Stopping");
});
document.getElementById("btn_start").addEventListener('click',
()=>{
reply = 'park_true';
dataSocket.send(reply);
console.log("ParkCtrl: Parking");
});
dataSocket.onopen = function(){
console.log("connected");
};
console.log("connected");
dataSocket.send('connection established')
};
dataSocket.onmessage = function(evt) {
// Aufgabe 4
// Die empfangenen Daten müssen an die Charts weitergegeben werden.
// evt.data == {"speed":"value", "compass":"value", "dist":"value", "length":"value"}
console.log(evt.data);
dataSocket.send(reply);
var msg = JSON.parse(evt.data);
speed.append(new Date().getTime(), parseFloat(msg.speed));
compass.append(new Date().getTime(), parseFloat(msg.compass));
dist0.append(new Date().getTime(), parseFloat(msg.dist0));
dist1.append(new Date().getTime(), parseFloat(msg.dist1));
dist2.append(new Date().getTime(), parseFloat(msg.dist2));
length.append(new Date().getTime(), parseFloat(msg.length));
travel.append(new Date().getTime(), parseFloat(msg.travel));
};
dataSocket.onclose = function(evt) {
@@ -61,6 +126,49 @@
// Aufgabe 4
//
// Für jeden Datensatz muss ein eine SmoothieChart in einem vorher definierten canvas-Element erstellt werden.
var speedChart = new SmoothieChart({ minValue: 0, maxValue: 15, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 500, verticalSections: 6 } });
var speed = new TimeSeries();
speedChart.addTimeSeries(speed);
speedChart.streamTo(document.getElementById("speed"), 100);
var compassChart = new SmoothieChart({ minValue: 0, maxValue: 360, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 500, verticalSections: 6 } });
var compass = new TimeSeries();
compassChart.addTimeSeries(compass);
compassChart.streamTo(document.getElementById("compass"), 100);
var dist0Chart = new SmoothieChart({ minValue: 0, maxValue: 100, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 500, verticalSections: 6 } });
var dist0 = new TimeSeries();
dist0Chart.addTimeSeries(dist0);
dist0Chart.streamTo(document.getElementById("dist0"), 100);
var dist1Chart = new SmoothieChart({ minValue: 0, maxValue: 100, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 500, verticalSections: 6 } });
var dist1 = new TimeSeries();
dist1Chart.addTimeSeries(dist1);
dist1Chart.streamTo(document.getElementById("dist1"), 100);
var dist2Chart = new SmoothieChart({ minValue: 0, maxValue: 100, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 500, verticalSections: 6 } });
var dist2 = new TimeSeries();
dist2Chart.addTimeSeries(dist2);
dist2Chart.streamTo(document.getElementById("dist2"), 100);
var lengthChart = new SmoothieChart({ minValue: 0, maxValue: 300, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 500, verticalSections: 6 } });
var length = new TimeSeries();
lengthChart.addTimeSeries(length);
lengthChart.streamTo(document.getElementById("length"), 100);
var travelChart = new SmoothieChart({ minValue: 0, maxValue: 500, grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 500, verticalSections: 6 } });
var travel = new TimeSeries();
travelChart.addTimeSeries(length);
travelChart.streamTo(document.getElementById("travel"), 100);
</script>
</body>