***********************************************************
webコントローラを使ってみよう
***********************************************************

| webコンソールのcontrollerページにアクセスすることで、ブラウザ上からAKARIの基本機能の制御を試すことが出来ます。
| ここではAKARIのwebコントローラを使ってみましよう。

==========================================================
解説動画
==========================================================

| 以降の解説を動画にしたものです。こちらもご参考ください。

..  youtube:: ftSFXSRMhjU

===========================================================
必要なサービスを立ち上げる
===========================================================

| :doc:`access` の手順でwebコンソールへアクセスしたら、コントローラを使うために必要なサービスを立ち上げていきます。

1. Servicesページを開く

  | 左のページリストから、Servicesを選択し、開きます。

.. image:: ../images/tutorial_web/service_02.jpg
    :width: 600px

2. AkariRpcServerを立ち上げる

  | もしAkariRpcServerが立ち上がっていなかったら、実行ボタンをクリックして立ち上げます。
  | STATUSがRUNNINGに変わればOKです。
  | **初回実行時やアップデート配信時は、起動に時間がかかりますのでしばらくお待ちください**

.. hint::

  | AkariRpcServerはAPI実行のため毎回立ち上げる必要があるので、AutoStartのスイッチをONにしておくことを推奨します。
  | これを実行しておくと、以降AKARIの電源投入時に自動でAkariRpcServerが立ち上がるようになります。

.. image:: ../images/tutorial_web/controller_01.jpg
    :width: 600px

3. ControllerServerを立ち上げる。

  | ControllerServerの実行ボタンをクリックして立ち上げます。
  | STATUSがRUNNINGに変わればOKです。
  | **初回実行時やアップデート配信時は、起動に時間がかかりますのでしばらくお待ちください**

.. image:: ../images/tutorial_web/controller_02.jpg
    :width: 600px

===========================================================
webコントローラにアクセスする
===========================================================

左のページリストから、Controllerを選択し、開きます。

.. image:: ../images/tutorial_web/controller_03.jpg
    :width: 600px

===========================================================
機能の説明
===========================================================

webコントローラのページの見方と機能について説明します。


.. image:: ../images/tutorial_web/controller_04.jpg
    :width: 600px

Camera
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: ../images/tutorial_web/controller_05.jpg
    :width: 500px

| AKARIのヘッドのカメラの映像をストリーミングできます。
| 下記の3種類のボタンを押すことでカメラウインドウの映像が切り替わります。

- NONE

  ストリーミングを停止します。

- RGB

  RGBカメラの画像をストリーミングします。

- DEPTH

  ステレオカメラによるDepthの画像をストリーミングします。

- FACEDETECTION

  顔認識の結果をオーバーレイしたRGB画像をストリーミングします。

- OBJECTDETECTION

  mobilenetによる物体認識の結果をオーバーレイしたRGB画像をストリーミングします。

Sensor input
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: ../images/tutorial_web/controller_06.jpg
    :width: 500px

センサからの各入力値を表示します。

- Button A-C

  | M5前面のボタンA-Cの値を表示します。
  | ボタンを押すと値が1に変わります。

- din0, din1, ain0

  ヘッドGPIOのdin0, din1, ain0の入力値を表示します。

- Temperature

  環境センサの取得した温度を表示します。単位は[℃]です。

- Pressure

  環境センサの取得した圧力を表示します。単位は[Pa]です。

- Brightness

  環境センサの取得した明るさを4096段階で出力します。値が小さいほど明るくなります。

Joint
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: ../images/tutorial_web/controller_07.jpg
    :width: 500px

ヘッドのサーボ制御を行います。

1. Servoトグル

  サーボのON、OFFを行います。ONにするとヘッドのサーボがロックされます。

2. ジョイステック

  内側の円をドラッグして動かすことで、ヘッドの上下左右の向きを動かすことが出来ます。

3. 速度設定スライダー&ボックス

  サーボの目標速度をスライダーもしくはテキストボックスへの数値入力で変更することが出来ます。

4. 加速度設定スライダー&ボックス

  サーボの目標加速度をスライダーもしくはテキストボックスへの数値入力で変更することが出来ます。

5. Pan位置設定スライダー&ボックス

  Pan(左右方向)のヘッドの目標位置をスライダーもしくはテキストボックスへの数値入力で指令することが出来ます。
  またCurrent欄に現在位置を表示します。

6. Tilt位置設定スライダー&ボックス

  Tilt(上下方向)のヘッドの目標位置をスライダーもしくはテキストボックスへの数値入力で指令することが出来ます。
  またCurrent欄に現在位置を表示します。

7. SENDボタン

  指定したヘッドの目標位置への移動を実行します。

8. CURRENTボタン

  目標位置設定を現在位置にリセットします。

9. RESETボタン

  サーボを初期位置に移動します。

Pinout
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: ../images/tutorial_web/controller_08.jpg
    :width: 400px

ヘッドのGPIO出力を制御します。

1. dout0, dout1トグル

  ヘッドのdout出力をON,OFFします。

2. pwmout0スライダー&ボックス

  ヘッドのpwmout0出力の目標値を設定します。

3. SENDボタン

  ヘッドのpwmout0出力の変更を実行します。

4. RESETボタン

  dout0, dout1,pwmout0出力を初期化します。

Display
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

.. image:: ../images/tutorial_web/controller_09.jpg
    :width: 400px

ディスプレイの文字出力を制御します。

1. テキストボックス

  表示する文字列を入力します。

2. FontColor, DisplayColorキャンバス

  カラーキャンバスから、文字色及び背景色を選択できます。

3. FontSizeスライダー

  表示する文字のサイズを指定できます。

4. SENDボタン

  文字の表示を実行します。

5. RESETボタン

  画面表示をリセットし、白一色に戻します。


| このControllerで、AKARIの基本機能はほぼ全て試すことができます。
| 次はwebコンソールからサービスを作成してみましょう。

:doc:`service` へ進む

:doc:`access` へ戻る