Language Switcher
jQuery plugin - Wprowadzenie
- Szczegóły
Kod, który udostępniam umożliwia przekształcenie dowolnego elementu strony HTML w interaktywny przycisk wysyłający dane do sterownika PLC lub pole read-only, które odczytuje informacje. Wtyczka ‘automatyzuje’ i upraszcza komunikację.
Wykorzystanie jej zależy od wyobraźni i możliwości piszącego. Jeśli lubicie przyciski w tabelach, warstwach, animowanych oknach – to super. Oto przykład gotowej strony html:
Poniżej przedstawiam wprowadzenie i prosty przykład zastosowania. Na kolejnych stronach opiszę wybrane funkcje oraz przedstawię bardziej złożone przykłady. Całość była testowana na systemie z Windowsem 7, w przeglądarce Chrome, na sterowniku WAGO 750-841 z firmware w wersji 16.
UWAGA!!! ze względu na ograniczenia cross-origin (access-control-allow-origin...) uruchamianie zapytań ajaxowych z pliku przechowywanego na dysku lokalnym jest uniemożliwiane przez przeglądarki. Dla celów testów przeglądarkę Chrome można uruchomić z parametrami: --disable-web-security oraz --user-data-dir=MYDIR..., co umożliwi komunikację między stroną html zapisaną na dysku w katalogu MYDIR a sterownikiem PLC. Zapraszam do lektury kolejnego artykułu "Problemy z połączeniem".
Po pierwsze, trzeba zadbać, by od strony PLC wszystko było gotowe. Oto przykład kodu PLC_PRG w CoDeSys. W deklaracji zmiennych:
VAR VARIABLE 1 AT %MB1 : BOOL; LIGHT1 : Fb_LatchingRelay; (* Building_common.lib*) END_VAR
Gdzie ‘MB1’ jest adresem, pod którym będziemy się komunikować z VARIABLE1 a LIGHT1 jest blokiem, który steruje wyjściem.
W części programowej PLC_PRG parametryzuje blok funkcyjny do sterowania np. światłem:
LIGHT1(xSwitch:= IN1 OR VARIABLE1); OUT1:=LIGHT1.xActuator;
Gdzie IN1 to wejście binarne (np. przycisk), a OUT1 wyjście binarne sterujące danym obwodem. OUT1 otrzymuje adres QX0.0 - do skonfigurowania w Resources/PLC Configuration.
Tyle po stronie PLC. Następnie tworzymy stronę html (do czego polecam opensourcowy Notepad++, wystarczy jednak zwykły notatnik):
1. W <head> zawieramy linki do jQuery i mojej wtyczki:
<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. W <body> zawiera 1 warstwę służącą za przycisk z obrazkiem żarówki:
<div id="Button1" class="Button"><img id="Button1_Image" src="/css/Light0.png" alt="" /></div>
Example1
4. W części skryptów zawiera deklarację 1 zmiennej z adresem IP sterownika oraz 1 funkcję:
<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 jest zmienną globalną przechowującą adres sterownika PLC (lub strony przekazującej komunikację, o przekierowywaniu piszę w oddzielnym artykule)
Funkcja $(window).load uruchomi się po pełnym wczytaniu strony i przypisze warstwie “Button1” odpowiednie parametry.
Przypisanie do elementu Button1 funkcji .MakeTapButton() sprawi, iż w momencie kliknięcia będzie on wysyłał do PLC pod adres ‘MB1’ wartość 1 i następnie 0 (tj. ‘tap’). Ponad to cyklicznie stan wyjścia QX0.0 będzie odczytywany z PLC a stan przycisku i obrazka Button1_Image będzie aktualizowany .
Polecenie $.StartRefreshing() uruchamia odczytywanie stanów wszystkich aktywnych przycisków na danej stronie z zadanym interwałem (domyślnie co 5 sec.)
W efekcie powinniśmy otrzymać stronę z przyciskiem, który odzwierciedla stan wyjścia o adresie QX0.0 (odświeżany co 5 sec) i który po naciśnięciu wysyła 1 i następnie 0 pod adres MB1, co powoduje włączenie/wyłączenie ‘światła’; bloku funkcyjnego Fb_LatchingRelay.
