Как сделать свою собственную футболку с подключением к Интернету со светодиодами, которые реагируют на данные в реальном времени

Как защитник разработчиков, я могу создавать разные забавные проекты. Мне особенно нравится делать носимые устройства, в частности, вещи с большим количеством лампочек, которые могут подключаться к Интернету. Потому что мне нравится быть ярким! Пару лет назад я начал создавать носимые технические проекты, первым из которых было светящееся свадебное платье, управляемое твитами.

Когда я начал работать с аппаратным обеспечением, я понятия не имел, что я делаю, и сделал несколько очень глупых ошибок, связанных с выбором аппаратного обеспечения и тем, как объединить их все вместе. Я надеюсь, что этот блог даст небольшое направление тем, кто хочет заняться аппаратными проектами и помочь вам преодолеть это первоначальное препятствие «железо - это страшно».

Наш проект - это переносная светодиодная матрица, которая реагирует на данные, отправляемые из веб-приложения. Приложение позволяет людям рисовать в массиве 16x16 пикселей, что-то вроде версии MS Paint с низким разрешением, но в многопользовательском режиме! Чтобы осуществить эту мечту, нам понадобится несколько вещей:

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

Изготовление переносной светодиодной матрицы

Начнем с построения массива огней. Это будет сетка светодиодов 16 на 16.

Светодиоды, которые мы будем использовать в этом проекте, называются адресуемыми светодиодами RGB. У каждого светодиода есть крошечный микроконтроллер, который позволяет ему светиться уникальным цветом и яркостью. Адресуемость означает, что мы можем настроить таргетинг на каждый светодиод индивидуально, мы отправляем им цветовое значение RGB (аналогично тому, с которым вы, возможно, знакомы по CSS).

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

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

На что следует обратить внимание при покупке светодиодной ленты:

  • Цена на полоску увеличивается с увеличением плотности пикселей.
  • Напряжение - нам нужно 5 В для этого проекта, чтобы мы могли запустить его от аккумулятора USB.
  • Цвет самой ленты - попробуйте подобрать одежду, на которую вы наденете ленту.
  • Тип светодиодов RGB (некоторые из них RGBW, что потребует от вас отправки дополнительного значения «белизны» в вашем коде)

Я выбрал полоску с белой лентой (так как футболка, на которую я буду крепить ее, белая) и со светодиодами, расположенными на расстоянии 2 см друг от друга. Я разрезал их на 16 полосок по 16 лампочек на полосу и выложил квадратом:

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

(На самом деле, мое шитье было намного грязнее, чем это)

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

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

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

Управление массивом

Итак, теперь, когда у нас есть дисплей, нам нужен способ фактически контролировать, какие цвета на него будут отправляться. Здесь будет полезен микропроцессор, поскольку он может производить достаточно вычислений для управления освещением, но он красивый и маленький, поэтому его можно легко спрятать в носителе. Для этого проекта я использую Adafruit Feather Huzzah, небольшую, легкую и доступную плату со встроенным Wi-Fi. Adafruit написал несколько отличных пошаговых инструкций о том, как начать работу с этой платой и Arduino IDE.

Huzzah запускает C / C ++ из коробки, а IDE Arduino поставляется с набором примеров кода, которые помогут вам начать работу. Вот пример того, как настроить все источники света в массиве на красный цвет:

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

Плата ⠀⠀⠀ ⠀ светодиоды
Контакт 4⠀⠀ ↔ ⠀ Данные
GND ⠀ ⠀↔ ⠀⠀ -
USB ⠀ ⠀↔⠀ + 5В

Подключите плату и запустите приведенный выше код, чтобы увидеть, как загорятся ваши светодиоды!

⠀

⠀

Создание веб-приложения для установки цветов в массиве

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

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

Каждый квадрат в SVG имеет идентификатор со своим номером в массиве - 0, 1, 2, 3 и т. Д.

После того, как цвет и квадрат были выбраны пользователем; приложение обновит цвет этого квадрата в соответствии с выбранным цветом.

Вы можете ознакомиться с приложением и его кодом здесь: https://ably-mqtt-iotshirt.glitch.me/

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

Для этого я использовал платформу обмена сообщениями Ably, чтобы настроить канал. Затем я использовал их JavaScript SDK для управления публикацией и подпиской на сообщения на этом канале. Чтобы использовать SDK, вам понадобится ключ API, который вы можете получить с бесплатной учетной записью.

В интерфейсе приложения я использую следующий код, чтобы настроить свой канал и подписаться на него:

Самое интересное в использовании потоковой передачи pub / sub в реальном времени заключается в том, что все другие пользователи веб-приложения также подписаны на эти сообщения, поэтому их клиенты будут обновляться, когда люди будут рисовать вместе с ними!

Мы используем createTokenRequest функцию Ably SDK для аутентификации и получения разрешения на подключение к потоку данных. На внутренней стороне, на сервере узла, нам потребуется Ably promises SDK для выполнения нашей аутентификации и создания объектов Ably Token Request. Использование токенов вместо отправки ключа API напрямую сводит к минимуму объем работы, которую должен выполнять наш сервер, и сохраняет наши ключи API в хорошем состоянии и в безопасности.

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

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

name: tshirt
data: 001#aa00ff

Где мы щелкнули второй квадрат в массиве и выбрали фиолетовый цвет.

Получение данных о Huzzah

Теперь, когда мы подписаны на канал и публикуем его в веб-приложении, нам нужен способ переноса данных с него на доску Huzzah.

Вы, вероятно, знакомы с HTTP - протоколом, который браузеры используют для запроса веб-страниц. Слово «протокол» означает просто «способ общения двух вещей». HTTP - это замечательно, он поддерживает веб-сайты и API-интерфейсы, и он построен так, чтобы быть описательным и гибким, и его можно использовать для подключений к Интернету вещей, но он не легкий и не очень быстрый. Еще одна проблема с HTTP заключается в том, что он работает только по запросу, устройство должно постоянно подключаться и спрашивать: «Есть ли обновления?» "Что насчет сейчас?" "Что-нибудь сейчас?" что требует как данных, так и времени.

На устройствах Интернета вещей с низким энергопотреблением у нас мало памяти, мощности или пропускной способности, поэтому нам нужны протоколы, которые должны быть небольшими и быстрыми. Транспортировка телеметрии очереди сообщений - MQTT - это протокол связи, который был разработан, чтобы быть чрезвычайно легким. Подключение к серверу занимает всего около 80 байт, и устройство остается подключенным все время. Данные публикуются, когда они отправляются с устройства на сервер, а устройство подписывается на данные, отправленные с сервера. Поскольку размер данных, отправляемых через MQTT, невелик по своей конструкции, сообщения можно отправлять быстро, что делает оборудование очень отзывчивым. Сделать возможным менять свет на футболке в реальном времени!

Чтобы использовать MQTT, нам понадобится брокер MQTT. Это просто сервер, к которому устройства подключаются по протоколу MQTT для прослушивания сообщений. Он отслеживает всех подключенных клиентов и темы, на которые они подписаны, перенаправляя любые сообщения любым подписчикам. В этом проекте я использую mqtt.able.io в качестве своего брокера. Третья сторона, к которой ваши IoThings могут подключаться для отправки и получения сообщений.

Отличная особенность Ably MQTT broker заключается в том, что любые сообщения, которые мы отправляем в нашем браузере на Ably Channel с помощью JavaScript SDK, также автоматически отправляются через MQTT, поэтому у нас нет дополнительных настроек!

Код для запуска и работы нашей доски Huzzah с MQTT выглядит следующим образом:

Каждый раз, когда вызывается ensure_MQTT_connected, если клиент уже подключен, он немедленно возвращается, в противном случае он будет зацикливаться, пока не сможет установить соединение - подписавшись, когда это произойдет. Эта функция вызывается каждый раз, когда оборудование запускает свой основной цикл, чтобы убедиться, что оно случайно не отключится от брокера MQTT из-за обрыва нашего интернет-соединения. Функция process_messages вызывает клиентскую функцию loop. Эта функция является частью библиотеки MQTT, она вызывает обратный вызов, чтобы получить все сообщения, поступившие в буфер MQTT с момента последнего вызова.

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

Последнее, что нужно упомянуть, - это порядок источников света в массиве. Возможно, вы заметили, что когда я подключал фары, я хотел, чтобы мои провода были аккуратными и аккуратными, поэтому я припаял эти милые маленькие перемычки на каждом конце. Но это означает, что строка данных не проходит слева направо, как при обычном перечислении массивов - она ​​выполняется в том, что я ласково назвал «змеиным режимом».

Мало того, что я подключил кабель не к тому концу первой полосы, все это означает, что мы должны по существу перевернуть все остальные строки массива, чтобы нумерация светодиодов соответствовала нумерации массива в приложение. Ой! Код для этого выглядит следующим образом:

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

Футболка IoTshirt в действии

Вот несколько фото футболки

1) ⠀ Футболка с массивом спереди (и я указываю на нее)
2) ⠀ Пример рисования на футболке с помощью приложения, я нарисовал сердечко.
3 ) ⠀ Люди, использующие приложение в реальном времени, создали красивое произведение, похожее на Паолоцци!
4 + 5) ⠀ Сообщение, которое я написал в приложении, и оно отображается на футболке.

Что дальше?!

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

Весь код футболки и приложения имеет открытый исходный код и доступен на G itHub: https://github.com/thisisjofrank/interactive-lights
вы можете увидеть и используйте приложение на
Glitch: https://ably-mqtt-iotshirt.glitch.me/, и его код
можно повторно микшировать: Https://glitch.com/~able-mqtt-iotshirt

Я надеюсь, что этот длинный бессвязный блог даст вам некоторые отправные точки для проектов оборудования и данных в реальном времени. Дайте мне знать, если вы создадите свой собственный или это вдохновит вас на создание других проектов, я буду рад их увидеть!