Language Switcher
jQuery plugin - Introduction
- Details
The code I make available for download enables to transform any element of a HTML page into an interactive button sending data to the PLC or a read-only field reading the data. The plugin makes the communication simple and automatic.
The scope of usage depends on the imagination of the user. If you like buttons in tables, layers or animated fields – it does not matter. Here is an example of a ready html page:
Below I present an introduction and a simple usage example. The pages to follow describe the parameters of individual functions and include more complex examples. The code an the examples were tested on a system running Windows 7, the Chrome browser and communicating with a WAGO PLC 750-841 with the firmware v. 16.
ATTENTION!!! due to cross-origin (access-control-allow-origin...) limitations, running ajax queries from files stored on local drives is blocked by web browsers. Running Chrome with parameters: "--disable-web-security" and "--user-data-dir=MYDIR" allows communication betwen html files stored on local drive at MYDIR directory and the PLC. Please read the next article 'Connection problems'.
At the beginning we need to make sure that on the side of PLC everything is ready. Here is an example of a CoDeSys PLC_PRG program. In variable declaration:
VAR VARIABLE 1 AT %MB1 : BOOL; LIGHT1 : Fb_LatchingRelay; (* Building_common.lib*) END_VAR
Where ‘MB1’ is an address with which we will communicate with ‘VARIABLE1’ and the ‘LIGHT1’ is a function block, which controls the PLC output.
In the program itself we need to setup the function block:
LIGHT1(xSwitch:= IN1 OR VARIABLE1); OUT1:=LIGHT1.xActuator;
Where ‘IN1’ is a binary PLC input (for example a button), ‘OUT1’ is a binary output controlling a circuit. ‘OUT1’ receives an address QX0.0 (configurable at Resources/PLC Configuration).
So much on the side of the PLC. In the second step we need to create a html page (try using the opensource Notepad++, but every notepad will suffice):
1. In <head> incudes links to jQuery and my plugin:
<script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.e-dom.2.0.js"></script>
2. Zawiera link do pliku css, który nie jest konieczny, ale poprawi układ graficzny
<link type="text/css" href="/css/jquery.e-dom.css" rel="stylesheet" />
3. In <body> includes 1 div with an image of a lightbulb:
Example1
4. In the script part includes declaration of 1 variable with the IP address of the controller and a function:
<script type="text/javascript">
var ServerName='http://192.168.1.1/'; //to, oczywiście przykład
$(window).load(function(){
$('#Button1').MakeTapButton({
'MB1',
'QX0.0',
image: 'Button1_Image'
});
$.StartRefreshing();
});
</script>
ServerName is a global variable holding the address of your PLC (or a page, which is used to redirect the traffic – more in a separate article).
The function $(window).load will be launched after the page is fully loaded. It will assign the needed parameters to the ‘Button1’ div.
Using the function .MakeTabButton() on the ’Button1’ will turn it into a button, which when clicked will send to the given PLC address a value=1 and 0 (‘tap’). Additionally, periodically it will read the value from QX0.0 and update the status of the button as well as the Button1_Image.
The command $.StartRefreshing(); starts the refreshing process of all active buttons with given interval (default 5sec )
As the result we should have a page with one button reflecting the current status of the output with the QX0.0 address (refreshed every 5 sec.) and which, when clicked, sends 1 and 0 to the MB1 address, which turns the ‘light’ on and off.
