menu.helpcustomize

Die Weboberfläche der der Geräte UMG 508,UMG 511, UMG 604, UMG 605 oder ähnliche von Janitza electronics, die Sie hier sehen, ist im hohen Maße veränderbar und erweiterbar.
Dieses Dokument soll eine Einführung geben, welche Möglichkeiten vorhanden sind und wie diese genutzt werden können.

Hinzufügen einer Seite

Um eine neue Seite hinzuzufügen, erstellen Sie eine neue Datei mit der Endung ".html". Folgende Grundstruktur kann übernommen werden:

<incl header.htm>
<h2>Einführung</h2>
<br>
<incl footer.htm>

Die Datei können Sie per FTP auf das Gerät in den Unterordner "/html" übertragen. Denn dieser Unterordner ist der Hauptordner des HTTP-Servers.
Durch die beiden <incl {FILE_NAME}>-Befehle binden Sie Menü, Rahmen und das JavaScript für die ganze Funktionalität ein.


Einfügen der Seite in das Menü

Die Menüeinträge befinden sich in der Datei "menu.js" als JavaScript-Array "menu". Jeder Haupteintrag ist ein JS Objekt mit den folgenden Eigenschaften:

Ein Link Objekt besteht aus einem Link, einer Text ID, einer HTML ID und einem Link-Target. Die letzten zwei sind optional. Der Text ist eine ID aus der Spachedatei, siehe Übersetzungen hinzufügen.

{
   "href": "/info_u.html", // URL
   "content": "menu.voltage", // Text ID
   "id":"elementID", //Optionale HTML ID
   "target":"_new" //Optionales Link-Target
},

Die HTML ID kann dann bei document.getElementById("id") oder kurz ById("id") angegeben werden.
Die URL sollte sich mit "/..." auf das HTML-Rootverzeichniss beziehen, da das Menü auch in Unterordnern weiter funktioniert. Bei Aufruf einer HTML-Seite wird der passende Menüeintrag automatisch weiß hinterlegt.

Einfügen von Systemvariablen

Durch das Schlüsselwort <rep _SYSVAR> können Sie im HTML-Code den Inhalt einer Systemvariablen einfügen.
Durch Anhängen einer Zahl können die Nachkommastellen geregelt werden.
Beispiel

<rep _ULN[0]> ergibt
<rep _ULN[0],3> ergibt


Einfügen von Systemvariablen per JavaScript

Dieser Weg hat verschiedene Vorteile:
1. Der Befehl ist kürzer.
2. Die Einheit wird automatisch ergänzt. (Ausnahme: HIDENUNIT)
3. Die Genauigkeit kann auch angegeben werden.
4. Automatische Skalierung: Si-Präfixe können angegeben werden, mit ["k"] oder["micro"] (von "yotta" bis "pico")
5. Autoupdate und AutoupdateScroller als Option verfügbar
6. Automatische Anzeige im Tooltip der Auftrittszeit für _MAX-, _AVG_MAX-, _MIN-Werte.

  Voraussetzung: Zu der Systemvariablen existiert eine zweite mit der Endung "_T", z.B. _ULN_MAX[0] und _ULN_MAX_T[0]
7. Die Farbe kann rot werden, wenn Min / Max Werte überschritten werden. 8. Seit Lib-Version 1.1.2 werden auch Hooks unterstützt, um z.B. 0/1 in Ein/Aus oder in Bilder zu übersetzen. Weitere Information

document.write( sysvar("_ULN[0]") );
ergibt
document.write( sysvar("_ULN[0]", 4) );
ergibt
document.write( sysvar("_ULN[0]", 1, ["m"]) );
ergibt
document.write( sysvar("_ULN[0]", 5, ["k"], AUTOUPDATE) );
ergibt
document.write( sysvar("_ULN[0]", 3, SCROLL) );
ergibt
document.write( sysvar("_ULN[0]", HIDEUNIT) );
ergibt
document.write( sysvar("_ULN_MAX[0]", DISPLAYTIME) );
ergibt //Zeitpunkt wird angezeigt, wenn Sie mit der Maus den Wert überfahren.
document.write( sysvar("_ULN_MAX[0]", MIN(210), MAX(230)) );
ergibt //Wert wird rot wenn ein Limit nicht eigehalten wird.

Einfügen von Systemvariablen mit AutoUpdate

Diese Systemvariablen werden in einenem kurzem Zeitabstand aktualisiert.
Das Intervall ist definiert in der Datei "lib.js", Vvariable AUTOUPDATE_INTERVAL.

<span class="autoupdate" name="_ULN[0]"></span>

--or--
<script>
document.write( sysvar("_ULN[0]", AUTOUPDATE) );
</script>

Man kann auch den History-Effekt benutzen, dazu verwendet man die Klasse "autoupdateScroller":

<span class="autoupdateScroller" name="_ULN[0]"></span>


Systemvariablen zur Laufzeit abfragen (Ajax) ( Beispielseite und Dokumentation )

Man kann über einen Aufruf verschieden Systemvariablen abholen und in JavaScript verarbeiten ohne dass die Seite neu lädt.
"/json.do" liefert alle gewünschten Werte im JSON-Format zurück, welche als Parameter übergeben wurden:
Syntax:
http://umg/json.do?var1,var2,...,varN
var = Systemvariable, z.B _SYSTIME oder
var = Systemvariable[von..bis] als Array, z.B _ULN[0..2]

/json.do?_ULN[0..1],_SYSTIME,_LANGUAGE
	{ "_ULN": [
				[ 231.7520,117.9893],
				"V"
			  ], 
	  "_SYSTIME": [1199804366.0000,"sec"], 
	  "_LANGUAGE": ["en",""]
	 }

Auslesen:
function getsysvar_callback(ResponseText){
	var response = new CResponse();
	response.parse(ResponseText);
	var SpannungL1 = response.value("_ULN[0]");
	var einheit = response.unit("_ULN[0]");
	var zusammen = response.get("_ULN[0]");
	alert("Spannung L1: "+ SpannungL1 +" "+einheit +" = "+ zusammen);
	// Mit den Werten kann gerechnet werden:
	if(response.value("_ULN[0]")/100 > 2.30) 
		alert("Über 230V!");
}

function onClickButton(){
	AjaxRequestProvider.RegisterRequest('/json.do?_ULN[0..3],_LANGUAGE', getsysvar_callback);
}		

Setzen:
function setsysvar_callback(ResponseText){
	alert("Okay");
}

function onClickButton(){
	AjaxRequestProvider.RegisterRequest('dummy.html?_LANGUAGE=de', setsysvar_callback);
}		

Laden/Speichern von Dateien auf dem Gerät (JavaScript)

Über die Ajax-Funktionalität ist es möglich Dateien auf dem UMG zu lesen und zu speichern.
Da HTML-Dateien auch Jasic-Befehle beinhalten können, ist es so auch möglich dynamische Inhalte abzurufen.
Beispiel Laden:

function file_received(responseText){
	alert("File: " + responseText);
}
// Parameter: file, callback
AjaxRequestProvider.RegisterRequest('index.html', file_received);

Beispiel Speichern:

function saveuploadcallback(){
	alert("File saved");
}
AjaxRequestProvider.RegisterPostRequest(
	"/html/test.html",  			// Filename on device
	"Datei inhalt Test",    // Content
	saveuploadcallback,     // Callback
	null
);

Der Speicherort ist relativ zu dem Hauptverzeichnis des UMGs, also "/". Um zum Beispiel die "index.html" Seite der Weboberfläche zu überschreiben, lautet der Pfad "/html/index.html".


Jasic-Programme auf dem UMG starten

Es können beim Öffnen einer Seite oder auch per Ajaxaufruf *.jas-Skripte auf dem UMG ausgeführt werden.
Dazu wird der Parameter "_run=the_script.jas" übergeben.

Beispiel:
http://umg-addr/seite.html?_run=the_script.jas

Die Seite wird normal angezeigt.
Soll die Ausgabe eines Skriptes zur Verfügung stehen, benutzen Sie eine HTML-Seite und betten das Skript mittels <? JASIC-Script ?> ein. Innerhalb dessen können Sie den print-Befehl benutzen.
Dies ist ähnlich dem Einbetten von PHP mittels <?php ?>

Ausgabe: <? 
 a = 1
 a = a+1
 print a
?>
Ausgabe: 2
Übersetzung hinzufügen

Übersetzungen werden in den Dateien /html/lang/XY.js gespeichert. XY ist die Kurzform der jeweiligen Sprache.
Wird ein Schlüssel nicht gefunden wird die "Fallback"-Sprache /lang/de.js verwendet. Wird der Schlüssel dort auch nicht gefunden bleibt der Schlüssel stehen.
Die Übersetzung fügt man so ein:

<span class="trans">info.voltage</span> ergibt je nach Sprache menu.voltage

Direkt in JavaScript kann man auch die Funktion TranslateWord("Schlüssel") oder kurz tl("Schlüssel") verwenden.


Benutzen von TableHelper ( Beispielseite und Dokumentation )

Diese JS-Klasse erleichtert das Erstellen von HTML-Tabellen. Beispiele finden sich in vielen Dateien.
Um diese Klasse zu nutzen muss erst eine Instanz von TableHelper erzeugt werden:

myTable = new TableHelper();

Dann mit myTable.NewRow() eine neue Zeile erzeugen und mit myTable.AddCell("Content") Zellen hinzufügen.
Möchte man eine Überschriftzeile, so ist myTable.NewRow() mit myTable.NewHeader() zu ersetzen.

Die Ausgabe erfolgt durch den JS-Befehl:

document.write(myTable.flush()); --or-- document.getElementById("placeholder").innerHTML = myTable.flush();

Kontextmenü für Tabellen

Manche Tabellen auf der UMG-Homepage haben ein Links-Klick-Kontextmenü um das Autoupdate der Werte ein und auszuschalten und um bestimmte Werte zurückzusetzen.
Diese Funktionalität können Sie auch mit folgendem Befehl für eigene Datentabellen benutzen:
Voraussetzung: Die Variablen sind mit Java-Script Befehl "sysvar" eingefügt. Sollte eine von ihren Systemvariablen auf "_MAX", "_MIN", "_AVG_MAX" enden, stehen im Kontextmenü die jeweilige Funktion zum Zurücksetzen der jeweiligen Variablen zu Verfügung.

myTable = new TableHelper();
myTable.AssignMenu( GetStdTableMenu() );
myTable.NewHeader();
myTable.AddCell( sysvar("_ULN[0]") );

Es muss nicht das vorgefertigte Kontextmenü sein, sie können auch ein eigenes Kontextmenü zuweisen (siehe CMenu).


Eigene Kontextmenüs ( Beispielseite und Dokumentation )

Die JavaScript Klasse CMenu bietet Ihnen die Funktionalität eines Kontextmenüs, mit Checkboxen, Auswahlelementen mit Icons und Seperatoren.
Als erstes muss eine Instanz angelegt werden. Diese benötigt die Callback-Funktion welche bei Events aufgerufen wird.
Danach werden die Einträge in ihrer Reihenfolge hinzugefügt:

function myMenuCallback(item){
alert("Item "+item.name+" clicked!");
}
myMenu = new CMenu(myMenuCallback);
myMenu.AddButton(1,"Push me");
myMenu.AddButton(2,"Push me with Icon", "img/menu_button.png");
myMenu.AddSeperator();
myMenu.AddCheck(3,"Play / Pause",false);

Um das Kontextmenü aufzurufen, können Sie es einer Tabelle mit TableHelper.AssignMenu(myMenu) zuweisen oder es selbst bei einem Mouse-Event aufrufen:

<div id="areaWithCMenu">
Left click here!
</div>
<script language="JavaScript">
function mousedown_callback(evt){
	evt = (evt) ? evt : ((window.event) ? window.event : "");
	var elem = (evt.target) ? evt.target : evt.srcElement;
	var pos = extractMouseFromEvent(evt);
	myMenu.popup(pos.x,pos.y);	
	evt.cancelBubble = true; // Stop event from bubbling
}
function init(){
	var objDiv = document.getElementById("areaWithCMenu");
	AddEvent(objDiv, "click", mousedown_callback);	
}
RegisterOnloadFunction(init);
</script>

Zuerst wird ein Bereich auf der Webseite, für den das Menü gelten soll, mit einem DIV-Tag umschlossen.
Es ist sinnvoll nicht die ganze Seite zu benutzen, damit freie Bereich bleiben um mit einem wiederholten Linksklick das Menü auszublenden.


JavaScript onload/unload-Events

Da die UMG-Lib die onload/unload-Events bereits registriert hat, ist davon abzusehen body onload="init_foo()" oder ähnliche zu benutzen.
Um Funktionen bei den Events aufzurufen, stellt die UMG-Lib zwei Funktion bereit, welche mit der jeweiligen Callback-Funktion aufgerufen werden:
RegisterOnloadFunction(callback)
RegisterUnloadFunction(callback)
Es kann eine beliebige Anzahl von Funktionen registriert werden.
Beispiel:

function my_init(){
 alert(document.getElementById("hello").innerHTML);
}	
RegisterOnloadFunction(my_init);


Geräteunterscheidung
Um Geräte zu unterscheiden, bietet die Lib.js einige boolsche Variablen:
	if(UMG604)
		device = "UMG604";
	if(UMG605)
		device = "UMG605";
	if(UMG510)
		device = "UMG510";
	if(UMG507)
		device = "UMG507";
	if(UMG508)
		device = "UMG508";
	if(UMG511)
		device = "UMG511";
Geräte welche die lib.js komplett unterstützen, wie das UMG 604, UMG 511,UMG 508 oder Geräte die es noch nicht gibt, haben eine UMG604 Kompatibilitätsvariable.
	if(UMG604COMP)
		device ="UMG604 or UMG511 or..."

Lib.js Version

Das verschiedene Funktionalitäten nach der Version 1.0 der lib.js hinzugefügt werden, ist es teilweise wichtig diese zu überprüfen. Zum Beispiel sind die Bibliotheken "prototype.js" und "iui" ab Version 1.4.0 Teil der HP.

/*
 * Return true if Lib Version is equal or above min. version a.b.c
 */
function assertMinVersion(a,b,c){
	var v = LIB_JS_VERSION.match(/(\d)\.(\d)\.(\d)/);
	return (v && v.length==4) && (parseInt(v[1])*1e9 + parseInt(v[2])*1e6 + parseInt(v[3]) >= a*1e9+b*1e6+c);
}
if (!assertMinVersion(1,4,0)) 
			alert("This code needs homepage version 1.4.0+. Please update.");


Erweitern der Config-Klasse

In der Datei config.html befindet sich JavaScript der das ganze Formular erzeugt. Diese Seite kann auch nach Belieben angepasst werden.