[NAOqi2.5.5] Pepperのタブレット上のボタンをタッチすると、Pepperがポージングするアプリを作ってみた

12374 ワード
Pepper tablet Choregraphe button NAOqi button テキストリンク

Pepperからタブレットに何か表示する記事はよく見るが、タブレットからPepperに何かさせる記事があまりなかったので、簡単なメモ程度に記事にしてみました。

1.Pepperのタブレットに表示させるボタンを作成

まずはPepperのタブレットに表示させるボタンをHTMLで作成します。

今回のHTMLのディレクトリ構成は下記を参照ください。

ディレクトリ構成
html/
　├ index.html
　├ images/
　│　└ logo.jpg
　└ lib/
　 　├ css/
　 　│　└ index.css
　 　├ js/
　 　│　└ index.js
　 　└ plugins/
　 　　 　├ jquery/
　 　　 　│　└ jquery.min.js
　 　　　 └ qi/
　 　　　  　└ qi.js

ボタンを表示させるHTMLとCSS、JavaScriptは下記の通りです。

index.html
<!DOCTYPE html>
<html lang='ja'>
    <head>
        <meta charset='UTF-8'>
        <meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0'
            name='viewport' />

        <!--第三者JS-->
        <script type='text/javascript' charset='utf-8' src='lib/plugins/jquery/jquery.min.js'></script>
        <script type='text/javascript' charset='utf-8' src='lib/plugins/qi/qi.js'></script>

        <!--自作CSS-->
        <link type='text/css' rel='stylesheet' href='lib/css/index.css'>
    </head>
    <body>
        <!--レイアウトSTART-->
        <div id='background'>
            <img id='background-images' src='images/logo.jpg'>
        </div>
        <div id='touch-prompt-button'>Pepperがポーズ！</div>
        <!--レイアウトEND-->

        <!--自作JS-->
        <script src='lib/js/index.js'></script>
    </body>
</html>
index.css
body {
    overflow: hidden;
    height: 1067px;
    width: 1707px;
    background: linear-gradient(#f9fcf5, #f3fbfd);
    user-select: none;
    -webkit-user-select: none;
}

/* 背景画像START */
#background {
    height: 1067px;
    width: 1707px;
    text-align: center;
    background-color: #FFFF;
}
#background-images {
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/* 背景画像END */

/* ボタンSTART */
#touch-prompt-button {
    position: absolute;
    top: 800px;
    left: 175px;
    width: 1350px;
    height: 150px;
    background-color: #404040;
    color: #f1f1f1;
    text-align: center;
    font-size: 100px;
    border: 2px solid #f1f1f1;
    border-radius: 10px;
    opacity: 0.75;
    transition: opacity 0.5s;
}
/* ボタンEND */
index.js
$(document).ready(function() {
    QiSession(function(session) {
        session.service('ALMemory').then(function(ALMemory){

            /**
             * <--TOUCH DETECTION-->
             *
             * タッチされた時にPepperにポーズをさせます。
             */
            $('#touch-prompt-button').on('touchstart', function () {
                ALMemory.raiseEvent('samplePJ/tablet/button_touched', 0);
            });
        });
    });
});

index.jsの11行目のsamplePJ/tablet/button_touchedはイベントキーです。
ALMemory.raiseEvent()はPepper側にイベントを飛ばす機能ですので、
タブレットのボタンがタッチされたら、イベントキーの値に0が入ったイベントが発行されます。

2.PepperのタブレットにHTMLを表示させる

次はChoregrapheを使ってPepperのタブレット画面に上記で作成したHTMLファイルを表示させます。

Choregrapheのプロジェクトファイルを名前をつけて保存後、保存したフォルダ内に上記で作成したHTMLフォルダを移動して持ってきてください。
その後Choregrapheをリロードすると下記の画像のようにHTMLフォルダが表示されます。

次に、Show Appボックスをワークスペースにドラック＆ドロップして、左上のonStartに結線します。
これでPepperに接続して再生するとPepperのタブレット上にHTMLが表示されます。

3.タブレットのボタンタッチをChoregrapheで受け取る

index.jsの11行目で記述したように、ボタンをタッチするとsamplePJ/tablet/button_touchedのイベントが発行されます。したがって、Choregraphe側ではこのイベントキーを受け取る処理が必要です。

下記の画像のようにChoregrapheのワークスペース右上に青いプラスマークがあります。

この上でホバーすると「ALMemoryからイベント追加」と説明が出る通り、イベントをここで受けることが可能です。
この青いプラスマークをクリックし、右下の「新しいキーの追加...」をクリックすると、新しいメモリーキーの名前を求められるので、samplePJ/tablet/button_touchedを入力し、OKをクリックしてください。

すると下記のように、ワークスペースにイベントキーが追加されます。
タブレットでボタンをタッチすると、samplePJ/tablet/button_touchedのイベントが発行され、Choregrapheのこの部分から値の0が出力されます。

4.Pepperにポージングさせる。

最後に、Pepperに好きなポーズをさせます。
今回は「Pepperチュートリアル (3)：ポーズを作る」を参考にしてTimelineボックスでポーズ遷移させてみました。
NAOqi2.5.5のため、Timelineボックスはドラック＆ドロップでワークスペースに持ってこれますが、ボックスの内容や機能は大きく異なることはありませんでした。

最終的なChoregrapheは下記のような感じです。

まとめ

イベントキーにもとづいてイベントキーを発行＆受け取りの仕組みを理解できれば、Pepperとタブレットの制御は割とすんなりいけますね！