温度センサーから収集した温度情報を基にフロント画面表示を変えるアウトプットに挑戦しました。

温度収集はobnizセンサーから収集します。

画面には3Dを扱えるA-frameを活用してみました。

温度情報拾ってif文を流してブラウザのコンソール画面では温度を出力できているのですが、getElementIdからcolorプロパティをredには変えられません・・・。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello, WebVR! • A-Frame</title>
    <meta name="description" content="Hello, WebVR! • A-Frame" />
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script
      src="https://unpkg.com/obniz@2.3.0/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <a-scene>
      <a-box
        id="sensor"
        position="-1 0.5 -3"
        rotation="0 45 0"
        color="#4CC3D9"
        shadow
      ></a-box>
    </a-scene>

    <script>
      var sceneEl = document.querySelector("a-scene");
      var cylinder = sceneEl.querySelector("#cylinder");

      var obniz = new Obniz("xxxx-xxxx"); // 自分のObniz_IDをいれましょう。
      obniz.onconnect = async function () {
        obniz.display.clear();
        obniz.display.print("Hello obniz!");

        // Javascript Example
        var tempsens = obniz.wired("LM60", { gnd: 0, output: 1, vcc: 2 });

        // setIntervalで間隔を作る
        setInterval(async function () {
          // 非同期で取得
          var temp = await tempsens.getWait();
          // 温度をコンソールに表示
          console.log(temp);
          // displayに反映
          if (temp > 25) {
            console.log("hot"); //ここまでは実行できてる
            target = document.getElementById("sensor");
            target.style.color = "red";
          }
          obniz.display.clear();
          obniz.display.print(temp + "C"); // 英語が出力できる
        }, 1000); // 1000ミリ秒 = 1秒
      };
    </script>
  </body>
</html>

よく考えたら「style.color」で変えられるのはstyle属性のcolorプロパティのような。
一方で上記のbox要素の色を決めているのはcolor属性？のようなので、style.colorでは変えられないのではという仮説を感じたところで時間切れでした。

色を変える＝Style属性と決めつけずに、扱う技術に応じた作法を学ぶ必要があると今回学びました。