| <<< Previous topic - Next topic >>> |
|
| Author |
Message |
kdw
Joined: 05 May 2006
Posts: 1481
|
 Posted: 12.01.2015, 12:36 Post subject: RTDC mit HTML5 und jQuery … |
 |
|
Hallo Forum.
Auf RTDC-Datenprojekte lässt sich auch problemlos mit einer HTML5-Datei zugreifen, die einfach auf dem eigenen Rechner in einem beliebigen Verzeichnis gespeichert wird. Nehmen wir einfach einmal das folgenden Datenprojekt mit dem Namen TEMP und den beiden Daten-Items T_SSV und T_SC als Beispiel:
| Code: | 01: {
02: "do": [
03: {
04: "id": 10,
05: "name": "TEMP",
06: "desc": "Temperaturfuehler",
07: "property": {},
08: "item": [
09: {
10: "id": 49,
11: "name": "T_SSV",
12: "data": [
13: 1416655631,
14: "18.2"
15: ],
16: "type": "GAUGE",
17: "desc": "Temperatur Demo SSV",
18: "property": {
19: "unit": "C"
20: }
21: },
22: {
23: "id": 50,
24: "name": "T_SC",
25: "data": [
26: 1416583523,
27: "23.6"
28: ],
29: "type": "GAUGE",
30: "desc": "Temperatur Demo SC",
31: "property": {
32: "unit": "C"
33: }
34: }
35: ]
36: }
37: ]
38: } |
Durch dieses Datenprojekt ergeben sich die folgenden RTDC-REST-API-Links für HTTP-GET-Zugriffe:
| Code: | 01: http://<SERVER:PORT>/rtdc/v0/?get=do
02: http://<SERVER:PORT>/rtdc/v0/?get=data
03: http://<SERVER:PORT>/rtdc/v0/?get=do&do=TEMP
04: http://<SERVER:PORT>/rtdc/v0/?get=data&do=TEMP&item=T_SC
05: http://<SERVER:PORT>/rtdc/v0/?get=data&do=TEMP&item=T_SSV |
Mit den ersten beiden Links (Zeilen 01 und 02) lässt sich per REST-API-READ mit Hilfe einer HTTP-GET-Abfrage (HTTP-GET-Request) das komplette Datenprojekt abfragen – die HTTP Response liefert im ersten Fall die vollständigen JSON-Daten zum RTDC-Datenprojekt, im zweiten Fall nur die Daten-Items. Mit dem Link in Zeile 03 wird das vollständige Datenobjekt TEMP abgefragt – falls es weitere Datenobjekte in einem Datenprojekt gibt, werden sie in diesem Fall nicht angezeigt. Der Link in Zeile 04 dient zur Abfrage des Daten-Items T_SC im Datenobjekt TEMP, der Link in Zeile 05 bezieht sich auf T_SSV, ebenfalls im Datenobjekt TEMP. In beiden Fällen liefert die jeweilige HTTP-Response die JSON-Daten mit dem betreffenden Item. Hier ein HTML5-Beispiel:
| Code: | <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
table, td, th{
background-color: #DDDDDD;
border: 1px solid black;
}
</style>
<script>
var auth_key = '<API KEY>';
var rtdc_url = 'http://<SERVER:PORT>/rtdc/v0/'
/* RTDC REST API READ ... */
function rtdc_get(url, user, value, callback){
$.ajax({
url: url,
crossDomain: true,
dataType: 'json',
type: "GET",
headers: {'X-RTDC-Auth-Key':user},
data: value,
success: callback
});
}
/* Tabelle aus den Daten erstellen ... */
function create_tab(json){
var $table = $('<table></table>');
$table.append( '<tr><th>Object</th><th>Item</th><th>Value</th><th>Description</th></tr>' );
for (var d in json.do) {
$table.append( '<tr><td>' + json.do[d].name + '</td><td colspan="2"></td><td>' + json.do[d].desc + '</td></tr>' );
for (var i in json.do[d].item) {
$table.append( '<tr><td></td><td>' + json.do[d].item[i].name + '</td><td>' + json.do[d].item[i].data[1] + '</td><td>' + json.do[d].item[i].desc + '</td></tr>' );
}
}
$('#here_table').append($table);
}
rtdc_get(rtdc_url, auth_key, {get:"do"}, create_tab);
</script>
</head>
<body>
RTDC read demo
<div id="here_table"></div>
</body>
</html> |
Speichert man diesen HTML-Code zum Beispiel auf einem Windows-PC in einer Datei mit dem Namen rtdc-get-td.html und ersetzt die Platzhalter für <SERVER:PORT> und <API KEY> durch gültige Zeichenfolgen, erfolgt nach einem Doppel-Klick im Datei-Explorer auf den Dateinamen der Aufruf eines Webbrowsers mit anschließendem Zugriff auf den folgenden Link:
| Code: | | http://<SERVER:PORT>/rtdc/v0/?get=do |
Das Beispiel benutzt jQuery (http://jquery.com/). Als Ausgabe wird eine Tabelle mit fünf Spalten im Browserfenster angezeigt. Alle in einem Datenprojekt vorhandenen Datenobjekte und alle Daten-Items bzw. deren aktuelle Werte werden in der Tabelle ausgegeben.
Gruß KDW
Last edited by kdw on 15.01.2015, 06:56; edited 1 time in total |
|
| Back to top |
|
 |
kdw
Joined: 05 May 2006
Posts: 1481
|
| Posted: 13.01.2015, 07:43 Post subject: jQuery … |
|
|
Hallo Forum.
Der wichtige Baustein in dem HTML-GET-Request-Beispiel weiter oben ist die JavaScript-Funktion
| Code: | 01: function rtdc_get(url, user, value, callback){
02: $.ajax({
03: url: url,
04: crossDomain: true,
05: dataType: 'json',
06: type: "GET",
07: headers: {'X-RTDC-Auth-Key':user},
08: data: value,
09: success: callback
10: });
11: } |
Hier werden die jQuery-AJAX-Funktionen genutzt, um einen GET-Request an einen x-beliebigen Server im Internet zu schicken. Verantwortlich dafür ist die Zeile 04 „crossDomain: true“. Siehe auch: http://api.jquery.com/jquery.ajax/
Die JavaScript-Funktion rtdc_get führt den HTTP-GET-Request aus und ruft im Erfolgsfall (JSON-Daten vom RTDC-Server per HTTP-Response erhalten) die Callback-Funktion create_tab auf:
| Code: | 01: function create_tab(json){
02: var $table = $('<table></table>');
03: $table.append( '…' );
04: for (var d in json.do) {
05: $table.append( '…' );
06: for (var i in json.do[d].item) {
07: $table.append( '…' );
08: }
09: }
10: $('#here_table').append($table);
11: } |
In create_tab werden die kompletten JSON-Daten der HTTP-Response gelesen und in eine Tabelle umgewandelt. Diese wird abschließen als Ergebnis angezeigt.
Gruß KDW |
|
| Back to top |
|
|
kdw
Joined: 05 May 2006
Posts: 1481
|
| Posted: 15.01.2015, 07:24 Post subject: HTTP-PUT-Request … |
|
|
Hallo Forum.
Auch eine HTTP-PUT-Anfrage (REST-Operation UPDATE per HTTP-PUT-Request) ist selbstverständlich per HTML5 und jQuery möglich. Hier ein Beispiel:
| Code: | <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
table, td, th{
background-color: #DDDDDD;
border: 1px solid black;
}
</style>
<script>
var auth_key = '<API KEY1>';
var acc_key = '<API KEY2>';
var rtdc_url = 'http://<SERVER:PORT>/rtdc/v0/'
/* RTDC REST API UPDATE ... */
function rtdc_put(url, user, pass, value, callback){
$.ajax({
url: url,
crossDomain: true,
dataType: 'json',
type: "PUT",
headers: {'X-RTDC-Auth-Key':user,'X-RTDC-Access-Key':pass},
contentType: "application/json; charset=utf-8",
data: JSON.stringify(value),
success: callback
});
}
rtdc_put(rtdc_url, auth_key, acc_key, <JSON DATA>, function(d){alert('RTDC update done');});
</script>
</head>
<body>
RTDC update demo
</body>
</html> |
Speichert man diesen HTML-Code zum Beispiel auf einem Windows-PC in einer Datei mit dem Namen rtdc-put-td.html und ersetzt die Platzhalter für <SERVER:PORT>, <API KEY1>, <API KEY2> und <JSON DATA> durch gültige Zeichenfolgen, erfolgt nach einem Doppel-Klick im Datei-Explorer auf den Dateinamen der Aufruf eines Webbrowsers mit anschließendem Zugriff auf den folgenden Link:
| Code: | | http://<SERVER:PORT>/rtdc/v0/ |
Wenn zum Beispiel im Datenobjekt TEMP das Daten-Item T_SC mit einem neuen Wert versehen werden soll, wäre z. B. folgende Zeichenfolge
| Code: | | {do:[{name:"TEMP",item:[{name:"T_SC",data:"31.8"}]}]} |
als Ersatz für den Platzhalter <JSON DATA> erforderlich.
Gruß KDW |
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
REGISTER
Log in to check your private messages
