水準器アプリの試作2

スマートフォンをテーブルに置くとテーブルの傾きが分かる。

そんな「水準器アプリ」を試作しました。

本記事は、「水準器アプリの試作1」の続き記事です。

 

今回試作する「水準器」は、大きく2つの機能で構成されています。

先ず、加速度センサーから、スマ-トフォンの傾き(方向、角度)を計算する、計算機能。

次に、計算結果をビジュアル表示する、表示機能です。

  • 計算機能:加速度センサー計算
  • 表示機能:スマホ傾き表示

 

前回「水準器アプリの試作1」で、「表示機能」について説明しました。

今回「水準器アプリの試作2」で、「計算機能」について説明します。


 

 

座標系

Fig.1 は、スマートフォンの座標系です。

Fig.1 スマートフォン座標系

 

Fig.1 左側が、スマートフォンの正面図です。

Fig.1 右側は、スマートフォンの側面図です。

 

座標系の各軸には色が付いています。

  • x 座標:
  • y 座標:
  • z 座標:

 

 

加速度センサー

Fig.2 は、スマートフォンを前傾させた図です。

Fig.2 前傾したスマートフォン

 

  • スマートフォンを「静かに」前傾させています

そのため、重力(G)以外の加速度が発生していない状態です。

 

Fig.2 の状況で、加速度センサーからの出力値 A は、以下となります(注1)。

(注1)実際には、上記値を中心に、値が細かく振動しています。

傾きの検出

スマートフォンを「静かに」傾けた場合、加速度センサーからの出力値 A は、重力のみを検出します。

重力(G)は、常に鉛直方向を向いているので、重力を検出することで、スマートフォンの傾き(方向、角度)が分かります。

  • 重力(G)を検出 → スマートフォンの傾きが計算できる

 

 

 

水準器アプリの計算機能

水準器アプリでは、加速度センサーで検出した重力(G) から、スマートフォンの傾き(方向、角度)を計算します。

 

 

傾き方向

スマートフォンの傾き方向の各成分は、以下となります。

傾き角度

スマートフォンの傾き角度は、次式で計算します。

式 (4) の詳細は、以下の記事をご参照ください。

 

 

閾値(Threshold)

傾き角度が小さい場合、傾き角度を「0°」とします。

Fig.2 を見ると、傾き角度が小さくなると、G sin θ の値が小さくなることが分かります。

実際にθ を、1° で計算すると、以下となります(注3)。

(注3)重力加速度(G)の値を、9.8 m/s2 としました

 

そこで、閾値(Threshold)を以下としました。

  • Threshold: 0.15

次の g を計算し、それが Threshold 以下であれば、「0°」とみなしています。

 

 

 

プログラム

プログラム1

 

プログラム1 の解説

グローバル変数

プログラム1 の13 行目、2 次元変数 C は、Canvas の中心座標を保存する変数です。

スマートフォンの傾き(方向、角度)は、スマートフォンの中心にある正方形領域に描画します。

14 行目、2 次元変数 S は、その正方形領域のCanvas 上での位置を保存する変数です。

詳細は、記事「水準器アプリの試作1」をご参照ください。

 

15 行目、変数 edgLen は、正方形領域の一辺の長さです。

16 – 18 行、各値を平滑化するための変数です。

  • oldTheta: 傾き角度(θ)
  • oldGx      :傾き方向(Gx)
  • oldGy      :傾き方向(Gy)

詳細は、記事「スマホセンサーのノイズ軽減」をご参照ください。

 

19 行目、変数 THRESHOLD は、式 (6) の閾値です。

 

20 行目、変数 osCorrect は、スマートフォンがAndroid の場合、補正するための変数です。

詳細は、記事「加速度センサーのAndroid 補正」をご参照ください。

 

 

window.onload 関数

プログラム1 の86 – 91 行、詳細は、記事「水準器アプリの試作1」をご参照ください。

 

93 行目、スマートフォンがAndroid の場合、osCorrect に -1 を代入します。

詳細は、記事「加速度センサーのAndroid 補正」をご参照ください。

 

 

devicemotion イベント

プログラム1 の24 – 27 行、加速度センサーの値を得ています。

また、スマートフォンがAndroid の場合、補正処理しています。

 

29 – 30 行、傾き角度(θ)を計算しています。

32 – 37 行、各値(θ, Gx, Gy)の平滑化処理しています。

39 行目、drawSquare 関数を呼んでいます。

40 行目、writeTheta 関数を呼んでいます。

 

writeTheta 関数

正方形の中心に、傾き角(θ)の値を表示しています。

 

drawSquare 関数

プログラム1 の50 行目、閾値処理のための変数 g を計算しています。

52 – 56 行、g が閾値より大なので、drawGradation 関数へ渡す引数を計算し、drawGradation 関数を呼んでいます。

58 – 60 行、g が閾値以下なので、正方形を「green」で塗ります。

 

 

drawGradation 関数

drawGradation 関数は、記事「水準器アプリの試作1」をご参照ください。

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。