Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

【IoT】スマートフォンをセンサとして使う

スマートフォンはセンサの塊

スマートフォンには加速度センサや照度センサなど、いろいろ含まれています。
なので、そのセンサから値を取れればマイコンがなくても、モノづくりに活かせる可能性が広がります。なので、スマートフォンからセンサのデータを取得してみたいと思います。

※結構、ざっくり書きます。

環境とか使ったもの

  • スマートフォン:Zenfone5
  • スマートフォンのOS:Android 8.0.0
  • Node.js

プログラムとか

Node-Redのフロー

Node-Redのフローです。

image.png


[{"id":"d8228da1.bd655","type":"template","z":"f3159048.9c5b2","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>加速度の値を得る</title>\n</head>\n \n<body>\n<div id=\"txt\">ここにデータを表示</div>             <!-- データを表示するdiv要素 -->\n \n<script>\nvar aX = 0, aY = 0, aZ = 0;                     // 加速度の値を入れる変数を3個用意\n \n// 加速度センサの値が変化したら実行される devicemotion イベント\nwindow.addEventListener(\"devicemotion\", (dat) => {\n    aX = dat.accelerationIncludingGravity.x;    // x軸の重力加速度(Android と iOSでは正負が逆)\n    aY = dat.accelerationIncludingGravity.y;    // y軸の重力加速度(Android と iOSでは正負が逆)\n    aZ = dat.accelerationIncludingGravity.z;    // z軸の重力加速度(Android と iOSでは正負が逆)\n});\n \n// 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定\nvar timer = window.setInterval(() => {\n    displayData();      // displayData 関数を実行\n}, 33); // 33msごとに(1秒間に約30回)\n \n// データを表示する displayData 関数\nfunction displayData() {\n    var txt = document.getElementById(\"txt\");   // データを表示するdiv要素の取得\n    txt.innerHTML = \"x: \" + aX + \"<br>\"         // x軸の値\n                  + \"y: \" + aY + \"<br>\"         // y軸の値\n                  + \"z: \" + aZ;                 // z軸の値\n}\n</script>\n</body>\n</html>","output":"str","x":490,"y":220,"wires":[["f44cb675.0bd878"]]}]

html

htmlはNode-Red上のtemplate部分に書きます

image.png


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>加速度検出</title>
</head>

<body>
<div id="txt">データの表示</div> 

<script>
var aX = 0, aY = 0, aZ = 0;                     // 加速度の値を入れる変数を3個用意

// 加速度センサの値が変化したら実行される devicemotion イベント
window.addEventListener("devicemotion", (dat) => {
    aX = dat.accelerationIncludingGravity.x;
    aY = dat.accelerationIncludingGravity.y;
    aZ = dat.accelerationIncludingGravity.z;
});

// 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定
var timer = window.setInterval(() => {
    displayData();      // displayData 関数を実行
}, 33); // 33msごとに(1秒間に約30回)

// データを表示する displayData 関数
function displayData() {
    var txt = document.getElementById("txt");   // データを表示するdiv要素の取得=その部分に表示させるよー的な感じ
    txt.innerHTML = "x: " + aX + "<br>"         // x軸の加速度
                  + "y: " + aY + "<br>"         // y軸の加速度
                  + "z: " + aZ;                 // z軸の加速度
}
</script>
</body>
</html>

ブラウザで表示

URL部分に、「http://[IPアドレス]:[PORT番号]/[Node-red上で定めた名前]」といれると以下のように表示されます。
※[Node-red上で定めた名前]はhttp inのノードにあります
image.png

fig.png

おわりに

これを使って、センサのデータをjson形式か何かでマイコンに送信すれば、面白いことができそうです(検討中)。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?