Погодный ярлык: иконки солнца/облака/дождя из битмапов

Погодный виджет на даче у меня долго показывал одни цифры: плюс двенадцать, ветер четыре метра в секунду. Цифры честные, но их нужно читать — полсекунды внимания на каждый взгляд. Ярлык с иконкой читается иначе: периферийным зрением, с другого конца веранды, за долю секунды. Солнце, облако, дождь — три состояния, которые покрывают большую часть дня, и для каждого хочется по картинке на экране.

Здесь собираю погодный ярлык на OLED: три битмапа 16x16 — солнце, облако и дождь — и механизм переключения между ними. Для проверки — цифры 1, 2 и 3 из Serial-монитора и кнопка на корпусе, которая листает иконки по кругу. В готовом приборе номер иконки приходит из сети: из ответа OpenWeatherMap достаётся слово с описанием погоды — весь цикл от запроса до разобранного значения разобран в разделе про JSON, здесь берётся только маппинг слова в номер.

Почему именно 16x16: иконка шириной в два шрифтовых знака видна и выцветшим глазом, а весит ровно 32 байта — шестнадцать строк по два байта. Три иконки — 96 байт, и даже они не трогают ОЗУ: массивы переезжают во флеш с PROGMEM. Анатомия байта — восемь пикселей, старший бит слева — уже разобрана в уроке про drawBitmap; пересказывать её не буду, вместо этого кладу на стол три готовых массива и показываю, как я их рисовал.

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

Проверка на глаз: байт 0xCF — это 11001111 — горят два крайних столбца слева и четыре справа; у солнца в седьмой строке это луч влево и край круга. Такие чтения байтов стоили мне получаса, но платят привычкой: в чужой простыне чисел из интернета я теперь вижу форму до заливки на плату. Свои картинки после листка удобно прогонять через конвертер image2cpp — он принимает PNG и отдаёт готовые байты в том же формате, что и массивы ниже.

Переключение устроено как машина с одной переменной: mode хранит номер текущей иконки, и любая команда — цифра из порта или фронт кнопки — переписывает его и вызывает перерисовку. Никаких анимаций перехода: старый кадр стирается целиком, новый собирается в буфере и уезжает на стекло одним display(). Мерцания при такой смене нет, потому что кадр живёт в ОЗУ, а экран получает уже собранную картинку — механика двойной буферизации разбиралась в уроке про clearDisplay.

Кнопка здесь не украшение: пока прибор стоит на столе и сеть ещё не подцеплена, листать иконки рукой удобнее, чем держать ноутбук с монитором порта. Фронт ищется парой prevBtn и btn — приём из урока про антидребезг — с межиконной отсечкой 300 мс, чтобы одно долгое нажатие не прокручивало три иконки подряд.

Кашу вместо иконки дают размеры в вызове drawBitmap: картинка 16x16 требует честные 16 и 16, и если по привычке оставить 8 и 8, библиотека возьмёт первые восемь байтов массива — полторы строки солнца — и растянет их в полную высоту экрана. На форуме arduino.cc я встречал случай, когда Uno делала всё: текст, шкалы, круги, — а единственная иконка 16x16 отказывалась рисоваться; почти всегда это размер в вызове или массив, свёрстанный в другой раскладке. Проверка на один взгляд: байтов в массиве ровно (w + 7) / 8 × h.

Мерцание приходит из другой истории — из долгих операций между clearDisplay и display(). Худший из моих промахов: чтение порта в середине отрисовки. readStringUntil ждёт терминатор до секунды, и если Serial пуст, кадр стоит полустёртым весь этот таймаут — глаз видит вспышку. Правило простое: порт опрашиваем только когда available() сказал, что читать есть что, а путь от clearDisplay до display() не прерываем ничем.

В рабочем приборе вместо цифр из монитора приходит ответ погодного API: в поле weather[0].main лежит слово Clear, Clouds или Rain — его и превращаем в номер иконки. Разбор ответа OpenWeatherMap до готовых значений — отдельный урок, здесь берётся только маппинг: Clear — 1, Clouds — 2, всё про дождь — 3. Ритм согласован с физикой процесса: погода меняется раз в часы, поэтому опрос сети раз в пять минут — норма, между опросами ярлык просто стоит и не трогает ни сеть, ни экран.

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

Что проверить после запуска: смены происходят целиком, без вспышек, даже если дёргать команды подряд — кадр собирался в буфере, так и задумано. Осечка кнопки видна при долгом удержании: одна прокрутка, а не три. Если хочется спокойнее — ставьте 500 мс: глазу на смену картинки нужно время, быстрее он не различает, а каждой перерисовке по I2C стоит около 92 мс шины — уже посчитанные в этом разделе цифры.

Набор легко растёт: снег, гроза, туман — по 32 байта каждый, десять иконок займут во флеше 320 байт и не потревожат ОЗУ вовсе. Рисуются тем же листком: облачко с точками, треугольник-молния, три горизонтальные черты. Правило прежнее: сначала клетка и форма, потом байты и проверка (w + 7) / 8 × h — и каждый новый ярлык встаёт в скетч добавкой одного else if.