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パッケージ化

アップロード

実行

HTMLHTML

ブラウザが立ち上がる

取得

表示


画像を表示

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("\\/")) # 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, "/"))


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


方法２「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, "/"))


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のクエリに含めてあげる方法が有効です。


動画を表示

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に渡す


パッケージ化

アップロード

HTMLHTML

表示

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 ...

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 へのアクセス用オブジェクトを生成するコードを追加


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メソッドに以下のコードを追加


「Take Picture」に吐き出すファイル名を入れる

「Show Image」に参照する画像ファイル名を入力

「html」フォルダを作成しhtmlファイルを格納する

「htmlフォルダ」にダミーの画像ファイルを格納


記念撮影完了


• 動かす（モーション） • タブレットをつかう • タブレットの操作に応じて動かす

まとめ

これができればpepperでそれなりのことができる！

Web APIとの連携でもっと可能性が拡がります！

しかし


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


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


aitcオープンラボ 第4回 iot勉強会 〜 pepper x iot x web 〜

Technology

aitcオープンラボ第4回 iot勉強会〜 pepper x iot x web 〜