aitcオープンラボ 第4回 iot勉強会 〜 pepper x iot x web 〜
Post on 09-Aug-2015
241 Views
Preview:
TRANSCRIPT
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
Copyright @ html5j Robot Organization. All right reserved.
html5j ロボット部について
月1回を目処に 勉強会/ハッカソン/ワークショップ などを行い上記について考えていきます。
ぜひご参加ください! (登壇できるかたもぜひご協力お願いしますm(_ _)m)
「ロボットとWeb」 で何ができるかをみんなで学び、考えていくhtml5jの部活動です。
Copyright @ html5j Robot Organization. All right reserved.
Copyright @ html5j Robot Organization. All right reserved.
センサーで応じた値に応じて pepperの挙動をつくる
本日のお題
Copyright @ html5j Robot Organization. All right reserved.
スキーム
表示 しゃべる
Copyright @ html5j Robot Organization. All right reserved.
• 動かす • タブレットをつかう • タブレットの操作に応じて動かす
pepperの基本
Copyright @ html5j Robot Organization. All right reserved.
とりあえず動かしてみる
Copyright @ html5j Robot Organization. All right reserved.
pepperを動かす原理
ビヘイビア ビヘイビア
NAOqi APIパッケージ化
アップロード
実行
Copyright @ html5j Robot Organization. All right reserved.
ちょっと しゃべらせてみましょう
Demo
Copyright @ html5j Robot Organization. All right reserved.
タブレットを使う
Copyright @ html5j Robot Organization. All right reserved.
タブレットの仕様
項目 内 容
ディスプレイ 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
Copyright @ html5j Robot Organization. All right reserved.
タブレット使う原理
ビヘイビアビヘイビア
AL TabletServiceパッケージ化
アップロード
実行
HTMLHTML
ブラウザが立ち上がる
取得
表示
Copyright @ html5j Robot Organization. All right reserved.
画像を表示
Demo
Copyright @ html5j Robot Organization. All right reserved.
「Show Image」のボックスライブラリを配置
「html」フォルダを作成
Copyright @ html5j Robot Organization. All right reserved.
画像ファイルをインポート
「Show Image」に参照する画像ファイルを入力
「フォルダ」に画像ファイルを格納
Copyright @ html5j Robot Organization. All right reserved.
(注意)
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が見つからなくてエラーになる
Copyright @ html5j Robot Organization. All right reserved.
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("\\/")) # We create TabletService here in order to avoid # problems with connections and disconnections of the tablet during the life of the application return "http://%s/apps/%s" %(self._getTabletService().robotIp(), subPath.replace(os.path.sep, "/"))
Copyright @ html5j Robot Organization. All right reserved.
方法1 behavior.xarの位置を上位に移動
Copyright @ html5j Robot Organization. All right reserved.
方法2 「Show Image」ボックスのPythonコードに以下のようなコードを挿入する。
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] # 以下の1行を追加 fragment = fragment.split('/')[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("\\/")) # We create TabletService here in order to avoid # problems with connections and disconnections of the tablet during the life of the application return "http://%s/apps/%s" %(self._getTabletService().robotIp(), subPath.replace(os.path.sep, "/"))
Copyright @ html5j Robot Organization. All right reserved.
def onInput_onStart(self): # 追加コード import time # 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) # 追加コード url += "?" + str(time.time()) tabletService.showImage(url)
(注意2)画像表示のアプリを複数回実行すると、タブレットのWebブラウザが画像をキャッシュしてしまい、タブレットの内容が更新されないという現象が発生します。 これを回避するために実行時の時間をURLのクエリに含めてあげる方法が有効です。
Copyright @ html5j Robot Organization. All right reserved.
動画を表示
Demo
Copyright @ html5j Robot Organization. All right reserved.
Demo
「Play Video」のボックスライブラリを配置
・「html」フォルダを生成し ・動画ファイルをインポート ・動画ファイルを「html」フォルダに格納 「Play Video」の参照するファイル名を入力
Copyright @ html5j Robot Organization. All right reserved.
htmlファイルを表示
Demo
Copyright @ html5j Robot Organization. All right reserved.
「Show App」を配置
htmlファイルをインポート
「html」フォルダを作成しhtmlファイルを格納する
Copyright @ html5j Robot Organization. All right reserved.
外部デモサイトを表示
(参考)
Copyright @ html5j Robot Organization. All right reserved.
(注意) しかしpepperとタブレットの
Wifiは別に接続が必要
Copyright @ html5j Robot Organization. All right reserved.
タブレットのWifiをつなぐ必要があります
Copyright @ html5j Robot Organization. All right reserved.
タブレットの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を読み込む。
Copyright @ html5j Robot Organization. All right reserved.
タブレット経由で 動かしてみる
Copyright @ html5j Robot Organization. All right reserved.
タブレット操作をpepperに渡す
ビヘイビアビヘイビア
パッケージ化
アップロード
HTMLHTML
表示
QiMessaging.js
取得
NaoQiAPI
実行 実行
Copyright @ html5j Robot Organization. All right reserved.
QiMessaging?
Copyright @ html5j Robot Organization. All right reserved.
QiMessaging?
イベント発火
pepper に接続
動作指示
qimessaging.js
Copyright @ html5j Robot Organization. All right reserved.
タブレットに表示されている ボタンをタップしたらしゃべる
Demo
Copyright @ html5j Robot Organization. All right reserved.
「Show App」を配置
新しいメモリキーをつくる
Copyright @ html5j Robot Organization. All right reserved.
「Say Text」を配置
Copyright @ html5j Robot Organization. All right reserved.
<!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ファイルをつくってインポート
Copyright @ html5j Robot Organization. All right reserved.
今回のデモについて
• Tessel + 温度センサーで温度を取得 • 取得した温度をPubNub(Node.js)に送信 • PubNubから温度のデータを非同期で受信 • 閾値を超えたらQiMessagingのイベントが発火 • SayTextのライブラリが発動
Copyright @ html5j Robot Organization. All right reserved.
QiMessaging閾値を超えたら
しゃべる 音声を流す
非同期で データを送信
データを送信
データ取得
表示
おさらい
Copyright @ html5j Robot Organization. All right reserved.
カメラ機能を使う
Copyright @ html5j Robot Organization. All right reserved.
Demo
カメラを撮影し、表示する
Copyright @ html5j Robot Organization. All right reserved.
「TakePicture」「Show Image」
フォルダに格納
表示
Copyright @ html5j Robot Organization. All right reserved.
「Take Picture」と「Show Image」を配置
Copyright @ html5j Robot Organization. All right reserved.
def onLoad(self): # 追加コード self.framemanager = ALProxy("ALFrameManager") self.bIsRunning = False ...
def onInput_onStart(self): # 追加コード import os self.recordFolder = os.path.join( self.framemanager.getBehaviorPath(self.behaviorId), "../html") if( self.bIsRunning ): return ...
onInput_onStartメソッドの先頭に、htmlディレクトリのパスを取得するコードを追加します
「Take Picture」のonLoadメソッドの先頭に ALFrameManager へのアクセス用オブジェクトを生成するコードを追加
Copyright @ html5j Robot Organization. All right reserved.
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] # 追加コード: ここから fragment = fragment.split('/')[1] return fragment.lstrip("\\/") else: self.logger.warning("No ALFrameManager")
パス問題回避のため、おなじみの「Show Image」の_getAppNameメソッドに以下のコードを追加
Copyright @ html5j Robot Organization. All right reserved.
「Take Picture」に吐き出すファイル名を入れる
「Show Image」に参照する画像ファイル名を入力
「html」フォルダを作成しhtmlファイルを格納する
「htmlフォルダ」にダミーの画像ファイルを格納
Copyright @ html5j Robot Organization. All right reserved.
記念撮影完了
Copyright @ html5j Robot Organization. All right reserved.
• 動かす(モーション) • タブレットをつかう • タブレットの操作に応じて動かす
まとめ
これができればpepperでそれなりのことができる!
Web APIとの連携でもっと可能性が拡がります!
しかし
Copyright @ html5j Robot Organization. All right reserved.
みんなでWeb APIを活用して もっともっとたのしいpepper体験をつくりましょう
Copyright @ html5j Robot Organization. All right reserved.
以上、ありがとうございました!
Copyright @ html5j Robot Organization. All right reserved.
top related