リング型WS2812Bでアレンジ可能なイルミネーションスタンド

# はじめに
Amazonでリング型WS2812Bが安かったので取り敢えずイルミネーションスタンドにしてみたお話。
ネオジム磁石で形が変えられます。スマホから配色を選べます。

<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/c58b2a34-4668-c15a-61ac-2fb34420cb09.png">

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/41942eaf-9569-5dc0-46ec-d5dad9427f07.png"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/9b0853ed-807a-41af-3982-2cf539f0ba73.png"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/1fcf734c-1941-88ac-a222-fd60429cdcaa.png"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/5dc3434d-2b1b-1f6f-57bc-4430274ab19b.png">

<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/2e152bb5-ab6c-2a4a-855e-ac392a3685bc.png">

動画の方が分かりやすい。
<iframe width="560" height="315" src="https://www.youtube.com/embed/RpzDjQTyXKQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 部品
* リング型WS2812B ([Amazon](https://www.amazon.co.jp/dp/B0953SDGSG))
* ESP8266(WeMos D1 Mini) ([Amazon](https://www.amazon.co.jp/dp/B07S6G6TWJ))
* ネオジム磁石 (ダイソー)
* ステレオミニジャック φ3.5mm([秋月](https://akizukidenshi.com/catalog/g/gK-05363/))
* ステレオヘッドホン延長コード φ3.5mm(ダイソー)
* スミチューブ(φ10mm/φ16mm/他)
* ブレッドボード、ワイヤー、ピンヘッダ/ソケット。。。

WS2812Bが1,000円、ネオジム磁石が400円、延長ケーブルとジャックで250円、スミチューブが500円。合計2､000円ぐらいかな。（細かい部品除く）

## リング型WS2812B
1セット5個入で499円だったので、2セット買った。1リング100円なら安いかなと。
(幸いちゃんと届いた。残り少ないのでお早めに)
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/9be523bf-9f78-bd0b-4df8-cdca1db67c8b.png">
[Amazon](https://www.amazon.co.jp/dp/B0953SDGSG)

裏面は下のようになっている。
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/7fc6fdd6-bb3f-4ab5-1035-c93f7f667f16.png">

これにピンヘッダを付けて使いやすくする。
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/7641c723-d66d-3023-9c38-92921be1364b.png">


##ESP8266(WeMos D1 Mini)
1セット2個入で999円。1個500円の開発ボードなら十分でしょ。
今回はスマホから色を変えたかったので、WiFi付きのESP8266を採用。
Arduino互換の開発ボードなら(AmazonPrimeだと)どれも1個500円ぐらいするんでお得かと。
ちっちゃいしUSB接続だけでArduinoIDEで問題なく動いた。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/d90f1ffd-17cc-27b6-35f7-27bc1130300b.png">
[Amazon](https://www.amazon.co.jp/dp/B07S6G6TWJ)

##ネオジム磁石 (ダイソー)
下の画像の通りのφ15mmぐらいの5個入。これを4つ購入。計20個。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/9bf74084-7bfb-7f8b-01c1-6b34cb23fbd7.png">

かなり強力なので、そのまま使うと厄介なので1個ずつスミチューブにくるんで使った。
（忘れてしまったが、φ10mmのスミチューブだったと思う。）
20個やるのはけっこう大変だった。。。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/c97b8de3-20a0-a18a-6b95-d7d68e59aedc.png">

#配線
配線は特に難しいことはない。ESP8266 の GPIO5 から WS2812Bの DI へ、DO から次の DI に繋ぐ。5VとGNDは引きずり回し。
※私の場合は、取り回しが良いように ESP8266 の WS2812B 間のケーブルをステレオケーブルを使った。普通のワイヤーでも構わない。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/847e2f33-9ee8-7c40-1643-1cfef6fad878.png">
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/bb022c52-57a5-f588-23a1-f054e43b76b4.png">


WS2812B 間のワイヤーの長さは 5cm としたがもう少し長いほうが良かった気がする。

```
ESP8266   WS2812B WS2812B ･･･ WS2812B
   5V  ---  5V  --- 5V  - ･･･ -  5V
  GND  ---  GND --- GND - ･･･ -  GND
GPIO5  ---  DI   ┌─ DI   ┌─･･ -  DI
            DO  ─┘  DO  ─┘
```

配線は単純なのだが結線が大変！下図の様に 5V と GND をピンソケットで分岐させるので、隣の線とショートしないようにスミチューブを多用する。緑の線がスミチューブ。外側のスミチューブは補強と結束。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/2f67f317-1b91-269e-3575-e049fcbebc66.png">

最終的には下のようにネオジム磁石でピンソケットをサンドする。これもスミチューブで包んで動かないようにする。これはφ15,6mmのスミチューブだったと思う。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/d4f27f07-c418-af0e-922e-93a0dc49bcca.png">

#プログラム
今回は、スマホを使って配色を変える。ESP8266 の Webサーバーのサンプルを使えば難しいことはない。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203949/c60a9469-ac62-1cae-ea35-068422f07296.png">

## ライブラリ
今回の主要ライブラリは、
 [FastLED](https://github.com/FastLED/FastLED)
ArduinoIDEのライブラリマネージャからインストールできる。

 [TwinkleFOX](https://gist.github.com/kriegsman/756ea6dcae8e30845b5a)
これは、ライブラリではなく FastLEDを使ったサンプル。これに配色を追加してみた。

私のソースは以下。
https://github.com/nori-dev-akg/WS2812B-LEDServer

#SpecialThanks
* https://github.com/FastLED/FastLED
* https://gist.github.com/kriegsman/756ea6dcae8e30845b5a