obnizで六角形LEDユニットを点灯制御しよう！

#はじめに
obniz 2020年アドベントカレンダー 3日目！

この記事ではパーツライブラリに登録されていない、
[**M5Stack用NeoPixel互換LED搭載 六角形ユニット**](https://www.switch-science.com/catalog/6058/)を点灯制御する方法についてご紹介します🎄
↓が点灯制御を行う六角形ユニットです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/c16aa1b9-1525-fe65-a6f3-ec05d777377b.png)

#できたもの


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">obnizによる六角LEDユニットの制御デモです！これからQiita記事にまとめます！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://t.co/kRwb9sL4QB">pic.twitter.com/kRwb9sL4QB</a></p>&mdash; まえぷー@出窓菜園 (@kmaepu) <a href="https://twitter.com/kmaepu/status/1334516202341691392?ref_src=twsrc%5Etfw">December 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet"><p lang="cs" dir="ltr">Hello obniz！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://t.co/ioxpKGQj9L">pic.twitter.com/ioxpKGQj9L</a></p>&mdash; まえぷー@出窓菜園 (@kmaepu) <a href="https://twitter.com/kmaepu/status/1334528426615558144?ref_src=twsrc%5Etfw">December 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

（Zが見ずらい...）
#接続方法

六角LEDユニット次のようにGROVE互換コネクタになっています。信号は次の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/d362d01c-841d-a6c1-a4cf-6cf4ef93b5f5.png)

実際には次のように接続しました。
・赤：VCC 5[V]
・黒：GND
・黄：DIN
・白：未使用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/4594fb98-0a16-5e52-2443-c4716b409c08.png)

何度か点灯制御を試したときに、obnizのI/O端子からの電源供給では動作しなかったので、USB BUSから供給するようにしました。輝度を下げればI/o端子からの電源供給も可能ではないかと思います。

↓電源が足りないみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/8c1481a9-6367-f1eb-4d4b-013573033e35.png)

#プログラム

[obniz パーツライブラリ　ws2812B](https://obniz.io/ja/sdk/parts/WS2812B/README.md)を使用しました。

プログラム全体はこちらです。

```javascript
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/css/starter-sample.css" />
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.10.1/obniz.js"crossorigin="anonymous"></script>
</head>

<body>
	<div id="obniz-debug"></div>
  <div class="led">
      <h3 class="text-center">Control</h3>
      <button class="btn btn-primary" id="start">Start</button>
      <button class="btn btn-outline-primary" id="reset">Reset</button>
  </div>

	<script>
		var obniz = new Obniz("OBNIZ_ID_HERE");
    obniz.onconnect = async function() {
      var i = 0;
      var leds = obniz.wired("WS2812B", {din: 1});
      var ledarry = new Array(38);    // LEDの配列
        
      console.log("start");
      for(i=0; i<38; i++){
        ledarry[i] = [0x00, 0x00, 0x00];
      }

      $('#start').click(async function () {
        for(i=0; i<38; i++){
          ledarry[i] = [0x00, 0x02, 0x00];
          leds.rgbs(ledarry);
          await obniz.wait(100); // led ON for 1sec.
        }
      });

      $('#reset').click(async function () {
        for(i=0; i<38; i++){
          ledarry[i] = [0x00, 0x00, 0x00];
        }
        leds.rgbs(ledarry);
      });       
      obniz.display.clear();
      obniz.display.print("Hello World");
    };
	</script>
</body>
</html>
```

【**重要なところを抜粋**】

次の行でWS28212Bのインスタンス生成をしています。今回は電源供給を外部にしているので、引数にはdinの端子番号のみ与えます。

```javascript
var leds = obniz.wired("WS2812B", {din: 1});
```

次にLED色配列を作成し、すべて正当にしています。
六角ユニットのLEDは37個ですが、処理をしやすいように38要素の配列にしています。

```javascript
var ledarry = new Array(38);    // LEDの配列
        
console.log("start");
for(i=0; i<38; i++){
    ledarry[i] = [0x00, 0x00, 0x00];
}
```

次の行では、Web画面からStartボタンを押すとこで配列の要素0から順に緑色点灯させています。

```javascript
$('#start').click(async function () {
    for(i=0; i<38; i++){
        ledarry[i] = [0x00, 0x02, 0x00];  //  配列の要素に色データを代入
        leds.rgbs(ledarry);   // 実際にLED表示
        await obniz.wait(100); 
    }
});
```

#おわりに
WS28212BはメジャーなNeopixel LEDなので、今回の六角ユニット意外にもLEDテープやLEDバー等に応用できます！

obnizでオリジナルの🎄イルミネーションを作ってみてはいかがでしょうか!

それでは良きobnizライフを楽しんでください🎅

#参考ページ
[メーカーの解説ページ](https://docs.m5stack.com/#/en/unit/hex?id=description)