20150202_camera_tablet

撮影した写真をタブレットに表示する


アトリエ秋葉原から公開されている チュートリアル を試してみます。
今回は 画像を撮影してタブレットに画像表示 です。

カメラで撮影するのは Take Picture ボックスを使います。
デフォルトでは、撮影した画像ファイルは ホームディレクトリ配下の/recordings/cameras/ ディレクトリに保存されます。
タブレットに画像を表示するのは Show Image ボックスを使います。
画像はアプリケーション配下の html ディレクトリを参照します。

設定
フローダイヤグラムに、Take Picture ボックスと Show Image ボックスを配置します。
20150202_camera_flowdiagram

Take Picture ボックスの保存先を、Show Image ボックスから参照できるように変更します。
Take Picture ボックスのコードを、下記のように変更します。

タブレットを使う で少し触れたように、Show Image ボックスには パスの問題 が存在します。
Show Image ボックスのコードを、下記のように変更します。

Take Picture ボックスと Show Image ボックスの両方に、画像ファイル名を設定します。
このとき、Show Image ボックスのは拡張子あり(例 test.jpg) とし、Take Picture ボックスは拡張子なし(例 test)とします。
20150202_camera_show_image 20150202_camera_take_picture

タブレットを使う と同じように、
画像の保存先となる html ディレクトリを作成します。
html ディレクトリにダミーの画像ファイルを置きます。
20150202_camera_project

動作確認
「再生」ボタンを押すと、Pepper のカメラが撮影した画像がタブレットに表示されます。
20150202_camera_take 20150202_camera_tablet

タブレットのキャッシュの回避
タブレットのWebブラウザは画像をキャッシュします。
そのため、アプリを実行しても、2回目以降は最初の画像を表示します。
キャッシュを回避するには、画像の名称は同じでも、異なる画像のように見せかけます。
よく使われる手法は、画像のパス名に実行したときの時間を付加する方法です。
Show Image ボックスのコードを、下記のように変更します。