🍀

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

2020/09/27に公開

JavaScript

obniz

電子工作

tech

概要

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

メガネケース

焼きそばパンのメガネケースです。

テープLEDを配線してあります。

Obnizとバッテリーを配置してあります。

Obnizとは

ObnizはJavascriptで動作するIOT開発ボードです
https://obniz.io/

配線

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

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

WS2812B LEDテープライト

明るさを検出する

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

メガネケース閉じてると・・

CdSに光が入ってない → LEDはOFF

メガネケース開けると・・

CdSに光が入る → LEDがON

となります。

コード

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);

}

課題

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

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

これは今後の課題です。

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

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

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

スマホ版コード

画面のコードです。

<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です。

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光らせるには容量が足らない」と怒ってきます。

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

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