マイコン使って「IoT機器でも作ってみない？」3日目

今度こそスマホからLEDを光らせてみよう！

前回はESP32上でWebサーバーを建てて、スマホからアクセスできるようにしました。
今回はそのWebサーバーにアクセスして、LEDを光らせてみましょう。

動作原理

void httpHandleRoot() {
  server.send(200, "text/html", "<h1>ESP32 Web Server</h1><div>" + (String)(millis() / 1000) + " seconds elapsed since ESP32 was started.</div>");
}

こちらについて覚えてますか？

これは、/というパスにアクセスされた際に実行される関数です。

そう、関数なんです。

ということは...？
ここにLEDを光らせる処理を入れれば...？

LEDを光らせる

main.ino

  #include <WiFi.h>
  #include <WebServer.h>

+ #define LED_PIN 23

  WebServer server(80);

  const char* ssid = "SSID";
  const char* password = "PASSWORD";

  void setup() {
+   // Pin Initialize
+   pinMode(LED_PIN, OUTPUT);

   ...

    // WebServer Initalize
    server.on("/", httpHandleRoot);
+   server.on("/led_on", httpHandleLedOn);
+   server.on("/led_off", httpHandleLedOff);
    server.onNotFound(httpHandleNotFound);
    server.begin();
    Serial.println("HTTP server started");
  }

  ...

  void httpHandleRoot() {
-   server.send(200, "text/html", "<h1>ESP32 Web Server</h1><div>" + (String)(millis() / 1000) + " seconds elapsed since ESP32 was started.</div>");
+   server.send(200, "text/html", "<button onclick=\"location.replace('/led_on')\">ON</button><br><button onclick=\"location.replace('/led_off')\">OFF</button>");
  }

+ void httpHandleLedOn() {
+   digitalWrite(LED_PIN, HIGH);
+   server.send(200, "text/html", "LED ON<br><a href='/'>BACK</a>");
+ }
+
+ void httpHandleLedOff() {
+   digitalWrite(LED_PIN, LOW);
+   server.send(200, "text/html", "LED OFF<br><a href='/'>BACK</a>");
+ }

  void httpHandleNotFound() {
    server.send(404, "text/html", "<h1>404 Not Found</h1>");
  }

ベースは昨日のコードと同じですが、/led_onと/led_offというパスにアクセスされた際にLEDを光らせたり消したりする処理を追加しました。

スマホからアクセスしてみる

スマホでLEDを光らせるサンプル - YouTube

うまくいきましたね！

まとめ

ね、簡単でしょ？

ESP32を使うことで意外と簡単にIoT電子工作ができるようになります。
例えばサーボモータとか使ったりすれば、簡易SwitchBotとか作れちゃいますね。

では、そのESP32は捨てないで持っておいてほしいです。

というわけで、「IoT機器でも作ってみない？」