AITCオープンラボ第4回 IoT勉強会〜 Pepper x IoT x Web 〜

AITCオープンラボ
第4回 IoT勉強会
∼ Pepper x IoT x Web ∼
＜実は第2回 html5jロボット部勉強会を兼ねていたりして＞
2015 / 04 / 21
eegozilla

まずは自己紹介
eegozilla
html5j ロボット部部長
html5j 運営スタッフ
html5j Webプラットフォーム部運営スタッフ
html5j エンタープライズ部
LeapMotion Developers JP 共同主催
日本Androidの会運営委員
Facebook
Hirokazu Egashira
Twitter 
@ega1979 (egozilla)
一応、pepperのオーナーです
Copyright @ html5j Robot Organization. All right reserved.

あっさりPepperを壊しました。。。orz

html5j ロボット部について
月1回を目処に
勉強会／ハッカソン／ワークショップ
などを行い上記について考えていきます。
ぜひご参加ください！
（登壇できるかたもぜひご協力お願いしますm(_ _)m）
「ロボットとWeb」
で何ができるかをみんなで学び、考えていく
html5jの部活動です。

センサーで応じた値に応じて
pepperの挙動をつくる
本日のお題

スキーム
表示しゃべる

• 動かす
• タブレットをつかう
• タブレットの操作に応じて動かす
pepperの基本

とりあえず動かしてみる

pepperを動かす原理
ビヘイビア
ビヘイビア
NAOqi APIパッケージ化
アップロード
実行

ちょっと
しゃべらせてみましょう
Demo

タブレットを使う

タブレットの仕様
項目内容
ディスプレイ 10.1インチ
解像度 1280 x 800
メディアファイル
形式
AVI, WMV, ASF, MP4, MKV, MPG, DAT, TS, TP, TRP, 3GP
ビデオコーデック DivX, XviD, H.264, WMV 9/8/7, MPEG1
ビデオ解像度 Max 1920x1080
オーディオコーデック MPEG1 Layer 1/2/3, WMA, OGG Vorbis, PCM, FLAC
OS Android 4.04

タブレット使う原理
ビヘイビア
ビヘイビア
AL TabletServiceパッケージ化
アップロード
実行
HTML
HTML
ブラウザが立ち上がる
取得
表示

画像を表示
Demo

「Show Image」のボックスライブラリを配置
「html」フォルダを作成

画像ファイルをインポート
「Show Image」に参照する画像ファイルを入力
「フォルダ」に画像ファイルを格納

（注意）
def onInput_onStart(self):
# We create TabletService here in order to avoid
# problems with connections and disconnections of the tablet during the life of the application
tabletService = self._getTabletService()
if tabletService:
try:
url = self.getParameter("ImageUrl")
if url == '':
self.logger.error("URL of the image is empty")
if not url.startswith('http'):
url = self._getAbsoluteUrl(url)
tabletService.showImage(url)
except Exception as err:
self.logger.error("Error during ShowImage : %s " % err)
self.onStopped()
else:
self.logger.warning("No ALTabletService, can't display the image.")
self.onStopped()
このままRunしても
self._getTabletService()内で取得しようとするALTabletServiceが見つからなくてエラーになる

self.frameManager.getBehaviorPath(self.behaviorId) によって得られた、
Show Imageボックスが所属するビヘイビアのパスを利用いるが、
ビヘイビアがプロジェクトファイルの最上位にないと、ここで想定しているURLが取得できず、画像
の表示に失敗してしまいます。
def _getAppName(self):
import os
if self.frameManager:
behaviorPath = os.path.normpath(self.frameManager.getBehaviorPath(self.behaviorId))
appsFolderFragment = os.path.join("PackageManager", "apps")
if not (appsFolderFragment in behaviorPath):
self.logger.error("appsFolderFragment is not in behaviorPath")
fragment = behaviorPath.split(appsFolderFragment, 1)[1]
return fragment.lstrip("/")
else:
self.logger.warning("No ALFrameManager")
def _getAbsoluteUrl(self, partial_url):
import os
subPath = os.path.join(self._getAppName(), os.path.normpath(partial_url).lstrip("/"))
return "http://%s/apps/%s" %(self._getTabletService().robotIp(), subPath.replace(os.path.sep, "/"))

方法１ behavior.xarの位置を上位に移動

方法２
「Show Image」ボックスのPythonコードに以下のようなコードを挿入する。
import os
behaviorPath = os.path.normpath(self.frameManager.getBehaviorPath(self.behaviorId))
# 以下の1行を追加
fragment = fragment.split('/')[1]
else:
def _getAbsoluteUrl(self, partial_url):
import os
subPath = os.path.join(self._getAppName(), os.path.normpath(partial_url).lstrip("/"))
return "http://%s/apps/%s" %(self._getTabletService().robotIp(), subPath.replace(os.path.sep, "/"))

# 追加コード
import time
tabletService = self._getTabletService()
if tabletService:
try:
url = self.getParameter("ImageUrl")
if url == '':
self.logger.error("URL of the image is empty")
if not url.startswith('http'):
url = self._getAbsoluteUrl(url)
# 追加コード
url += "?" + str(time.time())
tabletService.showImage(url)
（注意2）
画像表示のアプリを複数回実行すると、タブレットのWebブラウザが画像をキャッシュしてしまい、
タブレットの内容が更新されないという現象が発生します。
これを回避するために実行時の時間をURLのクエリに含めてあげる方法が有効です。

動画を表示
Demo

Demo
「Play Video」のボックスライブラリを配置
・「html」フォルダを生成し
・動画ファイルをインポート
・動画ファイルを「html」フォルダに格納「Play Video」の参照するファイル名を入力

htmlファイルを表示
Demo

「Show App」を配置
htmlファイルをインポート
「html」フォルダを作成しhtmlファイルを格納する

外部デモサイトを表示
（参考）

（注意）
しかしpepperとタブレットの
Wifiは別に接続が必要

タブレットのWifiをつなぐ必要があります

タブレットのWifiをつなぐには
# ALTabletService の API を使用する
tabletService = self.session().service("ALTabletService")
# Wifiを有効化
tabletService.enableWifi()
# Wifiの設定．securityはwepかwpaかopen，keyは暗号．
tabletService.configureWifi(security, ssid, key)
# Webviewをタブレットに表示する
tabletService.showWebview()
# 表示したいWebページのURLを読み込む
tabletService.loadUrl(url)
タブレットのWifiの設定をする必要があります．
以下のようなpythonのコードで設定します．
Wifiの設定後，タブレットのWebviewを表示し，表示したいWebページのURLを読み込む。

タブレット経由で
動かしてみる

タブレット操作をpepperに渡す
ビヘイビア
ビヘイビア
パッケージ化
アップロード
HTML
HTML
表示
QiMessaging.js
取得
NaoQiAPI
実行実行

QiMessaging?

QiMessaging?
イベント発火
pepper
に接続
動作指示
qimessaging.js

タブレットに表示されている
ボタンをタップしたらしゃべる
Demo

「Show App」を配置
新しいメモリキーをつくる

「Say Text」を配置

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>pepperしゃべってみる</title>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script>
var session = new QiSession();
function sampleButtonClicked() {
session.service("ALMemory").done(function (ALMemory) {
ALMemory.raiseEvent("PepperQiMessaging/fromtablet", "押したね");
});
}
</script>
</head>
<body>
<div align= center >
<div style="font-size: 6em">
これを押すとしゃべります
</div>
<button style="font-size: 6em" type="button" onclick= sampleButtonClicked(); >しゃべるよ</button>
</div>
</body>
</html>
以下のようなhtmlファイルをつくってインポート

今回のデモについて
• Tessel + 温度センサーで温度を取得
• 取得した温度をPubNub（Node.js）に送信
• PubNubから温度のデータを非同期で受信
• 閾値を超えたらQiMessagingのイベントが発火
• SayTextのライブラリが発動

QiMessaging
閾値を超えたら
しゃべる
音声を流す
非同期で
データを送信
データを送信
データ取得
表示
おさらい

カメラ機能を使う

Demo
カメラを撮影し、表示する

「TakePicture」「Show Image」
フォルダに格納
表示

「Take Picture」と「Show Image」を配置

def onLoad(self):
# 追加コード
self.framemanager = ALProxy("ALFrameManager")
self.bIsRunning = False
...
# 追加コード
import os
self.recordFolder = os.path.join(
self.framemanager.getBehaviorPath(self.behaviorId), "../html")
if( self.bIsRunning ):
return
...
onInput_onStartメソッドの先頭に、htmlディレクトリのパスを取得するコードを追加します
「Take Picture」のonLoadメソッドの先頭に ALFrameManager へのアクセス用オブジェクトを生成するコード
を追加

import os
behaviorPath =
os.path.normpath(self.frameManager.getBehaviorPath(self.behaviorId))
# 追加コード: ここから
fragment = fragment.split('/')[1]
else:
パス問題回避のため、おなじみの「Show Image」の_getAppNameメソッドに以下のコード
を追加

「Take Picture」に吐き出すファイル名を入れる
「Show Image」に参照する画像ファイル名を入力
「html」フォルダを作成しhtmlファイルを格納する
「htmlフォルダ」にダミーの画像ファイルを格納

記念撮影完了

• 動かす（モーション）
• タブレットをつかう
• タブレットの操作に応じて動かす
まとめ
これができればpepperでそれなりのことができる！
Web APIとの連携でもっと可能性が拡がります！
しかし

みんなでWeb APIを活用して
もっともっとたのしいpepper体験をつくりましょう

以上、ありがとうございました！

AITCオープンラボ第4回 IoT勉強会〜 Pepper x IoT x Web 〜

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to AITCオープンラボ第4回 IoT勉強会〜 Pepper x IoT x Web 〜

Similar to AITCオープンラボ第4回 IoT勉強会〜 Pepper x IoT x Web 〜 (20)

More from Hirokazu Egashira

More from Hirokazu Egashira (20)

Recently uploaded

Recently uploaded (8)