WiFiアクセスポイントでデバイス間の近距離遠隔操作方法（AtomS3使用）

#include <M5AtomS3.h>
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <HTTPClient.h>

WebServer server(80); // サーバー設定、ポート80（デフォルト）で接続
HTTPClient http;      // HTTPクライアントを実現するためのクラス

// ピン番号設定
#define OUTPUT_PIN0 2 // 出力ピン

// アクセスポイント設定
const char ssid_AP[] = "ATOMS3-01"; // SSID
const char pass_AP[] = "11111111";  // パスワード(8文字以上)

//変数宣言
bool state = false; // 本体ボタン状態格納用

// 関数 *********************************************************
// wifi接続実行 --------------------------------------------
void StartAP() {
  // アクセスポイント開始関数
  WiFi.softAP(ssid_AP, pass_AP);  // ソフトAP設定
  // アクセスポイントのアドレス初期値「192.168.4.1」を変更する場合は以下で指定
  // IPAddress ip(192, 168, 4, 3);            // IPアドレスを指定
  // IPAddress gateway(192, 168, 4, 1);       // ゲートウェイを指定
  // IPAddress subnet(255, 255, 255, 0);      // サブネットマスクを指定
  // WiFi.softAPConfig(ip, gateway, subnet);  // IPアドレスを設定

  // WiFi接続結果表示
  M5.Lcd.fillScreen(0);     // 表示クリア
  M5.Lcd.setTextFont(2);    // フォント
  M5.Lcd.setCursor(0, 0);   // 表示開始位置左上角（X,Y）
  M5.Lcd.print(" SSID= ");  // SSID表示
  M5.Lcd.println(ssid_AP);
  M5.Lcd.print(" PASS= ");  // パスワード表示
  M5.Lcd.println(pass_AP);
  M5.Lcd.print(" IP= ");    // IPアドレス表示
  M5.Lcd.println(WiFi.softAPIP());
}

// ルート(IPアドレス)アクセス時の応答関数 -----------------------------------
void handleRoot() {
  server.send(200, "text/html", "200 Root Access!");  // レスポンス200（通信成功）を返す
  Serial.println("Access!");
  M5.Lcd.setCursor(5, 65);            // 表示開始位置左上角（X,Y）
  M5.Lcd.println("    Access!    ");  
}
// エラー（Webページが見つからない）時の応答関数
void handleNotFound() {
  server.send(404, "text/plain", "404 Not Found!"); // 404エラーを返す
}

// (IPアドレス)/on アクセス時の応答関数
void relayOn() {
  server.send(200, "text/html", "200 Relay ON!");   // レスポンス200を返す
  Serial.println("Relay ON");
  M5.Lcd.setCursor(5, 65);          // 表示開始位置左上角（X,Y）
  M5.Lcd.println("Relay ON   ");
  digitalWrite(OUTPUT_PIN0, HIGH);  // リレーON出力
}
// (IPアドレス)/off アクセス時の応答関数
void relayOff() {
  server.send(200, "text/html", "200 Relay OFF!");  //レスポンス200を返す
  Serial.println("Relay OFF");
  M5.Lcd.setCursor(5, 65);          // 表示開始位置左上角（X,Y）
  M5.Lcd.println("Relay OFF");
  digitalWrite(OUTPUT_PIN0, LOW);   // リレーOFF出力
}

// 初期設定 **************************************************
void setup() {
  auto cfg = M5.config(); // 本体初期設定
  AtomS3.begin(cfg, true);

  Serial.begin(9600); // USBシリアル通信初期化
  delay(1000);        // シリアル出力開始待ち
  Serial.println("AtomS3 Wi-Fi softAP!"); // シリアル通信出力

  // 液晶初期設定
  M5.Lcd.fillScreen(0);       // 表示クリア
  M5.Lcd.setRotation(2);      // 画面向き設定（USB位置基準 0：上/ 1：左/ 2：下/ 3：右）
  M5.Lcd.setTextFont(4);      // フォント
  M5.Lcd.setTextColor(WHITE, BLACK);  // 文字色,背景色

  // 本体をアクセスポイントに設定
  StartAP();  // アクセスポイント開始関数呼び出し

  // サーバー設定
  server.on("/", handleRoot);         // ルートアクセス時の応答関数を設定
  server.on("/on/", relayOn);         // /onアクセス時の応答関数を設定
  server.on("/off/", relayOff);       // /offアクセス時の応答関数を設定
  server.onNotFound(handleNotFound);  // Webページが見つからない時の応答関数を設定
  server.begin();                     // Webサーバー開始

  // 出力設定
  pinMode(OUTPUT_PIN0, OUTPUT);   // 外部出力
  digitalWrite(OUTPUT_PIN0, LOW); // 出力初期化

  M5.Lcd.setTextFont(4);  // フォント変更
}

// メイン *********************************************************
void loop() {
  server.handleClient();  //クライアントからのアクセス確認
  delay(100); // 遅延時間
}

#include <M5AtomS3.h>     // ヘッダーファイル準備（別途FastLEDライブラリもインストール）
#include <WiFi.h>
#include <HTTPClient.h>

HTTPClient http;  // HTTPクライアントを使用するための準備

// FastLEDライブラリでフルカラーLEDを使用する設定
CRGB dispColor(uint8_t r, uint8_t g, uint8_t b) {
  return (CRGB)((r << 16) | (g << 8) | b);
}
// 変数宣言
const char ssid[] = "ATOMS3-01";    // 接続先アクセスポイントのSSID
const char password[] = "11111111"; // 接続先アクセスポイントのパスワード
String ap_url = "192.168.4.1";      // POST先IPアドレス
bool state = false;   // 本体ボタン状態保持用

// POST処理関数 ***********************************************
String httpPost(String add_url) {
  String payload;                         // レスポンスデータ格納用
  http.begin("http://" + ap_url + add_url); // http通信を送信先アドレスを指定して開始
  int httpCode = http.POST("");           // 指定したアドレスへPOST実行（送信データがあればここで指定）
  if (httpCode == HTTP_CODE_OK) {         // httpコードが200なら通信成功
    payload = http.getString();           // レスポンスデータを取得
    Serial.printf("payload: %S\n", payload.c_str()); // レスポンスデータ表示
  } else {                                // httpコードが200以外なら（通信失敗）
    Serial.println("[POST]failed to send to server!!");  // エラー表示
  }
  http.end(); // http通信終了

  return payload; // レスポンスデータを返す
}

// 初期設定 -------------------------------------------------
void setup() {
  auto cfg = M5.config(); // 本体初期設定
  AtomS3.begin(cfg, true);
  Serial.begin(9600); // USBシリアル通信初期化

  // Wi-Fi接続
  WiFi.begin(ssid, password);             // アクセスポイントへの接続開始
  Serial.println("AP Search!"); // シリアル通信出力
  while (WiFi.status() != WL_CONNECTED) { // 接続完了まで待機
    delay(1000);
  }
  Serial.println("Connected to AP");
  Serial.printf("Destination SSID= %S\n", ssid);     // 接続先SSID
  Serial.printf("Destination PASS= %S\n", password); // 接続先パスワード
  Serial.print("IP= ");
  Serial.println(WiFi.localIP());  // 自分のIPアドレス

  AtomS3.dis.drawpix(dispColor(50, 50, 50));  // 本体LED色指定
}

// メイン ---------------------------------------------------
void loop() {
  M5.update();  // ボタン状態初期化
  // 本体ボタン処理
  if (M5.BtnA.wasPressed()) {  // ボタンが押されていれば
    state = !state;           // ボタン状態反転
    String payload;           // レスポンスデータ格納用
    // リレーON指令処理
    if (state == true) {      // ボタン状態がtrueなら
      Serial.println("POST Relay ON");
      payload = httpPost("/on/");               // ポスト送信を実行しレスポンスを取得
      if (payload == "200 Relay ON!") {         // レスポンスデータが一致すれば
        AtomS3.dis.drawpix(dispColor(0, 100, 200)); // 本体LED色指定（青）
      } else {                                  // 一致しなければエラー
        AtomS3.dis.drawpix(dispColor(200, 0, 0));   // 本体LED色指定（赤）
      }
    }
    // リレーOFF指令処理
    if (state == false) {     // ボタン状態がfalseなら
      Serial.println("POST Relay OFF");
      payload = httpPost("/off/");              // ポスト送信を実行しレスポンスを取得
      if (payload == "200 Relay OFF!") {        // レスポンスデータが一致すれば
        AtomS3.dis.drawpix(dispColor(200, 100, 0)); // 本体LED色指定（オレンジ）
      } else {                                  // 一致しなければエラー
        AtomS3.dis.drawpix(dispColor(200, 0, 0));   // 本体LED色指定（赤）
      }
    }
  }
  AtomS3.dis.show();  // 本体フルカラーLED出力
  delay(100);     // 遅延時間
}

// アクセスポイント設定
const char ssid_AP[] = "ATOMS3-01"; // SSID
const char pass_AP[] = "11111111";  // パスワード(8文字以上)

// 初期設定
void setup() {
  WiFi.softAP(ssid_AP, pass_AP);    // アクセスポイントとして設定
}

// アクセスポイントのアドレスを「192.168.4.3」にする場合は以下で指定
  IPAddress ip(192, 168, 4, 3);            // IPアドレスを指定
  IPAddress gateway(192, 168, 4, 1);       // ゲートウェイを指定
  IPAddress subnet(255, 255, 255, 0);      // サブネットマスクを指定
  WiFi.softAPConfig(ip, gateway, subnet);  // IPアドレスを設定

// ルート(IPアドレス)アクセス時の応答関数 -----------------------------------
void handleRoot() {
  server.send(200, "text/html", "200 Root Access!");  // レスポンス200（通信成功）を返す
  USBSerial.println("Access!");
  M5.Lcd.setCursor(5, 65);            // 表示開始位置左上角（X,Y）
  M5.Lcd.println("    Access!    ");  
}
// エラー（Webページが見つからない）時の応答関数
void handleNotFound() {
  server.send(404, "text/plain", "404 Not Found!"); // 404エラーを返す
}

// (IPアドレス)/on アクセス時の応答関数
void relayOn() {
  server.send(200, "text/html", "200 Relay ON!");   // レスポンス200を返す
  USBSerial.println("Relay ON");
  M5.Lcd.setCursor(5, 65);          // 表示開始位置左上角（X,Y）
  M5.Lcd.println("Relay ON   ");
  digitalWrite(OUTPUT_PIN0, HIGH);  // リレーON出力
}
// (IPアドレス)/off アクセス時の応答関数
void relayOff() {
  server.send(200, "text/html", "200 Relay OFF!");  //レスポンス200を返す
  USBSerial.println("Relay OFF");
  M5.Lcd.setCursor(5, 65);          // 表示開始位置左上角（X,Y）
  M5.Lcd.println("Relay OFF");
  digitalWrite(OUTPUT_PIN0, LOW);   // リレーOFF出力
}

// 初期設定 -----------------------------------------------
void setup() { 
  server.on("/", handleRoot);         // ルートアクセス時の応答関数を設定
  server.on("/on/", relayOn);         // /onアクセス時の応答関数を設定
  server.on("/off/", relayOff);       // /offアクセス時の応答関数を設定
  server.onNotFound(handleNotFound);  // Webページが見つからない時の応答関数を設定
  server.begin();                     // Webサーバー開始
}

http.begin("http://192.168.4.1/"); // http通信を送信先アドレスを指定して実行
http.POST("");  // 指定したアドレスへPOST実行（送信データがあれば「""」の代わりにデータを指定）

// データ送信例
String data = "key1=value1&key2=value2"; // 送信するデータ
http.begin("http://192.168.4.1/");
http.addHeader("Content-Type", "application/x-www-form-urlencoded"); // データ形式を指定
int httpResponseCode = http.POST(data);

// Wi-Fi接続設定
const char ssid[] = "ATOMS3-01";    // 接続先アクセスポイントのSSID
const char password[] = "11111111"; // 接続先アクセスポイントのパスワード

// 初期設定
void setup() {
  WiFi.begin(ssid, password);             // アクセスポイントへの接続開始
  USBSerial.println("AP Search!");
  while (WiFi.status() != WL_CONNECTED) { // 接続完了まで待機
    delay(1000);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>ON/OFF buttons</title>
    <script>
      function turnOn() {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://192.168.4.1/on/", true);
        xhttp.send();
      }

      function turnOff() {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://192.168.4.1/off/", true);
        xhttp.send();
      }
    </script>
  </head>
  <body>
    <button onclick="turnOn()">ON</button>
    <button onclick="turnOff()">OFF</button>
  </body>
</html>