ESP8266 и Arduino IDE. Часть 10c: IoT-сайт. Добавление LCD-дисплея

Эта статья демонстрирует интеграцию LCD-дисплея 4x20 символов с I2C-адаптером в систему мониторинга окружающей среды на ESP8266.

Компоненты

Конфигурация LCD:

Символьный дисплей 4x20 с I2C преобразователем последовательный-параллельный
Адрес: 0x27 (шестнадцатеричный)
Питание: 5V
Протокол: I2C, пины D1 (SDA) и D2 (SCL)

Подключение схемы:

LCD SCL -> ESP8266 D1 (с подтягивающим резистором 4.7 кОм)
LCD SDA -> ESP8266 D2 (с подтягивающим резистором 4.7 кОм)
LCD VCC -> 5V выход
LCD GND -> Земля

Библиотека

Используется библиотека LiquidCrystal_I2C от Marco Schwartz, которую необходимо установить вручную (недоступна через Arduino IDE Library Manager). Скачайте с GitHub и скопируйте в папку библиотек Arduino, затем перезапустите IDE.

Инициализация LCD

#include <LiquidCrystal_I2C.h>
LiquidCrystal_I2C lcd(0x27, 20, 4);

void setup() {
  lcd.begin(20,4);
  lcd.init();
  lcd.backlight();
}

Формат отображения на LCD:

ESP8266: IOT Monitor
Temperature: xxxxx*C
Humidity: xxxxx%
Brightness: xx

Вывод температуры:

lcd.setCursor(0, 0);  lcd.print("ESP8266: IOT Monitor");
lcd.setCursor(0, 1);  lcd.print("Temperature:        ");
lcd.setCursor(13, 1); lcd.print(tempC);
lcd.write(223);  // символ градуса
lcd.print("C");

Переключение единиц температуры

Тумблер на пине D5 позволяет выбирать между отображением в Цельсиях и Фаренгейтах:

LOW: отображение в Цельсиях (от -30 до 50 градусов)
HIGH: отображение в Фаренгейтах (от 20 до 120 градусов)

switchPinState = digitalRead(pinSWITCH);
if (switchPinState == LOW) {
  lcd.setCursor(13, 1);
  lcd.print(tempC);
  lcd.write(223);
  lcd.print("C");
}

Обновление веб-страницы

Arduino теперь отправляет информацию о шкале температуры на веб-страницу через дополнительное поле данных (C или F).

function processReceivedData(evt) {
  var data = evt.data;
  var tmp = data.split('|');
  var h = parseInt(tmp[0]);
  var tc = parseInt(tmp[1]);
  var tf = parseInt(tmp[2]);
  var b = parseInt(tmp[3]);
  var whichTemp = (tmp[4]); // C или F

  if (whichTemp == "C") {
    dialMinVal = -30;
    dialMaxVal = 50;
    temperature = tc;
    tempSymbol = '*C';
  }
  else {
    dialMinVal = 20;
    dialMaxVal = 120;
    temperature = tf;
    tempSymbol = '*F';
  }
}

Скачиваемые скетчи

Статья содержит три файла скетчей:

ESP8266-10C_sketch02_IOT_WebsiteWithLCD – базовая интеграция LCD
ESP8266-10C_sketch04_TemperatureSwitch – с переключением единиц температуры
ESP8266-10C_sketch05_TemperatureSwitch2 – улучшенная версия

Прогресс проекта

Это шаг 4 из 7-шагового плана:

Тестирование датчиков – выполнено
Базовый сайт с WebSocket – выполнено
Улучшенный сайт с циферблатами/графиками – выполнено
Добавление LCD – выполнено
Добавление WiFi Manager – далее
Отображение времени через NTP-сервер
Корпус проекта