Зажгите свой Hackpack с библиотекой Adafruit NeoMatrix

Конференция Signal уже близко. Это значит, что через несколько дней мы раздадим hackpack всем участникам конференции. Hackpack содержит светодиодную панель Adafruit NeoPixel 8×8 на базе littleBits, которую можно запрограммировать для отображения всего, что поместится на ее экране. Если вы еще не читали, ознакомьтесь с нашей недавней публикацией, подробно описывающей аппаратное обеспечение hackpack и инструкции по созданию собственных хаков.

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

— Hackpack: Если вы хотите создать свой собственный hackpack, следуйте этому замечательному руководству. Хотя вы можете приобрести все самостоятельно, проще (и гораздо веселее) приехать к нам на Signal. Используйте промокод Swag75 для скидки 75 долларов на билет.

— Arduino IDE: позволяет нам писать код и загружать его на нашу Arduino

— Библиотека Adafruit_GFX: Базовая библиотека для программирования светодиодных пикселей Adafruit

— Библиотека Adafruit_NeoPixel: Эта библиотека основана на библиотеке Adafruit_GFX и добавляет абстракции, которые упрощают одновременное изменение цвета и яркости нескольких светодиодов, расположенных в виде цепочки.

— Библиотека Adafruit_NeoMatrix: Эта библиотека основана на Adafruit_NeoPixel и позволяет создавать двумерные дисплеи с использованием NeoPixels, а также получать доступ к позициям пикселей в виде сетки.

Мы собираемся создать зацикленную анимацию именной бирки, которая включает в себя логотип Twilio и прокручиваемый текст, чтобы все на конференции знали ваш ник в Twitter. В процессе мы узнаем, как библиотеки Adafruit_GFX, Adafruit_NeoPixel и Adafruit_NeoMatrix могут быть использованы для создания ваших собственных творений. Цикл анимации будет повторять следующий шаблон:

— Плавное включение всего экрана от выключенного состояния до белого

— Поэтапное заполнение (то есть установка каждого пикселя последовательно) красным цветом

— Создание логотипа Twilio путем плавного перехода отдельных пикселей от красного к белому

— Заполнение экрана красным цветом

— Прокрутка нашего ника в Twitter белым текстом на красном фоне

— Поэтапное выключение экрана

В итоге это будет выглядеть так:

Чтобы начать работу над нашей именной биркой, нам нужно будет подключить модуль Arduino littleBits к нашему компьютеру. Если вы собираете аппаратное обеспечение самостоятельно, обратитесь к нашему вводному посту за инструкциями. Подключите модуль Arduino к компьютеру через USB и подключите модуль питания от батареи к Arduino. Включите переключатель питания в положение «on» (включено), и загорится красный индикатор, показывающий, что питание подается на Arduino:

Далее откройте Arduino IDE. Прежде чем мы сможем что-либо сделать, нам нужно указать, какую плату мы используем и к какому порту она подключена. Наш модуль Arduino littleBits основан на Arduino Leonardo, поэтому выберите *Tools -> Board* и выберите *Arduino Leonardo*:

Теперь перейдите в Tools -> Serial Port и выберите порт, который идентифицируется как плата Arduino Leonardo:

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

Распакуйте каждую библиотеку, удалите «-master» из названия папки и переместите их в папку библиотек Arduino. Перезапустите Arduino IDE, чтобы загрузить библиотеки.

Теперь, когда у нас установлены библиотеки Adafruit, мы можем создать новый скетч, выбрав *File-*>*New* и импортировав библиотеки в верхней части файла:

Далее мы определяем пин, к которому подключена наша панель NeoPixel:

Первые два аргумента представляют собой ширину и высоту матрицы, а третий — пин, который мы определили выше. Четвертый аргумент очень важен. Он определяет, где находится первый пиксель в матрице и ориентирована ли матрица по строкам или столбцам. Как подключено, первый физический пиксель в матрице (0,0) — это пиксель в верхнем левом углу панели, когда панель просматривается так, чтобы слова на передней стороне были читаемы.

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

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

Последний параметр метода указывает тип светодиодов, используемых в матрице. Наша Adafruit NeoMatrix использует светодиоды, подключенные для порядка данных GRB с потоком данных 800 кГц.

Следующее изображение показывает, как наша матрица настроена после ее инициализации:

Когда наше приложение запустится на Arduino, мы инициализируем матрицу и настроим ее яркость, цвет текста и параметры переноса строк:

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

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

Самая базовая операция, которую мы можем выполнить с матрицей, используя библиотеку Adafruit_NeoMatrix, — это установка цвета отдельного пикселя. Для этого мы вызываем `matrix.drawPixel(x, y, Adafruit_NeoMatrix::Color)`

передавая координаты x и y пикселя, а также значение `Adafruit_NeoMatrix::Color`

. `Adafruit_NeoMatrix::Color`

— это обертка вокруг значения `uint16_t`

, которое создается следующим образом:

К сожалению, после создания, получить значения RGB из `Adafruit_NeoMatrix::Color`

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

Чтобы добавить структуру, нажмите на треугольник в конце строки вкладок в Arduino IDE и выберите *New Tab*. Когда появится запрос, назовите файл `RGB.h`

и добавьте этот код:

В верхней части вашего скетча мы включим файл `RGB.h`

:

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

Вызов `matrix.show()`

очень важен. Все изменения, которые вы вносите, вызывая `drawPixel(x, y, c)`

или другие функции, манипулирующие пикселями, делаются только в оперативной памяти. Мы должны сбросить эти изменения на светодиоды, вызвав `matrix.show()`

.

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

Чтобы протестировать ее, добавьте следующий код в `loop()`

:

Поочередно менять цвет пикселей — это интересно, но что, если мы хотим изменить их все одновременно? Библиотека Adafruit_NeoMatrix позволяет нам заполнять всю матрицу определенным цветом или выключать все пиксели с помощью метода `fillScreen(c)`

:

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

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

новое значение красного = начальное значение красного + ((разница между конечным значением красного и начальным значением красного) * текущий шаг) / общее количество шагов

Изменение всех трех цветовых значений в цикле, а затем вызов метода `drawPixel` позволяет нам создать многократно используемую функцию, которая плавно изменяет цвет отдельного светодиода:

Если мы заменим вызов `drawPixel` на `fillScreen`

, мы можем плавно перейти от одного цвета к другому по всему экрану:

Используя созданную выше функцию `fadePixel`

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

Последнее, с чем помогает библиотека Adafruit_NeoMatrix, — это прокрутка текста. Вызов `matrix.print` сгенерирует пиксельное представление строки, переданной ему. Манипулирование той частью строки, которая отображается на матрице, осуществляется вызовом `matrix.setCursor`. Перемещая курсор и перерисовывая строку в течение цикла, мы можем прокручивать текст на матрице.

Используя эти два метода, легко создать функцию, которая прокручивает текст, например, мой ник в Twitter, слева направо по панели:

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

Мы начнем наше приложение для именной бирки, добавив его внутрь функции `loop()`

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

Затем мы выполним цветовой переход, чтобы последовательно установить все светодиоды красным, а затем сделаем еще одну паузу на одну секунду:

Когда наша матрица станет красной, мы нарисуем логотип Twilio и подождем две секунды для драматического эффекта:

Теперь мы снова заполним экран красным и прокрутим наш ник в Twitter несколько раз:

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

Вот как выглядит конечный продукт:

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