3Dの取り扱いは難しかった
温度センサーから収集した温度情報を基にフロント画面表示を変えるアウトプットに挑戦しました。
温度収集は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/[email protected]/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属性と決めつけずに、扱う技術に応じた作法を学ぶ必要があると今回学びました。
Author And Source
この問題について(3Dの取り扱いは難しかった), 我々は、より多くの情報をここで見つけました https://qiita.com/hiromae0213/items/4e7e46a9da7d8fa687d6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .