We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Basic functions and parameters

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

 

ServerName

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

 

.WriteValue(options)

Sends a given value to a given address at the PLC.  If successful, it triggers the .OnWriteSuccess() event.

Parameters:

  • address – address for writing given as a string
  • value – value, which is to be send. Its format is not verified
  • format – optional, default ‘%d’. In the majority of cases it does need to be changed
  • terminateprevious – optional, default TRUE. Decides if in case an older, unfinished read request attached to the element is found it should be terminated
  • successfn – optional, function, which should be called after successful sending data to the PLC. If it is defined the default .OnWriteSuccess() will not be executed

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

 

.ReadValue(options)

Reads data from the PLC from the given address.  If successful, it triggers the .OnReadSuccess() event

 

Parameters

  • address – address for reading given as a string
  • format – optional, default ‘%d’. In the majority of cases it does neet to be changed
  • terminateprevious – optional, default TRUE. Decides if in case an older, unfinished read request attached to the element is found it should be terminated
  • terminatependingwrite – optional, default FALSE. Decides if in case an, unfinished write request attached to the element is found it should be terminated
  • timeout – optional, default 5000. Defines in ms the timeout for the read request
  • successfn – optional, function, which should be called after successful reading data from the PLC. If it is defined the default .OnReadSuccess() will not be executed.

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.

 

.AddButtonCover(options)

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:

  • addimage – optional, default TRUE. Decides if an image will be added
  • imagefile – optional, default 'css/loading.gif'. The path to the ‘loading’ image.

Example:

$(‘#Button1’).AddButtonCover({
	imagefile: ‘css/alternativeloading.gif’
});

 

.ShowButtonCover(options)

Shows the covering div with a given delay. In case of a slider element it is additionally deactivated.

 

Parameters:

  • coverdelay – optional, default 500.  Time in ms of the delay in showing the covering div.

 

Example:

$(‘#Button1’).ShowButtonCover({
	coverdelay: 1000
});

 

.HideButtonCover()

Hides the covering div and in case of a slider element, it activates it.

 

Example:

$(‘#Button1’).HideButtonCover();

 

.RefreshIt()

Lanuches the .ReadValue() function forwarding parameters stored at the given element under data-read and data-readtimeout (if defined).

 

Example:

$(‘#Button1’).RefreshIt();

 

.FlipIt()

 

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

 

StartRefreshing(options)

Launches the periodical refresh of all elements carring the data-refresh=true attribute.  The refersh rate can be defined.

 

Parameters:

  • refreshrate – optional, default 5000. Defines frequency of the refresh in ms. 

 

Example:

StartRefreshing({
	refreshrate: 3000
});

 

StopRefreshing()

Stops the periodical refresh.

 

RefreshData()

Refreshes the status/values of all elements carring the refresh=true attribute (technicall, each such element is fired with a .Refreshit() funciton).