Меню 20x4: многострочный интерфейс устройства

Поливалка на даче выросла из трёх кнопок в прибор с шестью настройками: порог влажности, интервал полива, дневной и ночной сценарий света, звук предупреждения, уровень в баке. Экран у неё стоял 16x2, и меню пришлось сворачивать в карусель: в кадре один пункт и его значение, а чтобы понять, что идёт соседним, надо было нажать кнопку и посмотреть. Хуже всего было объяснять это маме: «нажми два раза, увидишь порог, потом ещё раз, число начнёт меняться» — инструкция заняла больше места, чем сам скетч. Переезд на экран 20x4 занял один вечер и закрыл вопрос разом: в кадре заголовок и три пункта, соседи видны без нажатий, и прибор читается как записка, приклеенная на стену.

На бумаге разница выглядит скромно: 80 знакомест против 32 — в 2,5 раза больше текста в одном кадре. На деле это разница между интерфейсом-каруселью и настоящим многострочным экраном: у карусели каждое значение добывается нажатием, у окна — взглядом. В этом уроке соберём на 20x4 меню с заголовком, курсором-стрелкой и режимом правки: кнопка листает пункты, тумблер открывает правку, ручка меняет значение, светодиод горит, пока правка открыта. Основа рисования — та же печать по изменению без единого мерцания, что была в мини-меню на 16x2 (/lesson/lcd/lcd-menu-i-kursor/), а новыми будут оконная математика и раскладка строки.

Экран я раскладываю по жёсткой сетке. Строка 0 — служебная: слева имя прибора, справа текущий режим — SMOTR или PRAVKA. Строки 1–3 — окно меню: три пункта, которые видны в данный момент. Почему три, а не четыре: заголовок с режимом стоит дороже, чем четвёртый пункт. Человек, который не понял, что прибор в режиме правки, крутит ручку и портит настройку; одна служебная строка снимает эту проблему целиком, и я не помню случая, чтобы её не хватало.

Математика окна умещается в две проверки. Курсор ушёл выше окна — окно подтянулось к нему; ушёл ниже — окно поехало за ним. Всё, никакого скролла-анимации и списков строк: перерисовка кадра — это четыре короткие печати по 20 символов, и по шине I2C полный кадр занимает порядка 30–40 мс на все 80 знакомест. Отсюда дисциплина: полный кадр обновляем только при смене пункта или режима, а значения — точечно, только изменившиеся ячейки, иначе мерцание вернётся. У 20x4 есть и сюрприз глубже: строки в памяти дисплея лежат не подряд, мы это разбирали в уроке про адресацию строк (/lesson/lcd/lcd-20x4-adresaciya-strok/) — setCursor всё прячет, но знать, куда пишет библиотека, полезно.

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

Внутри правки ручка на A0 через map() переписывает значение активного пункта. Диапазоны у пунктов разные и живут в двух массивах: порог влажности — от 10 до 90 процентов, интервал — от 5 до 120 минут, булевы пункты — 0 и 1, граница приходится на половину оборота ручки. На экране при правке перерисовывается одна зона: столбцы 13–19 активной строки, соседние строки стоят неподвижно. Фронт кнопки ловим по прошлому состоянию плюс окно 200 мс от дребезга — ровно как мы делали в уроке про кнопку и дребезг (/lesson/osnovy/debounce-knopki/).

Тренажёр собирает тот же конечный автомат целиком. Кнопка на D2 листает шесть пунктов по кругу — следите за Serial: строка punkt=3 okno=1 это момент, когда окно поехало за курсором. Тумблер на D3 открывает правку: заголовок меняет SMOTR на PRAVKA, светодиод на D12 загорается, и ручка A0 начинает двигать значение активного пункта — в Serial идут пары punkt= и v=. Значения, введённые в правке, остаются в массиве после закрытия режима: вернитесь к пункту и убедитесь, что число запомнилось. Имена в массиве выровнены пробелами до десяти символов — поэтому колонка значений стоит ровно, без сдвигов, и затирающий хвост всегда накрывает старое число.

Разбирать поведение по Serial удобно именно так, построчно: каждая строка — одно событие интерфейса. Листание печатает пункт и окно, смена режима — единицу или ноль, правка — пары punkt= и v=. Если соберёте прибор на реальном железе, этот же лог станет журналом отладки: в нём видно, когда кнопка дала дребезг — два пункта за одно нажатие, — когда ручка дрейфует и значения ползут по единице, доезжает ли окно до краёв списка. Я вывожу такие пары в Serial на всех приборах с меню: это дешевле любого отладчика и работает даже тогда, когда под рукой только телефон с USB-кабелем.

Куда это растёт дальше. Подменю — это просто вторая страница: другой массив имён и значений, тот же автомат, тумблер переключает страницы. Настройки стоит сохранять в EEPROM при выходе из правки — значения должны переживать выключение, как хранить и не убивать ячейки, мы разбирали в уроке про первые настройки (/lesson/eeprom/eeprom-pervye-nastroyki/). Контраст у 20x4 выставляется своей ручкой на модуле — на холодной веранде без неё буквы бледнеют (/lesson/lcd/kontrast-lcd-v0-potenciometr/). И последний штрих к оконной математике: она не меняется, когда пунктов становится десять или двадцать. Окно по-прежнему едет только у краёв, а в середине списка курсор ходит по неподвижному кадру — именно поэтому я считаю этот каркас достаточным для любого однораздельного прибора.

Один мостик напоследок. Весь этот интерфейс сидит на библиотеке, которая прячет шину: каждый print() разворачивается в полубайты и стробы, а lcd.init() — в стартовую последовательность из даташита. Если хочется видеть, что именно прячет библиотека — и уметь разговаривать с дисплеем без неё, — следующий урок как раз про это (/lesson/lcd/hd44780-komandy-bez-biblioteki/). Меню от этого не станет другим, но перестанет быть чёрным ящиком.