Arduino
BLE
IoT
M5stack

M5Stackで簡単なスマートミラーを作ってみた

M5Stackで簡単なスマートミラーを作ってみたので、それについて書きます。

経緯

だいぶ前にGoogleの方が作ったスマートミラーが話題になりました。その後もラズパイやArduinoタブレットで同じようなスマートミラーを作ってる方がいましたが、M5Stackを使えばもっとお手軽に作れるのではと思ったので試しに作ってみました。

材料

マジックミラー(フィルムタイプ)

黒いパネル
M5Stack
今回は試作だったので、値段の安いフィルムタイプのマジックミラーを買いました。

作り方と仕組み

まず箱の1面に貼る用にマジックミラーを用意します。
次にマジックミラーの背面に貼る黒いパネルを用意します。パネルの左上あたりをM5Stackの液晶と同サイズ分くり抜きます。
カットしたマジックミラーの背面に黒いパネルを貼ります。このパネルは正面から見たときの透過防止用です。マジックミラーは後ろが真っ暗だと鏡のように見えます。明るいとその部分だけ鏡に浮かび上がったように表示されます。
M5StackのコードをArduino IDEで書き換えて、液晶ディスプレイに時計や天気予報などが表示されるようにします。今回はWifi経由で時刻情報を取得して表示させました。このとき、黒背景に白文字で表示させるのがポイントです。wifi_ssid と wifi_pass の部分は自宅のWifi設定に書き換えてください。

#include <M5Stack.h>
#include <WiFi.h>
#include "esp32-hal-log.h"
#include "config.h"
#include "Time.h"

const char* wifi_ssid = "";
const char* wifi_pass = "";

const uint8_t buttonA_GPIO = 39;
const uint8_t buttonB_GPIO = 38;
const uint8_t buttonC_GPIO = 37;

void setup() {
  Serial.begin(74880);

  pinMode(buttonA_GPIO, INPUT);
  pinMode(buttonB_GPIO, INPUT);
  pinMode(buttonC_GPIO, INPUT);

  Serial.println("Hello, this is ESP32.");

  Serial.printf("Connecting to %s", wifi_ssid);

  WiFi.begin(wifi_ssid, wifi_pass);

  while (WiFi.status() != WL_CONNECTED) {
    Serial.println("wait...");
    delay(1000);
  }

  Serial.println("WiFi connected");

  Time.set_time();

  // initialize the M5Stack object
  M5.begin();

  printTime();
  M5.update();
}

void loop() {
  if (M5.BtnA.wasPressed()) {
    printTime();
  }

  if (M5.BtnB.wasPressed()) {
    M5.Lcd.clear();
    Serial.printf("clear");
  }

  M5.update();
}

void printTime()
{
  time_t t = time(NULL);

  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setTextColor(WHITE);

  struct tm tm;
  char *dayofweek[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};
  localtime_r(&t, &tm);

  M5.Lcd.setCursor(10, 10);
  M5.Lcd.setTextSize(6);
  M5.Lcd.printf("%02d:%02d:%02d\n", tm.tm_hour, tm.tm_min, tm.tm_sec);

  M5.Lcd.setCursor(10, 100);
  M5.Lcd.setTextSize(5);
  M5.Lcd.printf("%s\n", dayofweek[tm.tm_wday]);

  M5.Lcd.setCursor(10, 180);
  M5.Lcd.setTextSize(5);
  M5.Lcd.printf("%02d/%02d\n", tm.tm_mon + 1, tm.tm_mday);
}

M5Stackを黒いパネルの後ろに固定します。くり抜いた場所からM5Stackの液晶が見えるようにします。
マジックミラーを箱の片面に固定します。

マジックミラーを正面から見たときに、黒いパネルの部分とM5Stackの黒背景の部分が鏡のように表示されて、白文字の部分だけマジックミラーに浮かび上がったように表示されてたら完成です。