HoloLensとESPr® DeveloperでLチカ

HoloLensとESPr® DeveloperとArduinoを使ってLチカを行います。
すごく贅沢なLチカになっていますよｗ

![logo.png](https://qiita-image-store.s3.amazonaws.com/0/154355/c1a9f25a-9233-d16f-93d6-d0c9f5c1b968.png)

# 必要なもの
* [Microsoft HoloLens](https://www.microsoft.com/ja-jp/hololens) ¥333,800
* [ESPr® Developer（ピンソケット実装済）](https://www.switch-science.com/catalog/2652/) ¥2,580
* [ミニブレッドボード](http://akizukidenshi.com/catalog/g/gP-05155/) ¥130
* [ジャンパワイヤ (オス-オス)](https://www.switch-science.com/catalog/57/) ¥492
* [LED](https://www.switch-science.com/catalog/1153/) ¥82

合計: ¥337,084
ほとんどHoloLens代。。。

# 開発環境
* [Unity 5.6.1f1](https://unity3d.com/jp/get-unity/download)
* [Milkcocoa 1.3.0](https://mlkcca.com/)
* [HoloToolkit-Unity 1.5.7](https://github.com/Microsoft/HoloToolkit-Unity/releases)

今回利用したものは[Milkcocoa](https://mlkcca.com/)というBaaSサービスです。
IoTデバイス・スマートフォン・PC間で簡単にリアルタイムデータのやり取りが
出来るようになるクラウドプラットフォームです。
１日の利用制限はありますが、基本無料で利用出来ます。

#Milkcocoa登録
こちらにアクセスして(https://mlkcca.com/)無料登録を行います
![s100.png](https://qiita-image-store.s3.amazonaws.com/0/154355/969736ea-09ca-595b-dea7-24d64742d8af.png)

無料登録完了後、アプリを新規作成します
名前は今回 `HoloESPr` にしました。

![s102.png](https://qiita-image-store.s3.amazonaws.com/0/154355/2216f4ca-746f-3752-112b-45d5169785f7.png)

![s103.png](https://qiita-image-store.s3.amazonaws.com/0/154355/f66bdbaf-df38-ad47-8563-e02590bbfbd4.png)

ダッシュボードにある`app_id`をメモしておきましょう

![s104.png](https://qiita-image-store.s3.amazonaws.com/0/154355/7be31465-a9b7-c2d7-28dd-2adee1fdcf72.png)

# Unity設定
HoloLensの詳しい設定は割愛します。
`HoloLensCamera`と`InputManager`、`CursorWithFeedback`をヒエラルキービューに設置します。
今回スイッチを設置したいので、無料のAssetsを使用しました。
https://www.assetstore.unity3d.com/jp/#!/content/38257

![s123.png](https://qiita-image-store.s3.amazonaws.com/0/154355/d8979abf-1e7b-6114-540f-3d3d82a802eb.png)

# スクリプト新規作成
スクリプトを新規作成します。
今回は`TestScripts.cs`を作成しました。

```TestScripts.cs
using HoloToolkit.Unity.InputModule;
using UnityEngine;

public class TestScripts : MonoBehaviour, IInputClickHandler
{

#if UNITY_UWP
  private Milkcocoa.Milkcocoa Milkcocoa;
#endif

  bool switchFlg = false;

  // Use this for initialization
  void Start () {
  Debug.Log("Start");
#if UNITY_UWP
  Milkcocoa = new Milkcocoa.Milkcocoa("XXXXXXXXXXXXXXX.mlkcca.com"); // メモしたapp_idを入力します
  Milkcocoa.dataStore("message").push(new { v = 0 });
#endif
  }

  // Update is called once per frame
  void Update () {

  }

  public void OnInputClicked(InputClickedEventData eventData)
  {
      Debug.Log("OnInputClicked");
      switchFlg = !switchFlg;

#if UNITY_UWP
      // クリック時にpush
      if (switchFlg) {
          Milkcocoa.dataStore("message").push(new { v = 1 });
      } else {
          Milkcocoa.dataStore("message").push(new { v = 0 });
      }
#endif
  }
}
```

作成したスクリプトをSwitchにアタッチします
![s125.png](https://qiita-image-store.s3.amazonaws.com/0/154355/d4c76f38-0dd4-57c8-9b14-65500ddb789b.png)

#HoloLens設定
PlayerSettingは`.NET4.6`を選択します
![s120.png](https://qiita-image-store.s3.amazonaws.com/0/154355/3c653ba4-ca19-7275-084c-6535d1e37e40.png)

Internet権限を付け忘れて、最初全然うまく行かなかった。。。
![s122.png](https://qiita-image-store.s3.amazonaws.com/0/154355/3563c78c-c01d-1bf9-783b-82349ebe27d7.png)

UWP Build Typeを`D3D`にして、Unity C# Projectsにチェックを入れて、Bluildしましょう。
![s121.png](https://qiita-image-store.s3.amazonaws.com/0/154355/41fe5fc5-1ef5-85ec-bb42-7e7cf223bc2e.png)

#Visual StudioでMilkcocoaをインストールする
buildして出来た`.slnファイル`を起動しましょう。
ツール-NuGetパッケージマネージャー-パッケージマネージャーコンソールをクリック

![s130.png](https://qiita-image-store.s3.amazonaws.com/0/154355/3bf7ae13-d2ab-8a6f-359f-34c075e721cc.png)

`Install-Package Milkcocoa`を入力します
![s131.png](https://qiita-image-store.s3.amazonaws.com/0/154355/d655539f-50b0-db33-421e-0d856bf6023e.png)

インストールが正しくされたかを確認します。
![s132.png](https://qiita-image-store.s3.amazonaws.com/0/154355/31b1aa16-57b5-f1eb-9f6f-baa0876bd897.png)

#HoloLens起動
ここまで出来れば起動してみましょう
Onボタンをクリックすると、Milkcocoaに書き込まれると思います。
![s140.png](https://qiita-image-store.s3.amazonaws.com/0/154355/deadd1fa-4291-6628-e363-d6a9485d6117.png)

Milkcocoaのダッシュボードから確認します。
![s141.png](https://qiita-image-store.s3.amazonaws.com/0/154355/ed15c9f9-025b-3223-8e1a-8cbdd96d567a.png)

#Arduino設定
次はArduinoの設定を行います。
こちらからSDKをダウンロードしましょう。

https://github.com/milk-cocoa/Milkcocoa_ESP8266_SDK

ダウンロードしたzipをArduinoにインストールします。
![スクリーンショット 2017-06-05 14.42.52.png](https://qiita-image-store.s3.amazonaws.com/0/154355/0934f06c-f2d3-0829-1459-bbc6d6a522d8.png)

具体的なコードのサンプルは下記の通りです。

```c
#include <Milkcocoa.h>

#include <ESP8266WiFi.h>

/************************* Your Milkcocoa Setup *********************************/

#define MILKCOCOA_APP_ID      "xxxxxxxxxxxxx"
#define MILKCOCOA_DATASTORE   "message"

/************* Milkcocoa Setup (you don't need to change this!) ******************/

#define MILKCOCOA_SERVERPORT  1883

//ご自分のルーターのSSIDを入力してください
const char* ssid = "XXXXXXX";
//ご自分のルーターのパスワード
const char* password = "XXXXXXXXXX";

// 使用するLEDのPin番号
int LedPin = 14; 

// Create an ESP8266 WiFiClient class to connect to the MQTT server.
WiFiClient client;

const char MQTT_SERVER[] PROGMEM    = MILKCOCOA_APP_ID ".mlkcca.com";
const char MQTT_CLIENTID[] PROGMEM  = __TIME__ MILKCOCOA_APP_ID;

// Milkcocoa設定
Milkcocoa milkcocoa = Milkcocoa(&client, MQTT_SERVER, MILKCOCOA_SERVERPORT, MILKCOCOA_APP_ID, MQTT_CLIENTID);

void onpush(DataElement *elem) {
  Serial.println("onpush");
  Serial.println(elem->getInt("v"));

  if (elem->getInt("v") == 1) {
    Serial.println("disp=1");

    // LED点灯
    digitalWrite(LedPin, HIGH);

  } else {
    Serial.println("disp=0");    

    // LED消灯
    digitalWrite(LedPin, LOW);
  }
};

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);

  // connect to wifi.
  WiFi.begin(ssid, password);
  WiFi.mode(WIFI_STA); // omajinai
  Serial.print("connecting");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(10000);
  }
  Serial.println();
  Serial.print("connected: ");
  Serial.println(WiFi.localIP());

  // LED設定
  pinMode(LedPin, OUTPUT);

  // Milkcocoa初期化
  Serial.println( milkcocoa.on(MILKCOCOA_DATASTORE, "push", onpush) );
  
}

void loop() {
  // ↓ 必ず必要
  milkcocoa.loop();

  delay(1000);
}
```

これでマイコンボードに書き込んでみます。
HoloLensを起動して、ESPrDeveloperも起動します。
するとLチカがうまくいくはずです。
![movie.gif](https://qiita-image-store.s3.amazonaws.com/0/154355/3d0e19ef-5ec8-7dbd-55a0-dccb8b61f8d2.gif)

#まとめ
非常に簡単にHoloLensと連携が出来ました。
応用すれば、実際のライト等に3Dオブジェクトを配置してHoloLens上からライトの明るさを調整するということも可能かと思います。
では、素敵なHoloLensライフを！