Kurs Intel Edison – #7 – interakcja przez przeglądarkę

Kurs Intel Edison – #7 – interakcja przez przeglądarkę

Moduł Intel Edison został stworzony dla internetu rzeczy (ang. Internet of Things, IoT), czas więc zapoznać się z jego możliwościami pracy w sieci.

Na początek uruchomimy dość prosty, napisany w języku C serwer, z którym będziemy łączyć się przez przeglądarkę internetową.

Jak zwykle pierwszy krok, to wykorzystanie gotowych przykładów. Przeglądając dostępne możliwości znajdziemy, dwie biblioteki, które maja wiele wspólnego z internetem: Ethernet oraz WiFi. Moduł Intel Edison nie posiada interfejsu Ethernet (to określenie kablowej sieci lokalnej), ma natomiast sieć bezprzewodową WiFi.

Co więcej moduł Ethernet znacznie lepiej będzie pasował do naszych zastosowań. WiFi oferuje dodatkowe możliwości związane z konfiguracją sieci bezprzewodowej, jednak my już ją skonfigurowaliśmy i nie potrzebujemy zmian.

Zestaw elementów do kursu

 999+ pozytywnych opinii  Gwarancja pomocy  Wysyłka w 24h

Elementy konieczne do wykonania ćwiczeń zebrane zostały w gotowe zestawy, które można nabyć w Botlandzie. W kuferku znajdziecie ponad 180 elementów w tym moduł Intel Edison!

Zamów w Botland.com.pl »

Intel Edison - przykładowy serwer

Na początek otwieramy przykładowy program WebServer z biblioteki Ethernet, czyli opcję Plik > Przykłady > Ethernet > WebServer. Jeśli po prostu spróbujemy program uruchomić, niestety nie zadziała. Domyślny port dla stron www, czyli 80 jest już zajęty. Musimy wybrać inny port, przykładowo 8080.

W tym celu szukamy następującego fragmentu kodu:

Następnie zamieniamy go na:

Teraz możemy skompilować i uruchomić przykład. Aby sprawdzić, czy wszystko działa poprawnie należy w przeglądarce wpisać adres modułu wraz z odpowiednim numerem portu. W moim przypadku jest to adres: http://192.168.1.30:8080

www_03

Intel Edison - wynik programu w oknie przeglądarki.

Jak łatwo się domyślić są to odczyty z wejść analogowych A0 - A5. Ponieważ nie podłączyliśmy nic do nich, odczyty są dość losowe. Spróbujmy więc podłączyć do wejść A0 i A1 fotorezystory wg. poniższego schematu montażowego:

part5 - light_bb

Intel Edison - schemat montażowy.

Jeśli teraz sprawdzimy wyniki, będą one zależały od poziomu oświetlenia. Zawartość strony jest odświeżana co 5 sekund, możemy więc na bieżąco obserwować jak działa nasz pierwszy internetowy odczyt danych.

Fotorezystor - czujnik oświetlenia.

Fotorezystor - czujnik oświetlenia.

Warto na chwilę uruchomić monitor portu szeregowego - zobaczymy na nim dane otrzymane z przeglądarki internetowej:

www_04

Intel Edison - podgląd danych z przeglądarki.

Jest to protokół http, który wykorzystują wszystkie przeglądarki internetowe. Nawet czytając niniejszy kurs dokładnie tak samo wyglądają zapytania przesyłane przez przeglądarkę do serwera Forbot-a (linia "User-Agent" tłumaczy skąd biorą się informacje z jakiego systemu i przeglądarki korzystają użytkownicy).

Własny program korzystający z Internetu

Kod programu przykładowego jest dość długi, więc zamiast go analizować napiszemy własny program od początku. Będziemy potrzebowali bibliotekę Ethernet oraz obiekt serwera.

Teraz musimy napisać kod konfigurujący serwer, czyli funkcję setup.

Nie musimy definiować adresu MAC - jest on ignorowany przez bibliotekę, a tylko komplikuje kod. Więc zamiast niego podajemy NULL jako parametr wywołania Ethernet.begin().

Praca serwera www polega na czekaniu na połączenia od przeglądarki internetowej, odbieraniu zapytania oraz odsyłaniu odpowiedzi. Zaczniemy więc niejako od końca i napiszemy pętlę główną programu:

Sprawdzenie, czy przeglądarka chce się połączyć realizuje wywołanie server.available(). Zwróci ono połączenie z klientem (EthernetClient), gdy przeglądarka nawiąże połączenie. Musimy napisać dwie procedury: process_query oraz send_answer.

Pierwsza jest nieco skomplikowana, a jej w pełni poprawne zaimplementowanie to prawdziwa sztuka. Powinna odbierać nagłówek protokołu http i analizować wszystkie jego pola. My napiszemy bardzo uproszczoną wersję - będzie wczytywała kolejne linie, aż do napotkania pustej, która sygnalizuje koniec danych.

Nie będziemy więc na razie korzystać z danych przysłanych przez przeglądarkę. Jedynie, tak jak kod przykładowy wyślemy je przez port szeregowy:

Teraz możemy już napisać funkcję odsyłającą dane do serwera. Pierwsza wersja będzie prosta:

Cały program wygląda w chwili obecnej następująco:

W przeglądarce możemy zobaczyć rezultat:

www_05

Co ciekawe nasza strona wcale nie została napisana w HTML-u. Na razie to zwykły tekst - dlatego przeglądarka wykorzystuje czcionkę o stałej szerokości znaków (Courier).

Zwracanie kodu HTML

W poprzednim przykładzie funkcja send_answer() była ekstremalnie uproszczona. Jak widzieliśmy działała, jednak w internecie standardem jest wykorzystywanie HTMLa zamiast przesyłania plików tekstowych. Spróbujemy więc nieco rozbudować naszą funkcję, tak aby uzyskać ładniejszy efekt.

Większość osób wie jak wyglądają strony w html-u, więc nie będziemy tego omawiać. Ponieważ to co tworzy funkcja send_answer() jest wysyłane przez protokół http, musimy jeszcze dodać odpowiedni nagłówek.

Podstawowa wersja wygląda więc następująco:

Jeśli przetestujemy rezultat w przeglądarce, zobaczymy, że jest już dużo lepiej - rezultat wygląda jak strona www, chociaż pięknem nie powala:

www_06

Efekt działania programu HTML) w przeglądarce.

Stacja pogodowa

Mamy już podłączone dwa fotorezystory, dodajmy jeszcze czujnik HDC1008. Z jego obsługą zapoznaliśmy się w poprzedniej części kursu. Układ powinien wyglądać następująco:

part5 - weather_bb

Schemat montażowy Internetowej stacji pogodowej.

Teraz możemy rozszerzyć naszą funkcję wysyłającą kod html. Ponieważ strona jest coraz bardziej rozbudowana, dodaliśmy do niej nowe elementy:

  • nagłówek został zdefiniowany w znacznikach <head>. Ustalany jest tytuł strony (<title>), kodowanie (UTF-8) oraz odświeżanie strony co 5 s,
  • w treści dokumentu odczytujemy dane z czujników i wysyłamy wyniki pomiarów oświetlenia z dwóch fotorezystorów oraz temperaturę i wilgotność odczytane przez HDC1008.
Moduł czujnika HDC1008. Źródło zdjęcia: strona producenta.

Moduł czujnika HDC1008. Źródło zdjęcia: strona producenta.

Kod programu:

Efekt działania:

www_07

Prosta, internetowa stacja pogodowa.

Niewątpliwie należałoby popracować nad wyglądem strony - bez CSS nie prezentuje się szczególnie okazale. Jednak takie zmiany wydłużają program.

Zadanie 7.1

Dodaj do przykładowego programu obsługę stylów CSS, zmień wygląd strony. Jeśli nie miałeś nigdy styczności z kaskadowymi arkuszami stylów, to możesz zapoznać się z darmowym kursem.

Rozpoznawanie adresów URL

Nasz dotychczasowy serwer www był bardzo uproszczony. Nie analizowaliśmy treści zapytania od przeglądarki, więc nie było różnicy jaką stronę chciał zobaczyć użytkownik - i tak zawsze dostawał jedyną dostępną. Możemy sprawdzić jak działa nasz serwer. Jak wiemy, strona jest dostępna pod adresem http://192.168.1.30:8080/. Jednak jest też dostępna, jeśli spróbujemy odwoływać się do innych stron np. http://192.168.1.30:8080/test, czy http://192.168.1.30:8080/cokolwiek/.

Dodajmy więc do naszego serwera rozpoznawanie żądanego przez przeglądarkę adresu. Przy adresie domyślnym, czyli "/" będziemy zwracać naszą stronę, a w pozostałych informację o braku strony (słynny błąd 404).

Najpierw musimy wrócić do nagłówka http. W nim interesuje nas linia z poleceniem "GET". Przykładowo: GET /test HTTP/1.1

Jak widzimy po GET jest jedna spacja, a następnie adres zasobu, który chciał zobaczyć użytkownik. Dalej może być kolejna spacja oraz wersja protokołu (HTTP/1.1). Zmieńmy definicję naszej funkcji process_query(), tak aby zwracała nazwę strony którą chce zobaczyć użytkownik.

Kod tego rozwiązania widoczny jest poniżej. Wygląda dość zawile, jednak jego zadanie jest dosć proste. W przypadku problemów ze zrozumieniem jego działania piszcie w komentarzach!

Teraz możemy wrócić do pętli głównej programu i dodać sprawdzanie nazw żądanych plików:

Brakuje nam jeszcze funkcji send_error(). Jej kod jest prosty:

Cały, dość rozbudowany, program wygląda teraz tak:

Teraz tylko strona główna będzie dostępna.

Zadanie 7.2

Dodaj obsługiwanie dodatkowej strony, np. "/test.html".

Zadanie 7.3

Zamiast komunikatu o błędzie wyświetlaj stronę z informacją o braku żądanego zasobu.

Intel Edison - zdalne sterowanie

Umiemy już odczytywać dane z czujników. Teraz spróbujemy wykorzystać nową wiedzę do sterowania. Ponieważ program robi się coraz dłuższy, usuniemy z niego fragmenty związane ze stacją pogodową. Nic nie przeszkadza jednak w napisaniu jednego programu, który zarówno odczytuje dane z czujników, jak i steruje wyjściami.

Podłączmy diodę do układu, podobnie jak w przykładzie z poprzedniej części kursu:

part4 - led_bb

Schemat montażowy kolejnego ćwiczenia.

Teraz dodamy zmienną, która będzie przechowywała stan urządzenia - informację, czy dioda jest zapalona:

Następnie napiszemy dwie funkcje, które będą wywoływane, gdy użytkownik wybierze odpowiedni adres w przeglądarce:

Ich treść jest bardzo prosta - zapalają lub gaszą diodę oraz aktualizują zmienną stanu, a następnie odsyłają treść strony do przeglądarki.

Musimy teraz napisać funkcję send_answer(). Będzie to prosta funkcja, która utworzy stronę HTML z linkiem do zmiany stanu diody:

Jak widzimy najważniejsza jej część to wyświetlenie informacji o stanie urządzenia (dioda zapalona / zgaszona) oraz udostępnienie linka do zmiany stanu.

Dodajemy wywołanie nowych funkcji do pętli głównej programu:

Mamy już gotowy cały program:

Gdy wejdziemy na stronę naszego modułu, będziemy mogli za pomocą przeglądarki zapalać i gasić diodę podłączoną do układu:

www_08

Sterowanie diodą z poziomu przeglądarki.

Zadanie 5.4

Dodaj sterowanie diodą do programu stacji pogodowej.

Podsumowanie

W tej części kursu zobaczyliśmy jak wygląda niskopoziomowa komunikacja z modułem przy wykorzystaniu protokołu http. Programy są dość proste, chociaż ich długość szybko rośnie. Większość funkcji działa w podobny sposób - można więc wykorzystać odpowiednie biblioteki, zamiast pisać wszystko od podstaw.

W następnej części zobaczymy gotowe rozwiązanie dostarczane przez Intela. Za jego pomocą będziemy mogli znacznie uprościć sterowanie i odczytywanie danych.

Nawigacja kursu

Nie chcesz przeoczyć kolejnych części kursu? Skorzystaj z poniższego formularza i zapisz się na powiadomienia o nowych artykułach!

Autor kursu: Piotr (Elvis) Bugalski
Redakcja: Damian (Treker) Szymański

arduino, Edison, Intel, kurs, kursEdison, programowanie

Trwa ładowanie komentarzy...