目的

ちょっと実用的な例として、WifiにつながるArduino系マイコンボードから、温度湿度などの環境情報をARで空間に提示する仕組みを作ってみます。

道具立て

使うマイコンボードは、ESPr® One。
Wifiがついているので、こういう時に、使いやすくて便利な奴です。
APモードで動かし、Hololensからつなぎにいきます。
センサーには、BME280を使います。これは、Amazonで安く買いました。
適当にブレッドボードを使うなどして、SPIでつないで動くようにします。

仕組み

マイコンで取得した温度湿度気圧を、マークアップにしてHTTPサーバーとして出力。Wifi経由でHoloLensからアクセスしてレンダリングします。

プログラム

以下のプログラムを、ArduinoIDEで書き込みました。直近5個の値を保存してグラフにします。HoloLensの方は、5秒間隔で再アクセスするようにUnity側のプログラムを作っています。

server.ino

#include <Wire.h>
#include <SPI.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define WIFI_SSID "orthoverseAP"
#define WIFI_PW "test"

#define BME_SCK 14
#define BME_MISO 12
#define BME_MOSI 13
#define BME_CS 16

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme(BME_CS); // hardware SPI

unsigned long delaytimeBegin;

ESP8266WebServer server(80);
IPAddress ip(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

float temp[5] = {0, 0, 0, 0, 0};
float press[5] = {0, 0, 0, 0, 0};
float hum[5] = {0, 0, 0, 0, 0};
unsigned long timeBegin = 0;

void setup() {
  Serial.begin(9600);
  Serial.println("BME280 test");

  bool status;

  status = bme.begin();
  if (!status) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  } else {
    Serial.println("BME280 found");
  }

  Serial.println("-- Default Test --");
  Serial.println("WiFi initializing");
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(ip, ip, subnet);
  bool apst = WiFi.softAP(WIFI_SSID, WIFI_PW);

  if (apst) {
    Serial.println("Ready WiFi");
  } else {
    Serial.println("Something wrong WiFi");
  }

  server.on("/", []() {
    Serial.println("Access");
    String html = "<homl><head><title>3D Graph of Environment Sensor</title></head><body><a-scene wx=0.5 wy=0.001 wz=0.4>";

    for (int i = 0; i < 5; i++) {
      html += "<a-cylinder height=" + String((temp[i] - 20) / 30) + " r=0.05 x=" + String((i - 2.0) / 10.0) + " y=" + String((temp[i] - 20) / 30) + " z=-0.1 color=red />";
      html += "<a-cylinder height=" + String((press[i] - 1000) / 400000) + " r=0.05 x=" + String((i - 2.0) / 10.0) + " y=" + String((press[i] - 1000) / 400000) + " z=0 color=blue />";
      html += "<a-cylinder height=" + String((hum[i]) / 200) + " r=0.05 x=" + String((i - 2.0) / 10.0) + " y=" + String((hum[i]) / 200) + " z=0.1 color=green />";
    }
    html += "<a-text size=0.1 x=0.25 y=0.1 z=-0.1 color=red>"+ String(temp[4]) +"C</a-text>";
    html += "<a-text size=0.1 x=0.25 y=0.1 z=0    color=blue>"+ String(press[4]/100.0F) +"hPa</a-text>";
    html += "<a-text size=0.1 x=0.25 y=0.1 z=0.1  color=green>"+ String(hum[4]) +"%</a-text>";
    html += "</a-scene></body></homl>";

    server.send(
      200,
      "text/html",
      html);
  });
  Serial.println("WebServer setup done");
  server.begin();
  Serial.println("webserver begin");

  timeBegin = millis();
}


void loop() {
  server.handleClient();

  if (timeBegin < millis() - 5000) {
    for (int i = 0; i < 4; i++) {
      temp[i] = temp[i + 1];
      press[i] = press[i + 1];
      hum[i] = hum[i + 1];
    }
    temp[4] = bme.readTemperature();
    press[4] = bme.readPressure();
    hum[4] = bme.readHumidity();

    timeBegin = millis();
  }
}


void printValues() {
  Serial.print("Temperature = ");
  Serial.print(bme.readTemperature());
  Serial.println(" *C");

  Serial.print("Pressure = ");

  Serial.print(bme.readPressure() / 100.0F);
  Serial.println(" hPa");

  Serial.print("Approx. Altitude = ");
  Serial.print(bme.readAltitude(SEALEVELPRESSURE_HPA));
  Serial.println(" m");

  Serial.print("Humidity = ");
  Serial.print(bme.readHumidity());
  Serial.println(" %");

  Serial.println();
}

結果

ちょっと値の振れ幅が少なくて、面白みのないグラフになっていますが、IoT機器の情報をHoloLensで表示することができました。
あともっと表示のかっこよさを考えないといけないですね。ちなみに、写真は2018年のMakerFaireTokyoで会社のブースで展示していた時のものです。