【Freenove ESP32-S3-WROOM CAMボード】ブラウザやスマホからLチカのONOFF

Toggle

前回までのLEDチカ

前回までは、Arduino IDEをWindows11パソコンにインストールして、開発環境を整えて

https://pctips.jp/iot/esp32-start/

LEDをチカチカさせるまでをやりました。

https://pctips.jp/iot/esp32-led-onoff/

今回は、

ココがポイント

インターネットブラウザから、LEDをONーOFFする

方法をやってみました。

ブラウザからONOFFできるプログラム

ESP32とLEDの回路は、前回と同じでGPIOの１４番ピンを使ってONOFFさせます。

プログラムの方は、下記のサイトから丸パクリになります。

エンジニア初心者でも大丈夫！ESP32を使った携帯からのリモートLチカ(Chat GPTで作成）

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

// WiFiの接続情報
const char* ssid = "Your SSID0";
const char* password = "Your PASSWORD";

// LEDが接続されているピン
const int ledPin = 25;
bool ledState = false;  // LEDの状態（オンまたはオフ）

WebServer server(80);

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

  // WiFiに接続
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }

  Serial.println("Connected to WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  // Webサーバーのルート設定
  server.on("/", HTTP_GET, handleRoot);
  server.on("/on", HTTP_GET, handleOn);
  server.on("/off", HTTP_GET, handleOff);

  // LEDを制御するためのピン設定
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, ledState);

  // Webサーバーの起動
  server.begin();
  Serial.println("Web server started!");
}

void loop() {
  // クライアントのリクエストを処理
  server.handleClient();
}

void handleRoot() {
  // HTMLおよびCSSの生成
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
  html += "<link rel=\"icon\" href=\"data:,\">";
  // CSS to style the on/off buttons
  html += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}";
  html += ".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;";
  html += "text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style>";
  html += "</head><body>";
  html += "<h1>ESP32 LED Control</h1>";
  html += "<p>LED Status: ";
  html += (ledState) ? "ON" : "OFF";
  html += "</p>";

  // LEDをオンまたはオフにするためのボタン
  if (ledState) {
    html += "<a href='/off'><button class='button'>Turn OFF</button></a>";
  } else {
    html += "<a href='/on'><button class='button'>Turn ON</button></a>";
  }

  html += "</body></html>";
  // クライアントにHTMLを送信
  server.send(200, "text/html", html);
}

void handleOn() {
  // LEDをオンにしてルートにリダイレクト
  ledState = true;
  digitalWrite(ledPin, HIGH);
  server.sendHeader("Location", "/");
  server.send(303);
}

void handleOff() {
  // LEDをオフにしてルートにリダイレクト
  ledState = false;
  digitalWrite(ledPin, LOW);
  server.sendHeader("Location", "/");
  server.send(303);
}

WiFiの設定と、LEDが接続されているピンを変更しただけになります。

WiFi経由でONOFFテスト

プログラムをESP32へ書き込みしてから、ツール＞＞シリアルモニタを起動して、リセットボタンを押しました。

IPアドレスが表示されましたので、パソコンからそのIPアドレスでアクセスすると下記のようになりLEDのONOFFができるようになりました。

固定IPにしてスマホからアクセス

IPを固定にするには、下記の部分を追加するだけです。

// 固定IP情報
const IPAddress ip(192,168,1,60);
const IPAddress gateway(192, 168, 1, 1);
const IPAddress subnet(255,255,255,0);
const IPAddress dns1(192, 168, 1, 1);

// 固定IPの設定
if (!WiFi.config(ip,gateway,subnet,dns1)){
Serial.println("Failed to configure!");
}