de:doc:webui_tutorial
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
de:doc:webui_tutorial [2015/09/17 16:12] – admin | de:doc:webui_tutorial [2015/09/18 17:59] (current) – admin | ||
---|---|---|---|
Line 207: | Line 207: | ||
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 228: | Line 228: | ||
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. | 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 | + | Erzeugt man z.B. ein neues jQuery- Element, dann holt man sich erst das eingebettete DOM- Object (jQueryObject[0]), |
<code javascript> | <code javascript> | ||
- | |||
var newdiv = $("< | var newdiv = $("< | ||
- | |||
- | </ | ||
- | |||
- | dann holt man sich erst das eingebettete DOM- Object, um dann in Oobd damit zu arbeiten. | ||
- | |||
- | |||
- | <code javascript> | ||
var oobdElement = newdiv[0]; | var oobdElement = newdiv[0]; | ||
oobdElement.setAttribute(" | oobdElement.setAttribute(" | ||
Line 250: | Line 242: | ||
- | 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 " | + | 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 " |
<code javascript> | <code javascript> | ||
Line 264: | Line 256: | ||
- | ===== jQuery | + | ===== jQuery |
- | ===== In SVG eingebettete Funktionen ===== | + | 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][" | ||
- | <code xml> | ||
</ | </ | ||
+ | |||
+ | 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.1442499134.txt.gz · Last modified: 2015/09/17 16:12 by admin