drawLine, drawRect, fillRect: рамки и гистограммы

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

Команд всего четыре, но у них есть асимметрия, на которой спотыкаются почти все. Система координат проста: ноль — левый верхний угол, X растёт вправо до 127, Y вниз до 63. drawLine(x0, y0, x1, y1, цвет) берёт две точки и ведёт между ними линию. drawRect(x, y, w, h, цвет) берёт ЛЕВЫЙ ВЕРХНИЙ УГОЛ плюс ширину и высоту. А вот drawCircle(x, y, r, цвет) — и это главное отличие — берёт ЦЕНТР и радиус: икса и игрека правого нижнего края у круга просто нет. Я один раз минут десять двигал круг по экрану, передавая ему угол, и не мог понять, почему он упрямо живёт в четверти, где не был зван.

Заливка — парная к каждому контуру: fillRect красит прямоугольник целиком тем же набором аргументов, fillCircle — круг. Базовые механики этих же команд я уже раскладывал в уроке про линии и фигуры, сегодня же собираем из них три конкретные вещи: рамку по периметру, шкалу гистограммы и столб, который дышит вместе с ручкой на A0. К конце урока у вас будет скелет, который я потом переносил в индикатор заряда и в указатель уровня без переделки логики — менялись только координаты.

Гистограмма — это арифметика ширины, и её стоит проговорить до кода. Столб рисуется fillRect от левого края, значит ширина — единственная переменная часть. Сырое значение analogRead живёт в диапазоне 0-1023, а шкале у меня выделено 122 пикселя: 128 минус два пикселя полей слева и справа плюс один пиксель под саму рамку. Переводит диапазоны map(raw, 0, 1023, 0, 122) — и столб никогда не вылезет за рамку, что бы вы ни крутанули движок. Если шкала узкая, например 60 пикселей, тот же map просто получает другой потолок — формула не меняется.

Два края диапазона проверяйте руками, это дёшево. При raw = 0 ширина столба равна нулю — fillRect с шириной меньше единицы молча ничего не рисует, ни падения, ни артефактов, пусто и всё. При потолке столб упирается в правую границу шкалы ровно вплотную, если поля посчитаны честно. А вот что происходит с заливкой, уехавшей за край экрана: библиотека обрезает её по границе буфера, в чужую память она не пишет —(fillRect(120, 0, 40, 20) даст столбик из оставшихся восьми пикселей, а не мусор. Толщина линий отдельно: drawLine всегда в один пиксель, и рамка из неё выглядит нервно на расстоянии — для утолщения я провожу fillRect высотой два-три пикселя, это дешевле, чем четыре параллельных линии.

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

Обратите внимание на третий столбец таблицы: прямоугольники живут углом, круг — центром. Отсюда практическое следствие для раскладки кадра: прямоугольную шкалу удобно позиционировать от углов зоны, а круглый индикатор — от центра свободного места, и координаты у них считаются по-разному. Круглую лампочку радиуса 4 в правом нижнем углу я ставлю в точку (114, 58): 114 плюс 4 равно 118, до правого края остаётся девять пикселей, снизу 62 — пиксель зазора до линии на 63. Каждую такую координату я когда-то подгонял на глаз, а потом записал в комментарий скетча — экономит время при следующем переносе.

Ещё одна граница применимости, о которой редко пишут: примитивы этой четвёрки — строго монохромные. Есть цвет — SSD1306_WHITE — и нет цвета, и никакого сглаживания между ними: ступенчатый край столба на большом экране выдал бы генерацию, здесь же лесенка из пикселей — родная фактура панели. Сглаженные фигуры умеют только векторные шрифты, а примитивы дают резкость, которая на 0.96 дюйма смотрится честнее. Точки по одной, если понадобится, ставятся drawPixel — у меня про неё отдельный урок, здесь же работаем пакетами.

Отдельно про порядок аргументов: на этой четвёрке я видел больше всего промахов. У прямоугольников идут x, y, w, h — угол и два размера; глаз, привыкший к четырём координатам drawLine, тянет тот же ритм в drawRect, и вместо рамки 124 на 42 выходит узкая полоса или вовсе ничего. Моя страховка грубая, но рабочая: ставя размеры, вслух проговариваю «угол — ширина — высота». Второй промах тоньше — залить столб раньше контура и получить рамку, перекрытую заливкой у правого края; поэтому в скетче заливка всегда на пиксель уже контура, и рамка остаётся целой.

В скетче два момента, которые легко пропустить. Первый: кадр пересобирается с нуля на каждом проходе loop — clearDisplay стирает всё, включая рамку, и рамка рисуется заново. Это не расточительство, а нормальный цикл работы с буфером: стирание и рисование — операции над байтами в памяти контроллера, шина при этом молчит, и десяток примитивов стоят копейки. Второй: столб заливается на пиксель уже контура шкалы — иначе fillRect перекрывает линию drawRect, и рамка выглядит обгрызенной. Двухпиксельный зазор (контур на 2, заливка на 3) — моя рабочая привычка после пары кадров с визуально сломанной шкалой.

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

Из этих четырёх команд собирается большая часть моих экранов. Индикатор заряда — та же шкала с делениями из коротких drawLine каждые двадцать пикселей. Уровень звука с микрофона — столб, у которого ширина дрожит с амплитудой, плюс пиковая чёрточка, плавно сползающая вправо. Индикатор сети или нагрева — три круглые лампочки, заливаемые по порогам. Ни одна из этих задач не потребовала битмапов: примитивы быстрее в разработке и в разы легче по памяти — битмап 32×32 съедает 128 байт флеша, а вызов drawCircle не стоит ничего.

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

Последний довод в пользу примитивов — предсказуемый вес. Шкала со столбом и рамкой не требует ни таблиц, ни конвертеров: битмап иконки 32×32 стоит 128 байт флеша и похода через image2cpp, а вызов drawCircle не стоит ничего. Для прибора, где экран — это три-четыре индикатора и одна шкала, примитивов хватает с избытком; спрайты подключаются точечно, когда без них не обойтись, — про их изготовление у меня есть урок про битмапы.