M5Stackにスマホからon,offしてみる

Wak-tech
ESP32を使ってスマホからLチカ(LED点滅)する【webserver】 | Wak-tech スマホと同じWi-Fiに接続し、特定のIPアドレスをブラウザ上に入れればアクセスできます。そこでボタンを押すと、即座にLEDが点灯している様子が分かりますね! 今回はこれ...

Wak-teckさんの記事を参考にスマホからM5Stackの画面でon,offできるようにしてみた。

/*********
Rui Santos
Complete project details at http://randomnerdtutorials.com
*********/

// Wi-Fiライブラリをインポート
#include
#include

// Wi-Fi接続情報を入力
const char* ssid = "{ここにssid}";
const char* password = "{ここにpasword}";

// ウェブサーバーをポート80で開始
WiFiServer server(80);

// HTTPリクエストを保存しておく変数
String header;

// 状態を保存する変数の宣言
String displayState = "off";

void setup() {
// ssidとpasswordを用いてWi-Fiに接続
M5.begin();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// IPアドレスを出力し、webserverをスタート
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}

void loop(){
WiFiClient client = server.available(); //クライアント(スマホやPCなど)がつながっているかどうかをclientに出力

if (client) { // クライアントが来たとき
Serial.println("New Client.");
String currentLine = ""; // クライアントからくるデータを格納する変数
while (client.connected()) { // クライアントがつながっている間、以下をループ
if (client.available()) { // クライアントからデータが来ているとき
char c = client.read(); // データを読み込み
Serial.write(c); // 届いたデータをシリアルモニタに出力
header += c;
if (c == '\n') { // 届いたデータが改行コードだった時
// もし現在の行が空白ならば、この改行コードのみ受け取る
// つまりHTTPリクエストの終わりなので、レスポンスを返す
if (currentLine.length() == 0) {
// HTTPヘッダは(HTTP/1.1 200 OK)のようなステータスコードから始まる
// 次にコンテントタイプを送信。今回はhtml形式なので以下のようにする
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();

// リクエストに従ってGPIOをスイッチする
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
displayState = "on";
M5.Lcd.println("on");
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
displayState = "off";
M5.Lcd.println("off");
}

// htmlを表示
client.println("");client.println("");
client.println("");
// ON/OFFボタンのためのCSS
client.println("

");

// ページ本体(bodyタグ内)
client.println("

ESP32 Web Server

");

// 現在のピンの状態と、オンオフ用のボタンを出力
client.println("

GPIO 26 - State " + displayState + "

");
// output26Stateがオフなら、ONにするボタンを表示
if (displayState=="off") {
client.println("

ON

");
} else {
client.println("

OFF

");
}

// HTTPレスポンスの最後は改行で終了
client.println();
// whileループの終了
break;
} else { // 改行コードを取得したら、currentLineをリセット
currentLine = "";
}
} else if (c != '\r') { // 改行以外の何かしらのコードが来ているとき
currentLine += c; // currentLineに追加
}
}
}
// ヘッダーをリセット
header = "";
// 接続をリセット
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
目次

スマホの画面はこんな感じ

うまくいかなかったところ

M5StackはESP32でできているので、5GHz帯のSSIDは使えない、2.4GHz帯のSSIDを使用しなきゃだめ
※5GHz帯の ssid には「A」を付ける慣例がある

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次