Kursy • Poradniki • Inspirujące DIY • Forum

Premiera: Raspberry Pi
Debug Probe

Historia tranzystora w skrócie.
Wynalezienie czy odkrycie?

3 podstawowe rodzaje
akumulatorów, które warto znać

Co ciekawego w DIY?
10 projektów naszych czytelników #33

Piezoelektryki – czym
są materiały piezoelektryczne?

Tranzystory

Poznaj w praktyce

Raspberry Pi

Od podstaw

Kursy Artykuły

DIY Forum

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

Archiwum 21.03.2024 Elvis

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ą.

Poprzednia część

Nawigacja kursu Nawigacja

Następna część

Zamów zestaw elementów i zacznij naukę w praktyce! Przejdź do sklepu »

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.

Jednak jeśli zajrzymy do kodów bibliotek okaże się, że obie będą działać na naszej płytce i będą wykorzystywały sieć bezprzewodową.

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.

Edison nie posiada interfejsu Ethernet,
ale biblioteka o tej nazwie działa równeiż z siecią bezprzewodową.

Gotowe zestawy do kursów Forbota

Komplet elementów 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 »

Masz już zestaw? Zarejestruj go wykorzystując dołączony do niego kod. Szczegóły »

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:

EthernetServer server(80);

1	EthernetServer server(80);

Następnie zamieniamy go na:

EthernetServer server(8080);

1	EthernetServer server(8080);

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

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:

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.

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

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).

Serwer po otrzymaniu takiego zapytania przygotowuje i odsyła
do klienta odpowiedź, czyli treść strony.

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.

Tworząc serwer, podajemy jako parametr numer wykorzystywanego portu. Podobnie jak poprzednio, wykorzystamy port 8080.

#include <Ethernet.h>

EthernetServer server(8080);

#include <Ethernet.h>

EthernetServer server(8080);

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

void setup() {
  Serial.begin(9600);

  Ethernet.begin(NULL);
  server.begin();
}

void setup() {

Serial.begin(9600);

Ethernet.begin(NULL);

server.begin();

}

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:

void loop() {
  EthernetClient client = server.available();

  if (client) {
    process_query(client);
    send_answer(client);
    client.stop();
  }
}

void loop() {

EthernetClient client = server.available();

if (client) {

process_query(client);

send_answer(client);

client.stop();

}

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:

void process_query(EthernetClient& client)
{
  String line;
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      Serial.write(c);
      line += c;

      if (line == "\r\n")
        break;
      if (c == '\n') 
        line = "";
    }
  }
}

void process_query(EthernetClient& client)

{

String line;

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

line += c;

if (line == "\r\n")

break;

if (c == '\n')

line = "";

}

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

void send_answer(EthernetClient& client)
{
  client.println("Hello World!");
}

void send_answer(EthernetClient& client)

{

client.println("Hello World!");

}

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

#include <Ethernet.h>

EthernetServer server(8080);

void setup() {
  Serial.begin(9600);

  Ethernet.begin(NULL);
  server.begin();
}

void send_answer(EthernetClient& client)
{
  client.println("Hello World!");
}

void process_query(EthernetClient& client)
{
  String line;
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      Serial.write(c);
      line += c;

      if (line == "\r\n")
        break;
      if (c == '\n') 
        line = "";
    }
  }
}

void loop() {
  EthernetClient client = server.available();

  if (client) {
    process_query(client);
    send_answer(client);
    client.stop();
  }
}

#include <Ethernet.h>

EthernetServer server(8080);

void setup() {

Serial.begin(9600);

Ethernet.begin(NULL);

server.begin();

}

void send_answer(EthernetClient& client)

{

client.println("Hello World!");

}

void process_query(EthernetClient& client)

{

String line;

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

line += c;

if (line == "\r\n")

break;

if (c == '\n')

line = "";

}

void loop() {

EthernetClient client = server.available();

if (client) {

process_query(client);

send_answer(client);

client.stop();

}

W przeglądarce możemy zobaczyć rezultat:

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:

void send_answer(EthernetClient& client)
{
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<body>");
  client.println("<h1>Hello World!</h1>");
  client.println("</body>");
  client.println("</html>");
}

void send_answer(EthernetClient& client)

{

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("Connection: close");

client.println();

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<body>");

client.println("<h1>Hello World!</h1>");

client.println("</body>");

client.println("</html>");

}

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:

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:

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.

Kod programu:

#include <Wire.h>
#include <Adafruit_HDC1000.h>
#include <Ethernet.h>

Adafruit_HDC1000 hdc;
EthernetServer server(8080);

void setup() {
  Serial.begin(9600);

  if (!hdc.begin()) {
    Serial.println("Brak HDC1008");
    while (1);
  }  
  Ethernet.begin(NULL);
  server.begin();
}

void send_answer(EthernetClient& client)
{
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<meta charset=\"utf-8\" />");
  client.println("<meta http-equiv=\"refresh\" content=\"5\">");
  client.println("<title>Stacja pogodowa v0.1</title>");
  client.println("</head>");
  client.println("<body>"); 
  client.println("<h1>Stacja pogodowa v0.1</h1>");
  client.print("<p>Nasłonecznienie 1: ");
  client.print(analogRead(0));
  client.println("</p>");
  client.print("<p>Nasłonecznienie 2: ");
  client.print(analogRead(1));
  client.println("</p>");
  client.print("<p>Temperatura: ");
  client.print(hdc.readTemperature());
  client.println("</p>");
  client.print("<p>Wilgotność: ");
  client.print(hdc.readHumidity());
  client.println("</p>");
  client.println("</body>");
  client.println("</html>");
}

void process_query(EthernetClient& client)
{
  String line;
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      Serial.write(c);
      line += c;

      if (line == "\r\n")
        break;
      if (c == '\n') 
        line = "";
    }
  }
}

void loop() {
  EthernetClient client = server.available();

  if (client) {
    process_query(client);
    send_answer(client);
    client.stop();
  }
}

#include <Wire.h>

#include <Adafruit_HDC1000.h>

#include <Ethernet.h>

Adafruit_HDC1000 hdc;

EthernetServer server(8080);

void setup() {

Serial.begin(9600);

if (!hdc.begin()) {

Serial.println("Brak HDC1008");

while (1);

}

Ethernet.begin(NULL);

server.begin();

}

void send_answer(EthernetClient& client)

{

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("Connection: close");

client.println();

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<head>");

client.println("<meta charset=\"utf-8\" />");

client.println("<meta http-equiv=\"refresh\" content=\"5\">");

client.println("<title>Stacja pogodowa v0.1</title>");

client.println("</head>");

client.println("<body>");

client.println("<h1>Stacja pogodowa v0.1</h1>");

client.print("Nasłonecznienie 1: ");

client.print(analogRead(0));

client.println("");

client.print("Nasłonecznienie 2: ");

client.print(analogRead(1));

client.println("");

client.print("Temperatura: ");

client.print(hdc.readTemperature());

client.println("");

client.print("Wilgotność: ");

client.print(hdc.readHumidity());

client.println("");

client.println("</body>");

client.println("</html>");

}

void process_query(EthernetClient& client)

{

String line;

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

line += c;

if (line == "\r\n")

break;

if (c == '\n')

line = "";

}

void loop() {

EthernetClient client = server.available();

if (client) {

process_query(client);

send_answer(client);

client.stop();

}

Efekt działania:

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/.

Oczywiście prawdziwy serwer www nie powinien się tak zachowywać.

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!

String process_query(EthernetClient& client)
{
  String get_url;
  String line;
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      Serial.write(c);
      line += c;

      if (line == "\r\n")
        return get_url;
      if (c == '\n') {
        if (line.startsWith("GET ")) {
          get_url = line.substring(4);
          int pos = get_url.indexOf(' ');
          if (pos != -1) {
            get_url = get_url.substring(0, pos);
          }
          get_url.trim();
        }
        line = "";
      }
    }
  }
}

String process_query(EthernetClient& client)

{

String get_url;

String line;

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

line += c;

if (line == "\r\n")

return get_url;

if (c == '\n') {

if (line.startsWith("GET ")) {

get_url = line.substring(4);

int pos = get_url.indexOf(' ');

if (pos != -1) {

get_url = get_url.substring(0, pos);

}

get_url.trim();

}

line = "";

}

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

void loop() {
  EthernetClient client = server.available();

  if (client) {
    String url = process_query(client);
    if (url == "/")
      send_answer(client);
    else
      send_error(client);
    client.stop();
  }
}

void loop() {

EthernetClient client = server.available();

if (client) {

String url = process_query(client);

if (url == "/")

send_answer(client);

else

send_error(client);

client.stop();

}

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

void send_error(EthernetClient& client)
{
  client.println("HTTP/1.1 404 Not Found");  
  client.println();  
}

void send_error(EthernetClient& client)

{

client.println("HTTP/1.1 404 Not Found");

client.println();

}

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

#include <Wire.h>
#include <Adafruit_HDC1000.h>
#include <Ethernet.h>

Adafruit_HDC1000 hdc;
EthernetServer server(8080);

void setup() {
  Serial.begin(9600);

  if (!hdc.begin()) {
    Serial.println("Brak HDC1008");
    while (1);
  }  
  Ethernet.begin(NULL);
  server.begin();
}

void send_error(EthernetClient& client)
{
  client.println("HTTP/1.1 404 Not Found");  
  client.println();  
}

void send_answer(EthernetClient& client)
{
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<meta charset=\"utf-8\" />");
  client.println("<meta http-equiv=\"refresh\" content=\"5\">");
  client.println("<title>Stacja pogodowa v0.1</title>");
  client.println("</head>");
  client.println("<body>"); 
  client.println("<h1>Stacja pogodowa v0.1</h1>");
  client.print("<p>Nasłonecznienie 1: ");
  client.print(analogRead(0));
  client.println("</p>");
  client.print("<p>Nasłonecznienie 2: ");
  client.print(analogRead(1));
  client.println("</p>");
  client.print("<p>Temperatura: ");
  client.print(hdc.readTemperature());
  client.println("</p>");
  client.print("<p>Wilgotność: ");
  client.print(hdc.readHumidity());
  client.println("</p>");
  client.println("</body>");
  client.println("</html>");
}

String process_query(EthernetClient& client)
{
  String get_url;
  String line;
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      Serial.write(c);
      line += c;

      if (line == "\r\n")
        return get_url;
      if (c == '\n') {
        if (line.startsWith("GET ")) {
          get_url = line.substring(4);
          int pos = get_url.indexOf(' ');
          if (pos != -1) {
            get_url = get_url.substring(0, pos);
          }
          get_url.trim();
        }
        line = "";
      }
    }
  }
}

void loop() {
  EthernetClient client = server.available();

  if (client) {
    String url = process_query(client);
    if (url == "/")
      send_answer(client);
    else
      send_error(client);
    client.stop();
  }
}

#include <Wire.h>

#include <Adafruit_HDC1000.h>

#include <Ethernet.h>

Adafruit_HDC1000 hdc;

EthernetServer server(8080);

void setup() {

Serial.begin(9600);

if (!hdc.begin()) {

Serial.println("Brak HDC1008");

while (1);

}

Ethernet.begin(NULL);

server.begin();

}

void send_error(EthernetClient& client)

{

client.println("HTTP/1.1 404 Not Found");

client.println();

}

void send_answer(EthernetClient& client)

{

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("Connection: close");

client.println();

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<head>");

client.println("<meta charset=\"utf-8\" />");

client.println("<meta http-equiv=\"refresh\" content=\"5\">");

client.println("<title>Stacja pogodowa v0.1</title>");

client.println("</head>");

client.println("<body>");

client.println("<h1>Stacja pogodowa v0.1</h1>");

client.print("Nasłonecznienie 1: ");

client.print(analogRead(0));

client.println("");

client.print("Nasłonecznienie 2: ");

client.print(analogRead(1));

client.println("");

client.print("Temperatura: ");

client.print(hdc.readTemperature());

client.println("");

client.print("Wilgotność: ");

client.print(hdc.readHumidity());

client.println("");

client.println("</body>");

client.println("</html>");

}

String process_query(EthernetClient& client)

{

String get_url;

String line;

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

line += c;

if (line == "\r\n")

return get_url;

if (c == '\n') {

if (line.startsWith("GET ")) {

get_url = line.substring(4);

int pos = get_url.indexOf(' ');

if (pos != -1) {

get_url = get_url.substring(0, pos);

}

get_url.trim();

}

line = "";

}

void loop() {

EthernetClient client = server.available();

if (client) {

String url = process_query(client);

if (url == "/")

send_answer(client);

else

send_error(client);

client.stop();

}

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:

Schemat montażowy kolejnego ćwiczenia.

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

int led_state = 0;

1	int led_state = 0;

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

void turn_on(EthernetClient& client)
{
  digitalWrite(LED_PIN, HIGH);   
  led_state = 1;
  send_answer(client);
}

void turn_off(EthernetClient& client)
{
  digitalWrite(LED_PIN, LOW); 
  led_state = 0;
  send_answer(client);
}

void turn_on(EthernetClient& client)

{

digitalWrite(LED_PIN, HIGH);

led_state = 1;

send_answer(client);

}

void turn_off(EthernetClient& client)

{

digitalWrite(LED_PIN, LOW);

led_state = 0;

send_answer(client);

}

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:

void send_answer(EthernetClient& client)
{
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head><meta charset=\"utf-8\" /></head>");
  client.println("<body>");
  client.print("<p>Dioda jest ");
  if (led_state)
    client.print("<b>zapalona</b>");
  else
    client.print("<b>zgaszona</b>");
  client.println(".</p>");

  client.print("<p>");
  if (led_state)
    client.println("<p><a href=\"/off\">Zgaś diodę</a></p>");
  else
    client.println("<p><a href=\"/on\">Zapal diodę</a></p>");
  
  client.println("</body>");
  client.println("</html>");
}

void send_answer(EthernetClient& client)

{

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("Connection: close");

client.println();

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<head><meta charset=\"utf-8\" /></head>");

client.println("<body>");

client.print("Dioda jest ");

if (led_state)

client.print("zapalona");

else

client.print("zgaszona");

client.println(".");

client.print("");

if (led_state)

client.println("<a href=\"/off\">Zgaś diodę</a>");

else

client.println("<a href=\"/on\">Zapal diodę</a>");

client.println("</body>");

client.println("</html>");

}

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:

void loop() {
  EthernetClient client = server.available();

  if (client) {
    String url = process_query(client);
    if (url == "/")
      send_answer(client);
    else if (url == "/on")
      turn_on(client);
    else if (url == "/off")
      turn_off(client);
    else
      send_error(client);
    client.stop();
  }
}

void loop() {

EthernetClient client = server.available();

if (client) {

String url = process_query(client);

if (url == "/")

send_answer(client);

else if (url == "/on")

turn_on(client);

else if (url == "/off")

turn_off(client);

else

send_error(client);

client.stop();

}

Mamy już gotowy cały program:

#include <Ethernet.h>

const int LED_PIN = 2;

EthernetServer server(8080);
int led_state = 0;

void setup() {
  Serial.begin(9600);

  Ethernet.begin(NULL);
  server.begin();

  pinMode(LED_PIN, OUTPUT);  
}

void send_error(EthernetClient& client)
{
  client.println("HTTP/1.1 404 Not Found");  
  client.println();  
}

void send_answer(EthernetClient& client)
{
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head><meta charset=\"utf-8\" /></head>");
  client.println("<body>");
  client.print("<p>Dioda jest ");
  if (led_state)
    client.print("<b>zapalona</b>");
  else
    client.print("<b>zgaszona</b>");
  client.println(".</p>");

  client.print("<p>");
  if (led_state)
    client.println("<p><a href=\"/off\">Zgaś diodę</a></p>");
  else
    client.println("<p><a href=\"/on\">Zapal diodę</a></p>");
  
  client.println("</body>");
  client.println("</html>");
}

void turn_on(EthernetClient& client)
{
  digitalWrite(LED_PIN, HIGH);   
  led_state = 1;
  send_answer(client);
}

void turn_off(EthernetClient& client)
{
  digitalWrite(LED_PIN, LOW); 
  led_state = 0;
  send_answer(client);
}

String process_query(EthernetClient& client)
{
  String get_url;
  String line;
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      Serial.write(c);
      line += c;

      if (line == "\r\n")
        return get_url;
      if (c == '\n') {
        if (line.startsWith("GET ")) {
          get_url = line.substring(4);
          int pos = get_url.indexOf(' ');
          if (pos != -1) {
            get_url = get_url.substring(0, pos);
          }
          get_url.trim();
        }
        line = "";
      }
    }
  }
}

void loop() {
  EthernetClient client = server.available();

  if (client) {
    String url = process_query(client);
    if (url == "/")
      send_answer(client);
    else if (url == "/on")
      turn_on(client);
    else if (url == "/off")
      turn_off(client);
    else
      send_error(client);
    client.stop();
  }
}

100

101

102

103

104

105

106

#include <Ethernet.h>

const int LED_PIN = 2;

EthernetServer server(8080);

int led_state = 0;

void setup() {

Serial.begin(9600);

Ethernet.begin(NULL);

server.begin();

pinMode(LED_PIN, OUTPUT);

}

void send_error(EthernetClient& client)

{

client.println("HTTP/1.1 404 Not Found");

client.println();

}

void send_answer(EthernetClient& client)

{

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("Connection: close");

client.println();

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<head><meta charset=\"utf-8\" /></head>");

client.println("<body>");

client.print("Dioda jest ");

if (led_state)

client.print("zapalona");

else

client.print("zgaszona");

client.println(".");

client.print("");

if (led_state)

client.println("<a href=\"/off\">Zgaś diodę</a>");

else

client.println("<a href=\"/on\">Zapal diodę</a>");

client.println("</body>");

client.println("</html>");

}

void turn_on(EthernetClient& client)

{

digitalWrite(LED_PIN, HIGH);

led_state = 1;

send_answer(client);

}

void turn_off(EthernetClient& client)

{

digitalWrite(LED_PIN, LOW);

led_state = 0;

send_answer(client);

}

String process_query(EthernetClient& client)

{

String get_url;

String line;

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

line += c;

if (line == "\r\n")

return get_url;

if (c == '\n') {

if (line.startsWith("GET ")) {

get_url = line.substring(4);

int pos = get_url.indexOf(' ');

if (pos != -1) {

get_url = get_url.substring(0, pos);

}

get_url.trim();

}

line = "";

}

void loop() {

EthernetClient client = server.available();

if (client) {

String url = process_query(client);

if (url == "/")

send_answer(client);

else if (url == "/on")

turn_on(client);

else if (url == "/off")

turn_off(client);

else

send_error(client);

client.stop();

}

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

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

Poprzednia część

Następna część

Pokaż/ukryj wszystkie części

Zamów zestaw elementów i zacznij naukę w praktyce! Przejdź do sklepu »

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

Artykuł był ciekawy?

Dołącz do 20 tysięcy osób, które otrzymują powiadomienia o nowych artykułach! Zapisz się, a otrzymasz PDF-y ze ściągami (m.in. na temat mocy, tranzystorów, diod i schematów) oraz listę inspirujących DIY na bazie Arduino i Raspberry Pi.