Below is the list of the simple functions included in the jQuery.e-dom.2.0.js. Here is the link to the example package.
ServerName
.WriteValue()
.ReadValue()
.AddButtonCover()
.ShowButtonCover()
.HideButtonCover()
.RefreshIt()
.FlipIt()
StartRefreshing()
StopRefreshing()
RefreshData()
The first information, which needs to be placed in the code is the definition of the address of the PLC controller.
Example:
ServerName = ‘http://192.168.1.1’;
Sends a given value to a given address at the PLC. If successful, it triggers the .OnWriteSuccess() event.
Parameters:
Example 1 (within ‘$(window).load’ )
$(‘#Button1’).WriteValue({ address: ‘MB1’, value: 23 });
The data will be sent to the PLC only once – when the page is loaded. In order to bind the sending with a button click:
$(‘#Button1’).click(function(){ $(this).WriteValue({ address: ‘MB1’, value: 23 }); });
Example 2. After the data is sent, a ‘Success!’ alert will be displayed
$(‘#Button1’).click(function(){ $(this).WriteValue({ address: ‘MB1’, value: 23, successfn: function() { alert(‘Success!’); } }); });
Alternatively:
$(‘#Button1’).click(function(){ $(this).WriteValue({ address: ‘MB1’, value: 23 }); });
And defining the ‘OnWriteSuccess’ event , which is by default launched after successful data transfer:
$(‘#Button1’).bind(‘OnWriteSuccess’, function(){ alert(‘Success!’); return false; });
Reads data from the PLC from the given address. If successful, it triggers the .OnReadSuccess() event
Parameters
Example 1 (within ‘$(window).load’ )
$(‘#Field1’).ReadValue({ address: ‘MB1’ });
The data will be red from the PLC only once – when the page is loaded. Usually we need to do something with the received information. We define the ‘OnReadSuccess’ event:
$(‘#Field1).bind(‘OnReadSuccess’, function(event, data) { alert(data); });
I do not place more detailed examples of the .ReadValue() funciton. The .MakeReadField() uses ReadValue() and allows to avoid step-by-step programming.
ttaches to a given element a div with an id=”Element’s name_Cover” with ‘ButtonCover’ class and zIndex=9999 (on the top). Additionally it can add a ‘loading’ image in the center.
Parameters:
Example:
$(‘#Button1’).AddButtonCover({ imagefile: ‘css/alternativeloading.gif’ });
Shows the covering div with a given delay. In case of a slider element it is additionally deactivated.
Parameters:
Example:
$(‘#Button1’).ShowButtonCover({ coverdelay: 1000 });
Hides the covering div and in case of a slider element, it activates it.
Example:
$(‘#Button1’).HideButtonCover();
Lanuches the .ReadValue() function forwarding parameters stored at the given element under data-read and data-readtimeout (if defined).
Example:
$(‘#Button1’).RefreshIt();
Changes the status value (from 1 to 0, from 0 to 1) of a given element.
If the element has a defined ‘ImageToFlip’ attribute, the image is changed as follows:
XXXXX0.YYY to XXXXX1.YYY
XXXXX1.YYY to XXXXX0.YYY
The function adds or removes the ‘flipped’ class.
Example:
$(‘#Button1’).FlipIt();
Launches the periodical refresh of all elements carring the data-refresh=true attribute. The refersh rate can be defined.
Parameters:
Example:
StartRefreshing({ refreshrate: 3000 });
Refreshes the status/values of all elements carring the refresh=true attribute (technicall, each such element is fired with a .Refreshit() funciton).