| <<< Vorheriges Thema - Nächstes Thema >>> |
|
| Autor |
Nachricht |
kdw
Anmeldedatum: 05.05.2006
Beiträge: 1442
|
 Verfasst am: 12.01.2015, 12:36 Titel: 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
Zuletzt bearbeitet von kdw am 15.01.2015, 06:56, insgesamt einmal bearbeitet |
|
| Nach oben |
|
 |
kdw
Anmeldedatum: 05.05.2006
Beiträge: 1442
|
| Verfasst am: 13.01.2015, 07:43 Titel: 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 |
|
| Nach oben |
|
|
kdw
Anmeldedatum: 05.05.2006
Beiträge: 1442
|
| Verfasst am: 15.01.2015, 07:24 Titel: 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 |
|
| Nach oben |
|
|
|
|
Sie können keine Beiträge in dieses Forum schreiben.
Sie können auf Beiträge in diesem Forum nicht antworten.
Sie können Ihre Beiträge in diesem Forum nicht bearbeiten.
Sie können Ihre Beiträge in diesem Forum nicht löschen.
Sie können an Umfragen in diesem Forum nicht teilnehmen.
|
|
Registrieren
Einloggen, um private Nachrichten zu lesen
