User Tools

Site Tools


de:doc:webui_tutorial

This is an old revision of the document!


WebUI

Moderne Webbrowser bieten fazinierende Möglichkeiten, dem Benutzer alle möglichen Arten der Darstellung anzubieten und ihn interaktiv Dinge verändern zu lassen. Es es gibt kaum etwas, was ein Browser mit HTML, Javascript und WebGL nicht irgendwie anzeigen könnte.

Anzeigen und verändern ist natürlich auch letztlich der Sinn und Zweck von OOBD, so dass der Gedanke nicht weit weg ist, dies auch für OOBD über eine Weboberfläche zu realisieren.

Diese Seite beschreibt, was der Webdesigner wissen muss, um seine Fantasien der Webdarstellung letztlich per OOBD mit dem Auto zu verbinden.

Zuerst einmal ist das alles viel einfacher als gedacht, denn OOBD und die oobd.js- Library kapseln alles das, was der Webdesigner nicht kennt. Wer schon mal mit CSS und javascript in Berührung kam, hat eigentlich schon gewonnen.

Das Prinzip

Zuerst einmal arbeiten die Website und OOBD selber asynchron, d.h. jeder schickt Daten, wann er lustig ist. Dies geschieht per Websocket, aber da braucht sich der Designer nicht drum zu kümmern, das passiert alles im Hintergrund über die oobd.js Library. Der Designer muß nur dafür sorgen, dass seine Elemente (Visualizer) eine Callback- Funktion haben, die ankommene Daten auswertet, also z.B. den reinkommenden Zahlenwert anzeigt, den Zeiger passend stellt oder die Farbe ändert, wie auch immer, und selbst das erledigt oobd.js für bekannte Visualizer- Typen selber.

Ein Schritt-für-Schritt Beispiel

Nehmen wir mal eine komplette Webseite und zerpflücken sie in ihre Bestandteile

<!DOCTYPE html>
 
<html lang="en">
 
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="../libs/oobd/1/oobd.js"></script>
 
</head>
 
<body>
 
<button onclick="Oobd.update()">Update</button><label><input type='checkbox' onclick='Oobd.timer(this.checked);'>Timer</label>
 
	<h3>Click on the circle to cycle its state<h3>
	<object class="OOBDMap" data="imagetest.svg" type="image/svg+xml"></object>
	<h3>Click on the arrow to turn it's angle<h3>
	<object class="OOBDMap" data="arrow.svg" type="image/svg+xml"></object>
	<h3>System Info:</h3>
 
	<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>

Am Anfang findet sich die Definition des Character-Sets. Dies ist wichtig, weil OOBD mit utf8 arbeitet, Javascript aber defaultmäßig mit utf16. Ohne diese Definition würden Sonderzeichen ziemlich komisch aussehen.

<!DOCTYPE html>
 
<html lang="en">
<head><meta charset="utf-8">

Hier laden wir die oobd.js dazu. Sie wird nach dem kompletten Laden automatisch aktiv und scannt das Document nach den Elementen, die es verwalten soll

<script type="text/javascript" src="../libs/oobd/1/oobd.js"></script>

Hier kommt was Anwendungsspezifisches: OOBD erzeugt ja Textausgaben. Wenn man diese sichtbar machen oder sonstwie nutzen möchte, weist man Oobd.writeString die Funktion zu, die aufgerufen werden soll, wenn ein Text eintrudelt.

In unserem Beispiel hier wird der Text dann an ein Textfeld der Seite angehängt.

<script type="text/javascript">
Oobd.writeString=function addText(text) {
    document.getElementById("textoutput").value += text;
}
</script>

Als besonderes Schmankerl kann oobd.js direkt in svg eingebettete grafische Elemente und javascript verwalten, d.h. man braucht am eigentlichen Seitenquelltext nichts ändern, sondern “schreibt” nur das Bild neu, wenn sich darin Elemente oder Funktionen ändern.

Das es sich um ein solches spezielles Bild handelt, erkennt oobd.js daran, dass das Object die Klasse “OOBDMap” hat.

<object class="OOBDMap" data="imagetest.svg" type="image/svg+xml"></object>

Hier nun ein Typ, den oobd.js selbstständig verwalten kann. Die grundsätzliche Identifizerung erfolgt über die Klasse “OOBD”, der Typ über das Attribut “oobd:type”, hier “te”. Weiterhin besitzt das Element zwei Unterelemente der Klassen “name” und “value”.

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. 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
<tr class="OOBD" oobd:type="te" oobd:fc="greet:" id="greetings"><td class="name">Bus</td>         <td class="value">Click for Update</td></tr>

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”.

Und am Ende vom Code dann noch eben das text-Ausgabefeld.

<p>Outputs<p>
    <textarea id="textoutput"></textarea>

In SVG eingebettete Funktionen

SVG ist, vereinfacht ausgedrückt, auch bloß HTML, allerdings mit Bildelementen statt mit Texten und Tabellen. Aber auch hier gibt es einzelne Unterelemente, Ereignishandler und Javascript.

Nehmen wir mal das Beispielbild aus dem Git-Repository, hier allerdings etwas eingekürzt. Solche Bilder lassen sich prima erst mit Inkscape malen und dann mit einem Texteditor tunen

Hier der Kopf der Datei. Wichtig sind drei Stellen

  • der svg Tag bekommt einen onLoad()- Event
  • der zusätzliche Namespace xmlns:oobd=“http://www.oobd.org/namespaces/oobd” wird deklariert
  • das Bild bekommt mit <script type/… sein eigenes Javascript. Darin wird jedem Bild-Element der Klasse “oobd” die Funktion “oobdupdate” verpasst. Die wird dann später aufgerufen, wenn für das Element Daten ankommen.
<svg  onload="init(evt)"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:oobd="http://www.oobd.org/namespaces/oobd"
   width="332.4375"
   height="426.71875"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="imagetest.svg">
 
<script type="text/ecmascript"><![CDATA[
function init(evt) {
	svgDocument = evt.target.ownerDocument;
	var svgItem = svgDocument.getElementsByClassName("oobd");
		for (i2 = 0; i2 < svgItem.length; ++i2) {
		svgItem[i2].oodbupdate= function(input){
			var value=atob(input.value);
			if (value=="i"){ // no anser from module, so ignored
				this.setAttribute("style", "fill:#75A3A3");
			} else if (value=="n"){ // no errors, so green
					this.setAttribute("style", "fill:#66FF33");
			} else if (value=="y"){ //  errors, so orange
				this.setAttribute("style", "fill:#FF9933");
			} else { // any kind of fatal error, so red
				this.setAttribute("style", "fill:#FF0000");
			}
		};
	}
}
 
 
]]></script>

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
  • oobd:type=“ci” (ci= clickable image) gibt eine genauere Typenbezeichnung
  • 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
    <path
       ...
       oobd:type="ci"
       oobd:click="yes"
       oobd:fc="dtcStatus:125b11_741"
       class="oobd" />

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.

var newdiv = $("<div></div>");
var oobdElement = newdiv[0];
oobdElement.setAttribute("oobd:fc","dtcStatusXML:"+ modules[m].id);
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 “this”- Object, was ja ein normales DOM- Element ist, per $(this) erst mal wieder in ein jQuery-Object umwandeln:

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
};

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:

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 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

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);

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 ws:localhost:8443'' 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.

This website uses cookies. By using the website, you agree with storing cookies on your computer. Also you acknowledge that you have read and understand our Privacy Policy. If you do not agree leave the website.More information about cookies
de/doc/webui_tutorial.1442591733.txt.gz · Last modified: 2015/09/18 17:55 by admin