Цифровая электроника для начинающих (Елисеев) - страница 45

3. Создадим текстовую переменную, которая будет хранить наше изображение и скопируем в нее всю строку:

const PROGMEM char *image01 = "data:image/jpeg;base64,/9j/4A….5n/2Q==”;

Тег PROGMEM указывает компилятору, что это константа, которую можно хранить во флеш-памяти, сэкономив тем самым место для других переменных. Это особенно актуально, если картинок много.

4. Теперь мы можем использовать наше изображение с помощью тега img следующим образом:

Для этого добавим следующий код в следующую строку после “Turn LED off”:

client.print("");

Наш веб-сервер вряд ли получит премию года за лучший дизайн, но по крайней мере, пользователь теперь видит, что он управляет именно светодиодами:

Кстати, в реальном проекте все изображения целесообразно вынести в отдельный файл, который можно назвать например, “images.h”. Тогда в основной программе можно будет написать #include "images.h". Это позволит отделить ресурсы от кода, и сделать текст программы более читаемым.

Самостоятельная работа: вывести разные типы изображений, например кнопки, светодиоды.

3.11 Удаленный мониторинг

С помощью web-сервера можно не только включать и выключать светодиод, но и получать информацию с удаленного объекта. Например, можно узнать температуру в квартире, находясь на каникулах или в отпуске. Как нетрудно догадаться, для этого достаточно вывести нужные нам параметры в HTML, который и отобразится на веб-странице.

К примеру, достаточно добавить такую строку в код формирования HTML:

if (digitalRead(buttonPin) == HIGH) {

client.print("Button state: ON
");

} else {

client.print("Button state: OFF
");

}

При обновлении страницы в браузере мы увидим соответствующий текст. Разумеется, это может быть не только кнопка, но и например, датчик закрывания двери или датчик освещенности (желающие могут перечитать главу 2.6 “Ввод аналоговых величин”).

Рассмотрим пример подробнее. Допустим, у нас есть данные с разных сенсоров (подробнее можно прочитать в главе 2.7-2.10). Чтобы не загромождать тестовый код, представим данные в виде уже готовых переменных, реальный код чтения желающие могут добавить самостоятельно.

float temperature = 22.5;

int humidity = 60;

int pressure = 1010;

bool doorClosed = true;

bool windowClosed = false;

Наша задача - отобразить эти данные на веб-сервере, для чего проще всего воспользоваться HTML-тегом “Table” (таблица).

Пример таблицы в HTML: