От переводчика. Примеры руководства становятся всё более и более практичными — на этом уроке автор «скрестил» Arduino веб-сервер с SD картой памяти и динамическое отображение состояния кнопки (входов/выходов) на веб-странице.

В результате получился ещё более приближенный к жизни (практическому применению) пример кода, который, при некоторой доработке, можно использовать в своих проектах.


Исходные данные для этого урока: Arduino веб-сервер с платой Ethernet Shield и microSD картой памяти, на которой размещается веб-страница. На этой веб-странице с помощью Ajax динамически отображается состояние кнопки, подключённой к Arduino.

В предыдущих частях этого руководства веб-страница, размещенная на SD карте, никогда не использовалась для отображения состояния входов Arduino — все веб-страницы, отображающие ввод/вывод, были частью скетча Arduino.

В этом уроке веб-страница, отображающая состояние кнопки, размещается на SD карте памяти.

Принципиальная электрическая схема


В этом примере кнопка подключается к контакту D3 Arduino по следующей схеме:



Код и веб-страница


Код (скетч Arduino) и веб-страница этого урока представляют собой комбинацию 2-й части («Веб-сервер с SD картой») и 7-й части («Отображение DI и AI входов при помощи AJAX») из этого руководства.

Видео не было включено в этот урок, так как будет выглядеть так же, как в 7-й части, только с измененным текстом заголовка веб-страницы.

Веб-страница


Веб-страница, состоящая из HTML и JavaScript кода (для реализации Ajax), показана ниже:


Веб-страница, размещающаяся на SD карте памяти (файл index.htm)

Эта страница сохраняется на microSD карту в виде файла index.htm — это в основном тот же HTML/JavaScript код, который создавался (генерировался) Arduino скетчем в 7-й части («Отображение DI и AI входов при помощи AJAX»), но с измененным текстом заголовка.

Скопируйте нижеприведённый код и вставьте в файл index.htm.

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page using Ajax</title>
        <script>
        function GetSwitchState()  {
            nocache = "&nocache=" + Math.random() * 1000000;
            var request = new XMLHttpRequest();
            request.onreadystatechange = function()  {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        if (this.responseText != null) {
                            document.getElementById("switch_txt").innerHTML = this.responseText;
                        }
                    }
                }
            }
            request.open("GET", "ajax_switch" + nocache, true);
            request.send(null);
            setTimeout('GetSwitchState()', 1000);
        }
      </script>
    </head>

    <body onload="GetSwitchState()">
        <h1>Arduino Switch State from SD Card Web Page using Ajax</h1>
        <p id="switch_txt">Switch state: Not requested...</p>
    </body>
</html>

Скетч Ардуино


Arduino скетч показан ниже. Для работы системы требуется, чтобы указанный выше HTML/JavaScript код был доступен на microSD карте в виде файла index.htm.

/*--------------------------------------------------------------
  Скетч:      eth_websrv_SD_Ajax

  Описание:  Arduino веб-сервер с SD картой, динамически (раз в секунду) отображающий текущее состояние кнопки на веб-странице при помощи Ajax.
  
  Оборудование: контроллер Arduino Uno, плата Ethernet Shield, microSD карта памяти 2 ГБ, кнопка, подключённая на пин D3 Arduino

  Программное обеспечение: среда разработки Arduino IDE, microSD карта с файлом index.htm
  
  Ссылки:
    - WebServer example by David A. Mellis and modified by Tom Igoe
    - Ethernet library documentation: http://arduino.cc/en/Reference/Ethernet
    - Learning PHP, MySQL & JavaScript by Robin Nixon, O'Reilly publishers
    - SD Card library documentation: http://arduino.cc/en/Reference/SD

  Дата создания: 25 марта 2013
  Изменения: 17 июня 2013
 
  Автор: W.A. Smith, http://startingelectronics.org
--------------------------------------------------------------*/

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 20); // IP-адрес (нужно изменить на актуальный для вашей сети)
EthernetServer server(80);
File webFile;

// Буфер для HTTP запросов
#define REQ_BUF_SZ   40
char HTTP_req[REQ_BUF_SZ] = {0}; // Хранится как null terminated string
char req_index = 0; // индекс буфера

void setup() {
    // отключение Ethernet
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
    
    Serial.begin(115200);
    
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;
    }
    Serial.println("SUCCESS - SD card initialized.");

    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;
    }
    Serial.println("SUCCESS - Found index.htm file.");

    pinMode(3, INPUT); // Кнопка на D3
    
    Ethernet.begin(mac, ip);
    server.begin();
}

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

    if (client) {
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {
                char c = client.read(); // получаем очередной байт (символ) от клиента
                // сохраняем последний элемент массива 0 (null terminate string)
                if (req_index < (REQ_BUF_SZ - 1)) {
                    HTTP_req[req_index] = c; // сохраняем символ HTTP запроса
                    req_index++;
                }

                if (c == '\n' && currentLineIsBlank) {
                    // Посылаем http заголовок
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: keep-alive");
                    client.println();
                    
                    // Ajax запрос
                    if (StrContains(HTTP_req, "ajax_switch")) {
                        // получаем состояние кнопки и посылаем соответствующий текст
                        GetSwitchState(client);
                    }
                    else {  // запрос веб-страницы
                        // посылаем страницу
                        webFile = SD.open("index.htm");
                        if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read());
                            }
                            webFile.close();
                        }
                    }
                    // дублируем HTTP запрос в Serial
                    Serial.println(HTTP_req);
                    // обнуляем буфер
                    req_index = 0;
                    StrClear(HTTP_req, REQ_BUF_SZ);
                    break;
                }
                if (c == '\n') {
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);
        client.stop();
    } // end if (client)
}

// Посылаем состояние кнопки браузеру
void GetSwitchState(EthernetClient cl) {
    if (digitalRead(3)) {
        cl.println("Switch state: ON");
    } else {
        cl.println("Switch state: OFF");
    }
}

// Обнуляем массив (буфер)
void StrClear(char *str, char length) {
    for (int i = 0; i < length; i++) {
        str[i] = 0;
    }
}

// Поиск подстроки
// 1, если найдена
// 0, если не найдена
char StrContains(char *str, char *sfind) {
    char found = 0;
    char index = 0;
    char len;

    len = strlen(str);
    
    if (strlen(sfind) > len) {
        return 0;
    }
    while (index < len) {
        if (str[index] == sfind[found]) {
            found++;
            if (strlen(sfind) == found) {
                return 1;
            }
        }
        else {
            found = 0;
        }
        index++;
    }

    return 0;
}

Как работает скетч


Этот скетч работает так же, как и скетч из 7-й части этого руководства, за исключением того, что вместо отправки веб-страницы построчно из кода скетча Arduino, веб-страница посылается браузеру из файла index.htm на SD карте.

Поскольку мы используем Ajax, веб-страница (при загрузке в веб-браузере) отправляет тот же запрос текущего состояния кнопки, что и код в 7-й части. Если бы мы не использовали Ajax, то Arduino нужно было бы прочитать файл index.htm с SD карты и изменить часть, показывающую текущее состояние кнопки, а затем отправить обратно всю изменённую веб-страницу. Использование Ajax делает это процесс более простым и эффективным.

От переводчика о 10-й части


На этом уроке автор постоянно ссылается на 7-ю (и 2-ю) части в этого руководства, поэтому рекомендуется (если вы ещё не знакомы с ними) обязательно с ними ознакомиться и хорошо понять принципы работы системы, изложенные в предыдущих частях — тогда материал этой статьи станет для вас простым и понятным.

И вообще, для лучшего понимания рекомендуется проходить все уроки последовательно и проводить практические эксперименты с кодом из этих статей.

Часть 1, часть 2, часть 3, часть 4, часть 5, часть 6, часть 7, часть 8, часть 9, часть 10.


Комментарии (0)