M5StickC Plus 応用編2 ＜WiFi ＋フルカラーLED＞

前回最後に書いた通り、WiFiなどと連携してフルカラーLEDを制御していきたいと思います。

前提条件

前回記事の続きなので

部品
回路

に関しては同じものを使用します。

試す方はそちらに書いてある通りに回路を組んでおいてください。

プログラムと動作内容

#include <M5StickCPlus.h>
#include <WebServer.h>

int r_pin = 0;
int g_pin = 25;
int b_pin = 26;
double hz = 12000.0; //周波数
uint8_t bit = 8;     //分解能

////IPアドレス固定用
IPAddress ip(192, 168, ***, ***); //ip
IPAddress subnet(255, 255, 255, 0);
////
const char* ssid = "**********";
const char* password = "**********";
WebServer server(80);

void setup() {
  M5.begin();
  M5.Lcd.setTextSize(1);
  M5.Lcd.println("Connecting to");
  M5.Lcd.println(ssid);
  WiFi.config(ip, ip, subnet);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    M5.Lcd.print(".");
  }
  M5.Lcd.println("");
  M5.Lcd.println("WiFi connected.");
  M5.Lcd.println("IP address");
  M5.Lcd.println(WiFi.localIP());

  server.on("/", [](){ 
    String message = "Hello World <br>";
    if(server.args() > 0){
      message += "paramater is <br>";
      for(int i = 0; i < server.args(); i++){
        String argName = server.argName(i);
        String arg = server.arg(i);
        message += argName + ": " + arg + "<br>";
      }
    }
    server.send(200, "text/html",  message);
  });

  server.on("/setColor", [](){ 
    if(server.args() > 0){
      for(int i = 0; i < server.args(); i++){
        String argName = server.argName(i);
        String arg = server.arg(i);
        if(argName == "r"){
          ledcWrite(0, arg.toInt());
        }
        if(argName == "g"){
          ledcWrite(1, arg.toInt());
        }
        if(argName == "b"){
          ledcWrite(2, arg.toInt());
        }
      }
    }
    server.send(200, "text/html", "OK");
  }); 

  server.begin();

  pinMode(r_pin, OUTPUT);
  pinMode(g_pin, OUTPUT);
  pinMode(b_pin, OUTPUT);

  ledcSetup(0, hz, bit);
  ledcSetup(1, hz, bit);
  ledcSetup(2, hz, bit);
  
  ledcAttachPin(r_pin, 0);
  ledcAttachPin(g_pin, 1);
  ledcAttachPin(b_pin, 2);

  ledcWrite(0, 256);
  ledcWrite(1, 256);
  ledcWrite(2, 256);

}

void loop() {
    server.handleClient();
}

まずは、各自で実行できるように書き換える必要があります。

////IPアドレス固定用
IPAddress ip(192, 168, ***, ***); //ip
IPAddress subnet(255, 255, 255, 0);
////

固定したいIPアドレスになるように***を書き変えておいてください。

特に固定したくないという方は、

IPAddress ip(192, 168, ***, ***); //ip

IPAddress subnet(255, 255, 255, 0);

WiFi.config(ip, ip, subnet);

これら3行を見つけてコメントアウトしてください。

次に、

const char* ssid = "**********";          //各自の環境で使っているWiFiの名前に書き変えてください
const char* password = "*********";  //各自の環境で使っているWiFiのパスワードに書き変えてください

**********の部分を消してそれぞれコメントで書かれている内容に書き変えてください。

その後、M5StickC Plusに書き込むことで動作します。

注意：書き込み時にフルカラーLEDが赤く光ると思います。これはGPIO０をブートモードの切り替えなど、内部の構造と仕様によって起こることなので気にしないでください。記事内で紹介された範囲では起こりませんが、GPIO０の使い方によっては正常に動作しないことがあるので注意しましょう。参考サイトを以下に載せておきます。

trac.switch-science.com

動作確認はM5StickC PlusのLCDで確認できます。

SSIDとIPアドレスが赤線で隠されていますが、各環境で違ったものが表示されると思います。

これが表示されればここまではOKです。

そしたら同じWiFiに接続されているPCやスマートフォンのブラウザからLCDの最後に書かれているIPアドレスにアクセスしてみましょう。

http://192.168.***.***

***はLCDに表示されたものに書き変えてアクセスしてみてください。

そうすると、ブラウザ（Chrome）で以下のように表示されると思います。

こうなっていれば完璧に動作していることがわかります。

次に同じように以下にアクセスしてみましょう。

http://192.168.***.***/?r=256&g=0&b=0

こうなると思います。

一つ前にアクセスした時のURLに

/?r=256&g=0&b=0

が足されたことによって文字が追加されました。

paramater is
r: 256
g: 0
b: 0

URLにクエリストリングが追加されるとそのすべてを返してくれます。

クエリストリングを認識できていることが確認できます。

最後に前回の記事通りにフルカラーLEDが接続できていることを確認して以下にアクセスしてみましょう。

http://192.168.***.***/setColor?r=256&g=0&b=0

そうすると、接続されているフルカラーLEDが光ると思います。

今回は/setColorというURIにアクセスしているため処理が変わります。

パラメータ名に設定されているのはr, g, bの三つでそれぞれの色に対応しています。

それぞれのパラメータに設定してLEDの変化が得られるのは０～256の数字になります。

これはPWM出力で設定した8bitの分解能で表現できる値の幅になります。

パラメータで設定した値がそのままPWM出力になるように処理しているからです。

なのでそれぞれのパラメータの値を０～256の間で変化させてアクセスしなおすとLEDの色が変わるので試してみてください。

以上でプログラムの動作内容になります。

プログラムの重要な箇所

以下で説明する箇所以外は前回と変わっていなかったり、WiFiへのアクセスやそれらの設定、LCDへの表示が主なものなので説明は省きます。

http://192.168.***.***

や

http://192.168.***.***/?r=256&g=0&b=0

にアクセスしたときの動作として設定しているのが以下になります。

  server.on("/", [](){ 
    String message = "Hello World <br>";
    if(server.args() > 0){
      message += "paramater is <br>";
      for(int i = 0; i < server.args(); i++){
        String argName = server.argName(i);
        String arg = server.arg(i);
        message += argName + ": " + arg + "<br>";
      }
    }
    server.send(200, "text/html",  message);
  });

"/"にアクセスした場合はHello Worldと表示した後

if(server.args() > 0)でクエリストリングがあるか否かを判断し、あった場合にはそれらすべてを表示する処理になります。

次に

http://192.168.***.***/setColor?r=256&g=0&b=0

にアクセスしたときの動作として設定しているのが以下になります。

  server.on("/setColor", [](){ 
    if(server.args() > 0){
      for(int i = 0; i < server.args(); i++){
        String argName = server.argName(i);
        String arg = server.arg(i);
        if(argName == "r"){
          ledcWrite(0, arg.toInt());
        }
        if(argName == "g"){
          ledcWrite(1, arg.toInt());
        }
        if(argName == "b"){
          ledcWrite(2, arg.toInt());
        }
      }
    }
    server.send(200, "text/html", "OK");
  });

"/setColor"にアクセスした場合はOKと表示した後

フルカラーLEDに出力するPWMの値をクエリストリングから取得して出力しています。

これらのように

server.onの第一引数に好きなURI名を設定して第二引数にアクセスしたときの処理を記述することによってさまざまな動作をさせることが出来ます。

server.on("/", [](){ 
    //処理を書く
  });

例えば

  server.on("/purple", [](){ 
    ledcWrite(0, 0);
    ledcWrite(1, 256);
    ledcWrite(2, 0);
    server.send(200, "text/html", "purple");
  });

これを同じようにsetup関数内に追記して

http://192.168.***.***/purple

にアクセスするとLEDが紫に点灯することがわかります。

これにserver.argNameやserver.argなどを組み合わせることでいろいろなs処理が出来るので試してみましょう。

まとめ

esp8266と比べるとWiFiへのアクセス速度がかなり速いことが体感できた。
GROVEに使われているピン2本も応用して使えそう(タッチセンサとして使えるかなど試してみたい)
親指サイズでサーバとして動作してバッテリや6軸センサ、GPIOが使えるのでいろいろ応用できそう

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その２

- 7月 20, 2019

このブログを検索

HaLake Magazine