Однажды, смотря на матричное табло, мне пришла идея что было бы не плохо, чтобы смена текста была анимированной. Стало интересно попробовать. Прототип анимации. Вид шрифта мне так понравился, что на его основе решил сделать часы.
Выбрал микроконтроллер ESP32, поскольку у него есть WiFi, что позволяет синхронизировать часы с серверами времени и получать информацию о текущей погоде и прогнозе. Микроконтроллер очень универсальный, мощный и стоит не дорого.
Перепробовал несколько разных дисплеев. В итоге, пришёл к выводу, что если хочется часы смотреть ночью, то засветка должна быть минимальная, а лучше никакая. Все хоббийные дисплеи, что прошли через мои руки, имели сильную проблему засветки, кроме OLED. Засветка становится важным критерием, когда часы планируется видеть ночью, когда никакого другого света, кроме как от часов, нет. К сожалению, с OLED дисплеями проблема, что трудно найти подходящий по размеру, разрешени и цене. Разрешение дисплея не должно быть сильно большим, памяти на виртуальный экран не хочется тратить много, размеры же, наоборот, хочется побольше, чтобы можно было изображение издалека видеть. Я воспользовался тем, что информация на экране может быть разделена пополам -- с одной стороны часы, с другой минуты. Таким образом, экран часов состоит из двух OLED дисплеев размером 1,5" и разрешением 128х128 каждый.
Дополнительно решил воспользоваться фоторезистором для замера окружающей освещённости, чтобы автоматически подстраивать яркость изображения под освещённость.
Всё монтируется на макетной плате.
Корпус первый попавшийся с прозрачной крышкой, в который помещаются часы. Куплен на амазоне примерно за 10 евро.
При первом включении программа обнаружит, что нет данных для подключения к сети и выведет QR-код для программы
ESP SoftAP Provisioning, которая есть как в Google Play Market, так и в App Store. После настройки Wifi
программа захочет получить данные о своём местоположении, чтобы узнать временную зону и местонахождение,
чтобы правильно показывать время и погоду. Поскольку данных изначально нет, их надо ввести через веб-интерфейс.
Длы включения веб-интерфейса надо нажать кнопку сзади часов, на левом экране появится QR-код с адресом вебсайта,
а на правом этот же адрес в обычной символьной форме. Пройдя по адресу и заполнив данные по ключу API от сайта
погоды openweathermap.org, а так же либо руками введя местоположение и выбрав временную зону или ввести ключ
от API ipinfo.io, тогда программа будет определять своё местоположение автоматически.
Сразу после отправки данных веб-интерфейс выключается и часы переходят в обычный режим.
Определив своё местоположение и подстроив соответственно временную зону, часы регулярно опрашивают сайт погоды, по информации от которого получают время восхода и заката для местоположения. От этого вычисляется цвет цифр времени. Ночью цвет должен быть медным, днём белым, переход от одного к другому плавный. Цвет символов погоды и цифр температуры вычисляется от температуры. Когда холодно, то цвет уходит в синий; когда умеренно тепло, то зелёный; жаркая погода показывается красным. Формулы преобразования температуры в цвет придуманы самостоятельно, почему-то нигде ничего готового нет. На левом экранчике фоном показывается символ для текущей погоды, на правом прогноз на следующие примерно три часа. Удобно утром, чтобы знать на что расчитывать перед выходом из дома на работу.
Программа написана с использованием фирменного фреймворка ESP-IDF от Espresiff на чистом Си.
Так же использовалась библиотека mjson для разбора принятых ответов от API сервисов. Пришлось воспользоваться сторонней даже не портированной на ESP32 библиотекой, поскольку поставляемый вместе с ESP-IDF компонент cJSON при разборе ответа прогноза погоды объёмом 16 килобайт мог потребовать больше памяти, чем было свободно в куче.
Для работы с дисплеями я написал свой собственный компонент. При написании упор был на универсальность, эффективность, лёгкость и расширяемость. Добавление виртуального экрана, изображение с которого выводится на два физических экрана одновременно, заняло несколько десятков строк. Частота кадров с учётом, что информацию надо сначала нарисовать на виртуальном экране, состаяляет примерно 58,5 кадров/сек. Компонент поддерживает так же шрифты представленные в различных форматах, типа BITSTREAM, как в библиотеках от Adafruit, а так же символы, заданные координатами точек в матрице. Поддерживается кодировка символов Unicode, в программе могут быть загружены только необходимые наборы символов, количество наборов явно не ограничено. Компонент находится в постоянном развитии согласно моим потребностям. Поддерживаются драйвера разных дисплеев на разных возможных шинах, с разной глубиной цвета и организацией памяти, виртуальные экраны и их комбинации.
Можно сказать, что шрифты в этом проекте являются главной особенностью. Я уже раньше делал проекты, в которых шрифты описывались кубическими кривыми Безье. Описание кривыми позволяет описывать символы небольшим количеством опорных точек, но при этом легко масштабировать на любой размер. Пример такого проекта Weather clock. Демонстрационное видео того проекта: Bezier Curves Clock.
Как следует из названия, точечный шрифт состоит из точек. Точки представляют собой матрицы, размер которых зависит от выбранного масштаба. Матрицы размером от 1 до 5 подобраны руками, остальные создаются автоматически нарисованными окружностями с убыванием яркости от центра к краю. Матрицы монохромны, при выводе можно указать карту цветов для каждой яркости. Благодаря такому подходу, шрифт в любом масштабе будет хорошо выглядеть.
Первые 10 символов, представляющих цифры, плюс пара дополнительных для показа градусов, я сделал самостоятельно. За основу символов изображения погоды я взял шрифт, содержащий иконки символов погоды и руками их доработал в редакторе FontCreator. Для того, чтобы анимация символов не выглядела как беспорядочное перемещение точек от одних координат к другим, их необходимо расположить в определённом порядке, чтобы неизменяемые части при переходе оставались на тех же местах, а изменяемые менялись желательно так, чтобы меньше пересекаться с другими точками при движении. FontCreator позволяет при редактировании символа указать индекс каждой точки.
Для анимационного перехода одного символа в другой выполняется несколько шагов. Создаётся два массива координат точек каждого
символа: из которого происходит преобразование и в который происходит преобразование. Затем, количество элементов в этих массивах
выравнивается, дополняя недостающие элементы размножением последнего элемента в соответствующем массиве. Функция,
выполняющая преобразование, расчитывает сдвиг каждой точки по линии от старых координат к новым в зависимости от
параметра t ∈ [0, 1], где t = 0 означает координаты исходного символа, а t = 1 - координаты конечного символа.
Параметр t расчитывается по времени так, чтобы весь промежуток от 0 до 1 пройти за половину секунды. Начальная точка отсчёта
подбирается за пол секунды до наступления следующей секунды.
Все компоненты установлены на макетной плате. Готовая плата разработчика NodeMCU-P32S установлена в кроватку, над платой находятся два дисплея. Питание осуществляется через внешний USB-C разъём. Дополнительна установлена кнопка для включения режима конфигурирования через веб-интерфейс и фоторезистор для подстройки яркости под окружающее освещение.
