de:doc:webui_tutorial
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revisionNext revisionBoth sides next revision | ||
de:doc:webui_tutorial [2015/08/09 16:58] – created admin | de:doc:webui_tutorial [2015/09/18 17:55] – admin | ||
---|---|---|---|
Line 26: | Line 26: | ||
<html lang=" | <html lang=" | ||
- | < | + | |
- | <script type=" | + | < |
- | <script type=" | + | <meta charset=" |
- | Oobd.writeString=function addText(text) { | + | <script type=" |
- | var targ = event.target || event.srcElement; | + | |
- | document.getElementById(" | + | |
- | } | + | |
- | </ | + | |
</ | </ | ||
+ | |||
< | < | ||
- | <object class="OOBDMap" | + | <button onclick="Oobd.update()">Update</button><label>< |
- | <object class=" | + | |
- | System Info: | + | |
- | <table> | + | <h3> |
- | <tr class=" | + | <object |
- | <tr class=" | + | <h3> |
- | <tr class=" | + | <object |
- | <tr class=" | + | <h3>System Info:</h3> |
- | <tr class=" | + | |
- | </ | + | |
- | < | + | |
- | < | + | |
+ | < | ||
+ | <tr class=" | ||
+ | <td class=" | ||
+ | <td class=" | ||
+ | </ | ||
+ | <tr class=" | ||
+ | <td class=" | ||
+ | <td class=" | ||
+ | </ | ||
+ | <tr class=" | ||
+ | <td class=" | ||
+ | <td class=" | ||
+ | </ | ||
+ | <tr class=" | ||
+ | <td class=" | ||
+ | <td class=" | ||
+ | </ | ||
+ | <tr class=" | ||
+ | <td class=" | ||
+ | <td class=" | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <p /> | ||
+ | < | ||
+ | |||
+ | |||
+ | |||
+ | < | ||
+ | // put here inits here as browser independent, | ||
+ | (function() { | ||
+ | // your page initialization code here | ||
+ | // the DOM will be available here | ||
+ | Oobd.writeString = function addText(text) { | ||
+ | document.getElementById(" | ||
+ | } | ||
+ | Oobd.start(); | ||
+ | })(); | ||
+ | </ | ||
</ | </ | ||
+ | |||
</ | </ | ||
+ | |||
</ | </ | ||
Line 95: | Line 127: | ||
oobd.js erkennt das alles und macht selbstständig folgendes: | oobd.js erkennt das alles und macht selbstständig folgendes: | ||
- | * das ganze Element bekommt einen onclick()- Handler, der ausgelöst wird, sobald der User draufklickt | + | * das ganze Element bekommt einen onclick()- Handler, der ausgelöst wird, sobald der User draufklickt. Dies wird über das Attribut '' |
* wenn ein neuer Wert für dieses Element ankommt, wird es der Eigenschaft " | * wenn ein neuer Wert für dieses Element ankommt, wird es der Eigenschaft " | ||
Line 103: | Line 135: | ||
Und im Attribut " | Und im Attribut " | ||
+ | |||
+ | |||
+ | In vielen Fällen will man den Funktionen noch zusätztliche Daten mitgeben. Diese können dann als String hinter den Lua- Funktionsnamen gehängt werden, also z.B. oobd: | ||
+ | |||
+ | |||
Line 168: | Line 205: | ||
</ | </ | ||
- | Der Rest bei den jeweiligen grafischen Elementen innerhalb des Bildes ist dann sehr einfach, weil genauso wie schon den HTML-Elementen weiter oben | + | Der Rest bei den jeweiligen grafischen Elementen innerhalb des Bildes ist dann sehr einfach, weil genauso wie schon den HTML-Elementen weiter oben: |
- | * '' | + | * '' |
- | * '' | + | * '' |
- | * '' | + | * '' |
+ | * '' | ||
<code xml> | <code xml> | ||
Line 179: | Line 217: | ||
... | ... | ||
| | ||
+ | | ||
| | ||
| | ||
Line 184: | Line 223: | ||
</ | </ | ||
- | < | + | |
+ | ===== jQuery UI ===== | ||
+ | |||
+ | jQuery verwaltet seine Objekte als jQuery- Objekte, OOBD verwaltet dagegen DOM- Elemente, die nur eine Unter-Eigenschaft der jQuery- Objekte sind. Das muss man im Auge behalten, wenn man zwischen jQuery und OOBD hin- und herspringt. | ||
+ | |||
+ | Erzeugt man z.B. ein neues jQuery- Element, dann holt man sich erst das eingebettete DOM- Object (jQueryObject[0]), | ||
+ | |||
+ | |||
+ | < | ||
+ | var newdiv = $("< | ||
+ | var oobdElement = newdiv[0]; | ||
+ | oobdElement.setAttribute(" | ||
+ | oobdElement.oodbupdate = function(input) { | ||
+ | / | ||
+ | }; | ||
+ | Oobd.addObject(oobdElement, | ||
</ | </ | ||
- | < | + | |
+ | In der oobdupdate()- Funktion dagegen, die von Oobd als Callback bei neuen darzustellenden Werten aufgerufen wird, muß man, um wieder mit jQuery- Funktionen arbeiten zu können, das aufgerufene " | ||
+ | |||
+ | < | ||
+ | |||
+ | oobdElement.oodbupdate = function(input) { | ||
+ | resultDocument = ... | ||
+ | $(this).html(resultDocument); | ||
+ | // -- don't forget to call the (" | ||
+ | }; | ||
+ | |||
</ | </ | ||
+ | |||
+ | |||
+ | ===== jQuery Widgets ===== | ||
+ | |||
+ | Auch für jQuery Widgets bietet OOBD eine Standardbehandlung an, indem in der Standard- oobdupdate()- Funktion davon ausgegangen wird, dass das Widget eine Zahl repräsentiert. Der empfangene neue Wert wird dann als Zahl dem Widget zugewiesen: | ||
+ | |||
+ | <code javascript> | ||
+ | oobdElement.oodbupdate= function(input){ | ||
+ | $(this).val(parseInt(input.value)); | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | |||
+ | Dies ist nur ganz geringfügig anders als bei den anderen Funktionen und wird nur deswegen in der separaten Javascript- Library '' | ||
+ | |||
+ | |||
+ | |||
+ | ===== Three.js : 3D- Elemente ===== | ||
+ | |||
+ | Die Anbindung an die 3D Welt über den Javascript- WebGL - Treiber Three.js hat natürlich viel spielerischen Charakter, aber auch seinen Reiz. Die Funktionalität ist ähnlich den farbwechselden Flächen bei den oben genannten SVG- Grafiken, nur das hier in der 3d- Welt schwebende Flächen, sogenannte Sprites, dann die Farbe wechseln. | ||
+ | |||
+ | Die Funktionen dafür sind in '' | ||
+ | |||
+ | <code javascript> | ||
+ | var oobdObjects = new Array(); | ||
+ | |||
+ | // | ||
+ | oobdObjects[0] = document.createElement(" | ||
+ | oobdObjects[0].setAttribute(" | ||
+ | oobdObjects[0].setAttribute(" | ||
+ | oobdObjects[0].setAttribute(" | ||
+ | oobdObjects[0].setAttribute(" | ||
+ | oobdObjects[0][" | ||
+ | |||
+ | </ | ||
+ | |||
+ | Wenn die Seite dann soweit geladen ist, ruft man die Funktion '' | ||
+ | |||
+ | |||
+ | |||
+ | ===== Funktionen der oobd.js ===== | ||
+ | |||
+ | Auch wenn die Library vieles selber macht, bietet sie auch ein paar Funktionen zum " | ||
+ | |||
+ | === oobd.init() === | ||
+ | Diese Funktion muß aufgerufen werden, bevor weitere Operationen mit Oobd gemacht werden sollen. Sie erzeugt die grundsätzlichen Strukturen. | ||
+ | |||
+ | === oobd.start(webSocketURL) === | ||
+ | Wenn alles soweit fertig aufgebaut worden ist und das System in den Normalbetrieb übergehen soll, ruft man '' | ||
+ | |||
+ | === oobd.clearVisualisers === | ||
+ | Löscht die interne Liste der grafischen Elemente. Notwendig, falls man den Seiteninhalt neu aufbaut und die alten Elemente durch neue ersetzt. | ||
+ | |||
+ | === oobd.update() === | ||
+ | Ruft für alle Elemente die Update- Funktion auf, so als ob man jedes Element einzeln anklicken würde. Der große Unterschied liegt aber darin, dass an die Lua- Funktion ein Update-Typ von 1 gemeldet wird, wohingegen ein normales " | ||
+ | |||
+ | |||
+ | === oobd.timer(onOff: | ||
+ | Hiermit wird der interne OOBD- Timer ein- bzw. ausgeschaltet, | ||
+ | |||
+ | === oobd.add (id, initialValue) und oobd.addObject(object, | ||
+ | Für ein Element der OOBD- Überwachung, | ||
+ | |||
+ | |||
+ | === oobd.sendUpdateReq(name, | ||
+ | Dient dazu, einen Update- Request eines Elements zu starten, was ja sonst durch das Anklicken passieren würde. Sinnvoll auch da, wo ein anklickbares Element mit passender ID gar nicht existiert, man aber die Lua- Funktion mit dem Namen aufrufen möchte. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
de/doc/webui_tutorial.txt · Last modified: 2015/09/18 17:59 by admin