1. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
dSS JSON API und JavaScript
Stromverbrauchsanzeige im Browser mit 5 Zeilen Javacript
Andreas Stricker
futureLAB AG
2011-01-27

2. ¨ ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Uber mich Inhalt
¨
Ubersicht
Zielpublikum
Sie haben noch nicht mit der dSS JSON API gearbeitet
Es sind nur geringe JavaScript Kenntnisse notwendig
Einstieg zum Lernen und Entdecken der M¨ glichkeiten
o

3. ¨ ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Uber mich Inhalt
¨
Ubersicht
Andreas Stricker
Angestellt bei futureLAB AG
Arbeitet nicht an digitalSTROM Projekten
Letzter Kontakt mit dSS: vor einem Jahr

4. ¨ ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Uber mich Inhalt
¨
Ubersicht
Andreas Stricker
Angestellt bei futureLAB AG
Arbeitet nicht an digitalSTROM Projekten
Letzter Kontakt mit dSS: vor einem Jahr

5. ¨ ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Uber mich Inhalt
¨
Ubersicht
Andreas Stricker
Angestellt bei futureLAB AG
Arbeitet nicht an digitalSTROM Projekten
Letzter Kontakt mit dSS: vor einem Jahr

6. ¨ ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Uber mich Inhalt
Inhalt
¨
Ubersicht
¨
Uber mich
Inhalt
Das JSON API
Beispiel
HTML Rahmen
Javascript
Umgebung
Dokumentation
Weitere Ideen
Fazit

7. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
dSS JSON API
Basis URL: http://localhost:8080/json
digitalSTROM Ressourcen
apartment
zone
device
circuit
Weitere Ressourcen
property
event
metering
...

8. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
dSS JSON API
Basis URL: http://localhost:8080/json
digitalSTROM Ressourcen
apartment
zone
device
circuit
Weitere Ressourcen
property
event
metering
...

9. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
dSS JSON API
Basis URL: http://localhost:8080/json
digitalSTROM Ressourcen
apartment
zone
device
circuit
Weitere Ressourcen
property
event
metering
...

10. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
RPC Interface
Das letzte Element der URL ist ein Funktionsname
Danach folgen die Parameter als normale URL Parameter
Beispiel mit Devices:
https://localhost:8080/json/device/getName?dsid=350...
Funktionen werden auch uber HTTP GET aufgerufen
¨

11. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
RPC Interface
Das letzte Element der URL ist ein Funktionsname
Danach folgen die Parameter als normale URL Parameter
Beispiel mit Devices:
https://localhost:8080/json/device/getName?dsid=350...
Funktionen werden auch uber HTTP GET aufgerufen
¨

12. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
RPC Interface
Das letzte Element der URL ist ein Funktionsname
Danach folgen die Parameter als normale URL Parameter
Beispiel mit Devices:
https://localhost:8080/json/device/getName?dsid=350...
Funktionen werden auch uber HTTP GET aufgerufen
¨

13. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
RPC Interface
Das letzte Element der URL ist ein Funktionsname
Danach folgen die Parameter als normale URL Parameter
Beispiel mit Devices:
https://localhost:8080/json/device/getName?dsid=350...
Funktionen werden auch uber HTTP GET aufgerufen
¨

14. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
Mit dem JSON API “spielen”
¨
Uber die Kommandozeile mit curl oder wget
curl -k ’https://localhost:8080/json/apartment/getName’
wget -qO - --no-check-certificate ’https://localhost:8080/
json/apartment/getName’
M¨ glicherweise muss noch
o
Im Browser API URLs aufrufen (z.B. Firefox mit JSONovich
oder Firebug Plugin)

15. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
Mit dem JSON API “spielen”
¨
Uber die Kommandozeile mit curl oder wget
curl -k ’https://localhost:8080/json/apartment/getName’
wget -qO - --no-check-certificate ’https://localhost:8080/
json/apartment/getName’
M¨ glicherweise muss noch
o
Im Browser API URLs aufrufen (z.B. Firefox mit JSONovich
oder Firebug Plugin)

16. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
Mit dem JSON API “spielen”
¨
Uber die Kommandozeile mit curl oder wget
curl -k ’https://localhost:8080/json/apartment/getName’
wget -qO - --no-check-certificate ’https://localhost:8080/
json/apartment/getName’
M¨ glicherweise muss noch
o
Im Browser API URLs aufrufen (z.B. Firefox mit JSONovich
oder Firebug Plugin)

17. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
Mit dem JSON API “spielen”
¨
Uber die Kommandozeile mit curl oder wget
curl -k ’https://localhost:8080/json/apartment/getName’
wget -qO - --no-check-certificate ’https://localhost:8080/
json/apartment/getName’
M¨ glicherweise muss noch
o
Im Browser API URLs aufrufen (z.B. Firefox mit JSONovich
oder Firebug Plugin)

18. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
Mit dem JSON API “spielen”
¨
Uber die Kommandozeile mit curl oder wget
curl -k ’https://localhost:8080/json/apartment/getName’
wget -qO - --no-check-certificate ’https://localhost:8080/
json/apartment/getName’
M¨ glicherweise muss noch
o
Im Browser API URLs aufrufen (z.B. Firefox mit JSONovich
oder Firebug Plugin)

19. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Das JSON API
Mit dem JSON API “spielen”
¨
Uber die Kommandozeile mit curl oder wget
curl -k ’https://localhost:8080/json/apartment/getName’
wget -qO - --no-check-certificate ’https://localhost:8080/
json/apartment/getName’
M¨ glicherweise muss noch
o
Im Browser API URLs aufrufen (z.B. Firefox mit JSONovich
oder Firebug Plugin)

20. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
HTML Rahmen Javascript
Beispiel
Lesen des aktuellen Gesamtverbrauch.

21. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
HTML Rahmen Javascript
Beispiel
HTML Rahmen f¨ r die Applikation
u
<? xml version = " 1.0 " ? >
< html xmlns = " http :// www . w3 . org /1999/ xhtml " xml : lang = " en " >
< head > < title > dSS Metering Demo : Simple </ title > </ head >
< body >
< h1 > dSS Metering Demo : Simple </ h1 >
< div id = " data " >
Power : < span class = " power - info " >0 W </ span >
</ div >
< script
type = " text / javascript "
src = " / js / extjs / adapter / ext / ext - base - debug . js " >
</ script >
< script type = " text / javascript "
src = " / js / extjs / ext - all - debug . js " > </ script >
< script type = " text / javascript "
src = " / js / demo . js " > </ script >
</ body >
</ html >

22. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
HTML Rahmen Javascript
Beispiel
Verwendung von ExtJS ist naheliegend, da beim dSS schon
dabei
Aktueller Verbrauch des Apartment lesen
Ext . onReady ( function () {
Ext . Ajax . request ({
url : ’/ json / apartment / getConsu mption ’ ,
success : function ( response ) {
console . debug ( " Received JSON : " , response .
responseText ) ;
}
}) ;
}) ;

23. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
HTML Rahmen Javascript
Beispiel
Aktueller Verbrauch des Apartment lesen
Ext . onReady ( function () {
Ext . Ajax . request ({
url : ’/ json / apartment / getConsu mption ’ ,
success : function ( response ) {
console . debug ( " Received JSON : " , response .
responseText ) ;
}
}) ;
}) ;

24. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
HTML Rahmen Javascript
Beispiel
Aktueller Verbrauch im HTML DOM Baum aktualisieren
function onDat aReceiv ed ( response ) {
var data = Ext . decode ( response . responseText ) ,
consumption = ( data &&
data . result &&
data . result . consumption ) || 0 ,
el = Ext . get ( ’ data ’) . select ( ’. power - info ’) . first () ;
el . update ( " " + Math . round ( consumption ) + " W " ) ;
}
Ext . onReady ( function () {
Ext . Ajax . request ({
url : ’/ json / apartment / getConsu mption ’ ,
success : o nDataRec eived
}) ;
}) ;

25. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
HTML Rahmen Javascript
Beispiel
Aktueller Verbrauch regelm¨ssig aktualisieren
a
function onDat aReceiv ed ( response ) {
var d = Ext . decode ( response . responseText ) ,
consumption = ( data &&
data . result &&
data . result . consumption ) || 0 ,
el = Ext . get ( ’ data ’) . select ( ’. power - info ’) . first () ;
el . update ( " " + Math . round ( consumption ) + " W " ) ;
}
Ext . onReady ( function () {
Ext . TaskMgr . start ({
interval : 3000 ,
run : function () {
Ext . Ajax . request ({
url : ’/ json / apartment / g etConsum ption ’ ,
success : o nDataRe ceived
}) ;
}
}) ;
}) ;

26. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Umgebung
Umgebung zum testen
dSS mit echter Hardware
oder dSS im Simulationsmodus

27. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Umgebung
Wohin mit den Dateien?
Dateien nach data/webroot/ kopieren
Danach sind sie unter https://localhost:8080/
erreichbar

28. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Dokumentation
Notwendige Dokumentation und Hilfe
Einstiegspunkt Dokumentations¨ bersicht im Wiki [digc]
u
JSON API Dokumentation, entweder Online [digb] oder
dSS Build Verzeichnis (make doc gefolgt von xsltproc
doc/json api.xslt build/doc/json api.xml >
build/doc/json api.html)
Wiki Seite zur Simulation [digd]
dss-developer Mailingliste [diga]

29. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Weitere Ideen
Entdecken Sie den Property Tree
Laden Sie sich Zeitreihen von der Metering Location und
erstellen Sie sich daraus ein Diagramm
Programmieren Sie sich ein Desktop Widget (Dashboard,
Sidebar, etc)
L¨ sen Sie Events aus
o

30. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Fazit
Das JSON API ist einfach zu verstehen und zu benutzen.

31. ¨ ¨
Ubersicht API Ubersicht Beispiel Umgebung Dokumentation Weitere Ideen Fazit
Fazit
Das API ist gut dokumentiert [digc].

32. References
References I
digitalSTROM.org.
dss developer mailinglist.
http://forum.digitalstrom.org/cgi-bin/mailman/
listinfo/dss-developer.
digitalSTROM.org.
dss json api dokumentation.
http://developer.digitalstrom.org/releases/dss-0.
8.0-doc/dss-0.8.0-json_api.html.
digitalSTROM.org.
dss wiki dokumentations¨ bersicht.
u
http://developer.digitalstrom.org/redmine/
projects/dss/wiki/Documentation.

33. References
References II
digitalSTROM.org.
dss wiki seite zur simulation.
http://developer.digitalstrom.org/redmine/
projects/dss/wiki/Simulation.