Pixel Table: от идеи до реализации интерактивного пиксельного стола⁠⁠

Давайте знакомиться!

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

Этап 0: Как всё начиналось

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

Этап 1: Исследование существующих проектов

В интернете есть сотни проектов НЕинтерактивных (не реагирующих на касания) столов и матриц на адресных светодиодах, они предназначены исключительно для вывода красивых картинок. Вспомним тот же рюкзак с дисплеем от @AlexGyver:

Схемотехника у всех подобных проектов весьма простая: один контроллер + несколько сотен адресных светодиодов. Но для добавления игровых функций нужно как-то считывать нажатия.

Проектов же интерактивных столов в интернете встречается сильно меньше ввиду сложности электроники и огромных трудозатрат на сборку в домашних условиях.

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

• Все существующие проекты собраны на коленке и имеют огромные недочёты в плане трудозатрат на сборку: несколько сотен проводных соединений и точек пайки, десятки человекочасов работы. Такое нам не подходит, я слишком ленив, чтобы руками всё это паять, а значит нужны печатные платы без проводных соединений, разъём-в-разъём, плата-к-плате, side-by-side;

• Конструкция корпуса зачастую тоже достаточно сложная, с вырезами/выпилами, с клеем или герметиком. Такое тоже не нравится, нужно что-то максимально простое из обычного мебельного ЛДСП, чтобы можно было заказать раскрой на ближайшем производстве;

Этап 2: Проектирование печатной платы

Изначально я решил сделать стол размера 25х15 пикселей, эдакий правильный прямоугольник со сторонами, кратными 5, т.е весь стол можно собрать из 15 плат размера 5х5, я называю их сегментами.

В качестве канала связи рассматривал RS485 и CAN:

• RS485 подразумевает топологию master-slave, т.е нужно явно опрашивать все ведомые устройства, чтобы избежать коллизий, что будет сложно реализовать для такого количества пикселей;

• А вот CAN позволяет организовать сеть равнозначных устройств и даже имеет аппаратный механизм арбитража коллизий. Идеальное решение для построения событийной модели обработки нажатий: есть клик – отправили, клика нет – молчим. Короче говоря, сообщения о нажатии отправляются в шину вне очереди, что позволит обрабатывать нажатия в кратчайшие сроки.

В качестве микроконтроллера был выбран самый популярный и дешёвый микроконтроллер с CAN шиной на борту – STM32F103, имеющий к тому же десятки китайских клонов на случай необходимости дальнейшей оптимизации по цене/наличию. Наверняка у каждого здесь есть завалявшаяся дома платка Blue Pill с подобным контроллером. Вот и у меня была.

В качестве светодиодов были выбраны обычные RGB адресные WS2812B. Тут всё очевидно – работают независимо при последовательном подключении:

В качестве датчика нажатия был выбран оптический сенсор VCNL36821S, комбинирующий в себе светодиод и фотодиод, работающие в ИК диапазоне длин волн 800..1000нм, а значит он не будет реагировать на RGB спектр светодиодов 400..700нм. С другой стороны, это не самое дешёвое решение, но точно одно из самых простых при автоматизированной сборке печатных плат. Один smd элемент и готово, никаких тебе емкостных сенсоров в виде улиток из проволоки (вспоминаем про желание избежать трудоемкости при сборке).

Сколько датчиков и светодиодов можно подключить к одному контроллеру STM32F103 в корпусе LQFP-48 без использования всякого рода расширителей портов? Все звёзды сошлись на размере сегмента 5х5 = 25 пикселей. В прототипе задействованы абсолютно все ноги контроллера, даже пришлось позаимствовать одну ногу SWD из разъёма для программирования.

Одна из сложностей при проектировании печатной платы заключалась в том, что у сенсора VCNL36821S отсутствует возможность задавать адрес I2C, а у микроконтроллера STM32F103 только две шины I2C. Как же быть? Ответ был найден на просторах Stackoverflow и заключался в коммутации линии SDA через диоды Шоттки. Гениально, как мне кажется:

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

Управлять столом будет обычная Raspberry Pi 4B+ вот с такой платой расширения для CAN шины:

Сами платы были заказаны в Китае на PcbWay с автоматизированной сборкой, т.е сам я ничего не паял.

Ну и затратная часть на платы:

• Текстолит * 15 плат = 11 800 ₽

• Компоненты * 15 плат = 29 600 ₽

• Авто монтаж * 15 плат = 30 600 ₽

• Доставка с Китая = 13 560 ₽

• Итого: 85 560 ₽

Этап 3: Проектирование корпуса

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

В прототипе я решил сделать у стола равномерные отступы, чтобы расположить там малинку, блок питания и динамики, но позже понял, что это было плохой идеей:

• Во-первых, такой отступ становится весьма неочевидным в играх, например пинг-понг, когда мячик отражается от невидимой стены;

• Во-вторых, эстетически это смотрится весьма странно, когда поле светится не всё.

А для дополнительной электроники можно просто сделать двойное дно и доступ для обслуживания.

Оргстекло 3 мм нашел у местных рекламщиков и попросил вырезать прямоугольник нужного размера.

В качестве материала корпуса была выбрана фанера, т.к она намного крепче и долговечнее обычной мебельной ЛДСП.

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

Сетку вырезал на лазерном ЧПУ из фанеры 3 мм, размер каждой ячейки 4х4х4 см.

Затраты на корпусные детали:

• Раскрой сетки из фанеры 3мм = 5 000 ₽

• Фанера для корпуса стола + раскрой = 4 600 ₽

• Акрил + резка = 4 200 ₽

• Краска + валик = 1 750 ₽

• Метизы, втулки, клей = 830 ₽

• Покраска своими руками = Бесценно

• Итого: 16 380 ₽

Этап 4: Написание прошивки и отладка

Для написания кода использовал программы STM32CubeMX и STM32CubeIDE, для прошивки и отладки китайские клоны программатора ST-LINK V2 и логического анализатора Saleae Logic. Вообще обожаю эту связку, никогда ещё программирование и отладка микроконтроллеров не были настолько простыми и доступными.

Из интересного, что можно было бы рассказать про написание прошивки:

Т.к контроллер весьма небольшой, и чтобы не тащить в проект тяжеловесную RTOS, я часто использую самописную систему событий, привязанную к 1 мс таймеру. Занимает буквально сотню строчек кода: установить событие через N мс, проверить готовность события к исполнению, очистить событие. Это покрывает практически все мои нужды по организации логики программы под микроконтроллер и занимает памяти чуть более, чем ничего.

Отдельно хочу рассказать про логику организации мной адресного пространства CAN. Я разбил адресное пространство 2048 адресов на 4 группы:

• широковещательная команда;

• целевые команды конкретным сегментам;

• посылки от сегмента;

• и в конце простые пакеты с цветами.

В CAN, чем ниже адрес пакета, тем у него выше приоритет. Это означает, что посылки от устройств (с кликом или ответом на запрос) имеют приоритет выше, чем пакеты с цветами. Таким образом, клик всегда будет получен почти мгновенно, даже когда идет активная “отрисовка” картинки и шина занята.

В коде я реализовал поддержку трех разных палитр:

• RGB6 – 6 бит на цвет, где 3 бита цвет RGB, а 3 бита яркость 0-7;

• RGB12 – 12 бит на цвет, RRRRGGGGBBBB;

• RGB24 – 24 бита на цвет.

Т.к в стандартном CAN есть ограничение на 8 байт данных, то приходится делить адресные пространства ещё и на адреса конкретных пикселей внутри сегмента. А т.к на каждые 8 байт данных полезной нагрузки CAN имеет ещё оверхед 47 бит в виде адреса и других заголовков пакета, то с расширением палитры цветов, FPS падает непропорционально. Примерно вот таких значений мне удалось добиться при скорости CAN 500 kbit/s:

• 75 FPS для RGB6;

• 38 FPS для RGB12;

• 13 FPS для RGB24;

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

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

Расходы: бесплатно по ночам.

Этап 5: Финальная сборка и ошибки

• Собрать всю сетку из таких коротких деревянных ламелей оказалось непросто. Я не предусмотрел достаточные допуски для пазов, детали то и дело не вставали на свои места, приходилось подпиливать и применять силу, в итоге плоскость с оргстеклом получилась неидеальной. В новой версии откажусь от пазов в платах, а ламели из фанеры сделаю длиннее, чтобы конструкция сетки получилась более ровной;

• Как вы могли заметить, на платах я сделал разъёмы папа-мама на нижней стороне текстолита. Такая конструкция очень удобна при сборке и стоит три копейки, но делает стол абсолютно непригодным для ремонта, т.к нет возможности достать и заменить одну плату, приходится откручивать всех соседей;

• Оргстекло, которое я нашел на местном производстве, как оказалось, плохо подходит для оптического сенсора, т.к имеет слабую светопропускаемость. Это приводит к очень маленькому полезному сигналу с датчиков и необходимости искать компромисс между ложными срабатываниями и “силой” (читай – площадью) нажатия;

• Также я допустил небрежность и запитал всю матрицу плат двумя тонкими проводами… Как вы можете догадаться, долго такая сборка не проработала, больше 20А в пике как-никак. Решение простое – подкинуть питание ещё в несколько точек по периметру.

Сопутствующие расходы:

• Блок питания 5V 150W = 4 560 ₽

• Raspberry Pi 4B+ = 12 000 ₽

• Плата расширения CAN = 2 940 ₽

• USB Type C = 250 ₽

• Плата аудиоусилителя = 296 ₽

• Динамики + накладки = 407 ₽

• Кабель AUX = 274 ₽

• Разъём питания = 281 ₽

• Кабель питания = Бесплатно от старого монитора

• Сборка своими руками = Бесценно

• Итого: 18 068 ₽

Этап 6: Управляющее ПО на Малинке

Моя любимая часть, моя гордость…

Годом ранее, работая над своим основным проектом Pixel Quest, я к нашему бэкенду на Go подключил Lua интерпритатор. С тех пор все игры нашей сети локаций разрабатываются на Lua.

Для Pixel Quest мы сделали открытую систему разработки игр. Что это значит:

• во-первых, у нас есть визуальный конструктор игр "Пол–это лава", где можно попрактиковаться в покадровой отрисовке игр;

• а во-вторых, у нас есть собственная онлайн IDE для разработки игровых сценариев на простом скриптовом языке Lua, который может освоить любой толковый школьник за несколько вечеров, при этом исходный код наших игр публично открыт в репозитории на GitHub, что делает обучение ещё проще.

В свой онлайн редактор для удобного тестирования игр мы добавили вот такую 3D визуализацию:

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

Почему нас сравнивают с Roblox?

Роблокс даёт возможность игрокам самим разрабатывать игры и даже зарабатывать на них, и мы в перспективе хотим сделать что-то похожее. А ещё на ютубе нашу игру “Безопасный цвет” постоянно сравнивают с играми “Color blocks” или “Block party” из Roblox, хотя когда я её разрабатывал, я ещё ничего не знал о Роблоксе...

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

Этап 7: Версия 2.0

Для будущей версии я переразвёл печатную плату с учетом предыдущего опыта, а именно:

• сделал разъёмы не горизонтальными, а вертикальными, таким образом можно будет вынимать и устанавливать отдельные платы. Платы между собой будут соединяться П-образными штырьками;

• удвоил количество светодиодов, чтобы получить более яркую и сочную картинку, а также резервирование на случай выхода светодиода из строя;

• сделал плату размером 4х5 пикселей, чтобы избавиться от “рамки” по краям и получить поле нужного размера 24х15 для совместимости с игровыми комнатами, а также расширить диапазон возможных CAN адресов с 16 до 32, что даст возможность строить столы большего размера;

Нашёл в Китае и протестировал новое более тонкое и более прозрачное оргстекло, которое даёт более чёткий рисунок граней пикселей и увеличивает полезный сигнал с датчиков в три раза, что делает игру более комфортной, а ложные срабатывания сводит к нулю.

Заключение

Небольшое видео, суммирующее вышесказанное:

Сам прототип с видео сейчас стоит и радует детей на одной из наших локаций, а именно в городе Смоленске.

Ссылки на исходники печатных плат, прошивки под микроконтроллер и другие полезные материалы по проекту можно найти вот в этом телеграм посте (будет обновляться): t.me/pixel_quest/360. Там же в канале будет выкладываться и новая информация по проекту.

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

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

Какие сценарии развития продукта мы видим:

• Установка в школы программирования или робототехники для обучения детей. Я сам разработчик и сам когда-то посещал подобный кружок программирования, думаю такой яркий стол сможет вызвать дополнительный интерес у ребят к разработке. А тем более возможность прийти поиграть в свою игру на большом пиксельном полу!

• Установка в виде вендинговых игровых автоматов в ТЦ и для привлечения внимания к нашему основному бизнесу;

• Размещение на локациях Pixel Quest в качестве дополнительного развлечения;

• Использование в качестве отладочного стенда для тестирования ПО, игр и различных эффектов в миниатюре.

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