3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-07

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

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

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

環境とか使ったもの

  • スマートフォン: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形式か何かでマイコンに送信すれば、面白いことができそうです(検討中)。

参考

3
6
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?