ARS3-ER - sterownik z serwerem Web. Możliwość załączania 4 wyjść oraz kontroli/wizualizacji poziomu na 4 wejściach. cz. 2

Poniedziałek, 01 Czerwiec 2015

Druga część artykułu o sterowniku dotyczy sposobów dostosowania działania urządzenia do upodobań użytkownika. Opisano w niej tryb instalowania własnych stron wyświetlanych potem przez przeglądarkę internetową, a także to, w jaki sposób używając przeglądarki kontrolować poziomy logiczne na wejściach i wyjściach urządzenia. Dodatkowo, opisano metodę uruchomienia mechanizmu powiadomienia o zdarzeniu za pomocą e-mail. Rekomendacje: serwer przyda się w aplikacjach związanych z automatyką domową lub przemysłową.

Założeniem projektu było umożliwienie kontrolowania działania sterownika za pomocą dowolnej przeglądarki internetowej. Aby było to możliwe, sterownik musi mieć możliwość działania jak serwer Web. Oznacza to, że po wpisaniu w pasku przeglądarki adresu IP sterownika powinien on odesłać do przeglądarki źródło strony do wyświetlenia. Strony, której wygląd użytkownik może samodzielnie zaprojektować. Ten zamiar udało się w pełni zrealizować. Użytkownik może samodzielnie zaprojektować dwa typy stron: statyczne i dynamiczne. Strony statyczne będą wyświetlane zawsze tak samo. Wygląd stron dynamicznych będzie się zmieniał w zależności od aktualnego stanu sprzętowych wejść i wyjść sterownika.

Przechowywanie stron użytkownika

Strona wyświetlana przez przeglądarkę internetową jest dokumentem tekstowym HTML. Sterownik pracujący jako serwer po wywołaniu przez przeglądarkę odsyła jej dokument HTML, który przeglądarka wyświetla jako stronę.

Źródła stron które może wyświetlić serwer, zapisane są w wydzielonym obszarze pamięci Flash mikrokontrolera. Użyty w projekcie STM32F107VCT ma pamięć Flash mieszczącą 256 kB. Na strony użytkownika jest przeznaczony obszar od adresu 0x20000 do 0x3FFFF. Daje to 131071 bajtów na strony użytkownika łącznie z dodatkowymi plikami (grafika, tekst itp.). Innym ograniczeniem jest łączna liczba plików związanych z wyświetlanymi stronami. Dotyczy to wszystkich plików zapisanych w pamięci Flash: kodu HTML, plików graficznych zawierających np. ikony oraz innych. Pozycja wraz z nazwą każdego pliku jest zapisana w pamięci EEPROM sterownika. W wypadku, gdyby na wyświetlaną stronę składało się wiele setek elementów, pamięć EEPROM nie pomieści wszystkich ich adresów i wyświetlanie strony będzie niepoprawne. Orientacyjnie można przyjąć, że pamięć sterownika-serwera jest przystosowana do przechowywania i wyświetlenia kilku-kilkunastu podstron z grafiką o małej objętości.

Strona index

Wśród utworzonych przez użytkownika stron musi być jedna o nazwie index.html lub index.shtml (o tym drugim rozszerzeniu trochę dalej przy omawianiu stron dynamicznych). Strona index.html jest stroną startową (albo domową) i jest wysyłana jako pierwsza po wpisaniu w pasku przeglądarki adresu IP sterownika. Strona index.html powinna posiadać linki do innych podstron wyświetlanych przez sterownik-serwer.

Tworzenie statycznych stron użytkownika

Rysunek 1. Strona główna wyświetlana przez sterownik z serwerem Webdo

Do utworzenia i zapisania własnych stron użytkownika będą potrzebne:

Sterownik przyłączony do lokalnej sieci Ethernet.
Komputer z przeglądarką internetową.
Program narzędziowy SerwUs.
Edytor HTML.

Do tworzenia strony teoretycznie wystarczy jakikolwiek edytor tekstowy, jednak użycie wyspecjalizowanego edytora HTML ułatwia pracę. Ja używam edytora Bluefish, który jest zupełnie wystarczający do tworzenia stron w czystym języku HTML.

Przeglądarka pozwoli na wyświetlenie i ocenę tworzonej strony. Można także wykorzystać jej opcję podglądu źródeł (dokumentu tekstowego HTML) dowolnych stron. Jest to przydatne dla tych, którzy do tej pory nie mieli kontaktu z kodem HTML.

Przykładem najprostszej strony jest index.html wyświetlana przez sterownik pracujący w trybie stron predefiniowanych. Jej wygląd pokazano na rysunku 1. Strona wyświetla nagłówek, tekst, kilka linków do innych podstron, małą grafikę. Przy pomocy opcji podglądu można obejrzeć jej nieskomplikowany kod.

Utworzoną stronę należy zapisać na dysku komputera w wydzielonym katalogu. W tym katalogu powinny znaleźć się także pozostałe podstrony przeznaczone do zapisu Web do pamięci serwera. W ramach katalogu można utworzyć podkatalog przeznaczony np. dla plików graficznych. Nie polecam jednak tworzenia zbyt wielu zagnieżdżonych podkatalogów gdyż niepotrzebnie pochłania to zasoby pamięci EEPROM sterownika.

Po utworzeniu wszystkich potrzebnych stron, które mają być wyświetlane przez nasz serwer-sterownik i umieszczeniu ich w wydzielonym katalogu na dysku komputera czas na ich konwersję i przesłanie do sterownika. Służy do tego program narzędziowy SerwUs.

Rysunek 2. Zakładka Pliki HTML programu SerUS

Po uruchomieniu programu i połączeniu kablem portu USB komputera z gniazdem mini USB sterownika, należy użyć opcji programu automatyczne wykrywanie podłączonego urządzenia. Po wykryciu podłączonego sterownika i wyświetleniu się stosownych komunikatów można przejść do zakładki Pliki HTML programu narzędziowego. Widok zakładki pokazano na rysunku 2.

Po wybraniu opcji wybór plików do konwersji należy wskazać katalog z plikami do przesłania do sterownika. Wyświetlone zostaną nazwy umieszczonych w katalogu wszystkich plików łącznie z podkatalogami. Teraz należy wybrać opcję konwersja plików. W tym momencie program SerwUs rozpocznie przekształcanie plików do postaci akceptowanej przez sterownik, a następnie po kolei prześle je do zapisu w pamięci Flash mikrokontrolera. Jeżeli wszystko się powiedzie, powinien zostać wyświetlony stosowny komunikat. Opcja programu odczyt info o plikach Serwera służy do wyświetlenia informacji o nazwach plików zapisanych w pamięci FLASH kontrolera oraz o ich rzeczywistej długości po dokonanej konwersji.

Aby sterownik-serwer zaczął wyświetlać zapisane w pamięci pliki użytkownika należy w opcji programu serwisowego: wybór wyświetlanych przez mini-Serwer stron HTML zaznaczyć użytkownika. Od tej chwili po wpisaniu w pasku adresowym przeglądarki adresu IP sterownika powinny zacząć wyświetlać się statyczne strony użytkownika.

Tagi – łączniki pomiędzy sprzętem a kodem HTML

Do wykorzystania podstawowego waloru sterownika, którym jest możliwość jego obsługi przy pomocy przeglądarki będziemy potrzebowali stron generowanych dynamicznie. Wygląd tych stron będzie się zmieniał w zależności od ustawień sprzętowych wejść i wyjść sterownika. Dodatkowo dzięki stronom dynamicznym będzie możliwe wpływanie na ustawienia wyjść sterownika.

Przeglądarka internetowa i zwykły kod HTML niezbyt dobrze się nadają do interakcji ze sprzętem, czyli sterownikiem. Potrzebny jest dodatkowy łącznik i są nim tagi. Tagi umieszczone w kodzie HTML matrycy strony zapisanej w pamięci FLASH kontrolera, spowodują, że sterownik będzie w stanie modyfikować kod a w rezultacie i wygląd strony.

Pod terminem tagu rozumiem pewne zarezerwowane słowa kluczowe umieszczone w specjalnych obszarach kodu HTML. Pomysł zastosowania tagów nawiązuje do techniki SSI (Server Side Includes).

Wśród znaczników języka HTML jest znacznik komentarza. Jego składnia wygląda następująco . Kod w obszarze znacznika zaznaczony trzema kropkami jest ignorowany przez przeglądarkę i może mieć dowolną formę. Jest to doskonałe miejsce do przekazywania w treści dokumentu HTML słów kluczowych „tagów”, które poinstruują sterownik jak powinien się zachować np. jakie zmiany wprowadzić w generowanej stronie przed przesłaniem do przeglądarki. Struktura zmodyfikowanych komentarzy zawierających sterujące tagi będzie wyglądać następująco: , gdzie:

aa: kod tagu wskazujący na sterowany układ lub funkcję.
b: kod warunku, po którego spełnieniu tag jest aktywny (nieobowiązkowe, brak warunku oznacza, że tag jest aktywny zawsze).
cc: wartość warunku.
ddd...d: kod HTML wstawiany do strony generowanej dynamicznie, jeżeli warunek jest spełniony.

W ten sposób uzyskuje się zależność: jeżeli układ sprzętowy (np. stan wybranego wejścia sterownika) spełnia warunek (np. ma poziom wysoki) do kodu strony wstawiany jest kod ddd...d HTML umieszczony w obrębie tagu. Jeżeli warunek nie jest spełniony, kod nie zostanie dołączony.

Tagi warunkowego dołączenia kodu

Zestawienie tagów na które reaguje sterownik można wyświetlić klikając na link Tagi na stronach użytkownika na stronie index.html gdy sterownik przełączony jest w tryb wyświetlania stron predefiniowanych. Tagi warunku służą do warunkowego dołączania kodu HTML do strony generowanej dynamicznie, w zależności od aktualnego ustawienia wejść i wyjść sterownika. Poniżej wykaz 4 tagów służących do wyświetlania stanu 4 wejść IN1-4 sterownika:
tag_w_in1 tag_w_in2 tag_w_in3 tag_w_in4
Fragment kodu najprostszej strony dynamicznej korzystającej z tagów warunkowanych stanem wejść będzie wyglądał tak:
<p><b>Test wejścia IN1</b></p>   <p><b>Test wejścia IN2</b></p>   <p><b>Test wejścia IN3</b></p>   <p><b>Test wejścia IN4</b></p>  
Jeżeli wejście IN1 będzie ustawione, do kodu strony włączony zostanie tekst „IN1=1”. Jeżeli wejście IN1 będzie wyzerowane, do kodu strony zostanie włączony tekst „IN1=0”. To samo dotyczy pozostałych wejść. Poniżej kod wygenerowany przez serwer i przesłany do przeglądarki w sytuacji, gdy wejście IN2 będzie wyzerowane a pozostałe ustawione.
<p><b>Test wejścia IN1</b></p> IN1=1  <p><b>Test wejścia IN2</b></p>  IN2=0 <p><b>Test wejścia IN3</b></p> IN3=1  <p><b>Test wejścia IN4</b></p> IN=1 
Oczywiście np. zamiast napisu IN1=1 można umieścić dowolny inny fragment kodu HTML. Może to być chociażby link do ikon symbolizujących stan każdego wejścia. W ten sposób strona wyświetlana przez przeglądarkę będzie ciekawsza i bardziej czytelna. Z powodów technicznych w miejscu włączenia przez tag nie należy zamieszczać zbyt długich tekstów. Nie powinny być dłuższe niż ok. 100 znaków.

W podobny sposób można zobrazować aktualny stan wyjść czyli przekaźników PK1-4 sterownika. Służą do tego 4 kolejne tagi:
tag_w_out1 tag_w_out2 tag_w_out3 tag_w_out4

Sposób ich użycia jest identyczny, jak tagów wejść.

Tagi zastrzeżonych nazw formularzy

Tagi warunku nadają się do zobrazowania stanu w jakim znajdują się wejścia i wyjścia natomiast do wpływania na zmianę ustawienia wyjść (przekaźników PK1-4) używa się tagów i formularzy. Formularze to klasyczna metoda HTML przesyłania informacji od użytkownika poprzez przeglądarkę do sterownika. Za pomocą składni formularza można łatwo na pulpicie przeglądarki wyświetlić np. przycisk, po którego naciśnięciu do sterownika wysyłany zostaje sformatowany komunikat. Zastosowanie w nazwach formularzy zastrzeżonych nazw tagów spowoduje, że przesyłany komunikat zostanie przez sterownik zidentyfikowany i posłuży do ustawienia konkretnego przekaźnika. Oto 4 tagi używane do sterowania 4 przekaźników PK1-4:
tag_f_out1 tag_f_out2 tag_f_out3 tag_f_out4

Poniżej przykład formularza wykorzystanego do sterowania przekaźnikiem PK1. W formularzu wykorzystano przycisk, pole ukryte oraz tag warunku do zobrazowania aktualnego stanu przekaźnika.
<form method=”get” action=”test_out.shtml”>   <input type=”submit” value=”przeciwny”/> </form>

Po naciśnięciu przycisku przez przeglądarkę wysłany zostanie komunikat, który będzie widoczny na pasku adresu – http://192.168.1.102/test_out.shtml?tag_f_out1=1. Sterownik zidentyfikuje „tag tag_f_out1” a jego parametr „=1” spowoduje, że przekaźnik zostanie włączony. Potem sterownik zmodyfikuje kod strony i odeśle go do wyświetlenia przeglądarce:
<form method=”get” action=”test_out.shtml”> WY1= ON zmień na <input type=”hidden” name=”tag_f_out1” value=”0”/>  <input type=”submit” value=”przeciwny”/> </form>

Po ponownym naciśnięciu przycisku przeglądarka wyśle do sterownika taki komunikat http://192.168.1.102/test_out.shtml?tag_f_out1=0, który spowoduje wyłączenie przekaźnika. Odesłany przez sterownik kod strony będzie wyglądał następująco:
<form method=”get” action=”test_out.shtml”>  WY1=OFF zmień na <input type=”hidden” name=”tag_f_out1” value=”1”/> <input type=”submit” value=”przeciwny”/> </form>

Podane fragmenty kodu HTML pochodzą ze strony test_out.shtml wyświetlanej jako predefiniowana. Całość można wyświetlić korzystając z opcji podglądu źródła strony w przeglądarce.

Oczywiście, zamiast przycisku można użyć formularza wyświetlającego obrazek, w który można kliknąć. Przykładowy kod strony będzie wyglądał tak:
 <!--#tag_w_out1=1 <form method=”get” action=”index.shtml”> <input type=”hidden” name=”tag_f_out1” value=”0”/> <input type=”image” src=”Grafika/cat_hiss.png” name=”kot1”/> </form>

Kiedy przekaźnik będzie wyłączony (tag_w_out=0) serwer wygeneruje stronę na której zostanie wyświetlony obrazek EPz podkatalogu w pamięci Flash mikrokontrolera „Grafika/cat_purr.png”. Natomiast, gdy przekaźnik będzie włączony (tag_w_out=1), zostanie wyświetlony obrazek z podkatalogu w pamięci Flash mikrokontrolera „Grafika/cat_hiss.png”.

Tagi hasła

Dwa tagi, tag_w_has1 i tag_f_has1, służą do obsługi wprowadzania i weryfikowania hasła. Dzięki temu można zablokować dostęp do podstrony z linkami do innych podstron sterownika dla osób nieznających ustawionego hasła. Chcąc stworzyć zabezpieczoną hasłem stronę należy przy pomocy programu SerwUs ustawić dwa parametry. W polach na zakładce Pliki HTML należy wpisać i powtórzyć wybrane hasło. Po naciśnięciu znajdującego się poniżej klawisza Akceptacja nowego ustawienia hasło zostanie zapisane w pamięci sterownika.

Drugim parametrem jest nazwa strony, która ma się otworzyć, gdy użytkownik poda właściwe hasło, będzie to bezpieczna podstrona sterownika. Do takiej podstrony nie powinny prowadzić żadne linki ze stron niezabezpieczonych hasłem. Po naciśnięcia klawisza akceptacji nazwa strony zostanie przesłana do sterownika i zapamiętana. Kod HTML z tagami umożliwiający wprowadzenie i weryfikację hasła może znaleźć się na dowolnej stronie z rozszerzeniem .shtml. Może wyglądać tak:
<form method=”post” action=”test_has.shtml”> <input type=”password” name=”tag_f_has1”> </form>

Jeżeli w polu utworzonym na stronie użytkownik wpisze prawidłowe hasło, sterownik po weryfikacji hasła prześle do wyświetlenia do przeglądarki kod strony o ustawionej wcześniej programem SerwUs nazwie. W przypadku podania błędnego hasła nastąpi powrót do wyświetlenia pola do wpisania kolejny raz hasła. Tag „tag_w_has1” z warunkiem „=0” można wykorzystać do wyświetlenia informacji o podaniu błędnego hasła i zachęty do kolejnej próby. W przypadku zapomnienia ustawionego przez użytkownika hasła pozostaje program SerwUs i klawisz USTAWIENIA STANDARDOWE na pierwszej zakładce. Dotychczasowe ustawienia sterownika zostaną wymazane a hasło ustawione na predefiniowane: „123456”.

Tagi na stronach użytkownika z rozszerzeniem .shtml

Cały mechanizm tagów do prawidłowego działania wymaga umieszczenia na stronach przeznaczonych do wyświetlania dynamicznego. Sterownik-serwer identyfikuje takie strony na podstawie rozszerzenia .shtml. Jeżeli strona zostanie zapisana do pamięci FLASH kontrolera z rozszerzeniem .html będzie wyświetlana w sposób statyczny bez względu na ustawienia wejść i wyjść. Kody tagów będą po prostu pomijane przez przeglądarkę.

Wysyłanie e-mail z powiadomieniem

Sterownik ARS3-ER ma możliwość wysyłania powiadomienia e-mail w przypadku wystąpienia zdarzenia. Jako źródło zdarzenia można wybrać jedną z poniższych sytuacji:

Po restarcie zawsze będzie wysyłana informacja o adresie IP przydzielonym dynamicznie sterownikowi – serwerowi.
Po restarcie będzie wysyłana informacja, jeśli zostanie zmieniony przydzielony adres IP.
Będzie wysyłana informacja, gdy na wejściu IN1 wystąpi poziom niski.

Żeby wysłanie e-maili było możliwe należy odpowiednio skonfigurować sterownik przy pomocy programu narzędziowego SerwUs. Konfiguracji dokonuje się na zakładce Ustawienia w sekcji ustawienia powiadomień e-mail. Jeżeli będziemy używali dotychczas używanego konta pocztowego podczas konfiguracji można się wspomóc podglądając jego ustawienia w programie klienta pocztowego. W moim przypadku jest to Thunderbird. Większość potrzebnych ustawień można znaleźć w sekcji Narzędzia–>Konfiguracja kont. Dalej należy podejrzeć konfigurację serwera wybranego konta pocztowego. Przechodząc do programu SerwUs w kolejnych polach należy wpisać:

Nazwę serwera pocztowego SMTP.
Numer portu SMTP serwera pocztowego.
Tekst nagłówka, z jakim będą się wyświetlały przychodzące powiadomienia.
Adres e-mail nadawcy. Będzie to adres konta wykorzystywanego do wysyłania wiadomości.
Adres e-mail odbiorcy. Może to być taki sam adres jak poprzedni lub adres dowolnego innego konta pocztowego, na którym będziemy chcieli odbierać powiadomienia.

Po naciśnięciu klawisza akceptacji wpisanych ustawień zostaną one przesłane do sterownika i zapamiętane. Potem można przejść do kolejnych ustawień:

Login jest nazwą użytkownika konta pocztowego.
W dwóch kolejnych polach należy podać hasło i w dolnym polu powtórzyć je dla weryfikacji poprawnego wprowadzenia.

Po naciśnięciu klawisza akceptacji kolejne ustawienia zostaną przesłane i zapamiętane przez sterownik. Ostatnim etapem jest wybór zdarzenia wywołującego wysłanie powiadomienia. Od tego momentu powiadomienia e-mail powinny być wysyłane na podany adres e-mail odbiorcy.

Ryszard Szymaniak, EPz