Pepperで写真撮影&胸のディスプレイに表示 -Choregraphe2.5.5版-

Pepperのカメラを使って写真を撮影し
Pepperの胸のディスプレイ上に撮影した写真を表示させる手順
+ おまけ（Show Imageボックスの使い方）　です

※ はじめに ※
あくまでも簡易的な実装方法です。
エラーの発生等は考慮していません:bow_tone1:

---

## 1. 写真を撮影する
#### 1-1. Take Pictureボックスを配置
Sening > Vision > Camera Actions > Take Picture
![スクリーンショット 2019-12-25 21.59.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/e39787ec-c67b-c810-1404-871458454204.png)


#### 1-2. htmlフォルダを作成
*アプリ内に写真を保存する`html`フォルダを作成します。*

Windowsの場合はエクスプローラ
Macの場合はFinderで
現在作成中のアプリのフォルダを開きます。

アプリフォルダ内直下に`html`フォルダを新規作成します。
また、`html`フォルダの中になんでもいいのでダミーファイルを用意します。
※ 空フォルダのままではアプリをPepperに送信する際に
「何もファイルが無いならこのフォルダ要らないやつでしょ」と判断されて(?)
Pepper上には作成してくれません。
![スクリーンショット 2019-12-28 21.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/f1912908-92e8-4a7d-bb20-f1e1f001b5bb.png)

choregrapheに戻り、下図のようなダイアログが表示されたら
「全てはい」を選択します。
![スクリーンショット 2019-12-28 22.09.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/c93b069a-0312-d4d7-d780-e4c5bc77a466.png)




#### 1-3. 撮った写真の保存先を`html`フォルダに  
*1-2. で作成した`html`フォルダ内に写真が保存されるように変更します。*

1-1. で配置した Take Pictureボックスをダブルクリックしてコードを追記します。　　

```python:  
    def onLoad(self):
        self.bIsRunning = False
        try:
            self.photoCapture = ALProxy( "ALPhotoCapture" )
            # 追加ここから
            self.framemanager = ALProxy("ALFrameManager")
            # 追加ここまで
```
```python
    def onInput_onStart(self):
        # 追加ここから
        import os
        self.recordFolder = os.path.join(
                self.framemanager.getBehaviorPath(self.behaviorId), "../html")
        # 追加ここまで
        if( self.bIsRunning ):
            return
```
これで
変更前: `(ホームディレクトリ)/recordings/cameras/` 
↓ 
変更後: `(実行中のアプリのディレクトリ)/html/`
となります。

#### 1-4. 写真のファイル名を確認
Take Pictureボックスの設定を開き
「File Name」を確認します。
![スクリーンショット 2019-12-25 22.33.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/5a840bd2-9897-55bd-361f-fa0590830dcd.png)

`(実行中のアプリのディレクトリ)/html/image(.jpg)`として保存されることがわかります。　　



---

## 2. 胸のディスプレイに写真を表示する
#### 2-1. Show Imageボックスを配置
Multimedia > Tablet > Show Image
![スクリーンショット 2019-12-28 22.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/83aeb9f9-1a81-a2d8-2423-170e5568295e.png)

#### 2-2. ファイル名を指定
Show Imageボックスの設定を開き
「ImageUrl」に写真のファイル名を拡張子付きで入力します。
![スクリーンショット 2019-12-28 22.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/55e3f3dc-6b97-eebb-fa52-2dd0fa3283da.png)

---

## 3. 動作確認
アプリをPepperで実行し、写真撮影とディスプレイ表示ができることを確認します。

---

## 4. 複数回アプリを実行しても画像が更新されるようにする
*最初に撮影した画像がwebブラウザ上にキャッシュされてしまい、
以降別の写真を撮影して表示させようとしても
最初に撮影した写真が表示されてしまうという事象を回避します。*

#### 4-1. 画像URLにクエリパラメータを追加する
*画像URLにクエリパラメータとして現在時刻の文字列を追加することで
webブラウザに「新しい画像だよ！」と伝えます。*

2-1. で配置した Show Imageボックスをダブルクリックしてコードを2箇所追記します。　

```python:  
    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)
            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()

```

#### 4-2. 動作確認
複数回アプリを実行してみて正常に写真が更新されることを確認します。

---


## おまけ1：画像を表示して次の処理へ

***（注意）Show Imageボックスは(画像表示処理が成功した場合)
`onStopped`出力は発火しません。***

そのため次の処理に簡単につなげる方法は下図の通りです。
![スクリーンショット 2019-12-28 23.03.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/1c635b27-9242-459c-afe2-dfea09530ebe.png)
※ マーケットにリリースするアプリの場合は
画像が表示されたかどうかチェック・エラーの場合も考慮する必要があると思います。
そもそもパフォーマンス等も考慮してShow Imageボックスは使わずに
jsで画像を出し分けたりしますよね:v_tone1:

---

## おまけ2：画像の非表示
ディスプレイ上から画像を消したい場合は
Show Imageボックスの`onHideImage`入力を発火させます。
![スクリーンショット 2019-12-28 23.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403136/7b152335-3f8b-d67e-0341-b6ddcaf97985.png)


---  
以上:vulcan_tone1:
もっとスマートな書き方作り方あるかもしれませんが
動作確認できないのでとりあえずこれで:baby_tone1: 

参考：[Pepperで画像を撮影してタブレットに画像表示](https://qiita.com/Atelier-Akihabara/items/833e49a079788af55afb)