United Statesからアクセスのようです。言語設定をEnglishに切り替えますか?
Switch to English site
Skip to main content

Air Qualityデバイスのユーザーインターフェースをアップグレード

Air Qualityデバイスアプリケーションのユーザーインターフェースアップデートで、メトリックグラフとデバッグウインドウを追加しよう!

今回は「Air Quality」デバイスのアプリケーションに搭載された新しいUI機能についてご紹介します。また、新機能を使用できるようにするためのアップデート方法についても紹介します。ESDK showing graphical screen

メトリックグラフ

Metric Charts

今回のUIアップデートの中で最も魅力的な機能は、各センサーからの直近の1時間のデータを表示するグラフです!このアップデートを実現してくれた、aq-deviceリポジトリにプルリクエストを作成して下さったGitHubユーザーの“Elleo”さんに大感謝です!

Metric Charts in action

グラフはそれぞれの既存メトリックタイルをタップすることでアクセスできます。タップすると通常の画面が、過去1時間分のセンサー読み取り値のグラフに遷移します。グラフをタップするとホーム画面に戻ります。

グラフは“chart.js”というJavaScriptのライブラリを使って実装されており、ブラウザ間で優れたパフォーマンスを発揮するキャンバス(canvas)要素を利用して、美しい見た目のHTML5グラフを生成します。

グラフはキャンバスに描画されるため、ブラウザのビューポートサイズを変更しても問題なく動作します。これにより、既存のコードをあまり変更せずに、デスクトップやモバイルで「Air Quality」デバイスのインターフェースにUIを提供できます。

バックグラウンドではセンサーの読み取り値を追跡するためのデータバッファが複数作成されます。WebSocket接続を介してセンサーデータオブジェクトを受信するたびに、オブジェクトは分解されてデータは適切なバッファにプッシュ送信(push)されます。このpush関数はJavaScriptに組み込まれており、データを配列の最後に追加します。さらにshift関数と組み合わせることでFIFOバッファを実装できます。

Mikeさんが実装したtrimData関数の呼び出しは、新しいデータがWebSocketで受信されるたびに行われます。この関数は指定されたデータバッファの最初の項目を調べ、それを最大データ経過時間と比較し、古い場合はデータをシフトして保持している最も古いデータポイントを効果的に破棄します。デフォルトでは、この経過時間が1時間に設定されていますがtrimDataの呼び出し内にある、3600000を変更することで任意の経過時間に変更できます(時間の値はミリ秒です)。

デバック画面

Debug Screens

Mikeさんが画面遷移(スワップ)を実装するために行った作業を基に、私たちはUIを拡張してハードウェアID、ソフトウェアバージョン、物理デバイスの位置座標、/aqパーティションの使用領域、Raspberry Piの電源スロットル状態、および最終リモート書き込みに成功した(しなかった)タイムスタンプなどを追加してデバック情報をサポートするようにしました。

デバッグページは以前からテスト用に実装されていたので、これをUIに統合するための下準備は既に完了していました。UIに統合する際にはAQ Pythonアプリケーションに、/aqパーティションの使用容量を読み取り、成功と失敗のリモート書き込みタイムスタンプを提供する新機能を追加しました。

var mouseDown = false;
$('.metric')
    .on('touchstart mousedown', function(e) {
        mouseDown = true;
        timeoutId = setTimeout(function() {
            if(mouseDown) {
                // Held down for timeout value
                $('#summary').hide(0);
                $('#debug').fadeIn(250);
            }
        }, 1000);
    })
    .on('touchend mouseup', function() {
        clearTimeout(timeoutId);
        mouseDown = false;
    });

長押し検出を実装するために少量のJavaScriptを追記し、長押しでデバッグ画面に遷移できるようにしました。グラフの処理にはjQueryが含まれているため、提供されているセレクタを利用して、よりすっきりとコンパクトなコードにしました。

Debug screen in action

長押し検出はmousedownまたはtouchstartのイベントを監視することで機能し、変数をtrueに設定して1秒後に無効になるタイムアウトを開始します。もしタイムアウトが無効になると、コードは変数がtrueであるかどうかを確認し、次にホーム画面とデバッグページに使用されている<div>の可視性を交換するための処理が進められます。一方で、もしタイムアウトが切れる前に長押しが解除された場合にはクリックイベントとして扱われ、代わりにメトリックグラフを開きます。

短いタップで2種類あるデバック情報画面を切り替えることができます。ホーム画面に戻るにはどちらかの画面を長押しします。

UI新機能の有効化について

現在、紹介した新しいUI機能は開発中であり変更される可能性があるため、aq-device GitHubリポジトリの“development”ブランチにあります。

開発ブランチに置き換え機能をインストールするには、まずSSHでPiにログインしてaq-deviceディレクトリに移動します。

Enabling the new UI features

git fetchコマンドを実行して変更を取り込み(ただしローカルコピーにはマージしません)、git branch -vaコマンドを実行してdevelopmentブランチが表示されているかどうかをチェックします。developmentブランチに切り替えるにはgit checkout developmentを実行した後でgit pullを実行し、変更を取り込みます。

ローカルでの変更が原因でgit pullに失敗した場合はgit checkout -- .でその変更を破棄し、その後でpullを繰り返してやり直すことができます。あるいは、これらの変更を保存しておいてこちらで説明しているように再適用することもできます。

最新のAQ Raspberry Piイメージを実行する場合は最後にもう一つ変更が必要です。ブラウザをMidoriからChromiumに変更する必要があります(これは最新のChromiumバージョンのバグを回避するためです)。

これを行うには、rootで/etc/xdg/lxsession/LXDE-pi/autostartのファイルを任意のテキストエディターで開きます。midoriで始まる行をコメントアウトして、以下の内容を含む行を追加してください:

chromium-browser --display=:0 --disable-gpu --incognito --kiosk --window-position=0,0 file:///home/pi/aq-device/dashboard/dash.html

変更したらファイルを保存してESDKの電源を入れ直すと、Piの起動時に新しいUIがロードされるはずです。

終わりに

この記事ではdevelopment Air Qualityのユーザーインターフェースに新しく追加された、各センサーの1時間分の測定値グラフと診断情報を提供するデバッグ画面についてみてきました。グラフの追加により、部屋のCO2濃度の上昇など、指標の傾向が一目でわかるようになりました。

私たちはESDKプラットフォームをより良いものにするために、改善や新機能のプルリクエストを”aq-device”リポジトリに行うことを勧めています。是非!皆さんのお力でESDKプラットフォームをより良くしていきましょう!

Engineer of mechanical and electronic things by day, and a designer of rather amusing, rather terrible electric "vehicles" by night.
DesignSpark Electrical Logolinkedin