LEGOとATOM LiteでDIYリモコンカー 5 (IOTなLチカ編)

　IOTでLチカしてみます。コード例があるのでそちらを使います。
　Arduino IDEの「File」->「Example」->[Examples for ESP32 Pico Kit]内->「WiFi」->「SimpleWiFiServer」です。選ぶとコード例が出てきます。以下、コメントを削除したものを載せます。

#include <WiFi.h>

const char* ssid     = "yourssid";
const char* password = "yourpasswd";

WiFiServer server(80);

void setup()
{
    Serial.begin(115200);
    pinMode(5, OUTPUT);

    delay(10);

    Serial.println();
    Serial.println();
    Serial.print("Connecting to ");
    Serial.println(ssid);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("WiFi connected.");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());
    
    server.begin();

}

int value = 0;

void loop(){
 WiFiClient client = server.available();

  if (client) {
    Serial.println("New Client.");
    String currentLine = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        if (c == '\n') {

          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 5 on.<br>");
            client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 5 off.<br>");

            client.println();

            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }

        if (currentLine.endsWith("GET /H")) {
          digitalWrite(5, HIGH);
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(5, LOW);
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }
}

　「WiFi.h」をincludeしています。setup関数は少し長めですが、機能的な部分で役割を果たしているのは、以下の2行です。

WiFi.begin(ssid, password);
server.begin();

「WiFi.begin」でWiFi接続し、「server.begin」でクライアントからの接続待ちとなります。

const char* ssid     = "yourssid";
const char* password = "yourpasswd";

　それぞれの環境のWiFiへの接続情報はここに入れておきます。

　loop関数ではクライアントからのアクセスを処理しています。あれこれ書いてありますが、なるべく構造部分を取り出すと以下のような感じです。

String currentLine = "";  
char c = client.read();
Serial.write(c);
if (c == '\n') {
 if (currentLine.length() == 0) {
  client.println("HTTP/1.1 200 OK");
  client.println("Content-type:text/html");
 }
 if (currentLine.endsWith("GET /H")) {
  digitalWrite(5, HIGH);
 }
 if (currentLine.endsWith("GET /L")) {
  digitalWrite(5, LOW);
 }
}

client.stop();

　client.readでクライアントからのデータ取得します。そのデータを元に場合分けしてclient.printlnでクライアントへ応答を返しています。抜き出した部分には入れていませんが、コード例だと、

client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 5 on.<br>");
client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 5 off.<br>");

　がhttpで返ってきてクライアントの手元のブラウザ的なものに表示されます。「the LED on pin 5 on」の方をブラウザ的なものでクリックすると、ATOM Liteへ「H」がデータとして送付されます。

if (currentLine.endsWith("GET /H")) {
 digitalWrite(5, HIGH);
}

　「H」がATOM Liteへ送付されると「digitalWrite(5, HIGH);」となりLチカとなります。

　無事にWiFiにアクセスできた場合、「Serial.println(WiFi.localIP());」でシリアルモニターにIPアドレスが表示させます。そのIPアドレスへ同じWiFi環境からブラウザ的なものでIPアドレス直打ちでアクセスをするとブラウザ的なものからIOTなLチカできる感じです。

　コード例はGPIO5をオンにする、というものなので、LED抵抗とブレッドボード、ジャンパワイヤなどで試せる場合はそのまま使う、でも良いと思います。

　今回はATOM Liteの本体LEDで手動チカチカしてみたいと思います。以前の回で示したコードを埋め込んでいく感じです。

haseharu.hatenablog.com

　さきほどのコード例のコメントを削除して、ATOM Liteの本体LEDを手動チカチカ部分を追記したコードがこちらです。

#include <M5Atom.h> //added
#include <WiFi.h>

const char* ssid     = "yourssid";
const char* password = "yourpasswd";

WiFiServer server(80);

void setup()
{
  M5.begin(false, false, true); //added
  
  Serial.begin(115200);
    //pinMode(5, OUTPUT);
    delay(10);

    Serial.println();
    Serial.println();
    Serial.print("Connecting to ");
    Serial.println(ssid);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("WiFi connected.");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());
    
    server.begin();

}

int value = 0;

void loop(){
 WiFiClient client = server.available();

  if (client) {
    Serial.println("New Client.");
    String currentLine = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        if (c == '\n') {

          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            //client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 5 on.<br>");
            //client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 5 off.<br>");

            client.print("Click <a href=\"/H\">here</a> to turn the LED on.<br>"); //added
            client.print("Click <a href=\"/L\">here</a> to turn the LED off.<br>"); //added
            
            client.println();

            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }

        if (currentLine.endsWith("GET /H")) {
          //digitalWrite(5, HIGH);
          M5.dis.drawpix(0, 0xff0000); // Green
          delay(1000);
        
        }
        if (currentLine.endsWith("GET /L")) {
          //digitalWrite(5, LOW);
          M5.dis.drawpix(0, 0x000000); //Off
          delay(1000);
        }
      }
    }

    client.stop();
    Serial.println("Client Disconnected.");
  }
}

　うまくいくとこんな感じです。シリアルモニターでATOM Liteに割り振られたIPアドレスを確認してからブラウザ的なものに打ち込んでください。

youtu.be

　ここまでで、ほぼ完成だと思うのですが、IPアドレスをシリアルモニターで確認する、ままだとケーブルをつなぎっぱなしになります。IPアドレスを固定して取得させれば、シリアルモニターでIPアドレスを確認する必要なくなるため、外部電源をつないで固定IPアドレスをブラウザ的なものに直うちすれば動作可能です。固定IPアドレスにさせるには以下の設定を追加します。

IPAddress ip(192,168,xx,xx); // your IPaddress
IPAddress subnet(255,255,255,xxx); // your subnet

　をincludeの下あたりで設定します。あとはsetup関数に、

WiFi.config(ip,ip,subnet);

　を追記します。追記場所は「WiFi.begin()」よりも先にする必要があります。第2引数はgatewayを設定する箇所なので、もし設定が必要であれば「IPAddress gateway(X,X,X,X)」を追記してカスタマイズする必要があります。さきほどの固定しないバージョンで動作させたときに割り振られたIPアドレスとして固定して上げれば良いと思います。

　ここまででほぼ要素は揃ったと思います。このあと続けると長いので、一旦区切って次回でおしまいにしようかと思います。

　なお、今回、コード例を使いましたが、他にもたくさんあるので活用できると思います。また、今回のブログではコード、と書いていますが、Arduinoの世界では「スケッチ」と表現します。
　
　それからいまさらの補足ですが、ハンダ付とブレッドボードと分けて書いてきましたが、実際のところはブレッドボードでプロトタイプ的に作って、最終的に目指している動きをすることを確認してから、基板などにハンダ付をして作り込んでいく、という流れが一般的でやりやすい流れかと思います。ブレッドボードやジャンパワイヤはいくつあっても困らないです。ブレッドボードは今回使っている小さいもの以外にも、横につながっているラインがある中くらいのもの、

akizukidenshi.com

　さらに長めのもの、

akizukidenshi.com

　あとESP32 DevKitで、

akizukidenshi.com

　WiFiとかIOT的なプロトタイプ作成をバンバン試したいぞ、という人は穴が多い6穴版の、

akizukidenshi.com

　あたりが良いです。というかブレッドボードは個人的につい欲しくなる部品の一つで、上記のものを複数持っていて上記以外はあまり使ったことがないので比較していません。比較できるのは値段くらいで他と比べると安めの価格帯の商品だと思います。