Language Switcher
HTML+komórka+jQuery
- Szczegóły
UWAGA! Artykuł nieco przestarzały ze względu na wprowadzenie ograniczenia single origin policy również na przeglądarkach mobilnych (co nie miało miejsca w 2011r). Warto przeczytać by poznać zasady komunikacji i możliwości zastosowań, lecz wykorzystać 1-do-1 się nie da.
Zgłębiając temat sterowania przez komórkę i stron ssi, sięgnąłem po bibliotekę jQuery, dzięki której łatwiej jest wysyłać komunikaty do serwera webowego sterownika PLC.
Przykładowo: aby odczytać watość wybranej zmiennej wystarczy wywolać funkcję:
$.ajax({type: 'POST', url: ServerName+"READPI", data: {ADR: 'MB1', FORMAT1: "%d"}, success: function(data){ alert(data);}});
Po kilku dniach pracy, z których większość spędzona była na wyszukiwaniu w googlu freewarowych ikon i wzorów tła, udało mi się sklecić następującą 'aplikację'. Plik htm wraz z plikami grafik i biblioteką jquery wgrałem (przez dropbox) do katalogu na karcie włożonej w telefon (HTC Desire z Androidem 2.2) i po wpisaniu w pasku adresu w standardowej przeglądarce telefonu: "file://sdcard/dropbox/dom.htm" uruchamiam stronę i steruję, czym chce. Oto zrzuty z ekranu:
Linki do ikon i grafik: www.freeiconsdownload.com, icons.mysitemyway.com, reszta wyszukana w googlu)
Zrobiłem też film dostępny na youtube. Przepraszam wszystkich za jakość (filmowałem kamerą wbudowaną w laptop). Mam nadzieję, żę to, co najważniejsze, widać na filmie dostatecznie dobrze.
Wchodząc natomiast w szczegóły - poniżej przykład strony, która wykorzystuje jQuery do odczytywania stanów wyjścia:
<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>
Zmienianie stanu jest trochę bardziej skomplikowane, gdyż wartość zmiennej sterującej trzeba zmienić na 1 i ponownie na 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'});
}
);
});
To, co naprawdę pomogło mi programować to:
- możliwość ustawiania timeoutów,
- proste odczytywanie stanów zapytań, anulowanie ich,
- zarządzanie niepowodzeniem zapytań
Szczegóły można doczytać na http://jquery.com/, hasła: ajax, post, itd.
W 'aplikacji', którą pokazałem na filmie, do każdego przycisku przypisane są zdarzenia .click, .flip oraz .read.
.click sprawdza, czy nie ma nie zakończonego zapytania read (przypisanego do danego przycisku) i jeśli takowe znajdzie, anuluje je. Potem wykonuje wysłanie wartości 1 i 0 do zmiennej sterującej i w przypadku powodzenia wywołuje .flip, czyli graficzną zmiana stanu
.read sprawdza, czy nie ma nie zakończonego zapytania write (z funkcji click) i jeśli takowe znajdzie przerywa funkcję. W przeciwnym wypadku odczytuje stan wyjścia i jeśli jest on inny od stanu wyświetlanego wywołuje .flip.
Przy takiej konstrukcji odświeżanie stanu wszystkich przycisków na ekrenie sprowadza się do funkcji:
function ReadData(){
$("div[id^='Button']").each(function(){
$(this).trigger('read');
});
}
Oto piękno jQuery!
Więcej informacji o tym, jak zbudować stronę html do sterowania PLC znajduje się w częsci 'Wizualizacje HTML'.