加速度センサの傾きでWebの要素を傾ける

今回やること

加速度センサを傾けると、画像や文章・ボタンなどのWebの要素が傾きます。

用意するもの

• 加速度センサ KXR94-2050
• obniz Board
• モバイルバッテリーなど
• ブラウザを開くためのPC or スマートフォン

組み立て方

加速度センサのパーツライブラリを参考に、図のようにobniz Boardと加速度センサを接続します。

obniz	加速度センサ KXR94-2050
0	Vdd(1番)
1	GND(3番)
2	X軸(6番)
3	Y軸(7番)
4	Z軸(8番)
5	Enable(2番)
6	Self Test(5番)

プログラム

任意の画像を2枚用意し、ファイル名を「img1.jpg」 「img2.jpg」 として、プログラムと同じフォルダ階層に置いてください。

Webの要素を傾けるには、CSSのtransformプロパティでrotateに角度を指定します。

$("#img-1").css({ transform: "rotate(" + angle + "deg)" });
$("#button-1").css({ transform: "rotate(" + angle + "deg)" });
$("#sentence-1").css({ transform: "rotate(" + angle + "deg)" });

最初の状態と今の状態での加速度を比較し、その差から傾きの大きさを調べます。
このとき、Math.abs関数を使うと絶対値で差を比較することができます。

if (Math.abs(currentAccelVals.y - initAccelVals.y) > 0.7) {
　//傾き大きめ
} else if (Math.abs(currentAccelVals.y - initAccelVals.y) > 0.5) {
　//傾き中くらい
} else if (Math.abs(currentAccelVals.y - initAccelVals.y) > 0.3) {
　//傾き小さめ
} else {
　//まっすぐに戻す
}

完成したプログラム

うごかす

図の向きに動かしてY軸を回転させると、Webの要素が左右3段階ずつ傾きます。