PixelWall: 7 шагов (с изображениями)

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:52

Вы знаете проект Pixel-Table? У меня возникла идея реализовать такую пиксельную штуку, но не в виде стола, а повесить ее на стену.

Так что я могу лежать на диване и играть на нем в игры, пока расслабляюсь.:)

Реализованные игры:

• Тетрис
• Космические захватчики
• Змея
• Pixel Draw

дополнительные функции:

• Показать текущее время
• Показать цветную анимацию

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

Чтобы упростить использование моего PixelWall, стена предоставляет веб-сайт для управления после подключения. Все приложения управляются / воспроизводятся через веб-страницу. Таким образом, нет необходимости устанавливать какое-либо программное обеспечение для использования.

Дополнительно есть контроллер NES, который упрощает игру.

Открытый исходный код

Все программные и механические чертежи я разместил на github: https://github.com/C3MA/PixelWall Не стесняйтесь использовать это в своем собственном проекте.

Шаг 1. Начнем с электронного

Из другого проекта есть существующая печатная плата со светодиодами WS2812. Печатная плата имеет 3 ряда по 12 светодиодов в каждом ряду.

Я решил использовать эту печатную плату 6 раз. Получается светодиодная матрица 12х18.

Первым шагом было припаять все 216 светодиодов, около 100 конденсаторов и ESP8266.

На ручную пайку ушло около 10 часов.

После первого быстрого теста выяснилось: все работает.

Итак, мы можем перейти к механической части.

Шаг 2: Создание Механика

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

Каждая полоса имеет толщину 3 мм и высоту 17 мм. Они вырезаются из плиты HDF лазерным резаком.

Все эскизы для лазерного резака нарисованы в FreeCad (названный "Leiste" в папке Mechanic проекта github)

Сетка задается компоновкой печатной платы. Он имеет ширину столбца 28 мм и высоту строки 31 мм.

Следующий вопрос: как закрепить полосы на плате? Склеивание - не такая уж хорошая идея, потому что его можно будет разобрать, если что-то неисправно. Вот и решил прикрутить. Но винт разорвет тонкую полосу 3 мм. Итак, я распечатал на 3D-принтере карман для ремешка (это часть под названием «Halter» в проекте github). Это сработало довольно хорошо, чтобы исправить их на печатной плате.

Следующим шагом будет изготовление рамы для нее. Есть несколько интернет-магазинов, которые предлагают вырезать индивидуальные рамки для картин. Поэтому я заказал раму размером 343 мм х 565 мм.

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

Переднюю панель из оргстекла я также заказал онлайн. Это опал WN770 Milchglasoptik LD45% размер: 567x344x2 мм

Он имеет полупрозрачность 45%.

Собираем все части в рамку.

В конце к спинке прикрутят полоски, чтобы все было зафиксировано и не выпало.

Чтобы иметь возможность работать с pixelWall без связи через WLAN, я создал подключаемую панель управления, которую можно дополнительно вставить с правой стороны рамки (в проекте github она называется «Bedieneinheit»).

Шаг 3. Программное обеспечение - основные сведения

Один из вариантов использования - играть в игры на PixelWall.

Но для написания пиксельной игры всегда потребуется полезная среда отладки. Я не знаю, как правильно отладить контроллер ESP8266. Поэтому я решил смоделировать весь код на своем ПК. Код ESP написан на Arduino C ++, поэтому для моделирования на ПК я использовал язык Visual Studio C ++ / CLI. Между стандартным C ++ и языком C ++ / CLI есть некоторые различия. Например, в C ++ / CLI вы не можете создать объект типа String, из-за сборки мусора не разрешено создавать объект или ссылку / указатель на такой объект. В C ++ / CLI вы должны использовать дескрипторы: String ^. Но таких дескрипторов в стандарте C ++ не было. Так что мне пришлось проявить творческий подход, чтобы объединить оба мира. Я решил это, создав собственный файл Arduino.h для моделирования. Этот файл просто переопределяет при моделировании все строки с помощью определения "#define String String ^". Это не обычный способ, но он работает:) За исключением некоторых небольших переключателей компилятора, весь код ESP можно компилировать в Visual Studio C ++ / CLI.

Светодиодная матрица

Первый класс, который я написал, - это класс LED-Matrix. Этот класс обрабатывает управление и отображение светодиодов WS2812.

Этот класс был написан два раза: один раз для контроллера ESP8266 (LEDMatrixArduino.cpp) и другой, который будет управлять формами в графическом интерфейсе формы при моделировании (LEDMatrixGUI.cpp).

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

Дополнительно он предоставляет функцию setBrightness. Это значение будет учитываться, если будет установлен светодиод. Таким образом, все команды установки светодиодов можно выполнять с полной яркостью. Например: если яркость установлена на 50%, а функция setLed () вызывается с RGBColor (255, 255, 255), она установит светодиоды на 127, 127, 127.

Светодиодная панель

Поверх класса светодиодной матрицы я поставил класс светодиодной панели. Этот класс предоставляет некоторые полезные функции для любого приложения. Он предоставляет два независимых слоя. Это может быть полезно для приложения. Например, в игре в тетрис: layer0 предназначен для неподвижных камней внизу, а layer1 - для отображения падающих камней. Таким образом, каждый цикл камень падает на один пиксель вниз, приложение может просто очистить слой layer1 и нарисовать камень на его новом месте. Перерисовывать все неподвижные камни внизу не обязательно.

Дополнительно панель предоставляет

printImage - для печати некоторых значков, таких как смайлы или символа WLAN printDigit - для печати одной цифры в определенной позиции printFormatedNumber - для печати числа с префиксами zerosprintNumber - для печати целого числа printLineH - горизонтальная линия с определенной длиной printLineV - горизонтальная линия с определенной длиной

Шаг 4: Программное обеспечение - Концепция приложения

Общая концепция пиксельной стены:

• У каждого приложения свое название
• Приложение запускается путем вызова URL-адреса pixelWall, включая имя приложения (например: 192.168.4.1/tetris)
• URL-адрес также может иметь параметры GET, которые будут перенаправлены в приложение.
• Каждое приложение должно предоставлять веб-сайт, отображаемый в браузере.
• Этот веб-сайт может при желании открыть соединение через веб-соединение с приложением для быстрого взаимодействия.
• Приложение может использовать это соединение с веб-сокетом для обратной связи с веб-интерфейсом.
• Помимо веб-интерфейса, приложение дополнительно получает события нажатия кнопок с панели управления и контроллера NES.

Интерфейс приложения

Чтобы упростить разработку новых приложений для PixelWall, я создал интерфейс для приложений под названием «IPixelApp.h». Этот интерфейс содержит 8 определений:

• виртуальная пустота start () = 0;
• виртуальная пустота end () = 0;
• виртуальный пустой цикл () = 0;
• виртуальная пустота newWebsocketData (uint8_t * payload, size_t lenght) = 0;
• виртуальный WebsiteResponse_t getWebsiteResponse (параметр String) = 0;
• виртуальная пустота buttonEvent () = 0;
• виртуальный void timerTick () = 0;
• виртуальная строка getName () = 0;

start / end - эта функция вызывается, если приложение запускается / завершается из-за запуска другого приложения

цикл - эта функция вызывается из основного цикла основной программы. Этот вызов является нерегулярным и не связан с прерыванием.

newWebsocketData - эта функция вызывается, если веб-интерфейс отправил данные.

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

buttonEvent - вызывается, если была нажата или отпущена какая-либо кнопка на панели управления.

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

getName - это должно вернуть имя приложения для URL

Шаг 5: Программное обеспечение - Приложения

В текущей версии реализованы 7 приложений:

Приложение по умолчанию

Это специальное приложение, которое отображает текущее состояние WLAN PixelWall. Если стена может подключиться к существующей WLAN, она отобразит IP-адрес, полученный от сети.

Если это невозможно (не настроен ssid, отсутствует WLAN или указан неверный пароль), откроется точка доступа. В этом случае вы можете подключиться к PixelWall через IP-адрес точки доступа по умолчанию от ESP8266: 192.168.4.1

На веб-интерфейсе это приложение имеет 6 кнопок. Нажав кнопку, вы можете запустить соответствующее приложение.

Приложение настроек

Это приложение для настройки WLAN SSID и пароля. Просто вставьте учетные данные своей WLAN, и при следующем запуске PixelWill он попытается подключиться к этой WLAN.

Игры

В PixelWall запрограммированы три классические игры:

• Тетрис
• Змея
• Космические захватчики

Во все игры можно играть через веб-интерфейс или с помощью контроллера NES.

Приложение для изображений

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

Pixel It

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

Шаг 6. Управление через расширение Twitch

На Twitch есть расширение под названием GetInTouch. Это расширение позволяет интегрировать проекты Arduino в вашу прямую трансляцию, чтобы зрители могли управлять вашим Arduino во время трансляции.

Библиотека Arduino для этого написана для Arduinos. Но оказалось, что он работает, вероятно, и на ESP8266.

Чтобы использовать его в Stream, необходимо выполнить следующие шаги:

• Интегрируйте библиотеку GetInTouch в код (см. Руководство)
• Подключите pixelWall к компьютеру через конвертер USB / RS232 (который также используется для прошивки ESP)
• Установите приложение GetInTouch с веб-сайта
• Установите расширение GetInTouch на свой канал Twitch (см. Руководство)

Шаг 7. Управление с помощью контроллера Nintendo NES

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

Поэтому я решил купить старый контроллер Nintendo NES. У этого контроллера очень простой интерфейс. Это всего лишь сдвиговый регистр 4021, который работает с напряжением 3,3 В. Таким образом, его можно подключить напрямую к ESP8266.

Все события кнопок на контроллере перенаправляются в запущенное приложение с помощью функции buttonEvent ().