Language Switcher
HTML+cell phone+jQuery
- Details
While working on controlling the home via cell phone and ssi sctripts, I stumbled upon a jQuery library, which helps a lot at communication with a PLC controller.
For example, to read a value of a given variable the following function is sufficient:
$.ajax({type: 'POST', url: ServerName+"READPI", data: {ADR: 'MB1', FORMAT1: "%d"}, success: function(data){ alert(data);}});
After a few days of work, the majority of which was wasted on looking for freeware icons and backgrounds, I managed to put together the following app. The file with all the graphics and jQuery library are uploaded (via dropbox) to a directory at a SD card of my HTC Desire and after entering the following address: "file://sdcard/dropbox/dom.htm" i launch the page and controll all I want. Please take a look at the screen shots:
Linki do ikon i grafik: www.freeiconsdownload.com, icons.mysitemyway.com, reszta wyszukana w googlu)
The icons were found at: www.freeiconsdownload.com, icons.mysitemyway.com, the rest is an effect of googling.
I have also made a short movie posted at youtube. Please excuse the quality but I made the clip with my laptop camera. I do hope that what's most important is visible well enough.
Going deeper into details, below you will find an example of a page, which uses jQuery to read the status of an Output:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
$.post('http://192.168.1.1/READPI',
{ADR: 'QX0.6', FORMAT: '%d'},
function(data){
$('#Result').append(data);
}
);
});
});
</script>
</head>
<body>
<div id='Button1'>Kilknij mnie!</div>
<div id='Result'></div>
</body>
</html>
Changin (tapping) a variable is more complicated as the value must be first set to 1 and then to 0:
$('#Button1').click(function() {
$.post('http://192.168.1.1/WRITEPI',
{ADR1: 'MB1', VALUE1: '1', FORMAT1: '%d'},
function(){
$.post('http://192.168.1.3/WRITEPI',
{ADR1: 'MB1', VALUE1: '0', FORMAT1: '%d'});
}
);
});
The jQuery is really helpful by:
- easiness of setting timeouts,
- easy query management and termination,
- managing failed request
All the details are well described at http://jquery.com/, search for: ajax, post, etc.
In the 'app' I have shown in the movie, all buttons have 3 events attached: .click, .flip oraz .read.
.click checks if there is a read query (assigned to a given button) and if such is found it gets terminated. Following that the appropriate variable is set to 1 and 0. If successful, the event .flip is called, which changes the graphical state of the button.
.read checks if there is a write query (assigned to a given button, triggered by .click) and if such is found, interrupts the function. Otherwise it reads the status of the output and if it differs from the currently displayed one, the .flip event is called.
At such a construction refreshing all the buttons requires the following function:
function ReadData(){
$("div[id^='Button']").each(function(){
$(this).trigger('read');
});
}
That is the beauty of jQuery!
You can find more information about building a html page controlling a PLC in the 'HTML Visualizations' section.