Differences

This shows you the differences between two versions of the page.

--- de:doc:webui_tutorial [2015/09/17 16:45] – admin
+++ de:doc:webui_tutorial [2015/09/18 17:59] (current) – admin
@@ Line 273: / Line 273: @@
 ===== 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 §d- Welt schwebende Flächen, sogenannte Sprites, dann die Farbe wechseln.
+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 ''oobdthree.js'' zu finden. Definiert werden diese Elemente mit ihren 3D- Koordinaten in einem javascript- Array  wie hier gezeigt. Dieses Array kann man z.B. in eine separate Javascript-Datei auslagern und dann mit einladen
+<code javascript>
+var oobdObjects = new Array();
+//oobdObjects[0] = new Object();
+oobdObjects[0] = document.createElement("BUTTON");
+oobdObjects[0].setAttribute("oobd:fc","dtcStatus:125b11_741");
+oobdObjects[0].setAttribute("oobd:type","spritebutton");
+oobdObjects[0].setAttribute("oobd:click","yes");
+oobdObjects[0].setAttribute("id","M1");
+oobdObjects[0]["coord"] = new THREE.Vector3(1.10000, 0.20000, 0.30000);
+</code>
+Wenn die Seite dann soweit geladen ist, ruft man die Funktion ''oobdthree.loadOobdObjects(oobdObjects)'' auf, woraufhin die Elemente erzeugt werden.
-Die Funktionen dafür sind in ''oobdthree.js'' zu finden
 ===== Funktionen der oobd.js =====
+Auch wenn die Library vieles selber macht, bietet sie auch ein paar Funktionen zum "manuellen" Aufruf:
+=== 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.start()'' auf. Daraufhin wird der Websocket zu OOBD hin aufgebaut und der Datenaustausch beginnt. Gibt man keinen eigenen webSocketURL an, wird der Default  <nowiki>ws://localhost:8443</nowiki> verwendet.
+=== 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 "Anklicken" ein Updatetyp von 0 hat. So kann die Routine entscheiden, ob der User nur per allgemeinem Update den aktuellen Wert haben möchte, oder direkt geklickt hat und so eventuell eine Änderung im System haben möchte.
+=== oobd.timer(onOff: Boolean) ===
+Hiermit wird der interne OOBD- Timer ein- bzw. ausgeschaltet, der zyklisch alle Elemente aktualisiert.
+=== oobd.add (id, initialValue) und oobd.addObject(object, intialValue) ===
+Für ein Element der OOBD- Überwachung, identifiert einmal anhand seiner ID oder mit der Objekt- Referenz selber
+=== oobd.sendUpdateReq(name, optid, value, updType) ===
+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.