[Перевод] Проект за пару дней: большой дисплей из светодиодных лент

cd95144ab66542fc9ec971e29785a9b8.jpg

Полгода назад мы дополнили наш почти традиционный офисный каток 7,6 тыс. светодиодами, чтобы транслировать изображения и видео прямо на поверхность льда. На гиктаймсе был опубликован пост, в котором рассказывалось о том, что подо льдом скрывается самый настоящий гигантский дисплей разрешением 120×63 «пикселей», на который можно выводить достаточно сложные и яркие изображения.

Часто нам задавали вопрос: можно ли своими руками сделать нечто подобное дома? Можно, почему нет? Про лед был подробный рассказ (вот история о первом катке — захватывающее чтиво в июльскую жару), а вот о способах превращения светодиодов в большой дисплей практически не упоминали. Так как наши мейкеры люди занятые и предпочитают говорить о чем-то новом, а не пережевывать прошлое, публикация этой статьи откладывалась снова и снова. В конечном счете мы решили перевести для вас понятный и наглядный туториал, после которого можно будет взять и повесить дисплей себе на стену.
Итак, выдохните, все будет просто. Бóльшая часть времени уйдет на сборку — придется немного покорпеть над соединением лент друг с другом. Они должны быть спаяны в последовательную цепь на задней стороне панели. Для рассеивания света защитное стекло будет матированным.

Главный вопрос проекта — какое ПО использовать? Здесь все зависит от ваших потребностей: мы начнем с демокода и указателей, а в одной из следующих статей рассмотрим, как выводить на дисплей уведомления и котировки акций.


d112c42ce7184e929a9daabfaccb8cf7.jpg

  • 10 м светодиодной ленты (продается в катушках по 5 м). Я использовал дешевый вариант — WS2812B. Если же вам хочется получить более высокое разрешение дисплея, можете приобрести ленту с плотностью 60 светодиодов/метр;
  • блок питания на 5 В и 10 А. Я использовал модель, у которой входное питание до 240 В подается на винтовые зажимы. Если вам нужно сделать дисплей более безопасным, выберите полностью закрытый блок питания;
  • Arduino UNO;
  • большое количество отрезков толстого провода. Я отрезал пучок от старого компьютерного блока питания;
  • фоторамка 50×50 см;
  • матирующий спрей и белая краска.


Общие затраты у меня получились меньше $100.

Также вам понадобятся инструменты:

  • паяльник с припоем;
  • клеевой пистолет;
  • нож или ножницы;
  • инструмент для снятия изоляции.


Сначала прочитайте пособие по работе с электроникой для начинающих!
b009ff53c1354ca0a906f618ba84b6d4.jpg

Если вы приобрели рамку 50×50 см и такие же светодиодные ленты, как у меня, то сможете уместить в дисплей 15 отрезков по 15 светодиодов. Но ничто не мешает использовать рамку другого размера. Расстояние между светодиодами — около 30 мм, таким образом на один пиксель приходится примерно 30 мм2. Это наш 1DPI. Ну да, разрешение не как у Retina.

Рассчитайте, сколько отрезков ленты вам понадобится, и расчертите направляющие с обратной стороны панели. Семь раз проверьте, один раз отрежьте: у меня ленты немного различаются, потому что когда я начал их приклеивать, то обнаружил, что могу вместить только 14 отрезков по 15 светодиодов. Но это не страшно — в приложении можно легко настроить разное количество рядов пикселей и их длину. Отрежьте куски, подходящие для вашей рамки. К сожалению, я обнаружил, что у меня 15-е светодиоды в отрезках приходятся как раз на то место, где нужно припаивать соединительные провода. Поэтому пришлось их выпаивать.


90ef936d504c4ba1b5d26f81467ef2cc.jpg

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

Также задуйте белой краской панель, которая будет видна сквозь стекло. Отрежьте один из углов — здесь пройдут провода.


d30df124ef1c4beaba4506d9c78374b5.jpg

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

Помните, что сигнал будет проходить через всю цепь, и у каждой ленты есть направление передачи сигнала. Ленты нужно размещать так: у одной стрелка (направление сигнала) указывает направо, у следующей — налево, потом опять направо и т.д. То есть сигнал по дисплею будет идти «змейкой». Проверьте еще раз правильность размещения лент, прежде чем клеить их!


7d9164a5e2af472a976d8098a64aab44.jpg

Для соединения лент требуется по три провода разной длины. Внутреннюю пару контактов соединяем самым коротким проводом (на фото — красный), для средней пары берем провод подлиннее, а к внешним контактам припаиваем самый длинный. В зависимости от того, какие ленты в данный момент соединяются, внутренние контакты будут либо питанием (+5V), либо заземлением (GND).

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


5633e388892842f286b28bd6041aa867.jpg

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


b940bbff8873459488f711778a45e6af.jpg

Шестой пин Arduino используется для передачи управляющего сигнала; напряжение питания должно подаваться напрямую от блока питания. Подключите заземление между лентами, Arduino и блоком питания. Не пытайтесь запитать ленты от Arduino, а также не подключайте блок питания к Arduino при подключенном USB (когда будет загружаться код для тестирования).

Скачайте и добавьте в соответствующую папку библиотеку AdafruitNeoPixel, затем запустите Arduino. Протестируйте подключение с помощью следующего кода, указав в первом параметре количество светодиодов (в нашем примере — 60):

Adafruit_NeoPixel strip =Adafruit_NeoPixel(60, PIN, NEO_GRB + NEO_KHZ800);

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

  • неправильное направление ленты;
  • вы спутали контакты при соединении лент;
  • вы припаяли +5V к GND.


521a7a6c7cbb4901b9c45768684ec074.jpg

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

Можете еще подумать над тем, возможно ли спрятать в рамке еще и блок питания с Arduino. А пока переходим к настройке ПО.


Программа Glediator компании SolderLab.de очень хорошо подходит для анимирования светодиодных матриц на вечеринках или в ночных клубах. Она способна управлять матрицей, состоящей из 512 светодиодов WS2812/NeoPixels, формируя до 24 кадров/сек — этого вполне достаточно для нашего дисплея, можно даже выводить на него простенькие анимационные гифы. Микшер позволит делать плавные переходы между анимациями.

75c61730457547458e0441e7db28324a.png

Для работы с Glediator установите на Arduino UNO прошивку, и проверьте, чтобы сигнальный кабель был подключен к пину 6. Не забудьте прописать в переменной количество используемых вами светодиодов.

Запустите Glediator, откройте свойства и измените размер матрицы и режим вывода. Настройте порядок пикселей, если у вас используется другая схема, но по этому шагу мало документации, поэтому придется действовать методом проб и ошибок. Если изображение на дисплее отличается от задуманного, попробуйте поиграть с настройками. У меня работал порядок пикселей HS_BL — подозреваю, что это означает »horizontalsnake, startingbottomleft» (горизонтальная змейка, начало слева внизу).

984fdc70f65e4cd294af0fae75697fae.png

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


Компания Adafruit создала очень полезную библиотеку для работы со светодиодными матрицами. Сначала она называлась Adafruit GFX, и изначально предназначалась для TFT- и LCD-дисплеев. Затем появилась модификация NeoMatrix, позволяющая полноценно работать с матрицами NeoPixel. Она имеет огромное количество простых в использовании функций по выводу текста или растровой спрайтовой графики.

Если вы в точности повторили мой проект, то можете воспользоваться этим кодом. Самая важная часть:

#define XSIZE 15
#define YSIZE 14
#define PIN 6
Adafruit_NeoMatrix matrix =Adafruit_NeoMatrix(XSIZE, YSIZE, PIN,
NEO_MATRIX_BOTTOM + NEO_MATRIX_LEFT +
NEO_MATRIX_ROWS + NEO_MATRIX_ZIGZAG,
NEO_GRB+NEO_KHZ800);


С первыми строками все понятно. В последних трех описывается схема матрицы: в данном случае первый пиксель находится слева внизу (bottomleft), пиксели расположены рядами (rows), соединенными зигзагообразно (zigzag). Если вы сделали иначе, то обратитесь к документации библиотеки.

Я задал в коде несколько спрайтов — смайлы. Вы можете создать собственные с помощью Java-приложения Img2Code, лежащего в папке библиотеки GFX.

ff730ba2ed0e4aa096a22e0ee748bbbb.png

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

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

© Geektimes