Вывод данных BME280 (температура, влажность, давление) на сенсорный экран Nextion

Компоненты и материалы

Arduino Nano R3	×1
Датчик BME280 (SparkFun Atmospheric Sensor Breakout)	×1
Nextion NX8048T070 — 7" HMI TFT сенсорный дисплей (Itead)	×1
USB-UART преобразователь FT232RL (SparkFun)	×1

Приложения и онлайн-сервисы

• Visuino — графическая среда разработки для Arduino
• Arduino IDE

О проекте

Существует много вариантов дисплеев для добавления графического интерфейса к Arduino. Большинство из них требуют много памяти и процессорного времени, не подходят для плат с ограниченными ресурсами — Arduino UNO или Arduino Nano. Когда память ограничена, а нужен продвинутый UI, популярным выбором становятся умные программируемые последовательные дисплеи Nextion. Компания Itead предлагает бесплатный Nextion Editor для проектирования интерфейса.

BME280 — высокоточный комбинированный датчик температуры, влажности и барометрического давления. Подключается по I2C или SPI.

Visuino имеет полную поддержку Nextion, и я давно планировал туториал по этой теме. Также хотел сделать туториал по BME280. Решил объединить — один урок: вывод температуры, влажности и давления с BME280 на 3 канала компонента Scope (Waveform) на Nextion-дисплее.

Шаг 1: Компоненты

• Arduino-совместимая плата (использую Arduino Nano, но подойдёт любая)
• Модуль датчика BME280
• Nextion Serial Smart Display (использовал NX4024K032_11, но подойдёт любой)
• 4 перемычки «мама-мама»
• Для прошивки дисплея — 5V USB-TTL Serial Converter

Шаг 2: Подключение Nextion к USB-UART модулю

Для прошивки Nextion через Nextion Editor нужен USB-TTL преобразователь:

• Подключите разъём проводов Nextion к дисплею (Фото 1)
• Если USB-UART модуль настраиваемый — установите выдачу 5 В (Фото 2) (у меня джампер питания)
• Земля (чёрный) Nextion → GND USB-UART (Фото 2)
• Питание +5В (красный) Nextion → VCC USB-UART (Фото 2)
• RX (жёлтый) Nextion → TX USB-UART (Фото 2)
• TX (синий) Nextion → RX USB-UART (Фото 2)
• USB-UART → компьютер USB-кабелем (Фото 3)

Шаг 3: Запуск Nextion Editor, выбор типа дисплея и ориентации

• Скачайте и установите Nextion Editor
• Запустите, меню File → New (Фото 1)
• В диалоге Save As — имя файла, место сохранения (Фото 2)
• Save (Фото 2)
• В Settings — выберите тип дисплея (у меня NX4024K032_11) (Фото 3)
• Вкладка DISPLAY слева — настройки дисплея (Фото 4)
• Ориентация — Horizontal (Фото 4)
• OK

Шаг 4: В Nextion Editor — добавление и настройка компонента Waveform (Scope)

Нужен компонент Scope с 3 каналами для Температуры, Давления, Влажности:

• Toolbox слева → Waveform (Фото 1) — добавляет в область дизайна (Фото 2)
• Растяните на весь дисплей (Фото 3)
• Attribute toolbox: ch = 3 (Фото 3)
• Attribute toolbox: dir = right to left (Фото 4)

Шаг 5: Загрузка проекта в Nextion

• Кнопка Upload (Фото 1)
• В диалоге Upload to Nextion Device — Go (Фото 2) — начинается загрузка (Фото 3)
• Когда загрузка завершится (Фото 4) — Exit

Шаг 6: Запуск Visuino, выбор типа Arduino

У Arduino Nano только один Serial-порт, он нужен для прошивки Arduino. Поэтому Arduino нужно прошить до подключения Nextion.

Нужен установленный Arduino IDE (https://www.arduino.cc/). В Arduino IDE 1.6.6 критические баги — ставьте 1.6.7 или выше, иначе туториал не заработает!

Visuino: https://www.visuino.com — тоже установите.

• Запустите Visuino (Фото 1)
• Кнопка Tools на компоненте Arduino (Фото 1)
• В диалоге выберите Arduino Nano (Фото 2)

Шаг 7: В Visuino — добавление компонента Nextion Display и элемента Scope

• В фильтре Toolbox введите «next», выберите Nextion Display, перетащите в область дизайна (Фото 1)
• Кнопка Tools у DisplayNextion1 (Фото 2)
• В редакторе Elements выберите «Scope(Wave)», нажмите «+» слева — добавится Scope (Фото 3)

Шаг 8: В Visuino — 3 канала для Scope и подключение Nextion

• Object Inspector → «...» у Channels подсвойства Scope1 (Фото 1)
• В редакторе Channels: выберите Channel справа, 3 раза нажмите «+» слева — 3 канала (Фото 2, 3)
• Закройте диалоги Channels и Elements
• Соедините Out DisplayNextion1 → In Serial[0] Arduino (Фото 4)

Шаг 9: В Visuino — 3 компонента Map Range

Каналы Nextion Scope принимают значения 0.0–1.0. Для отображения температуры, влажности, давления — конвертируем в этот диапазон через Map Range:

• Фильтр «map» → Map Range, перетащите 3 штуки (Фото 1)
• MapRange1 (Фото 2): Input Range Max = 101000, Min = 99000 (давление, Па; подстройте под свою местность)
• MapRange2 (Фото 3): Input Range Max = 100, Min = -20 (температура, °C)
• MapRange3 (Фото 4): Input Range Max = 100, Min = 0 (влажность, %)

Шаг 10: В Visuino — подключение Map Range к каналам Nextion

• Out MapRange1 → In Elements.Scope1.Channels.Channel1 DisplayNextion1 (Фото 1)
• Out MapRange2 → In Elements.Scope1.Channels.Channel2 DisplayNextion1 (Фото 2)
• Out MapRange3 → In Elements.Scope1.Channels.Channel3 DisplayNextion1 (Фото 3)

Шаг 11: В Visuino — добавление и подключение BME280

• Фильтр «280» → Pressure Temperature Humidity BME280 I2C, перетащите в область (Фото 1)
• Мой BME280 имеет I2C-адрес 118 (0x76). Если другой — настройте свойство Address (Фото 2)
• Pressure(Pa) BME280 → In MapRange1 (Фото 2)
• Temperature BME280 → In MapRange2 (Фото 3)
• Humidity(%) BME280 → In MapRange3 (Фото 4)
• Out BME280 → In I2C Arduino (Фото 5)

Шаг 12: В Visuino — добавление, настройка и подключение Clock Generator

Проект будет работать и так, но Scope обновляется слишком часто. Лучше — 10 раз в секунду. Добавим тактовый генератор для тактирования чтения сенсора и обновления Scope.

• Фильтр «clock» → Clock Generator, перетащите (Фото 1)
• Object Inspector: Frequency = 10 (Фото 2)
• Out ClockGenerator1 → Clock PressureTemperatureHumidity1 (Фото 3)

Шаг 13: Генерация, компиляция и загрузка кода Arduino

• Visuino: F9 или кнопка на Фото 1 — генерация кода и открытие Arduino IDE
• Arduino IDE: Upload — компиляция и загрузка (Фото 2)

Шаг 14: Подключение BME280 к Arduino

• 3V3 VCC (красный), GND (чёрный), SDA (зелёный), SCL (жёлтый) → BME280 (Фото 1)
• GND → GND Arduino Nano (Фото 2)
• 3V3 → 3V3 Arduino Nano (Фото 2)
• SDA → A4 (SDA) Arduino Nano (Фото 2)
• SCL → A5 (SCL) Arduino Nano (Фото 2)
• Фото 3 — расположение пинов GND, 3V3, A4, A5 на Nano

Шаг 15: Подключение Nextion к Arduino

• Отключите провода Nextion от USB-UART
• GND (чёрный) Nextion → GND Arduino Nano (Фото 2)
• TX (синий) Nextion → RX (D0) Arduino Nano (Фото 2)
• RX (жёлтый) Nextion → TX (D1) Arduino Nano (Фото 2)
• Фото 4 — пины GND, 5V, RX/D0, TX/D1 на Nano
• +5V (красный) Nextion → 5V Arduino Nano (Фото 3)
• Фото 4 красным показаны пины GND, 5V, RX/D0, TX/D1 (синим — пины предыдущего шага)

Шаг 16: Играемся...

Поздравляю! Проект завершён.

Фото 1 — собранный и включённый проект. На фото и в видео видно, как Scope на Nextion рисует Давление, Температуру и Влажность с BME280.

Фото 2 — полная диаграмма Visuino.

Прилагается Visuino-проект для этого туториала. Скачайте и откройте в Visuino: https://www.visuino.com

В том же архиве — проект Nextion Editor для дисплея.

Файл: FJE6Y04IWE4O3H6.zip