obnizでNeoPixel LEDテープを制御する～光るサンタ帽子の制作～

#概要
　イルミネーションを見て、光る何かを作りたい衝動にかられ**光るサンタ帽子**を作りました！サンタ帽子を作るにあたり、光り方を自分で制御できたら面白いのでobniz（マイコンボード）をから点灯制御してみました。

【実際の様子】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">obnizからの制御に成功！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://t.co/bgsiD7vrFS">pic.twitter.com/bgsiD7vrFS</a></p>&mdash; まえぷー (@kmaepu) <a href="https://twitter.com/kmaepu/status/1202510822305488896?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ゆるメカトロ入門できました！🎅<a href="https://twitter.com/hashtag/%E3%82%86%E3%82%8B%E3%83%A1%E3%82%AB%E3%83%88%E3%83%AD?src=hash&amp;ref_src=twsrc%5Etfw">#ゆるメカトロ</a> <a href="https://t.co/yxgRKAbEde">pic.twitter.com/yxgRKAbEde</a></p>&mdash; まえぷー (@kmaepu) <a href="https://twitter.com/kmaepu/status/1202741070536163328?ref_src=twsrc%5Etfw">December 6, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の成果！<br>光るIoTサンタ帽子！<a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/Noodl?src=hash&amp;ref_src=twsrc%5Etfw">#Noodl</a> <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#クリスマス</a> <a href="https://t.co/IuMDmFXGLO">pic.twitter.com/IuMDmFXGLO</a></p>&mdash; まえぷー (@kmaepu) <a href="https://twitter.com/kmaepu/status/1204375037500739584?ref_src=twsrc%5Etfw">December 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


#構成
　構成は次のようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/60079748-3577-6e03-c7ba-80eae880a362.png)

　NeoPixel LEDテープの電源を直接モバイルバッテリから取る事により、点灯可能なLEDの個数を増やしています。LED個数や電力の計算は後述の「技術的なところ」で解説します。

#部材一覧
- NeoPixel LEDテープ
 [ピカリ館](https://www.akiba-led.jp/)

今回使用したのは[こちら](https://qiita.com/advent-calendar/2019/my-calendar)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/fc3ce97f-da5d-63c2-b7b2-c129d9798804.png)

- obniz board
 [obniz Board](https://www.switch-science.com/catalog/5869/)
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/d1b4751c-67c2-6676-a77c-7c97f8b105bb.png)


- microUSBケーブル
 ダイソー　110円

#技術的なところ
##回路
　電源供給についてこちらに記述していきます。obniz boardは各端子から電源供給可能です。供給可能な電源は5V1A。つまり**<font color = RED>5W</font>**まで駆動できます。
Neo Pixel LEDテープの仕様を見ると**<font color = RED>最大10W</font>**。単純計算で、50cmまでしか駆動できません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/6f7a5abc-8cdc-c14a-5b78-20cbb3d61edc.png)

　サンタ帽子に巻き付けるとすると、LEDテープの長さは人の頭のサイズ（頭囲）が関係してきます。頭囲については[こちら](https://hapiee.com/head-size#i-5)を参考にしました。
　
　頭囲の平均は男性で57cm、女性で55cm。ということで、obnizから駆動可能な長さ50cmを超えてしまっています。

　obniz boardの端子からの供給では駆動できないので、USBケーブルから直接電源を取るようにしています。こうすることで、駆動可能なLEDの個数を外部電源依存にできます。

##プログラム

　obnizのプログラムは次のようになっています。

```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://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.5.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>

    <div id="obniz-debug"></div>
    <div class="led">
      <h3 class="text-center">Turning on a LED</h3>
      <button class="btn btn-primary" id="yellow">Yellow</button>
      <button class="btn btn-outline-primary" id="blue">Blue</button>
      <button class="btn btn-outline-primary" id="stop">stop</button>
    </div>

    <script>
      var obniz = new Obniz("OBNIZ-ID");
      obniz.onconnect = async function () {
        obniz.display.clear();
        obniz.display.print("Hello World");

        var led = obniz.wired("WS2812B", {din: 3});

        const max_num = 80;
        var ledarry = new Array(max_num);
        var f_color = 0;

        $('#yellow').click(function () {
          for(i=0; i< max_num; i++){
            ledarry[i] = [0xFF, 0xFF, 0x00];
          }
          obniz.display.clear();
          obniz.display.print("ON");
          led.rgbs(ledarry);
        });
        $('#blue').click(function () {
          for(i=0; i< max_num; i++){
            ledarry[i] = [0x00, 0x00, 0xFF];
          }
          obniz.display.clear();
          obniz.display.print("OFF");
          led.rgbs(ledarry);
        });
        $('#stop').click(function () {
          for(i=0; i< max_num; i++){
            ledarry[i] = [0x00, 0x00, 0x00];
          }
          obniz.display.clear();
          obniz.display.print("OFF");
          led.rgbs(ledarry);
        });
      };
    </script>
  </body>
</html>
```

**次の行でLEDテープの信号線を接続する端子を設定しています**

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

**次の行でLEDの個数と配列を定義しています**

```javascript
const max_num = 80;
var ledarry = new Array(max_num);
var f_color = 0;
```

**次の行で押したボタンに応じた色に点灯させています**

```javascript
     $('#yellow').click(function () {
          for(i=0; i< max_num; i++){
            ledarry[i] = [0xFF, 0xFF, 0x00];
          }
          obniz.display.clear();
          obniz.display.print("ON");
          led.rgbs(ledarry);
        });
        $('#blue').click(function () {
          for(i=0; i< max_num; i++){
            ledarry[i] = [0x00, 0x00, 0xFF];
          }
          obniz.display.clear();
          obniz.display.print("OFF");
          led.rgbs(ledarry);
        });
        $('#stop').click(function () {
          for(i=0; i< max_num; i++){
            ledarry[i] = [0x00, 0x00, 0x00];
          }
          obniz.display.clear();
          obniz.display.print("OFF");
          led.rgbs(ledarry);
        });
```

 LEDの配列に色データ（赤、緑、青）を指定することでLED１つ１つの色を指定できます。

#終わりに
　ピカリ館はいいぞ。