Javascript(Obniz)で光センサーを読み取って、焼きそばパンを開くとメガネが光るようにした

#概要

<blockquote class="twitter-tweet" data-theme="dark"><p lang="ja" dir="ltr">Javascript(Obniz)で光センサーを読み取って、焼きそばパンを開くとメガネが光るようにした <a href="https://t.co/E7W6kwnOay">pic.twitter.com/E7W6kwnOay</a></p>&mdash; qiita_bonsai3 (@QiitaB) <a href="https://twitter.com/QiitaB/status/1155476284471820288?ref_src=twsrc%5Etfw">July 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

メガネケースを開くとLEDが光ります。

#メガネケース
![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/86cb9d40-104b-40c1-7130-e4c19074cedf.jpeg)
焼きそばパンのメガネケースです。

![002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/4e6351e3-193c-3abc-6793-11d2489ecf08.jpeg)
テープLEDを配線してあります。

![003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/76915a28-b705-9fcd-7be0-78aaf6245d3f.jpeg)
Obnizとバッテリーを配置してあります。

#Obnizとは
![004.jpg](https://qiita-image-store.s3.amazonaws.com/0/288001/cbe6c172-6456-23d8-0b19-540be796c7f4.jpeg)
ObnizはJavascriptで動作するIOT開発ボードです
https://obniz.io/

#配線
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/771987b0-2bc5-67c8-4077-8ff9d3d016e4.png)

このようになっています。

LEDはこちらを使用しています。

WS2812B LEDテープライト
https://www.amazon.co.jp/gp/product/B01MZYQTBG/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1

##明るさを検出する
![005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/28e187e5-d554-3b14-ca14-9c98199078a7.jpeg)

ここにCdS（光可変抵抗器）を配置しています。
これに光が当たると抵抗値が変わり、Obnizへの入力アナログ値が変わります。

###メガネケース閉じてると・・
CdSに光が入ってない → LEDはOFF

###メガネケース開けると・・
CdSに光が入る → LEDがON

となります。

#コード

```javascript
const obniz = new Obniz("xxxx-xxxx"); // あなたのObnizコード
obniz.onconnect = async() => {

    ///////////////////////////////
    // ピン設定
    ///////////////////////////////
    const led = obniz.wired("WS2812", { vcc: 0, din: 3, gnd: 6 });
    obniz.io9.output(true);
    obniz.io11.output(false);

    ///////////////////////////////
    // LED初期設定
    ///////////////////////////////
    let ledConfig = {
        light: 0, // LED明るさ用
        count: 48, // 接続したLEDの数
        color: [], // LEDの色 [色相0～360,彩度0～1,明度0～1] が入る
        time: 20 // LED色切り替えのタイミング
    }
    console.log(ledConfig);
    for (let i = 0; i < ledConfig.count; i++) {
        //グラデーションになるように調整。        
        //色相360÷LEDの数48 = 7.5 → 切りのいい数字 7 に。
        ledConfig.color[i] = [i * 7, 1, ledConfig.light];
    }
    led.hsvs(ledConfig.color);

    ///////////////////////////////
    // LED色設定
    ///////////////////////////////
    const setLed = () => {
        ledConfig.color.push(ledConfig.color[0]);
        ledConfig.color.shift();
        led.hsvs(ledConfig.color);
    };

    ///////////////////////////////
    // CDS値による分岐
    ///////////////////////////////
    obniz.ad10.start((voltage) => {
        //console.log(voltage)すれば入力電圧がわかる;
        if (voltage < 2) {
            //LED ON
            //0.1でもかなりまぶしい。1だと目が焼ける
            ledConfig.light = 0.1;
        } else {
            //LED OFF
            ledConfig.light = 0;
        }
        //LED 再設定
        for (let i = 0; i < ledConfig.count; i++) {
            ledConfig.color[i][2] = ledConfig.light;
        }
        led.hsvs(ledConfig.color);
    });

    ///////////////////////////////
    // LEDの色を切り替え
    ///////////////////////////////
    setInterval(setLed, ledConfig.time);

}
```

#課題

![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/da411c62-0726-a21e-bbbf-fdb1d1e5ed50.png)

Cdsにカバー的なものをつけてあげないと、
ONになったLEDの光が入り続けます。

「ケースを閉じても常時LEDがON状態の焼きそばパン」の出来上がりとなってしまいます。

これは今後の課題です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LEDを明るくしすぎると、LEDの光がCdsに入るのでケース閉じてもLED光りっぱなしになってしまう。 <a href="https://t.co/NP1ibgA2s3">pic.twitter.com/NP1ibgA2s3</a></p>&mdash; qiita_bonsai3 (@QiitaB) <a href="https://twitter.com/QiitaB/status/1155482602024779777?ref_src=twsrc%5Etfw">July 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#スマホで操作できるようにした

「もうスマホで操作してしまおう」と思いました。

![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/b7780408-fa57-ec1d-e8a0-d2fe57fb918a.png)

このような画面を作りました。
バーをスライドするとLED明るさを調整できます。
この画面をスマホで表示してLEDのON・OFF・明るさを操作します。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スマホでLED明るさを調整できるようにした <a href="https://t.co/2rv9J9oXhv">pic.twitter.com/2rv9J9oXhv</a></p>&mdash; qiita_bonsai3 (@QiitaB) <a href="https://twitter.com/QiitaB/status/1155486688220553217?ref_src=twsrc%5Etfw">July 28, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#スマホ版コード

画面のコードです。

```html
<html>
<head>
    <meta charset="utf-8">
    <title>眼鏡ケースLED</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <script src="https://unpkg.com/obniz@1.12.2/obniz.js" crossorigin="anonymous"></script>
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@1.12.2/obniz.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/rangeslider.js/1.0.0/rangeslider.css">
    <script src="//cdn.jsdelivr.net/rangeslider.js/1.0.0/rangeslider.min.js"></script>
    <script src="function.js"></script>
    <style>
        body {
            padding: 20px 20px;
        }        
        .l-wrapper {
            padding-top: 100px;
        }        
        #slider {
            width: 100%;
        }        
        .l-btn {
            margin-top: 40px
        }        
        .c-btn1 {
            width: 100%;
            height: 40px;
            margin-bottom: 30px;
            cusor: pointer;
        }
    </style>
</head>
<body>
    <div class="l-wrapper">
        <input id="slider" type="range" min="0" max="1" step="0.01" value="0">
    </div>
    <div class="l-btn">
        <button class="c-btn1" id="off">OFF</button>
    </div>
</body>
</html>
```

Javascriptです。

```javascript
const obniz = new Obniz("xxxx-xxxx"); // あなたのObnizコード
const tapORclick = (window.ontouchstart === null) ? "touchstart" : "click";
obniz.onconnect = async() => {

    ///////////////////////////////
    // ピン設定
    ///////////////////////////////
    const led = obniz.wired("WS2812", { vcc: 0, din: 3, gnd: 6 });
    obniz.io9.output(true);
    obniz.io11.output(false);

    ///////////////////////////////
    // LED初期設定
    ///////////////////////////////
    let ledConfig = {
        light: 0, // LED明るさ用
        count: 48, // 接続したLEDの数
        color: [], // LEDの色 [色相0～360,彩度0～1,明度0～1] が入る
        time: 20 // LED色切り替えのタイミング
    }
    console.log(ledConfig);
    for (let i = 0; i < ledConfig.count; i++) {
        ledConfig.color[i] = [i * 7, 1, ledConfig.light];
        //色相360÷LEDの数48 = 7.5 → 切りよく 7 に。
    }
    led.hsvs(ledConfig.color);

    ///////////////////////////////
    // LED色設定
    ///////////////////////////////
    const setLed = () => {
        ledConfig.color.push(ledConfig.color[0]);
        ledConfig.color.shift();
        led.hsvs(ledConfig.color);
    };

    ///////////////////////////////
    // スライダーで明るさ調整
    ///////////////////////////////
    const changeLight = (value) => {
        //LED 再設定
        for (let i = 0; i < ledConfig.count; i++) {
            ledConfig.color[i][2] = value;
        }
        led.hsvs(ledConfig.color);
    }
    $('input[type="range"]').rangeslider({
        polyfill: false,

        onInit: function() {
            changeLight("0");
        },
        onSlide: function(position, value) {
            changeLight(value);
        },
        onSlideEnd: function(position, value) {
            changeLight(value);
        }
    });

    ///////////////////////////////
    // LED OFF
    ///////////////////////////////
    $("#off").on(tapORclick, () => {
        changeLight("0");
    });

    ///////////////////////////////
    // LEDの色を切り替え
    ///////////////////////////////
    setInterval(setLed, ledConfig.time);

}
```


#ほか

・メガネケースにObnizとバッテリーを仕込むのに苦労しました。
・ちょうどよい大きさのバッテリーが見つかりませんでした。
・使用しているバッテリーはちょっと容量不足なので、フル充電しないとObnizが「LED光らせるには容量が足らん」と怒ってきます。

![008.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288001/f44bcb73-9a9b-ca8d-335d-8851734e2270.jpeg)

こちらはObnizをモバイルバッテリーにつないでデバッグしている様子です。


#以上です。
ありがとうございました。