Meilenstein 4 – Sensordaten auf einer Webseite darstellen (extern)
US 4.1 – Sensordaten aus der Datenbank lesen
Aufgabe: Die aus der UserStorie US3 gespeicherten Daten sollen nun wieder ausgelesen und im JSON Format bereitgestellt werden.
Lösung: Es wird folgende Funktion implementiert.
Die Funktion „getSensorData“ liefert ein Array mit dem Ergebnis der SQL Abfrage:
SELECT ID,VALUE,TIMESTAMP,DESCRIPTION FROM `SensorDaten`;
zurück. Dazu wird die Funktion „executeSQLStmt“ erzeugt welche als Parameter dieses SQLStatement erhält und ausführt.
Durch das auslagern der Logik für die Datenbankabfrage kann man diese ggf. an anderer Stelle wiederverwenden. (DRY – Prinzip)
function getSensorData(){
if(isExistTableSensorData() == FALSE){
printErrorMessageAndDie("!!Tabelle SensorDaten in der Datenbank nicht gefunden!!");
}
$stmt = "SELECT ID,VALUE,TIMESTAMP,DESCRIPTION FROM `SensorDaten`;";
return executeSQLStmt($stmt);
}
function executeSQLStmt($sqlStmt){
$connection = getDBConnection();
$result = $connection->query($sqlStmt);
if (!$result) {
throw new Exception("Database Error [{$this->database->errno}] {$this->database->error}");
}
return $result;
}
US4.2 – Sensordaten als Tabelle darstellen
Aufgabe: Die aus der UserStorie 4.1 bereitgestellten Daten sollen nun in einer Tabelle dargestellt werden.
Dabei soll der Timestamp im Zeitformat „Tag.Monat.Jahr Stunde:Minute:Sekunde“ dargestellt werden.
Lösung:
Für die Lösung dieser Aufgabe wird neben HTML(5) nun auch AngularJS eingesetzt.
Es wird die Datei „index.html“ erzeugt und erhält folgenden Aufbau (Beschreibung siehe Kommentare im HTML Gerüst):
<html>
<head>
<!-- Titel des Fensters -->
<title>Arduino SensorDaten</title>
<!-- CSS Klasse für die Styles in der HTML Objekte -->
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- AngularJS Bibliothek -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<!-- Beginn der AngularJS App (zuerkennen am Attribut ng-app) -->
<div ng-app="arduinoSensorData" ng-controller="sensorDataCtrl">
<table border="1">
<!-- Tabellenkopf -->
<thead>
<tr>
<th>ID</th>
<th>VALUE</th>
<th>TIMESTAMP</th>
<th>DESCRIPTION</th>
</tr>
</thead>
<!-- Tabellenkörper mit den Daten -->
<tbody>
<!-- Schleife über das JSON -->
<tr ng-repeat="x in items">
<td>{{ x.ID }}</td>
<td>{{ x.VALUE }}</td>
<!-- Hier wird der Timestamp in das gewünschte Datums/Zeit format umgewandelt. -->
<td>{{ x.TIMESTAMP | date:'dd.MM.yyyy HH:mm:ss ' }}</td>
<td>{{ x.DESCRIPTION }}</td>
</tr>
<tbody>
</table>
<!-- Ende der AngularJS App -->
</div>
<!-- Beginn des JavaScript Blocks-->
<script>
var app = angular.module('arduinoSensorData', []);
app.controller('sensorDataCtrl', function($scope, $http) {
$http.get("dbsensortable.php")
.then(function (response) { $scope.items = response.data.records; });
});
</script>
</body>
</html>
Das Ergebnis sieht in diesem Falle wiefolgt aus:
US4.3 – Filtern von Sensordaten
Aufgabe: Es soll eine Filtermöglichkeit geschaffen werden, womit die Tabelle & das Diagramm auf einen oder mehreren Sensoren gefiltert werden kann. Filtermöglichkeiten sollen sein:
- ID
- Sensor
- Wert
Lösung: Die einfachste Möglichkeit einen Filter zu implementieren ist ein Eingabefeld und dieses mit „ng-model=’Variablenname'“ an den Filter der Tabelle zu „registrieren“
Das Feld für die Eingabe der Suche:
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search" ng-model="search">
</div>
</div>
</form>
Nun muss noch die Tabelle um das Attribut „filter“ und der Variable „search“ erweitert werden.
<tr ng-repeat="x in names | filter:search">
Den „Rest“ übernimmt in diesem Falle AngularJS für uns.
In dieser Lösung wird über alle Felder der Tabelle gesucht und gefiltert, man kann noch nicht nach der Zeit filtern da immernoch der UNIX Timestamp drin steht aber nur die Anzeige anders ist. Für das korrekte Filtern der Zeit könnte man nun die SQL Query anpassen so das die korrekte Zeit im Datensatz steht oder aber man muss die Suche anpassen. Dazu aber später mehr….
Im Zuge der Implementierung der Filtermöglichkeit habe ich das Design „etwas“ angepasst.
Für die Lösung habe ich Codebestandteile aus dem Tutorial „Sort and Filter a Table Using Angular“ von Chris Sevilleja verwendet.