【自己紹介アプリ制作】Pepperが見せる


こんにちは、yanagiです。
上京して半年、私にも行きつけのBARができました。まだ数度しか入ってませんが、バーテンのお姉さんは「今入っている果物は…」と私がフルーツベースのカクテルが好きだということを把握しており、入店後すぐに勧めてくれます。カクテルのレシピに対して「それでお願いします」と言って注文してるので、ずっとカクテルの名前が覚えられません。

さて、この記事で自己紹介アプリ最終回になる予定だったのですが、書き進めていくうちに長くなってしまったので更に分割したいと思います。すみませんー!
前回でアプリ自体は完成なのですが、書きそびれていたタブレットを使った画像の表示の仕方を紹介します。Pepper自身のモーションを作成する方法は次の記事で。


その5:タブレットに画像を表示させる

まず、画像を準備します。
jpg、png、gif(アニメーション)など、htmlで表示可能な形式であれば何でもOKです。
Pepperのタブレットは1707×1067pxですのでそのサイズで作ることをお勧めします。なぜ縦横のピクセル数が奇数なのかは、ちょっとわかりません。ぱっと見、どちらも素数っぽいですが素数ではありませんでした。(1707=3*569、1067=11*97)

準備ができたら、画像を表示させるBoxがあるのでそれを使います。

showImage

[showImage]も他のBoxと同じようにスパナマークをクリックすると右側のウィンドウがでますので、表示させたい画像のアドレス(html/以下)を記述します。

なお、このとき気をつけることは、画像ファイルの置き場所です。
アプリのプロジェクトファイルを保存すると自動生成されるフォルダの中に、htmlフォルダを作り、そこに画像を置きます。今回はフォルダ直下に置いていますが、アプリが複雑になったり、画像やその他ファイルの数が多くなればまとめてフォルダを作ってもOKです。

yanagiPlof_html

こんな感じになってます ^w^
これで、Boxに信号が流れたタイミングで画像を呼び出し、タブレットに表示させることができます。

whereFromBox

画像を切り替える際は、新たに[Show Image]を繋げば上書きになります。また、他のBoxと並列につないでも大丈夫ですよ。

タブレットから画像を消したいときは[Hide Web View]を入れます。

hideWebView

さて、次回はいよいよ最終回です。
近日中に公開できると思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です