linclip 2021年05月14日作成 (2022年01月23日更新) © MIT

製作品

3324

linclip 2021年05月14日作成 (2022年01月23日更新) © MIT

製作品

3324

リラックスできる明かり～時間帯で色温度が変わる照明をobnizで作る

LED
obniz
obnizBoard1Y
obnizIoTコンテスト
obniz IoT コンテスト 2021

照明の色温度で空間の印象はがらりと変わる。
時間帯によって適した照明がある。

そんな話を聞いたので、時間帯で色が変わる照明をobnizを使って作ってみました。

ここに動画が表示されます

操作用のGUIも作りました。

自動で照明の色（色温度）が変わるのがプログラムのメイン機能ですが、ユーザーの操作による変更も可能。LEDの色変更のための赤・緑・青・黄ボタン、時間帯ごとの色を確認できるボタンを付けました。今後色を変更したり、ほかの色を付け足すことも考え、プログラミング時の確認用にカラーピッカーも入れてあります。

我が家のリビングルームの照明はPanasonicのシーリングライト。リモコンで色が変えられます。日中は「白い色」にして本などを読みやすく、夜は「暖かい色」（オレンジっぽい色）にしてリラックスできるように、といった感じ。でも、この「色」って何？　と改めて思い、見つけたのがこの記事。

照明の色温度で冬のおうち時間を快適に。YAMAGIWAの開発者に聞く照明選びのコツ

光の色味を数値で表したものが色温度。時間帯によって色温度を変えることが、体内時計や生活リズムを整えるのを助けてくれる。ということのようです。

「時間によってリモコン操作をするのではなく、自動で照明の色温度を変えたい。」というわけで、obnizを使って照明を作ることにしたわけです。

名前	概要
obniz Board 1Y	https://obniz.io/ja/
X-Ring	WS2812B 搭載カラーLEDモジュール AliExpressで購入約500円
ペンダントランプシェード	紙製。イケアで購入 399円
照明用スタンド	イケアで購入処分品約1000円
口金変換アダプタ E17 → E26	ヨドバシで購入 440円
セパラボディ E26	ヨドバシで購入 165円
USB電源アダプタ	100均店で購入 300円

最低限必要なのは最初の2つだけです。あとは雰囲気を盛り上げるためのもの、電源の確保を楽にするためのものです。

今回使用したカラーLEDは、Wemos X-Ringという12個のカラーLEDがリング状に配置された製品。配線用のピンソケットをはんだ付けして使います。テープLEDなら、はんだづけなしで使えるので、手軽に試したい方はそれでもOKです。

また、カラーLEDの光は思いのほか強烈です。直接見るのは目に悪いので、光を拡散させるものが必須。今回は市販の紙製ランプシェードを使いましたが、自分で作っても楽しいです。紙を筒状にしてLEDを囲むだけでも十分だと思います。

Neopixelという名称でおなじみのWS2812B搭載カラーLEDは、電源（VCC）、GND、信号線（DIN）の3本だけで、複数のLEDをマイコンから制御できます。obnizのパーツライブラリにWS2812Bが用意されているので、簡単に使用可能となっています。

今回、obniz側は5V電源出力の「＋」とGNDの「－」、信号用「io3」のピンを使用（信号用は任意）。X-Ring側はそれぞれ5V、GND、D3につなぎました。上の写真を見ればわかるかと思います。

obniz公式制作レシピ集にあったカラーLEDの例では、GNDを0ピン、VCCを2ピンからとっていますが、この方法だとブラウザを閉じた時点でLEDが消灯してしまいます。これでは普段使いの照明としてはいまいちです。「＋」と「－」を使うと、これを回避することができます（これに気づくまでけっこう時間がかかってしまいました）。

プログラムはブラウザアプリ（HTML/JavaScript）として作成します。
おもに以下の2つのパートで構成されます。

ウェブブラウザでアクセスできるユーザーインターフェイス（ボタンでLEDのカラーを指定可能）
時間によってLEDカラーを変更するロジック

obnizのパーツライブラリ「WS2812B」のほか、外部JavaScriptライブラリとして、日の出日の入り時刻を計算する「SunCalc」を使用。jsDelivr経由でロードしています。

SunCalc

以下のような形で計算できます。


例
let sunTime = SunCalc.getTimes(new Date(), 35.6809591 , 139.7673068);

例では東京駅の緯度・経度を指定しています。緯度・経度はGoogleで「地名緯度経度」検索するとDegree形式とDMS形式が出てくるので、ここではDegree形式を使います。

日の出、日の入り時刻の「時間」「分」をそれぞれ取得できます。


例
let sunriseHours  = suntime.sunrise.getHours() ;  // 日の出（時）
let sunriseMinutes  = suntime.sunrise.getMinutes();   // 日の出（分）
let sunset Hours = suntime.sunset.getHours();  // 日の入り（時）
let sunset Minutes = suntime.sunset.getMinutes();  // 日の入り（分）

現在時刻との比較のためにHours * 60 + Minutes として計算しています。

obnizのパーツライブラリ「WS2812B」のサンプルと、ブラウザでカラーピッカーを使って色を指定する例は、obniz公式サイトで紹介されています。

スライダーに合わせて光るLEDの数を変える
 HTMLのカラーピッカーでフルカラーLEDの色を変える

これらを参考にすれば、問題なくできます。手持ちのテープLEDで試したところ、すぐに色を指定して光らせることができました。

しかし、今回使用したX-RingというカラーLEDモジュールでは、どうも狙った色が出ません。青は問題ないのですが、赤と緑が逆になります。というわけで、指定した色の順番をRGBからGRBに変える処理を入れています。プログラムのlight関数に注釈を入れているので、一般的なカラーLEDモジュールの場合は適宜変更してください。


例
ledarry[i] = [r, g, b];  //RGB 順の場合
ledarry[i] = [g, r, b];  //GRB 順の場合

ボタンで表示する色、時間帯に合わせた色は、JavaScirptオブジェクトcolorsで定義しています。もっと細かく時間を分けたい場合は適宜増やしてください（時刻を判定する部分も修正が必要です）。

名前	時間	色温度
day（日中）	0時～日の出	消灯
evening（夕方）	日の出～日の入	6500K
dark（夜）	日の入～20:00	3000K
night（夜）	20:00～22:00	2000K
midnight（深夜）	22:00～0:00	1400K

時間帯に合った色温度は最初の記事を参考にしました。日中は昼光色の6500K、夕方以降は暖かみを感じられるより低い色温度とし、そのあとは実際の色を見ながら気分で分けてしました（正しい分け方でありません）。また、名前はあまり考えずにつけてしまい、英語的にはおかしいと思いますが、とりあえずということで。

それぞれの色温度に対応するRGBの値は以下を使用しました。

That color is a blackbody?

実際にLEDを光らせてみると、「思った色味にならない」「LEDモジュールによって色味が違う」なんてこともあるので、環境などに合わせて修正が必要になるかと思います。上記設定はあくまでも参考程度に。

プログラムで数値指定、実行して結果を確認、という手順はけっこう面倒なので、ユーザーインターフェイスにカラーピッカーを用意しました。微調整などはこれを使えばいいでしょう。数値指定もすぐに反映できます。

というわけで、コード全体は以下のとおり。


コード
<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@3.14.0/obniz.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/mourner/suncalc@master/suncalc.js"></script>
  </head>
  <style>
    button {margin-bottom:8px;}
  </style>
  <body>
    <div id="obniz-debug"></div>
    <div class="led">
      <h3 class="text-center">LED Light</h3>

      <div id="now"></div>
      <div id="sunrise"></div>
      <div id="sunset"></div>

      <button class="btn btn-outline-primary btn-color col-md-2" id="red">Red</button>
      <button class="btn btn-outline-primary btn-color col-md-2" id="green">Green</button>
      <button class="btn btn-outline-primary btn-color col-md-2" id="blue">Blue</button>
      <button class="btn btn-outline-primary btn-color col-md-2" id="yellow">Yellow</button>
      <br>
      <button class="btn btn-outline-primary col-md-4" id="time">Show Time</button>
      <button class="btn btn-outline-primary col-md-4" id="stop">Stop</button>

      <div style="margin:2em 0 1em;">
        <button class="btn btn-outline-primary col-md-4 period" id="day">DAY</button>
        <button class="btn btn-outline-primary col-md-4 period" id="evening">EVENIG</button>
        <button class="btn btn-outline-primary col-md-4 period" id="dark">DARK</button>
        <button class="btn btn-outline-primary col-md-4 period" id="night">NIGHT</button>
        <button class="btn btn-outline-primary col-md-4 period" id="midnight">MIDNIGHT</button>
      </div>

      <h3>Color Picker</h3>
      <input type="color" value="#333300" id="colorPicker" style="width:100px;height:60px;">

        <div class="form-row align-items-center mx-auto" style="margin:auto 1em;width:350px;">
          <div class="col-auto">
            <label class="sr-only" for="text5a">First Name</label>
            <input type="text" class="form-control mb-2" id="hex" placeholder="Color(hex)">
          </div>
          <div class="col-auto">
            <button id="submit" type="submit" class="btn btn-primary mb-2" style="width:100%">Submit</button>
          </div>
        </div>
    </div>

    <script>
      'use strict'
      let obniz = new Obniz("OBNIZ_ID_HERE");

      const colors = {
        "red"      : [0x1F, 0x00, 0x00],
        "blue"     : [0x00, 0x00, 0x1F],
        "green"    : [0x00, 0x1F, 0x00],
        "yellow"   : [0x1F, 0x1F, 0x00],

        "day"      : [0xFF, 0xFF, 0xFF],  // 6500K ffffff
        "evening"  : [0xFF, 0xB4, 0x6B],  // 3000K ffb46b
        "dark"     : [0xFF, 0x89, 0x12],  // 2000K ff8912
        "night"    : [0xFF, 0x65, 0x00],  // 1400K ff6500
        "midnight" : [0x00, 0x00, 0x00]  
      }

      obniz.onconnect = async function () {
        obniz.display.clear();
        obniz.display.print("Hello World");

        // パーツライブラリ WS2812B 電源は＋ピン（5V出力）から供給するのでvcc、gndは指定しない。
        const led = obniz.wired("WS2812B", {din: 3});
        // 明るさ割合 0.04 to 1（最大）
        const range = 1; 

        const max_num = 12;  // LEDの個数を指定
        let ledarry = new Array(max_num);

        showTime();

        // クラウド実行のアプリステータス
        if (Obniz.App.isCloudRunning()) {
          Obniz.App.done({
            status: 'success',
            text: `It's OK`
          })
        }

        // LED点灯
        function light(colorArray){
          for(let i=0; i< max_num; i++){
            const r = Math.floor(colorArray[0] * range);
            const g = Math.floor(colorArray[1] * range);
            const b = Math.floor(colorArray[2] * range);

            // 製品によってRGBの並び順が異なるのでどちらかを
            //ledarry[i] = [r, g, b];  //RGB 
            ledarry[i] = [g, r, b];    //GRB
          }
          led.rgbs(ledarry);
          $("#hex").val(hex2digit(colorArray[0]) + hex2digit(colorArray[1]) + hex2digit(colorArray[2]));
        }

        // 時刻表示、LED点灯
        async function showTime () {
          obniz.display.clear();

          // 時刻表示 日出/日没
          const now = new Date();
          const hour = now.getHours();
          const min = now.getMinutes();
          obniz.display.print("Now     " + fill(hour) + ":" + fill(min));

          const currentTime = hour * 60 + min;
          const suntime = SunCalc.getTimes(new Date(), 35.6809591 , 139.7673068);

          obniz.display.print(suntime.sunrise.getHours() + ":" + suntime.sunrise.getMinutes() +" / " + suntime.sunset.getHours() + ":" + suntime.sunset.getMinutes());

          const sunrise = suntime.sunrise.getHours() * 60 + suntime.sunrise.getMinutes(); // 日の出
          const sunset  = suntime.sunset.getHours()  * 60 + suntime.sunset.getMinutes(); // 日の入り
          obniz.display.print(currentTime + " / " + sunrise + " / " + sunset);

          // 現在時刻と日の出日の入り時刻を表示
          $("#now").text("現在の時刻: " + fill(hour) + ":" + fill(min) + " (" + fill(currentTime, 4) + ")");
          $("#sunset").text("日の入時刻: " + fill(suntime.sunset.getHours()) + ":" + fill(suntime.sunset.getMinutes()) + " ("+ fill(sunset, 4) + ")");
          $("#sunrise").text("日の出時刻: " + fill(suntime.sunrise.getHours()) + ":" + fill(suntime.sunrise.getMinutes())+ " ("+ fill(sunrise, 4) + ")");

          // 時刻で色を変更
         if(currentTime < sunrise){  // 0時から日の出まで
            light(colors["midnight"]);
            console.log("nidnight");
          }
          else if(currentTime < sunset){  // 日中（日の出から日の入り）
            light(colors["day"]);
            console.log("day");
          }
         else if(currentTime < 20 * 60){  // 夕方（日の入り以降から20時まで）
            light(colors["evening"]);
            console.log("evenig");
          }
         else if(currentTime < 22 * 60){  // 夜（20時から22時まで）
            light(colors["dark"]);
            console.log("dark");
          }
         else {  // 22時以降
            light(colors["night"]);
            console.log("night")
          }

        };

        // Show Time ボタン
        $('#time').click(function () {
          showTime();
        });

        // Stop ボタン （消灯）
        $('#stop').click(function () {
          light([0x00, 0x00, 0x00]);
          obniz.display.clear();
          obniz.display.print("STOP");
        });

        // 色名 ボタン
        $(".btn-color").click(function (){
          const rgb = this.id;
          light(colors[rgb]);
          obniz.display.clear();
          obniz.display.print(rgb);
          console.log(rgb);
        });

        // 時間帯 ボタン
        $(".period").click(function (){
          const period = this.id;
          light(colors[period]);
          obniz.display.clear();
          obniz.display.print(period);
          console.log(period);
        });

      // カラーピッカー
      $("#colorPicker").on("change", function(val) {
        const colorString = $("#colorPicker").val();
        const rgb = colorString2hex(colorString);
        light([rgb[0], rgb[1], rgb[2]]);

      });

      $("#submit").click(function (){
        const colorString = $("#hex").val();
        console.log(colorString);
        const rgb = colorString2hex(colorString);
        light([rgb[0], rgb[1], rgb[2]]);
      });

    };

    // カラーピッカー用色コード変換
    function colorString2hex(hex) {
      if (hex.slice(0, 1) == "#") hex = hex.slice(1);
      $("#hex").val(hex.toUpperCase());
      if (hex.length == 3)
        hex =
          hex.slice(0, 1) +
          hex.slice(0, 1) +
          hex.slice(1, 2) +
          hex.slice(1, 2) +
          hex.slice(2, 3) +
          hex.slice(2, 3);

      return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map(function(str) {
        return parseInt(str, 16);
      });
    }

    // 色コードの桁揃え
    function hex2digit(num){
      num = ("0" + num.toString(16)).slice(-2).toUpperCase();
      return num;
    }

    // 時刻の桁揃え
    function fill(num, def=2){
      num = ("000" + num).slice(-def).toUpperCase();
      return num;
    }  

    </script>
  </body>
</html>

単に上記プログラムを書いただけでは、ブラウザを起動している間しか動作しません。時間帯に合わせて色を変えるには、定期的にプログラムを実行させるための「クラウド実行」の設定が必要になります。

「アプリ開発」の一覧で、先に書いたプログラムの「アプリ設定」を開き、「ブラウザ実行」をチェック、さらに「クラウド実行」の以下の項目を設定します。

項目名	値
Webhookで実行	チェックなし
時間で実行（タイムゾーン:+9:00	every/10minutes
デバイスがオンライン時に実行	チェック
デバイスのスイッチが押されたら実行	チェック