Экраны PIXBOX, часть 9: мобильное приложение, функционал, прошивка

Эта часть будет большой, так как по отдельности разработанные узлы тут складываются в продукт. На этом этапе не только текст, а можно посмотреть приложение

Это 9 часть, вот прошлая. А остальные можно найти у меня в профиле

Я уже давно разрабатываю эти экраны, и сам хард-процесс муторный, но понятный, потому что физический: там напечатать, тут придумать крепёж, здесь потестировать разливку, а потом подобрать материалы. Это была длинная, но понятная часть. А вот софтовая была очень туманной, я буквально делал физические экраны, думая "с софтом ченить придумаем". А я, как уже писал ранее, не разработчик, а только дизайнер.

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

Было одно самое базовое требование: чтобы работало для обычного человека, который не связан со светодиодами. Без сложных настроек. Как я раньше говорил, тут я нашел китайские приложения плюс-минус функциональные и не требующие особой разметки, но простая модульность там невозможно и привязаны они к своему железу. Поэтому я начал смотреть на WLED, хоть там и очень ограниченный функционал, зато, помимо оригинального, есть приложение WLED+(оболочка wled), которое я и планировал использовать для первого этапа. Но там особо шило на мыло, тк модульность просто реализовать там нельзя: надо заходить в настройки самого wled и указывать в пикселях координаты расположения модулей, а такое никто не осилит из адекватных людей. Помимо этого, там только эффекты и ничего больше. Вот для понимания скрины этих приложений и экранов добавления модулей:

А не из базовых, я хотел вот что: простое управление модулями, эффекты, фото\видео и рисование. Но такого нигде не находилось, поэтому особо сильно ни на что я не рассчитывал, и просто дегазировал да мешал смолу

Параллельно происходила технологическая революция, свидетелем которой я уже стал в других частях проекта, например когда станок собирал. Я знал, что точно попробую сам написать приложение, но мозг очень сопротивляется, потому что объем вникания я заранее примерно уже понимал.

Но в один из обычных вечеров, я таки сел за работу. Накатил весь софт, который сказал чатгпт, а дальше случился новый, ну ПРОСТО НЕВЕРОЯТНЫЙ этап разработки. Со стороны сложно понять, но такую сложность я бы не осилил сам никогда, даже потратив годы на изучение: С++, Flutter, фронт, серверная админская часть, бекенд, связки и синхронизации, ключи, манифесты, жисоны, обосраться просто можно сколько всего разом. Мне кажется, моему мозгу пришлось стереть все детские воспоминания, чтобы осилить такой объем разом

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

Посмотреть приложение можно тут: PIXBOX в google play

Вот кстати, как выглядели первые версии приложения:

Прошивка ESP32

Я покупаю контроллеры с памятью 4мб и предустановленным WLED, в которых нет разъема для проводного подключения и некуда припаяться особо, только WIFI. Поэтому мне в начале вообще было непонятно, можно ли будет залить свою прошивку, но гпт мне быстро собрал тестовый файл прошивки и я залил его просто через обычный интерфейс ОТА обновления WLED, хаха. Чувствовалось, будто я угнал контроллер 😁

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

Короче, сказать что я был и есть впечатлен — не сказать ничего. Теперь у пиксбоксов есть прошивка + свое очень функциональное (относительно изначальных требований) приложение + связь с облачным сервером + управление через Алису. Ниже расскажу подробнее про функционал

Подключение

Один из самых важных этапов, потому что постоянно есть проблемы с этим у китайских приложений. Я придумал 2 способа: подключить по QR-коду, который будет приклеиваться на сам модуль, или вручную. На самом деле они оба очень просты, просто QR чуть-чуть проще.

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

LED prewiev

Очень не хватало мне в приложениях демонстрации того, что происходит на экране. Это конечно не особо важно, если экран перед тобой, но ограничивает, если нет. Да и просто приятно видеть, что происходит

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

Конфигуратор экрана

Раньше это было болью, тк надо было задавать координаты сетки, а теперь это приятный процесс, просто расставляешь кубики и сразу видно, что куда включить.

На реальных тестах сборки люди все равно подтупливали, поэтому я сделал небольшую инструкцию из 3 шагов с видео:

Адаптивность

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

В приложении есть сейчас 3 отдельных структуры:

• Базовый функционал (который был целью изначально)

• Виджеты

• Сценарии

Последние 2 появились уже во второй половине разработки, и показались мне очень хорошей идеей для будущего развития. Дальше расскажу что можно делать с пиксбоксами

[Базовый функционал]

Эффекты

Ну это база для таких проектов, и основа почти всей работы, даже при наличии другого функционала. Я посмотрел уже существующие эффекты разных прошивках и приложениях, собрал что я бы сам хотел, и сгенерил свои. Хотя и не писал их сам, это все равно было очень муторно, подбирать как оно должно все выглядеть и по сто раз тестировать. Особенно долго возился с эффектом огня, но в итоге получилось, и я считаю, что это лучший огонь среди LED проектов, которые я смог найти: плавный, спокойный, типа каминный огонь. И гибко настраивается

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

Отдельно стоит сказать про систему палитр. Обычно, если вы откроете например WLED, то там есть эффекты которые поддерживают только 1 цвет, а есть, которые только палитру (несколько цветов для разных частей эффекта). Это неприятный опыт: выбираешь цвет, а потом при переключении его нельзя применить, тк нужна палитра, и приходится перевыбирать. Поэтому палитры и цвет теперь одно и то же: каждый цвет содержит доп цвета, определяемые разбегом от основного по палитре в градусах, и каждая палитра объединяется в один цвет. Теперь никаких отдельных палитр и цветов, все всегда красится просто

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

Фото, видео и гифки

Можно выводить на экран фотки\картинки, можно видео и гифки до 15сек продолжительностью и до 25fps. То есть в редактор грузится любой файл, а вот выбрать можно только отрезок 15сек. Ограничение связано с текущим объемом памяти контроллера. Стоит отметить, что фото\видео на таком разрешении выглядит понятно на экране хотя бы 2х2 модуля. В этом разделе есть библиотека файлов, которая просто добавляет файлы, которые вы отметили, чтобы их было просто найти. Типа избранное

Пока что печаль в том, что в памяти контроллера пока хранится только 1 картинка и 1 видео одновременно, т.е. например автоматически разные видео показывать не получится, но это пока что

Тут, кстати, раскрывается модульность. Пока это 1-2 модуля, то им лучше быть инфодисплеем, например часами, и настольным светильником. Если их больше, например 4 или 6, то это уже пиксельная рамка-дисплей, которая хорошо выводит всякий пиксельарт низкого разрешения, и эффекты выглядят получше. А вот сборки побольше — уже полноценный пиксельный дисплей, на котором и фотографии можно разобрать

Рисование и анимация

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

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

[Виджеты]

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

Часы

Ну это база, просто часы. Синхронятся с регионом телефона и потом с сервером, чтобы корректироваться. Настраиваются визуально: цвет цифр, цвет фона (ну это почти во всех виджетах универсальная настройка). Могут показывать с секундами (если они влезают) и без них. Имеют разные шрифты, и на большом экране показываются крупно

Погода

Тоже база, но уже поважнее. Отображает погоду на сегодня и\или завтра, имеет анимированный фон в зависимости от погоды: если облачно — облака, если ясно — голубое небо + могут выводить иконку. Город для погоды нужно выбрать вручную и дальше он тянется с сервера

Секундомер

Очень похож на часы, но мерит секунды. Настраивается точно так же. На мелких разрешения адаптируется, и например в 1 модуле сначала показывает только секунды, но как только появляются минуты, то уже бегущей строкой

Рандомайзер

Самое пока непонятное для юзеров, кто тестил, хаха. Можно вбить варианты ответов и запустить случайный выбор. Сделал я это потому что сам иногда использую, ну и для компаний возможно будет весело поугадывать\повыбирать что-то

Таймер

Просто таймер, имеет все те же визуальные настройки + действие по окончании: мигать или просто выключиться

Текст

Позволяет выводить текст на экране, имеет те же визуальные настройки + размер шрифта, скорость прокрутки ну и всякое такое. Нужен, если использовать пиксбоксы как объявление типа "Беляши 100р" и всяких бегущих строк

[Сценарии]

Делают экран разнообразным и применимым, потому что работают без вашего личного участия

Плейлисты

Можно насобирать разные сцены в плейлист: эффекты, рисунки, тексты, картинку, анимации, часы и вообще всё, что есть(еще тут можно задать случайный эффект). Задать им время показа, типа по 2 минуты на сцену, или задать конкретное время когда показать сцену, например в 19:10. Причем эти 2 списка работают одновременно, у вас могут показываться эффекты каждые 2 минуты, а потом в 11:00 до 11:30 будут только часы

Это значит, что утром у вас могут быть часы и погода, а вечером эквалайзер для музыки, рисунки и эффекты

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

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

Авто выкл\вкл

Так и не придумал ёмкое и короткое название для этого, поэтому пока так костыльно) Просто включение и выключение по расписанию. Вместе с плейлистами делает экран очень гибким. Еще можно выбрать какое действие запустить при включении, а можно не выбирать

Световой будильник

Наверное тут нахватаю в панамку, но яркость модулей очень высокая. С обычной лампой не сравнится, но даже 1 модуль освещает комнату как полноценный ночник. Если поставить его недалеко и направить на себя, то будет сильно ярко

Будильник позволяет плавно увеличивать яркость и при этом менять цвет(задается юзером), например с холодного на теплый, чтобы имитировать рассвет. Можно выбрать когда сработает и через сколько выключится

[Дополнительно]

Есть много чего, что не является функционалом напрямую, но очень сильно на него влияет

Интеграция с Алисой

Позволяет управлять экраном голосом: включить\выключить, выбрать цвет (применяется к эффектам), включить некоторые эффекты, изменить яркость. Это не полный список команд, наверное я что-то упустил. Сам навык мне еще предстоит согласовать и пройти модерацию, но у меня приватный уже работает, это очень удобно

Обновление прошивки

Пришлось повозиться с распределением памяти контроллера (там всего 4мб), потому что я упёрся в предел памяти раздела, куда ставится прошивка, но в итоге все хорошо. Юзер видит наличие обновления прошивки, и может обновить её прямо из приложения примерно за 20 сек

Несколько пиксбоксов

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

Пока что всё, но это только первая версия. Сейчас приложение только для андройда, но написано на кроссплатформенном flutter, поэтому позже выкачу и для ios. Приложение уже в сторе: PIXBOX в google play

Я буду очень рад, если вы взглянете и поделитесь впечатлениями тут, или даже честно оцените в сторе. Без самого устройства пользоваться им не так весело, но почти все можно пощупать и без экрана, нужно просто внизу нажать "Продолжить без подключения"

А, чуть не забыл: добавил туда еще Пикс босса, чтобы рассказывать про сложные моменты. Он очень важный:

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

Ну и немного живых видео, как работает. Я не готовился специально и не снимал, поэтому пока шакальное, простите: