menu.helpcustomize

This page is part of the web-frontend or homepage from the UMG 508, UMG 604,UMG605,UMG 511 and similar devices. It offers you an highly modifiable and customizable interface.
This document will inform you about the possibility's and how to benefit from them.

Add new sites

In order to add a new site, create a file with a ".html"-extension.
Feel free adopting the following base structure:

<incl header.htm>
<h2>Information</h2>
<br>
<incl footer.htm>

You can use FTP to transfer the file onto the device. Use the subdirectory "/html" because this is the root directory for the HTTP-Server.
Using both <incl {FILE_NAME}>-commands includes the HTML-structure, the menu and the JavsScript-Library for extended functionality.


Add the new site to the menu

The menu entries are stored as a JS array in the file "menu.js". Each main category link (the blue ones) is represented as a JS object with the following properties:

One link object consist of a link, text and optionally an HTML ID and link target. The text is an ID from the translation table, see add a translation.

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

The HTML ID can be used with document.getElementById("id") or short ById("id") to access elements from JS.
The URL should begin with "/", thus the link is relative to the root directory. Therefore the menu will continue working even in sub directories. If the site from the link entry is loaded, the menu item background will be white automatically.

Insert system variables

Using the keyword <rep _SYSVAR> it is possible to insert its value into the HTML-Document. Adding an additional number sets the position after decimal point. Example:

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


Insert system variables using JavaScript

Using JavaScript has some advantages:
1. The command is shorter to write.
2. The unit will be added automatically. (Exception: HIDENUNIT)
3. Position after decimal point can be set.
4. Automatic scaling using Si-Prefix, e.g. ["k"] or ["micro"](from "yotta" to "pico")
5. Autoupdate and AutoupdateScroller as an option.
6. Automatic tooltip with time of the occurrence for _MAX-, _AVG_MAX-, _MIN-values.

  Pre-condition: the system variable has a second system variable ending with "_T".
  Example: _ULN_MAX[0] , _ULN_MAX_T[0] time when _ULN_MAX[0] occurred.
7. The color can change to red if min or max value is violated. 8. Since version 1.1.2 sysvar supports hooks, which can be used to translate sysvar values at runtime. Eg. to change 1/0 to On/Off or images. More Information

document.write( sysvar("_ULN[0]") );
renders
document.write( sysvar("_ULN[0]", 4) );
renders
document.write( sysvar("_ULN[0]", 1, ["m"]) );
renders
document.write( sysvar("_ULN[0]", 5, ["k"], AUTOUPDATE) );
renders
document.write( sysvar("_ULN[0]", 3, SCROLL) );
renders
document.write( sysvar("_ULN[0]", HIDEUNIT) );
renders
document.write( sysvar("_ULN_MAX[0]", DISPLAYTIME) );
renders //tooltip with time of occurrence displays on mouseover
document.write( sysvar("_ULN_MAX[0]", MIN(210), MAX(230)) );
renders //color changes to red if one limit is violated.

Insert system variable with "AutoUpdate"

If you insert system variables with the flag "AutoUpdate" the value will update itself without reloading the page.
The interval is defined in "lib.js", variable AUTOUPDATE_INTERVAL.

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

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

There is also a slightly different version which displays the last three value using an fade-out effect.

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


Query system variables without page reload (Ajax) ( Example und Documentation )

It is possible to retrieve the value of system variables without reloading the page and use that value in JavaScript.
"/json.do" accept n system variables, comma separated and returns the variables, values and units in JSON-format.
Syntax:
http://umg/json.do?var1,var2,...,varN
var = system variable, z.B _SYSTIME or
var = system variable[from..to] as array, e.g. _ULN[0..2]

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

Query:
function getsysvar_callback(ResponseText){
	var response = new CResponse();
	response.parse(ResponseText);
	var VoltageL1 = response.value("_ULN[0]");
	var unit = response.unit("_ULN[0]");
	var con = response.get("_ULN[0]");
	alert("Voltage L1: "+ VoltageL1 +" "+unit +" = "+ con);
	// Its possible to do arithmetic operations: 
	if(response.value("_ULN[0]")/100 > 2.30) 
		alert("Over 230V!");
}

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

Set system variable(s):
function setsysvar_callback(ResponseText){
	alert("Data set");
}

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

Load / Save files on the device (JavaScript)

Utilizing the Ajax functionality of the UMG-library it is possible to load and save files without reloading the page. Because HTML-files can contain Jasic commands you can retrieve dynamic content from the device.
Example Load:

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

Example Save:

function saveuploadcallback(){
	alert("File saved");
}
AjaxRequestProvider.RegisterPostRequest(
	"/html/test.html",  			// Filename on device, note subdirectory html
	"file content test",    // Content
	saveuploadcallback,     // Callback
	null
);

Execute Jasic programs on the UMG

You can execute *.jas-Scripts on the device from the webpage by adding a parameter to the url.
Syntax: "_run=the_script.jas"

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

Remarks:
The site doesn't contains the output (eg. echo) from the Jasic-Script. The parameter triggers only the execution.
If you want to use output from a script on the page please use a HTML-site and embed the script with <? JASIC-Script ?> : That is similar to embedding PHP with <?php ?>

Ausgabe: <? 
 a = 1
 a = a+1
 print a
?>
Output: 2
Adding own Translations

Translation-Tables are stored in file /html/lang/XY.js where XY means the two character abbreviation for the language.
If one key doesn't exists the fallback-language /lang/de.js is used. If the fallback-language doesn't contain the key either, the key won't be translated. To use an entry from the translation use the span-tag:

<span class="trans">info.voltage</span> translate to menu.voltage

Using JavaScript you can access the translation feature directly using TranslateWord("key") or the shortcut tl("key").


Using TableHelper ( Example and Documentation )

This JS-class eases writing HTML-tables.
To use the class create a new instance of type TableHelper:

myTable = new TableHelper();

Then you can use myTable.NewRow() to add a new row and myTable.AddCell("Content") to populate this row with cells.
To add a <thead>-row use myTable.NewHeader() instead of myTable.NewRow()
In order to output the Table use myTable.flush() which returns plain html code for the table.

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

Context menu for tables

Many tables or graphs provide additional functionality. For Example update the measured values constantly without reloading the site or reset counters like min or maxvalue.
It is easy to add this functionality to you own data tables:
Pre-condition:
The system variables has to be inserted with the "sysvar" command using JavaScript. If one of these ends with "_MAX", "_MIN", "_AVG_MAX" the corresponding entries to reset that value will appear in the menu.

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

The function GetStdTableMenu() provides the standard menu. Feel free to replace this with your own context menu.


Own context menus ( Example and Documentation )

The JavaScript class CMenu provides the functionality of a context menu with items (with icons), checkable items and separators.
To create a menu call "new CMenu" with a callback-function which is called on events.
After that you can add items one by one:

function myMenuCallback(item){
alert("Item "+item.name+" with id "+item.id+" 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);

To display the context menu you can assign the menu to a Table with "TableHelper.AssignMenu(myMenu)" or call "CMenu.popup(x,y)" on your own events.
Example:

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

At first wrap the area for the context menu with a div-tag.
Don't use the whole page, because than there will be no "context menu free" area where second left-click causes the context menu to close.


JavaScript onload/unload-Events

Because the UMG-Library already registered the onload/unload-Events, don't use body onload="init_foo()" or something like that.
But you can register functions which will be called on this events using these functions: RegisterOnloadFunction(callback)
RegisterUnloadFunction(callback)
It is possible to register any number of functions
Example:

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

On which devices type runs the web site?
In order to distinguish between the devices, the lib.js module offers some variables:
	if(UMG604)
		device = "UMG604";
	if(UMG605)
		device = "UMG605";
	if(UMG510)
		device = "UMG510";
	if(UMG507)
		device = "UMG507";
	if(UMG508)
		device = "UMG508";
	if(UMG511)
		device = "UMG511";
Devices that implement the lib.js in full functionality like the UMG 604, the UMG 511, the UMG 508 or devices that not exists yet, have a UMG604 Compatibility flag.
	if(UMG604COMP)
		device ="UMG604 or UMG511 or..."

Lib.js Version

Thus some functionality is added to the lib.js after Version 1.0, it may be necessary to check a certain version status. Eg. support for iui and prototype.js was added in 1.4.0.

/*
 * 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.");	


Extend the configuration

You can extend or modify the config_*.html sites.