07.02.2023 14:01
smart_alex 0 3000 Источник


От переводчика. В этой части руководства автор собирает ещё одну часть пазла и объясняет каким образом можно отображать состояние кнопки на веб-странице. Разумеется, это не обязательно должна быть кнопка, это может быть переключатель, джампер, контакты реле или что-то подобное.

Если посмотреть на этот вопрос шире, то становится понятно, что используя описанный в статье принцип, можно отображать на веб-странице как состояние подключённого оборудования, так и внутренних регистров, переменных, GPIO и т. д. самого микроконтроллера.

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

❯ Часть 4 (6). Отображение состояния кнопки на веб-странице


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

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


Браузер обновляет веб-страницу один раз в секунду, поэтому отображение нового состояния кнопки, после её нажатия или отпускания, происходит с небольшой задержкой.

❯ Оборудование для этого урока


Для этого урока нам понадобятся:

  • Контроллер Arduino Uno
  • Плата Ethernet Shield
  • Кнопка
  • Резистор 10 кОм
  • Соединительные провода

Кнопка подключается к плате Arduino/Ethernet Shield так, как показано на принципиальной схеме ниже. В изначальном состоянии вывод D3 контроллера подтянут к земле при помощи резистора 10 кОм (низкий потенциал, LOW или «0»), а после нажатия кнопки на вывод D3 подаётся высокий потенциал (HIGH или «1»).


❯ Скетч веб-сервера


Исходный код Arduino сервера для отображения состояния кнопки на веб-странице представлен ниже:

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

  Описание:  Arduino веб-сервер отображающий состояние кнопки на веб-странице.
  
  Оборудование: контроллер Arduino Uno, плата Ethernet Shield, кнопка.
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
  
  Ссылки:
    - WebServer example by David A. Mellis and modified by Tom Igoe
    - Документация Ethernet library: http://arduino.cc/en/Reference/Ethernet

  Дата создания:         12 января 2013
 
  Автор:       W.A. Smith, http://startingelectronics.org
--------------------------------------------------------------*/

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

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

void setup() {
    Ethernet.begin(mac, ip);
    server.begin();

    pinMode(3, INPUT);  // пин для подключения кнопки
}

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

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {
                char c = client.read();
                if (c == '\n' && currentLineIsBlank) {
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connnection: close");
                    client.println();
                    // посылка тела страницы
                    client.println("<!DOCTYPE html>");
                    client.println("<html>");
                    client.println("<head>");
                    client.println("<title>Arduino Read Switch State</title>");
                    client.println("<meta http-equiv=\"refresh\" content=\"1\">");
                    client.println("</head>");
                    client.println("<body>");
                    client.println("<h1>Switch</h1>");
                    client.println("<p>State of switch is:</p>");

                    GetSwitchState(client); // вызов функции работы с кнопкой

                    client.println("</body>");
                    client.println("</html>");
                    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("<p>ON</p>");
    } else {
        cl.println("<p>OFF</p>");
    }
}

❯ Работа скетча


Этот скетч представляет собой модифицированную версию скетча eth_websrv_page из урока «Базовый веб-сервер на Arduino».

Чтение состояния кнопки


Здесь веб-страница создается обычным образом, за исключением того, что когда нужно отобразить состояние кнопки (текст ON/OFF), вызывается специальная функция GetSwitchState().

В этой функции считывается состояние кнопки (состояние пина D3 микроконтроллера) и, в зависимости от этого состояния, в браузер будет отправляться HTML код, содержащий либо текст «ON» (нажата), либо текст «OFF» (не нажата).

Обновление страницы в браузере


Для автоматического обновления страницы в браузере, в её заголовочную (head) часть помещается специальная строка

<meta http-equiv="refresh" content="1">

которая указывает браузеру обновлять страницу каждую секунду. Это позволяет отображать новое состояние переключателя, если оно изменилось.

Код в скетче, который добавляет эту строку, показан ниже:

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

Здесь «1» указывает браузеру обновлять страницу каждую секунду и вы можете изменить это значение по своему желанию.

Напоминание. Вы можете кликнуть правой кнопкой мыши на веб-странице в браузере, а затем выбрать пункт всплывающего меню «Просмотреть исходный код страницы» (или аналогичный, в зависимости от используемого вами браузера).

Подобный метод автоматического обновления информации на веб-странице используется в примере веб-сервера, показывающего состояние аналоговых входов Arduino (находится в разделе «Файл» → «Примеры» → «Ethernet» → «WebServer»).

Доработка и улучшение скетча


Недостатком рассмотренного метода отображения состояния кнопки на веб-странице является то, что браузер при каждом обновлении вновь её «перерисовывает», что приводит к заметным «миганиям». В следующей части этого руководства для обновления данных на странице мы будем использовать метод AJAX, который лишён вышеозначенного недостатка и обновляет не всю страницу, а только изменившиеся данные на ней.

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


Метод, который используется в этой части руководства для отображения изменений на веб-странице мало (почти никогда) не используется на практике из-за заметных артефактов при постоянных перезагрузках страницы и хорош только для освоения теории и практических тренировок по работе в веб-сервером (поэтому этой практикой не нужно пренебрегать).

В реальной работе подобных веб-серверов обычно используют либо AJAX, либо Websockets методы для динамического обмена данными между веб-сервером и браузером. Но это тема отдельных уроков и постепенно мы доберёмся и до рассмотрения этих вопросов.

Ссылки на предыдущие части руководства:

Часть 1, часть 2, часть 3.

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