WiFi経由で操作するロボットを作成 3

次に、ESPr Developer をWebサーバとして動作させるためのスケッチを作成します。


クライアント(スマホ)からWebサーバ(ESPr Developer)にアクセスすると、サーバはクライアントに、前回の記事で作ったホームページ(HTMLファイル)を表示させます。
クライアント側で、ホームページ上のボタンをタップすると、その要求がサーバに送られ、サーバはそれに従って、各モータを動かすための処理を行います。

 

スケッチは以下のような感じです。Arduino IDEのサンプルスケッチ「Arduino」>「ファイル」>「スケッチ例」>「ESP8266WiFi」>「WiFiAccessPoint」を元にして作成しました。

// ライブラリの読み込み
#include <ESP8266WiFi.h>               // ESP8266でWiFi接続するためのライブラリ
#include <ESP8266WebServer.h>          // ESP8266をWebサーバにするためのライブラリ
#include <FS.h>                        // ESP8266のフラッシュメモリに読み書きするためのライブラリ

// 変数の定義
const char *ssid = "robot04";          // ESP8266に立ち上げるWebサーバのSSID(適当に決める)
const char *password = "testdata";     // ESP8266に立ち上げるWebサーバのパスワード(適当に決める)
const char *path_root = "/index.html"; // ESP8266のフラッシュメモリに格納しているHTMLファイル名を指定
uint8_t buf[16384];                    // 読み出したHTMLファイルの内容を格納するバッファ

// ピンの割り当て(ピン番号を、分かりやすいピン名に置き換える)
#define A_AIN1 15
#define A_AIN2 13
#define A_BIN1 12
#define A_BIN2 14
#define B_AIN1 4                       // B_XXXは未使用
#define B_AIN2 5
#define B_BIN1 2

ESP8266WebServer server(80);           // Webサーバの設定

void handleRoot() {                    // クライアントから「/」リクエストを受信した時に実行する関数
  if (server.method() == HTTP_POST) {  // POSTで受信した場合、以下を実行
    String s = server.arg("FLAG");     // FLAGの内容に応じて、各ピンのHIGH/LOWを切り替える
    if (s == "FL") {
      digitalWrite(A_AIN1, HIGH);
      digitalWrite(A_AIN2, LOW);
      digitalWrite(A_BIN1, HIGH);
      digitalWrite(A_BIN2, HIGH);
    } else if (s == "FF") {
      digitalWrite(A_AIN1, HIGH);
      digitalWrite(A_AIN2, LOW);
      digitalWrite(A_BIN1, HIGH);
      digitalWrite(A_BIN2, LOW);
    } else if (s == "FR") {
      digitalWrite(A_AIN1, HIGH);
      digitalWrite(A_AIN2, HIGH);
      digitalWrite(A_BIN1, HIGH);
      digitalWrite(A_BIN2, LOW);
    } else if (s == "SS") {
      digitalWrite(A_AIN1, HIGH);
      digitalWrite(A_AIN2, HIGH);
      digitalWrite(A_BIN1, HIGH);
      digitalWrite(A_BIN2, HIGH);
    } else if (s == "BL") {
      digitalWrite(A_AIN1, LOW);
      digitalWrite(A_AIN2, HIGH);
      digitalWrite(A_BIN1, HIGH);
      digitalWrite(A_BIN2, HIGH);
    } else if (s == "BB") {
      digitalWrite(A_AIN1, LOW);
      digitalWrite(A_AIN2, HIGH);
      digitalWrite(A_BIN1, LOW);
      digitalWrite(A_BIN2, HIGH);
    } else if (s == "BR") {
      digitalWrite(A_AIN1, HIGH);
      digitalWrite(A_AIN2, HIGH);
      digitalWrite(A_BIN1, LOW);
      digitalWrite(A_BIN2, HIGH);
    } else {
      digitalWrite(A_AIN1, LOW);
      digitalWrite(A_AIN2, LOW);
      digitalWrite(A_BIN1, LOW);
      digitalWrite(A_BIN2, LOW);
    }
  }
  server.send(200, "text/html", (char *)buf); // クライアントにHTMLファイルを送信
}

void setup() {
  pinMode(A_AIN1, OUTPUT);
  pinMode(A_AIN2, OUTPUT);
  pinMode(A_BIN1, OUTPUT);
  pinMode(A_BIN2, OUTPUT);
  pinMode(B_AIN1, OUTPUT);             // B_XXXは未使用
  pinMode(B_AIN2, OUTPUT);
  pinMode(B_BIN1, OUTPUT);
  digitalWrite(A_AIN1, LOW);
  digitalWrite(A_AIN2, LOW);
  digitalWrite(A_BIN1, LOW);
  digitalWrite(A_BIN2, LOW);
  digitalWrite(B_AIN1, LOW);           // B_XXXは未使用
  digitalWrite(B_AIN2, LOW);
  digitalWrite(B_BIN1, LOW);

  SPIFFS.begin();                      // ファイルシステムを起動
  File htmlFile = SPIFFS.open(path_root, "r"); // 読み込みモードでHTMLファイルを開く
  size_t size = htmlFile.size();       // HTMLファイルのサイズを確認
  htmlFile.read(buf, size);            // HTMLファイルの内容をバッファに読み込む
  htmlFile.close();                    // HTMLファイルを閉じる

  WiFi.softAP(ssid, password);         // 設定したSSIDとパスワードでWiFiアクセスポイントを起動
  IPAddress myIP = WiFi.softAPIP();
  delay(500);

  server.on("/", handleRoot);          // クライアントからの要求に対して、実行する関数を指定
  server.begin();                      // Webサーバを起動
}

void loop() {
  server.handleClient();               // クライアントから受け取ったリクエストを処理
}

ESPr DeveloperのFlashメモリへデータを書き込むためには、Arduino IDEに、SPIFFSファイルシステムアップローダーというものをインストールしておきます。
インストール後、スケッチと同じ場所に「data」フォルダを作り、この下に、前回の記事で作成したHTMLファイルを置きます。

この状態で「Arduino」>「ツール」>「ESP8266 Sketch Data Upload」を実行すると、HTMLファイルをFlashメモリにアップロードすることができます。なお、シリアルモニタを開いている状態ではアップロードできないようです。

この後、スケッチもESPr Developerに書き込みます。これで、ソフトウエアの準備は完了です。

 

つづきは こちら