langspielplatte
/
iot-lab2020


			
							<!--HTML Seite, die das Video und saemtliche Zustandsdaten des Raspberry Pi anzeigt-->

<!DOCTYPE HTML>
<html>
  <head>
	<title>IKT CAR MONITORING</title>
	<style>
		body {
			background: #555;
			text-align: left;
			margin-top: 1%;
			zoom: 100%;
			
		}
		p    {color:white;max-width: 50%;}
		th    {color:white;}
		#column {
		
		width: 50%;  
		float: left;

		position: relative;
	}
	</style>	
	
  </head>


  <body>
	
	<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-->
	
	<script type="text/javascript">
		// 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 = 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"); 
				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) {
			console.log("disconnected"); 
		};
		

		// 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>
</html>