Differences

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

--- de:doc:webui_tutorial [2015/08/09 16:58] – created admin
+++ de:doc:webui_tutorial [2015/09/18 17:59] (current) – admin
@@ Line 26: / Line 26: @@
 <html lang="en">
-<head><meta charset="utf-8">
-<script type="text/javascript" src="../libs/oobd/1/oobd.js"></script>
+<head>
-<script type="text/javascript">
+	<meta charset="utf-8">
-Oobd.writeString=function addText(text) {
+	<script type="text/javascript" src="../libs/oobd/1/oobd.js"></script>
-    var targ = event.target || event.srcElement;
-    document.getElementById("textoutput").value += text;
-}
-</script>
 </head>
 <body>
-<object class="OOBDMap" data="imagetest.svg" type="image/svg+xml"></object>
+<button onclick="Oobd.update()">Update</button><label><input type='checkbox' onclick='Oobd.timer(this.checked);'>Timer</label>
-<object class="OOBDMap" data="imagetest.svg" type="image/svg+xml"></object>
-System Info:
-<table>
+	<h3>Click on the circle to cycle its state<h3>
-<tr class="OOBD" oobd:type="te" oobd:fc="interface_serial:" id="Serial_number"><td class="name">Serial</td>  <td class="value">Click for Update</td></tr>
+	<object class="OOBDMap" data="imagetest.svg" type="image/svg+xml"></object>
-<tr class="OOBD" oobd:type="te" id="interface_Version"><td class="name">BIOS</td>    <td class="value">Click for Update</td></tr>
+	<h3>Click on the arrow to turn it's angle<h3>
-<tr class="OOBD" oobd:type="te" id="voltage"><td class="name">Voltage</td> <td class="value">Click for Update</td></tr>
+	<object class="OOBDMap" data="arrow.svg" type="image/svg+xml"></object>
-<tr class="OOBD" oobd:type="te" id="bustype"><td class="name">Bus</td>         <td class="value">Click for Update</td></tr>
+	<h3>System Info:</h3>
-<tr class="OOBD" oobd:type="te" oobd:fc="greet:" id="greetings"><td class="name">Bus</td>         <td class="value">Click for Update</td></tr>
-</table>
-<p>Outputs<p>
-    <textarea id="textoutput"></textarea>
+	<table>
+		<tr class="OOBD" oobd:type="te" oobd:fc="interface_serial:" oobd:value="A3-4711" oobd:click="yes" id="Serial_number">
+			<td class="name">Serial</td>
+			<td class="value">Click for Update</td>
+		</tr>
+		<tr class="OOBD" oobd:type="te" oobd:fc="interface_version:" oobd:value="CANINVADER" oobd:click="yes" id="interface_Version">
+			<td class="name">BIOS</td>
+			<td class="value">Click for Update</td>
+		</tr>
+		<tr class="OOBD" oobd:type="te" oobd:fc="interface_voltage:" oobd:value="14.0 Volt" oobd:click="yes" id="voltage">
+			<td class="name">Voltage</td>
+			<td class="value">Click for Update</td>
+		</tr>
+		<tr class="OOBD" oobd:type="te" oobd:fc="interface_bus:" oobd:value="CAN" oobd:click="yes" id="bustype">
+			<td class="name">Bus</td>
+			<td class="value">Click for Update</td>
+		</tr>
+		<tr class="OOBD" oobd:type="te" oobd:fc="greet:" oobd:click="yes" id="greetings">
+			<td class="name">Bus</td>
+			<td class="value">Click for Update</td>
+		</tr>
+	</table>
+	<p>Outputs</p>
+	<p />
+	<textarea id="textoutput"></textarea>
+	<script>
+		// put here inits here as browser independent, pure javascript solution for document.ready
+		(function() {
+			// your page initialization code here
+			// the DOM will be available here
+			Oobd.writeString = function addText(text) {
+				document.getElementById("textoutput").value += text;
+			}
+			Oobd.start();
+		})();
+	</script>
 </body>
 </html>
 </code>
@@ Line 95: / Line 127: @@
 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 ''oobd:click="yes"'' ausgelöst
   * wenn ein neuer Wert für dieses Element ankommt, wird es der Eigenschaft "innerhtml" des "Value" Elements zugewiesen und so dann dargestellt
@@ Line 103: / Line 135: @@
 Und im Attribut "oobd:fc" (fc steht für Function Call) liegt auch schon das ganze Geheimnis: Dies ist der Name der Lua- Funktion im OOBD backbone, der dieses Element quasi zugeordnet ist. Wird das Element "betätigt", wird die Lua Funktion aufgerufen, liefert die Funktion ein Erbebnis zurück, geht dies an dieses Element.
+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:fc="dtcStatus:125b11_741".
@@ Line 168: / Line 205: @@
 </code>
-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:
-  * ''class=oobd'' ist die grundlegende Identifierung
+  * ''class="oobd"'' ist die grundlegende Identifierung
-  * ''oobd:type=ci'' (ci= clickable image) löst die Einrichtung des onclick()-Handlers usw. aus
+  * ''oobd:type="ci"'' (ci= clickable image) gibt eine genauere Typenbezeichnung
-  * ''oobd:fc="dtcStatus:125b11_741" beinhaltet die korrospondierende Lua funktion und hinter dem : zusätzliche Funktionsparameter
+  * ''oobd:click="yes"''  löst die Einrichtung des onclick()-Handlers usw. aus,
+  * ''oobd:fc="dtcStatus:125b11_741"'' beinhaltet die korrospondierende Lua funktion und hinter dem : zusätzliche Funktionsparameter
 <code xml>
@@ Line 179: / Line 217: @@
        ...
        oobd:type="ci"
+       oobd:click="yes"
        oobd:fc="dtcStatus:125b11_741"
        class="oobd" />
@@ Line 184: / Line 223: @@
 </code>
-<code xml>
+===== 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]), um dann in Oobd damit zu arbeiten.
+<code javascript>
+var newdiv = $("<div></div>");
+var oobdElement = newdiv[0];
+oobdElement.setAttribute("oobd:fc","dtcStatusXML:"+ modules[m].id);
+oobdElement.oodbupdate = function(input) {
+     /.....
+};
+Oobd.addObject(oobdElement, "");
 </code>
-<code xml>
+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 "this"- Object, was ja ein normales DOM- Element ist, per ''$(this)'' erst mal wieder in ein jQuery-Object umwandeln:
+<code javascript>
+oobdElement.oodbupdate = function(input) {
+	resultDocument = ...
+	$(this).html(resultDocument);
+	// -- don't forget to call the ("refresh") call of the jQuery - object to make the changes visible
+};
 </code>
+===== 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));
+};
+</code>
+Dies ist nur ganz geringfügig anders als bei den anderen Funktionen und wird nur deswegen in der separaten Javascript- Library ''oobdjqx.js'' gehalten, um so keine Abhängigkeit von jQuery im Hauptmodul ''oobd.js''   zu haben.
+===== 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 ''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.
+===== 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.