ESP-WROVER-KIT-VB(VE)の基本的な使い方　～Arduino IDE編～

※ESP-WROVER-KIT-VEはVBの後継品です。CPUのバージョンがRev.0から3へアップグレードされています（ESP32-D0WD-V3 Dual Core）。その他の仕様はVBとVEは変わりません。本ページではVBと記載されていますが使用方法、プログラム方法等は全く同じです。

ESP32-WROVERはPSRAMを搭載しており高機能です。1つのモジュール内にWi-FiとBluetooth LE及びBluetooth Classicの通信機能が含まれています。32ビットマイコンとしても優秀です。デュアルコア最高240MHzで動作します。

ESP-WROVER-KIT-VBはUSB接続するだけで使え手軽にESP32の世界を楽しめます。さらにRGB LEDやmicroSDカードスロット、3.2インチLCD等の周辺回路を搭載しておりすぐに実験や検証が楽しめます。

開発環境は大きく2つあります。1つはArduino IDEを使う方法。もう1つはESP-IDFという専用の開発環境を使用する方法です。本ページでは簡単にArduino IDEで使う方法を紹介します。

■Arduino IDEを使う方法　～IDEの準備

まずArduino IDEを使えように準備しましょう。Arduino IDEはバージョンが2.xになり画面内容が一部1.xとは違っています。基本的な使い方は同じですが本ページでは2.xにあわせて記載していますので1.xをお使いの場合にはご注意ください。

Arduino IDEを起動します。
インストールしていない方はこちらからダウンロードしてインストールします。
　
“ファイル”→”基本設定”を開きます。　
“追加のボードマネージャのURL”の部分に次のURLをコピーして貼り付けます。
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json　
OKボタンを押します。　
　
“ツール”→”ボード”をクリックし更に右側に表示される”ボードマネージャ”をクリックします。　
　
先ほどURLを環境設定の部分で指定しているので「検索をフィルタ」と書かれたボックスにに”esp32 by Espressif Systems”と入力すると一覧にボードが表示されますのでこれを選択してインストールしてください。現在はバージョンは最新版を選択してください。
　
　
　
“インストール”ボタンを押します。　
これでボードに必要なファイルが自動的にダウンロードされてインストールされます。　
インストールが完了すると”ツール”→”ボード”→”esp32″の一覧に”ESP32 Dev Module”という名前が表示されますのでこれを選択します。
似たような名前が多いので間違えないようご注意ください。　
画面上部にデバイス名が正しく表示されていることを確認します。
　

　
続いて、ESP-WROVER-KIT-VBとArduino IDEが通信する手段を選択します。
ESP-WROVER-KIT-VBはパソコンと接続すると仮想COMポートが2つ作られます。
パソコンと接続したらWindowsのデバイスマネージャーの”ポート(COMとLPT)”のツリーを確認してください。
2つの仮想COMポートが作られています。通常はポート番号の大きい方を選択してください。　

　
メニューバーの”ツール”をクリックして”PSRAM”の項目を”Enabled”に設定します。　　
　
“ツール”→”シリアルポート”をクリックして手順9で確認したESP-WROVER-KIT-VBのポート番号を選択します。

これで最初の設定は完了です。

■Arduino IDEを使う方法　～プログラムを書いてみる～

それではプログラムを早速書いてみましょう。最も簡単なLED点滅プログラムを書いてみます。

ESP-WROVER-KIT-VBにはRGB LEDが搭載されています。LEDは次のようにGPIOに接続されています。ここではそれぞれの色を200ミリ秒間隔でHigh-Lowさせるだけのプログラムです。

LEDの色	GPIOの番号
赤	GPIO0
緑	GPIO2
青	GPIO4

int led_R = 0;
int led_G = 2;
int led_B = 4;

void setup() {

  pinMode(led_R,OUTPUT);
  pinMode(led_G,OUTPUT);
  pinMode(led_B,OUTPUT);

} 

void loop() {

  digitalWrite(led_R,HIGH);
  digitalWrite(led_G,LOW);
  digitalWrite(led_B,LOW);

  delay(200);

  digitalWrite(led_R,LOW);
  digitalWrite(led_G,HIGH);
  digitalWrite(led_B,LOW);
  
  delay(200);

  digitalWrite(led_R,LOW);
  digitalWrite(led_G,LOW);
  digitalWrite(led_B,HIGH);

  delay(200);

  digitalWrite(led_R,LOW);
  digitalWrite(led_G,LOW);
  digitalWrite(led_B,LOW);
  delay(200); 

}

int led_R = 0;

int led_G = 2;

int led_B = 4;

void setup() {

pinMode(led_R,OUTPUT);

pinMode(led_G,OUTPUT);

pinMode(led_B,OUTPUT);

}

void loop() {

digitalWrite(led_R,HIGH);

digitalWrite(led_G,LOW);

digitalWrite(led_B,LOW);

delay(200);

digitalWrite(led_R,LOW);

digitalWrite(led_G,HIGH);

digitalWrite(led_B,LOW);

delay(200);

digitalWrite(led_R,LOW);

digitalWrite(led_G,LOW);

digitalWrite(led_B,HIGH);

delay(200);

digitalWrite(led_R,LOW);

digitalWrite(led_G,LOW);

digitalWrite(led_B,LOW);

delay(200);

}

では早速コンパイルをしてみましょう。
ツールバー画面左上にある「レ」のボタン（検証ボタン）を押します。

ファイルを保存していない場合にはファイル保存のダイアログが表示されますので適当なディレクトリに保存してください。

コンパイルは少し時間がかかります。プログラムに誤りがなければウインドウ下の「出力」という部分に使用されているフラッシュメモリーのサイズやRAMの容量が表示されます。

綴りミスやエラーがある場合にはオレンジ色のエラーが表示されるので確認してください。すべて白色の文字ならコンパイル成功です。

コンパイルが正常完了したことを確認して次に進みます。

■Arduino IDEを使う方法　～プログラムを書き込む～

ではボードに書き込んでみましょう。

ツールバー2番目の右向き「→」マークのボタンを押してみてください。

書き込みが始まります。IDEウインドウ下に進捗状況が表示されます。書き込みが完了すると「Hard resetting via RTS pin…」と表示されます。

※「書き込み完了」などという表示はArduino2.xからは表示されなくなりました。「出力」ウインドウの文字が白い場合にはエラーはなく、エラーがある場合にはオレンジ色の文字になります。

LEDが3色順番に点灯していることを確認してください。

点滅する周期を変更したりしてプログラムを変えてみてお試しください。

書き込み時にエラーが表示されて失敗する場合には？

書き込み実行時に「A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header」という表示が出て、書き込みに失敗する場合があります。

これはESP-WROOM-32Dが書き込みモードに入るタイミングの問題となり手動で”BOOT”ボタンを押すことで解決します。書き込み実行する時に転送が開始されたら本体にある”BOOT”ボタンを押し続けます。最後まで押し続けなくても、オレンジ色の進捗状況の表示が出たら離してもOKです。スイッチの押すタイミングがありますので、何回か試行してタイミングをつかんでください。

書き込み実行時に「A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header」と表示されるのは本体の故障ではありません。

教えて！Goolge先生！！

開発を行ってると様々な問題に直面します。ソフトウエアを作る時やコンパイルした時、書き込みを実行した時、そしてプログラムを動かした時・・・そんな時はぜひGoogleで検索しましょう。

特に「エラーメッセージ」や「エラーコード」が表示される場合にはその内容全文をGoogleで検索してみてください。ESP32シリーズは世界中のユーザーが使用しており、貴方が今経験している問題は”たぶん”過去に多くの先人が経験しているものだと思います。
先人達はブログなどで解決策や原因を記載していることがほとんどです。ほとんどの問題はGoogleで検索すれば解決策が見つかります。
きっと、今貴方が困っていることは過去に誰かが困っていたことだと思われます。そしてそういった情報はほとんどの場合においてGoogleで調べれば関連ページがヒットします。

「おかしい！」「壊れてるんじゃないか！？」「不良品？？」そう思う前に検索してみてください。きっと解決策が見つかるはずです。

■アナログ出力を使ってPWM制御してみる

上の例ではGPIOをデジタルピンとして設定としてLEDをON/OFFにしてみました。
デジタル設定の場合出力はHighかLowのいずれかです。つまり点灯か消灯です。

しかし、ピンをアナログ出力ピンとして設定するとPWM出力が可能となります。PWMとはPulse Width Modulationの略で日本語ではパルス幅変調といいます。パルス波のデューティー比を変化させる変調方式です。デューティー比とは簡単に言えば、パルス波を出した時の「Highの期間」と「Lowの期間」の割合ことです。例えばHigh期間とLow期間が同じ時間であればデューティー比50%といいます。

※出展 https://en.wikipedia.org/

LEDを接続している場合デューティー比を変えると、それはLEDの明るさの変化として現れます。デューティー比が大きい、すなわちHighの期間が長ければLEDは明るく点灯しますし、デューティー比が小さければLEDは暗くなります。

ESP32ではすべてのピンではありませんが多くのピンでアナログ出力ピンとして設定できます。

なおアナログ出力として使う場合にはGPIOの番号はアナログピン番号になります。GPIO0はA11、GPIO2はA12、GPIO4はA10となっています。注意してください。

ここではPWMと乱数発生関数rand()を使ってクリスマスイルミネーションで使えそうなカラフルに点灯するLEDのプログラムを作ってみます。

ESP32でPWMを使う場合にはledcWrite()関数を使います。

※Arduinoで使える　analogWrite() 関数はESP32では利用できません。

const int led_R = A11; 
const int led_G = A12; 
const int led_B = A10;

void setup() {  
	ledcSetup(0, 10000, 7);  
	ledcSetup(1, 10000, 7);  
	ledcSetup(2, 10000, 7);  
	ledcAttachPin(led_R, 0);  
	ledcAttachPin(led_G, 1);  
	ledcAttachPin(led_B, 2); 
} 

void loop() {  
	int bright; 
	 
	while(1){   
		bright = (rand() % 100);   
		ledcWrite(0, bright);   
		bright = (rand() % 100);  
		ledcWrite(1, bright);  
		bright = (rand() % 100);   
		ledcWrite(2, bright);    
		delay(100); 
	}
}

const int led_R = A11;

const int led_G = A12;

const int led_B = A10;

void setup() {

ledcSetup(0, 10000, 7);

ledcSetup(1, 10000, 7);

ledcSetup(2, 10000, 7);

ledcAttachPin(led_R, 0);

ledcAttachPin(led_G, 1);

ledcAttachPin(led_B, 2);

}

void loop() {

int bright;

while(1){

bright = (rand() % 100);

ledcWrite(0, bright);

bright = (rand() % 100);

ledcWrite(1, bright);

bright = (rand() % 100);

ledcWrite(2, bright);

delay(100);

}

ledcSetup(uint8_t chan, double freq, uint8_t bit_num);

`chan`	利用するチャネル。0～15を指定
`freq`	基本となるPWMの周波数　ここでは10KHzを指定
`bit_num`	デューティ比を表す分解能のビット数　ここでは8ビットなので256段階

bright変数は明るさを示します。0は消灯です。この値を乱数によって増減させます。

ledcWrite(uint8_t chan, uint32_t duty);

`chan`	利用するチャネル。0～15を指定
`duty`	デューティ比を指定、ここでは7ビットなので指定できる値は0～127

rand();　関数は-32768から32767までの乱数を発生させ返します。ここでは%100として0から100までの値を取得して明るさの値としています。

100ミリ秒の遅延を入れてwhile文でループすることで明滅を繰り返し実行しています。

下図はオシロスコープで波形を観察したものです。10KHzの波形のデューティー比が繰り返し変わっていることが確認できます。

■ピンの状態を取得してみる

　
ここまでの例ではピンを出力に設定してLEDのON/OFFを試しました。
続いてGPIOを入力設定にしてその状態に応じて処理を分岐するプログラムを作ってみましょう。

ESP-WROVER-KIT-VBには2つのスイッチが付いています。
1つはENピンと接続されていてプログラムでは使えませんが”BOOT”と書かれたスイッチはGPIO0と接続されており実験に利用できます。

GPIO0を入力ピンとして使ってみましょう。入力ピンの場合にはスイッチを押していない時にピンの論理状態をHighにするか、Lowにするかをプルアップ又はプルダウンによって決めなければいけません。ESP32では指定したピンを入力ピンに設定するとともにそのピンを内部プルアップする機能があります。これを使えば外部にプルアップ用抵抗器を接続する必要がなく利用できます。但し、プルダウンの設定はできませんのでご注意ください。GPIO0はLED赤と接続されていますのでスイッチを押していない時はプルアップにより点灯しています。スイッチを押すと消灯します。これは単にスイッチ操作によるものなのでプログラム的な動作ではありません。

LEDについてはここではスイッチを押した時に青LEDが点灯するものとします。緑LEDは常時消灯とします。

const int led_G = 2;
const int led_B = 4; 
const int swPin = 0; 

void setup() {
 
	pinMode(led_B, OUTPUT);
	pinMode(led_G, OUTPUT); 
  	pinMode(swPin, INPUT_PULLUP); 
  	digitalWrite(led_G, LOW); 
  	digitalWrite(led_B, LOW);
} 

void loop() { 

	int sw_state = digitalRead(swPin); 
   	
  	if (sw_state==HIGH){
  		digitalWrite(led_B, LOW);  
  	}else{  
		digitalWrite(led_B, HIGH);  
	}
   
}

const int led_G = 2;

const int led_B = 4;

const int swPin = 0;

void setup() {

pinMode(led_B, OUTPUT);

pinMode(led_G, OUTPUT);

pinMode(swPin, INPUT_PULLUP);

digitalWrite(led_G, LOW);

digitalWrite(led_B, LOW);

}

void loop() {

int sw_state = digitalRead(swPin);

if (sw_state==HIGH){

digitalWrite(led_B, LOW);

}else{

digitalWrite(led_B, HIGH);

}

内容はとても簡単です。pinMode()では入力ピンとする時にだけINPUT_PULLUPを引数として指定すると内部プルアップが有効になります。

ピンの状態はdigitalRead()関数で読み込みます。戻り値はint型変数に代入します。その値をif文で判定します。スイッチを押していない時はプルアップによりGPIO0はHighレベルなので青LEDは消灯に、押した時はLowなので青LEDを点灯させます。

■ちょっと応用編　～WEBサーバー機能でブラウザからLEDを制御をする～

　
ESP32はマイコンだけではなくWi-FiもBluetooth通信もできる高機能通信モジュールです。

ここではWEBサーバー機能を試してみましょう。TCP/IPなどネットワーク接続に必要なプロトコルスタックを内蔵しているので簡単にネットワーク通信ができます。

WEBサーバー機能を使うことでブラウザから本機にアクセスしてLEDを消灯させたり点灯させたり、消灯させたり制御ができます。

1からプログラムを書くのはちょっとしんどい・・そんな時はArduino IDEでしスケッチ例がたくさん利用できます。

ここではWi-Fiサーバーのスケッチ例を使いその内容を少し変更させてWEBサーバー機能を試してみましょう。

Arduino IDEのメニューバー”ファイル”→”スケッチ例”をクリックします。　
　
“ESP32 Dev Module用のスケッチ例”という部分があるのでその中にある”WiFi”→”SimpleWiFiServer”をクリックします。
WiFiサーバーのサンプルスケッチが読み込まれます。実はほとんどの内容はこれで完成しています。ここでは下記のように少しプログラムを改造してみましょう。

まず下記のSSIDとパスワードを定数に代入する部分にはご自分のWi-Fi環境のSSIDとパスワードをセットしてください。これが間違っているとそもそもWi-Fiに接続できないのですべて失敗してしまいます。SSIDとパスワードは大文字小文字の区別があります。間違えないように入力してください。

#include <WiFi.h>

const int led_R = 0; 
const int led_G = 2; 
const int led_B = 4; 

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

/*const char html[] =
    "<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'>\
    <title>Hello Wifi</title></head>\
    <body>\
    <p>Click <a href=\"/H\">Here</a> to turn <span style=\"color: #ff0000;\"><strong>ON</strong> </span>32pin LED.</p>\
    <p>Click <a href=\"/L\">Here</a> to turn <span style=\"color: #0000ff;\"><strong>OFF</strong> </span>32pin LED.</p>\    
    </body></html>";*/
    
const char html[] =
    "<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'>\
    <title>Hello Wifi</title></head>\
    <body>\
      <div>\
        <h2>LEDテストページ</h2>\
      </div>\
      <div>\
        <p><span style=\"color: #ff0000;\"><strong>赤LED</strong></span>を点灯させるには <a href=\"/R\">ここ</a>をクリックします.</p>\
      </div>\
      <div>\
        <p><span style=\"color: #339966;\"><strong>緑LED</strong></span>を点灯させるには <a href=\"/G\">ここ</a>をクリックします.</p>\
      </div>\
      <div>\
        <p><span style=\"color: #0000ff;\"><strong>青LED</strong></span>を点灯させるには <a href=\"/B\">ここ</a>をクリックします.</p>\
      </div>\
      <div>\
        <p>すべての色のLEDを消灯させるには下のボタンを押します．</p>\
      </div>\
      <div><form method=\"get\" action=\".\">\
        <input type=\"submit\" name=\"ALLOFF\" value=\"全消灯\" />\
      </form></div></body></html>";

WiFiServer server(80);

void setup()
{
    Serial.begin(115200);
    pinMode(led_R, OUTPUT); 
    pinMode(led_G, OUTPUT);
    pinMode(led_B, OUTPUT);

    Off_LED();

    // We start by connecting to a WiFi network

    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 mode_f=0;

void loop(){
  
  if (mode_f==1){
    Off_LED();    
  }
  
 WiFiClient client = server.available();   // listen for incoming clients

  if (client) {                             // if you get a client,
    Serial.println("New Client.");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

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

            client.print(html);            
            client.println();
            break;
          } else {
            currentLine = "";
          }
          
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        //----------------------
        
        if (currentLine.endsWith("GET /R")) {
          digitalWrite(led_R, HIGH);  
          mode_f=0;
        }
        
        if (currentLine.endsWith("GET /G")) {
          digitalWrite(led_G, HIGH);
          mode_f=0;
        }

        if (currentLine.endsWith("GET /B")) {
          digitalWrite(led_B, HIGH);  
          mode_f=0;
        }

        if (currentLine.endsWith("GET /?ALLOFF")) {
          Off_LED();
          mode_f=1;
        }
      }
    }
    
    client.stop();
    Serial.println("Client Disconnected.");
  }
}

void Off_LED(){
  digitalWrite(led_R, LOW);
  digitalWrite(led_G, LOW);
  digitalWrite(led_B, LOW);
  delay(200);
     
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

#include <WiFi.h>

const int led_R = 0;

const int led_G = 2;

const int led_B = 4;

const char* ssid = "";

const char* password = "";

/*const char html[] =

"<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'>\

<title>Hello Wifi</title></head>\

<body>\

<p>Click <a href=\"/H\">Here</a> to turn <span style=\"color: #ff0000;\"><strong>ON</strong> </span>32pin LED.</p>\

<p>Click <a href=\"/L\">Here</a> to turn <span style=\"color: #0000ff;\"><strong>OFF</strong> </span>32pin LED.</p>\

</body></html>";*/

const char html[] =

"<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'>\

<title>Hello Wifi</title></head>\

<body>\

<div>\

<h2>LEDテストページ</h2>\

</div>\

<div>\

<p><span style=\"color: #ff0000;\"><strong>赤LED</strong></span>を点灯させるには <a href=\"/R\">ここ</a>をクリックします.</p>\

</div>\

<div>\

<p><span style=\"color: #339966;\"><strong>緑LED</strong></span>を点灯させるには <a href=\"/G\">ここ</a>をクリックします.</p>\

</div>\

<div>\

<p><span style=\"color: #0000ff;\"><strong>青LED</strong></span>を点灯させるには <a href=\"/B\">ここ</a>をクリックします.</p>\

</div>\

<div>\

<p>すべての色のLEDを消灯させるには下のボタンを押します．</p>\

</div>\

<div><form method=\"get\" action=\".\">\

<input type=\"submit\" name=\"ALLOFF\" value=\"全消灯\" />\

</form></div></body></html>";

WiFiServer server(80);

void setup()

{

Serial.begin(115200);

pinMode(led_R, OUTPUT);

pinMode(led_G, OUTPUT);

pinMode(led_B, OUTPUT);

Off_LED();

// We start by connecting to a WiFi network

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 mode_f=0;

void loop(){

if (mode_f==1){

Off_LED();

}

WiFiClient client = server.available(); // listen for incoming clients

if (client) { // if you get a client,

Serial.println("New Client."); // print a message out the serial port

String currentLine = ""; // make a String to hold incoming data from the client

while (client.connected()) { // loop while the client's connected

if (client.available()) { // if there's bytes to read from the client,

char c = client.read(); // read a byte, then

Serial.write(c); // print it out the serial monitor

if (c == '\n') { // if the byte is a newline character

if (currentLine.length() == 0) {

client.println("HTTP/1.1 200 OK");

client.println("Content-type:text/html");

client.println();

client.print(html);

client.println();

break;

} else {

currentLine = "";

}

} else if (c != '\r') { // if you got anything else but a carriage return character,

currentLine += c; // add it to the end of the currentLine

}

//----------------------

if (currentLine.endsWith("GET /R")) {

digitalWrite(led_R, HIGH);

mode_f=0;

}

if (currentLine.endsWith("GET /G")) {

digitalWrite(led_G, HIGH);

mode_f=0;

}

if (currentLine.endsWith("GET /B")) {

digitalWrite(led_B, HIGH);

mode_f=0;

}

if (currentLine.endsWith("GET /?ALLOFF")) {

Off_LED();

mode_f=1;

}

client.stop();

Serial.println("Client Disconnected.");

}

void Off_LED(){

digitalWrite(led_R, LOW);

digitalWrite(led_G, LOW);

digitalWrite(led_B, LOW);

delay(200);

}

内容としては最初のhtml配列のところで、HTMLデータを代入しています。注意すべき点は行替えのところには”\”（もしくはバックスラッシュ）を入れることです。Arduino IDEのフォント設定が英語フォントの場合には\はバックスラッシュとして表示されます。

また”(ダブルクォーテーション)は、\” として書くことも注意してください。間違えるとブラウザでアクセスした時正しいページが表示されません。特にタグの部分の文字列に注意してください。

またデフォルトのスケッチ例だと1つのLEDの点灯と消灯しかありませんので、この例ではRGB LEDの3つのLEDを点灯する追加しています。この例ではボタンを表示させて消灯機能を割り当てています。

★LED点灯/消灯/点滅の仕組み★

赤LED点灯時は　http://yourAddress/R

緑LED点灯時は　http://yourAddress/G

青LED点灯時は　http://yourAddress/B

全LED消灯時は　http://yourAddress/?ALLOFF

へ飛ぶように作られています。
いずれもHTTPのGETメソッドを使っています。一番簡単な方法なのでGETメソッドを使っていますが、改造すればもちろんPOSTメソッドでも作れます。

もう1つポイントとしてはボタンです。ボタンはtype属性をsubmitとしています。その前にaction属性を使ってボタンが押された時、ページのトップに移動するようにしています。そうしないと、例えば http://192.168.0.100/R の状態でボタンを押すと　http://192.168.0.100/H/?ALLOFF　となってしまい正しく判定ができなくなってしまうためです。

さてここまで書けたらコンパイルして実際のボードを書き込んでみましょう。

ボードに書き込む前にシリアルターミナルを表示させておきます。そうすることでモジュールが正しくWi-Fiに接続できたか、またDHCPで割り当てられたIPアドレスがいくつなのかを知ることができます。

Arduino IDEの”ツール”→”シリアルモニタ”をクリックしてシリアルモニターを表示させておきましょう。

スケッチに間違いがなければコンパイル後、書き込みが実行されます。もしエラーが表示された場合には間違いがないかよく確認してください。

プログラムが動作すると動作ログがシリアルモニターに表示されます。

下図のように接続されたSSIDと本機に割り当てらたれIPアドレスが表示されますのでこれを控えておきます。

もし接続できない場合にはSSIDやパスワードが間違っている可能性があります。

では早速このIPアドレスにブラウザから接続してみましょう。ブラウザを起動してアドレス欄にIPアドレスを入力してエンターキーを押します。
　

上図のように表示されればOKです。

「ここ」の部分をクリックしてその通りに各LEDが点灯したり消灯したりするか確認してください。

続いて「全消灯」をクリックすると全てのLEDが消灯すること確認してください。

なおこのプログラムでは割込を使わずに点滅するサブルーチンをloop関数の中で定期的に呼び出して点滅させています。loop関数内ではWi-Fiの処理も行っておりWi-Fiの処理の方に時間がかかると応答が一時的に止まる場合があります。このプログラムはデモなのでその点はあまり気にしていませんが、より実用的なプログラムを書く場合には割込を使うなど工夫が必要になります。

※割込例はスケッチ例内にある”Ticker”→”Blinker”などが参考になります。

■もっと応用編　～スイッチを押すとLINEに通知する～

　
もう少し複雑なプログラムにも挑戦してみましょう。

皆様お使いになっていると思うメッセージングサービスのLINEに通知を送る内容です。ESP-WROVER-KIT-VBのGPIO0のスイッチが押されると、LINEで”スイッチが押されました”と通知されるプログラムを作ってみましょう。

LINEに通知をするにはいくつかの方法があります。今回は “LINE Notify“というサービスを使ってみます。あらかじめ登録しておいたグループに対して通知を送れます。その他にはIFTTTというサービスを使った方法もあります。

まずは”LINE Notify“を友達に追加します。”LINE Notify“のページに飛ぶとトップページにQRコードが表示されますのでスマホのLINEアプリでこのQRコードをスキャンして友達を追加してください。

最初に「アクセストークン」と呼ばれる文字列を取得します。このトークンを使うことでESP32プログラム内からLINEに対して通知が送れるようになります。

“LINE Notify“にアクセスしてログインしてください。　
　
右上のアカウント名のところをクリックすると下にメニューが表示されますのでその中から「マイページ」を選択します。　
　
「アクセストークンの発行」のところにある「トークンを発行する」ボタンを押します。　
　
トークン名は通知される時に表示されますので、ここでは適当に「ESP32スイッチ」とかにしておきます。続いて「通知を受信するトークルームを選択してください」のところではグループを選択しますが、自分だけが受信する場合には「1:1でLINE Notifyから通知を受け取る」にチェックを入れて「発行する」を押します。
　

　
トークンが発行されます。このトークンはとても大切ですので必ず控えておいてください。赤文字で表示されたトークンを続いて作るプログラムの中で使用します。

では早速プログラムを書いてみましょう。今回はGPIO0を内部プルアップされた入力ピンとして使用し、スイッチが押されると（GP0がLowになると）LINEに通知が飛ぶようにします。

Wi-Fiへの接続部分などは先の例と同じですので解説は省略します。

プログラム中の your ssid　と your password　には実際にご利用のWi-Fi環境のパラメーターを記述してください。大文字小文字の区別があります。

もう一カ所修正する部分は “const char* token = “your LINE Notify token”;“　の部分です。your LINE Notify token の部分には先ほどの手順で発行したLINE Notifyのトークンをそのままコピーしてください。

修正部分は上記の箇所のみです。

#include <WiFi.h>
#include <ssl_client.h>
#include <WiFiClientSecure.h>
#include <HTTPClient.h>

const char* ssid     = "your ssid";
const char* password = "your password";

const char* host = "notify-api.line.me";
const char* token = "your LINE Notify token";

const int led_G = 2; 
const int led_B = 4; 
const int swPin = 0; 

void wificonnection(){
  
  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());  
}

void send_message(String message) {
  
  WiFiClientSecure client;
  client.setInsecure();
  Serial.println("Connecting to LINE API Server..");
  
  if (!client.connect(host, 443)) {
    Serial.println("Connection failed");
    return;
  }
  
  Serial.println("Connected!");
  
  String query = String("message=") + message;
  String request = String("") +
               "POST /api/notify HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" +
               "Authorization: Bearer " + token + "\r\n" +
               "Content-Length: " + String(query.length()) +  "\r\n" + 
               "Content-Type: application/x-www-form-urlencoded\r\n\r\n" +
                query + "\r\n";
  client.print(request);

  while (client.connected()) {
    String line = client.readStringUntil('\n');
    Serial.println(line);
    if (line == "\r") {
      break;
    }
  }

  String line = client.readStringUntil('\n');
  Serial.println(line);
}

void setup() {
  Serial.begin(115200);
  
  pinMode(led_G, OUTPUT);
  pinMode(led_B, OUTPUT);
  pinMode(swPin, INPUT_PULLUP);
  
  delay(10);
  
  digitalWrite(led_G, LOW);
  digitalWrite(led_B, LOW);

  wificonnection();
  
}

void loop() {

  int sw_state = digitalRead(swPin);

  if (sw_state==HIGH){ 
    digitalWrite(led_B, LOW); 
  }else{
    digitalWrite(led_B, HIGH);
    send_message("GP0ボタンが押されました！");
  }
}

#include <WiFi.h>

#include <ssl_client.h>

#include <WiFiClientSecure.h>

#include <HTTPClient.h>

const char* ssid = "your ssid";

const char* password = "your password";

const char* host = "notify-api.line.me";

const char* token = "your LINE Notify token";

const int led_G = 2;

const int led_B = 4;

const int swPin = 0;

void wificonnection(){

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());

}

void send_message(String message) {

WiFiClientSecure client;

client.setInsecure();

Serial.println("Connecting to LINE API Server..");

if (!client.connect(host, 443)) {

Serial.println("Connection failed");

return;

}

Serial.println("Connected!");

String query = String("message=") + message;

String request = String("") +

"POST /api/notify HTTP/1.1\r\n" +

"Host: " + host + "\r\n" +

"Authorization: Bearer " + token + "\r\n" +

"Content-Length: " + String(query.length()) + "\r\n" +

"Content-Type: application/x-www-form-urlencoded\r\n\r\n" +

query + "\r\n";

client.print(request);

while (client.connected()) {

String line = client.readStringUntil('\n');

Serial.println(line);

if (line == "\r") {

break;

}

String line = client.readStringUntil('\n');

Serial.println(line);

}

void setup() {

Serial.begin(115200);

pinMode(led_G, OUTPUT);

pinMode(led_B, OUTPUT);

pinMode(swPin, INPUT_PULLUP);

delay(10);

digitalWrite(led_G, LOW);

digitalWrite(led_B, LOW);

wificonnection();

}

void loop() {

int sw_state = digitalRead(swPin);

if (sw_state==HIGH){

digitalWrite(led_B, LOW);

}else{

digitalWrite(led_B, HIGH);

send_message("GP0ボタンが押されました！");

}

シリアルターミナルでログを見たいのでArduino IDEの”ツール”→”シリアルモニタ”を選択してモニターを表示させておいてください。では早速コンパイルして書き込んでみてください。

書き込みが成功するとシリアルモニターにWi-Fiへの接続状況が表示されます。接続が正しく完了すると本機に割り当てられたIPアドレスが表示されます。

続いて本体の”BOOT”ボタン(GPIO0ボタン)を1回押してください。LINE APIのサーバーに接続を試みます。成功すれば下記のようにログに表示されます。

Connecting to LINE API Server..
Connected!

続いて処理が行われます。
処理中は青LEDが点灯しています。処理が2秒から10秒程度で完了しLINE Notifyに通知が送られてきます。スマホ等で確認してみましょう。

どうでしょうか？正しく通知は送られてきましたか？

この仕組みを使えばいろいろと応用ができそうです。

もちろんGPIOを増やして使うこともできますし、変化のあったGPIO毎にメッセージ内容も変えられるのでいろいろと楽しめそうです。

■もっと応用編2　～TFT液晶にJPEGファイル画像を表示する～

ESP-WROVER-KIT-VBには3.2インチのLCDが実装されています。ここにJPEGファイルの画像を表示するプログラムを作ってみましょう。

Arduino IDEでTFT液晶が使えるライブラリがGitHubで配布されているのでこれらを使います。

3つのライブラリを追加する必要があります。また公開されているライブラリにはサンプルが付属しています。このサンプルにはJPEG画像の配列データが含まれています。もじご自分で作った画像ファイルを表示させたい場合にはJPEG画像を配列データで出力できる簡易アプリ(ExcelのVBA)を作成しましたのでこちらをご利用ください。

■ライブラリのダウンロードとコピー

次の3つのライブラリをダウンロードしてください。
https://github.com/espressif/WROVER_KIT_LCD

https://github.com/adafruit/Adafruit-GFX-Library

https://github.com/adafruit/Adafruit_BusIO
メニューバーの「スケッチ」→「ライブラリをインクルード」 →「.zip形式のライブラリをインストール」をクリックします。
先ほどダウンロードしたZIPファイルを選択して開きます。
自動的にライブラリにインストールされます。
同様にして3つすべてのZIPファイルをインストールしてください。

※WROVER_KIT_LCDはここには表示されません。

　
■サンプルプログラムの実行

コピーしたライブラリーファイルのWROVER_KIT_LCDフォルダ内にサンプルプログラムがあるのでこれを開いて実行してみましょう。デフォルトでインストールしている場合Windowsの場合には以下にあります。
C:\Users\[ユーザ名]\Documents\Arduino\libraries\WROVER_KIT_LCD-master\examples\jpegtest

上記のディレクトリを開くと jpegtest.ino と2つの.hファイルがあります。.hファイルは表示するJPEG画像データファイルです。jpegtest.ino　をダブルクリックするとArduino IDEで開かれます。

そのままコンパイルしてボードに書き込んでみてください。

LCDに画像が表示されましたか？GPIO0のスイッチを押すと画像が切り替わります。

　
■自分で作成した画像を表示したい場合

ESP32のライブラリによってJPEGファイルの画像データをそのまま与えればTFTに表示させることができます。WROVER_KIT_LCDライブラリにはtftオブジェクトがあり様々な関数があります。JPEGの表示だけではなくビットマップファイルの表示やスクロール、ピクセル単位での制御などがあります。

本ページの例ではJPEGファイルの表示だけを行いました。

もしご自身で作った画像ファイルを表示したい場合にはJPEGファイルのバイナリデータを.hファイルとしてインクルードしてそれをdrawJpg()関数で描画することになります。もちろんmicroSDカードにファイルを保存して読み出すことも可能です。

ここでは320×240ドットのJPEGファイルを簡単に表示させるため、あらかじめ画像ファイルから.hファイルを作ってそれをインクルードして表示させます。当方ではJPEGファイルから簡単に.hファイルを作るためのExcal VBAを作りましたので下記からダウンロードしてご利用ください。

http://www.microtechnica.tv/support/software/jpeg2bin.xlsm

Excelでマクロ、VBAの実行を有効にして開いてください。

JPEG画像ファイルは必ず320×240ドットでご用意ください。

①上記Excelファイルを開きます。セキュリティ警告が表示された場合には「コンテンツの有効化」を押してください。

②「実行」ボタンを押してください。

③JPEGファイルを指定します。選択して開くと配列名が聞かれるボックスが表示されるので、適当に配列名を入力します。一般的にはファイル名など分かりやすく短い文字列とします。

④実行するとJPEGファイルのバイナリデータがセルに出力されます。またその後、.hファイルが画像ファイルの場所と同じフォルダ内に生成されます。ファイル名は”画像名.h”となります。

⑤先ほど使用したライブラリのexampleフォルダ内にあるファイルは変更できないので、jpegtest.inoファイルは別の場所にコピーしてそれを使用します。jpegtest.inoを分かりやすい場所にコピーしてこれをダブルクリックして実行してください。

⑥生成された.hファイルをjpegtest.inoと同じフォルダにコピーします。

⑦Arduino IDEのメニューバー「スケッチ」→「ファイルを追加」で生成された.hファイルを開きます。

⑧プログラムの先頭部分でファイルをインクルードします。 #include “xxxx.h”　を記述して画像ファイルのデータをインクルードしてください。

⑨最も基本的なプログラム例を下記に示します。

※下記参考例のimage.hは画像ファイルの情報が入ったヘッダファイルの名前です。

#include "Adafruit_GFX.h"
#include "WROVER_KIT_LCD.h" 
#include "image.h"

WROVER_KIT_LCD tft;

void setup() {  
  tft.begin();
  tft.setRotation(0); 
} 

void loop() {
  tft.drawJpg(image_array, image_len);
  delay(1000); 
}

#include "Adafruit_GFX.h"

#include "WROVER_KIT_LCD.h"

#include "image.h"

WROVER_KIT_LCD tft;

void setup() {

tft.begin();

tft.setRotation(0);

}

void loop() {

tft.drawJpg(image_array, image_len);

delay(1000);

}

配列名、配列名_len　の2つの引数をdrawJpeg関数で指定します。.hファイルの内容を見ながら正しい文字列を入力してください。

image_arrayは画像ファイル情報のヘッダファイル内の配列名です。ヘッダファイル名ではありません。ご注意ください。

■Arduino IDEを使う方法 ～IDEの準備

■Arduino IDEを使う方法 ～プログラムを書いてみる～

■Arduino IDEを使う方法 ～プログラムを書き込む～

■アナログ出力を使ってPWM制御してみる

■ピンの状態を取得してみる

■ちょっと応用編 ～WEBサーバー機能でブラウザからLEDを制御をする～

■もっと応用編 ～スイッチを押すとLINEに通知する～

■もっと応用編2 ～TFT液晶にJPEGファイル画像を表示する～

wpmaster

■Arduino IDEを使う方法　～IDEの準備

■Arduino IDEを使う方法　～プログラムを書いてみる～

■Arduino IDEを使う方法　～プログラムを書き込む～

■ちょっと応用編　～WEBサーバー機能でブラウザからLEDを制御をする～

■もっと応用編　～スイッチを押すとLINEに通知する～

■もっと応用編2　～TFT液晶にJPEGファイル画像を表示する～