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.
In order to add a new site, create a file with a ".html"-extension.
Feel free adopting the following base structure:
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.
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.
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.
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:
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.
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.
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",""] }
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); }
function setsysvar_callback(ResponseText){ alert("Data set"); } function onClickButton(){ AjaxRequestProvider.RegisterRequest('dummy.html?_LANGUAGE=de,_SYSTIME=3242344323', setsysvar_callback); }
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 );
You can execute *.jas-Scripts on the device from the webpage by adding a parameter to the url.
Syntax: "_run=the_script.jas"
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
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:
Using JavaScript you can access the translation feature directly using TranslateWord("key") or the shortcut tl("key").
This JS-class eases writing HTML-tables.
To use the class create a new instance of type 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();
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.
The function GetStdTableMenu() provides the standard menu. Feel free to replace this with your own context menu.
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:
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.
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?
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..."
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.");
You can extend or modify the config_*.html sites.