【Arduino】Wi-FiモジュールESP-01を使いArduinoをスマホ「RemoteXYアプリ」で操作してみる！[ESP8266(ESP-01)/HC-05/HC-06など]

Arduinoはマイコン初心者の方でも比較的簡単に扱えるように作られた便利なマイコンボードです。
しかしArduinoには標準で無線機能が搭載されていません。
そのためArduinoを使って無線通信をしたい場合、対応したモジュールをArduinoと接続しその機能を持たせる必要があります。

無線機能で言うと、ESP-WROOM-32のような技適が取得されたWi-FiやBluetoothモジュールが標準で搭載されたマイコンボードもあります。
Arduinoの扱いに慣れてくると使ってみるのは面白いと思います。

ESP32シリーズのマイコンボードは、技適が取得された無線モジュールが標準で使えるものが多くブレッドボードを使ったテストやIoT関係の事で使うには非常に便利なわけですが・・・私の場合ですが、3Dプリンタで作った製作物に組み込んで使うにはArduinoの方が扱いやすく思います。

Arduinoの場合、固定するためのネジ穴が用意されていて多くのシールドと呼ばれる拡張ボードを使うことが出来るからです。
後発となる？ESPシリーズのマイコンボードは多数登場していますが、固定のことを考えるとPCB基盤を製作する必要があったりと・・・製作物に組み込んで使う場合、Arduinoの方が扱いやすいかな？なんて思ったりします。

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

そしてArduinoに接続して使える便利な無線モジュールは多数販売されています。
製作物へ組み込んで使う場合などで便利に使えるものはいくつかありますが、技適が取得されたモジュールがあまりない点は非常に残念なところです。

これまでArduinoで使える無線モジュールをいくつかご紹介してきました。
HC-05(HC-06)はArduinoで使える便利なBluetoothモジュールです。

Arduinoを使いBluetooth通信をやってみる！HC-05/HC-06 Bluetoothモジュールの使い方！

またnRF24L01無線モジュールは、1対1でのやり取り以外に複数モジュール間でのデータのやり取りも行える非常に便利な無線モジュールです。

【電子工作】無線モジュールnRF24L01を使いArduino間で無線通信をやってみる！

そして今回はArduinoに接続して使えるWi-FiモジュールとしてESP8266(ESP-01)を使ってみます。

ESP-01はESP-WROOM-02のように技適の取得がされたWi-Fiモジュールではありませんが、非常に小型で安価なのでArduinoの学習用としては非常に便利に使えます。
小型なWi-Fiモジュールでシリアルでのやり取りでArduinoと接続できるので、既に製作した物への組み込みも簡単で便利なWi-Fiモジュールとなります。

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

MEMO

ESP8266(ESP-01)は技適が取得されていない無線モジュールとなるため、その使用には注意が必要です！

今回Wi-FiモジュールESP-01をArduinoと接続し、スマホアプリ「RemoteXY」を使ってArduinoを制御する方法を見ていきます。

ESP8266 ESP-01 WIFI ワイヤレストランシーバーモジュール(2個)

created by Rinker

Rasbee

ESP8266 ESP-01 ESP-01S ブレークアウトボードアダプター

created by Rinker

Ren He

ESP8266(ESP-01)を使いArduinoをスマホで操作してみる！【RemoteXYアプリ】

ESP8266(ESP-01)を使いArduinoをスマホで操作してみる！【RemoteXYアプリ】

ESP8266(ESP-01)とは？

今回ESP8266(ESP-01)というWi-FiモジュールをArduinoと接続し、Wi-Fi経由でスマホアプリから操作してみたいと思います。

ESP-01は非常に小型(約24.8mm×14.3mm)なWi-Fiモジュールで、Espressif System社のESP8266が搭載されたWi-Fiモジュールとなり開発元AI-Thinker社の製品となります。
Arduinoなど無線機能を持たないマイコンボードと接続してWi-Fi機能を持たせる用途で使えます。

またESP-01が面白いのが、ESP8266EXチップが搭載されメモリやパターンアンテナ・クロック用のクリスタルが搭載されているので、Arduinoのスケッチを書き込むことによりESP-01単体で動かすことも出来ます。
Wi-Fi機能を持った小型Arduinoとして動かすことが出来るということですね。
開発環境もArduino IDEがそのまま使うことが出来るので手軽に試すことが出来ます。

先述のように技適が取得されていないモジュールとなるのでその使用には注意が必要ですが、Arduinoの学習用としては安価で(200円ほどのモジュールです)手軽に試せる便利なWi-Fiモジュールとなります。

ESP-01の主な使用用途はこの2つに別れます。

ESP8266(ESP-01)の主な使用用途

ESP-01にスケッチを書き込み、これ単体で動かす
Arduinoなどのマイコンボードと接続してWi-Fiモジュールとして使う(ATコマンドの設定等も含め)

前回①の用途でESP-01にスケッチを書き込み、単体で動かす簡単なテストを行ってみました。

【Arduino】小型Wi-FiモジュールESP8266(ESP-01)の基本的な使い方！スケッチの書き込み&モジュール単体で動かす基本的な方法！

ESP-01は非常に小型なモジュールですが、4本のGPIO端子が使えます。

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

上記は簡単なLEDの点灯テストですが、ESP-01はWi-Fi機能を持っているのでこのようにWi-Fi経由で温湿度をモニターするなんて使い方もできます。

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

上記動画の例では、ESP-01のGPIO端子は温湿度センサーに1本、LEDに1本、サーボモーターの制御に1本の計3本使っています。
ESP-01は4本のGPIO端子を使うことが出来るので、まだあと1本余裕があります。
アイデア次第で面白く使うことができ、完全にミニArduinoって感じですね！

そして今回は、②の用途で使ってみたいと思います。
無線機能を持たないArduinoと接続しWi-Fiモジュールとして使う方法です。

Arduinoに無線機能を持たせることにより、ブラウザやスマホアプリを使いWi-Fi経由でArduinoを制御する事が出来るようになります。
Arduinoとはシリアル(UART通信)でのやり取りで行われるので、接続自体は非常に簡単です。

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

Wi-Fiでの接続なのでPCやスマホのブラウザを経由して動かすことも出来ますが、Instagramでスマホ操作に関して非常に多くのコメントを頂いたので今回はスマホアプリ「RemoteXY」を使いWi-Fi接続してArduinoを制御してみたいと思います。

ブログ記事としてはブラウザ経由でWi-Fiアクセスポイントの設定などを踏まえてご紹介しようと考えていましたが、操作する側にあたるブラウザなどのUIを作り込むにはHTMLを使ったりと結構大変となるので、今回はスマホアプリを使った方法で進めていきます。

スマートフォンアプリ『RemoteXY』を使う！

Arduinoや他のマイコンボードでも同様ですが、無線モジュール(Wi-FiやBluetoothなど)を使ったやり取りが行えるスマートフォン用のアプリはいくつかあります。

『Blynk』は非常にメジャーなアプリなので使われている方多いと思います。
またArduino公式のクラウド経由でのやり取りで動かす『IoT Remote』といったアプリもあります。

そして今回は『RemoteXY』というスマホアプリを使ってArduinoをWi-Fi経由で操作してみたいと思います。
Blynkのようにスマホ側のUIを簡単に作ることが出来ます。
そしてArduinoに書き込むスケッチも分かりやすく、アプリも安価(または無料)で試すことが出来るのでスマホを使ったWi-Fi操作でまず試してみるのはいいかと思います。

ESP-01とArduinoとはシリアル(TX/RX)で接続してデータのやり取りを行います。
シリアルでのやり取りでは随時送られていくるデータがバッファに格納されてその選別をするのにスケッチを工夫する必要があったりしますが・・・
そのような作業やWi-Fiでの接続部分は全てRemoteXYのライブラリが行ってくれるので、Arduinoを使ったWi-Fiでのやり取りを初めて行う方でも比較的簡単に扱えると思います。

ArduinoにESP-01を接続してWi-Fiモジュールとして使う

それではArduinoにESP-01を接続してWi-Fiモジュールとして使ってみます。
そしてその操作にはスマホアプリRemoteXYを使いWi-Fi経由で行います。
簡単な流れ(手順)はこのようになります。

ArduinoとESP-01&RemoteXYアプリを使ったWi-Fi操作の手順

ESP-01のファームウェアの確認
ArduinoとESP-01の接続
RemoteXYのWebサイトでUI&ベーススケッチの作成
Arduino IDEでスケッチの追加&修正
Arduinoへスケッチを書き込む
スマホアプリ「RemoteXY」からArduinoを操作する

【手順①】ESP-01のファームウェアの確認

先述のようにESP-01は無線機能を持たないArduinoなどのマイコンボードと接続してWi-Fiモジュールとして使う以外に、ESP-01にスケッチを書き込み単体で動かすことも出来ます。

ESP-01を単体で動かす場合、初期状態で書き込まれているファームウェア(ATコマンドが使えるもの)に上書きする形でスケッチの書き込みが行われます。
そのためESP-01に既に何かしらのスケッチが書き込まれている状態では、Arduinoと接続しても単体で動く動作をしてしまいます。
既にスケッチが書き込まれたESP-01を使う場合、初期状態で書き込まれているファームウェアに戻す作業が必要となってきます。

ESP-01に既に何かしらのスケッチの書き込みを行っている場合、以下の方法で初期状態のファームウェアに戻してください！
購入後、新たにスケッチの書き込みを行っていない場合はこの項目は飛ばして下さい。

【Arduino】小型Wi-FiモジュールESP8266(ESP-01)のファームウェアを更新する！初期状態に戻しATコマンドを使えるようにする！

【手順②】ArduinoとESP-01の接続

それではArduinoとの接続です。
今回Arduino Unoを使った接続例となりますが、他のArduinoボードでも同様となります。

ESP-01は3.3V動作でのモジュールとなります。
Arduinoの[3.3V端子]が使えます。
Arduinoとはシリアル(UART通信)でのやり取りとなるので、TX-RX/RX-TXという通常の接続となります。(今回ハードウェアシリアルでの接続で行います)
また、CH_PD端子は常にHIGH(3.3V)状態で使います。
ArduinoとESP-01との接続はこのようになります。

ESP-01の接続や起動モードに関して詳しくはこちらの記事も参考にして下さい！

【Arduino】小型Wi-FiモジュールESP8266(ESP-01)の基本的な使い方！スケッチの書き込み&モジュール単体で動かす基本的な方法！

今回ハードウェアシリアルでの接続で行います。
Arduino Unoには使えるハードウェアシリアル端子がD0(RX)/D1(TX)の1系統しかありません。
そのため、その他シリアルでのやり取りをしたい場合には適さず、またスケッチの書き込みの際に一旦D0/D1の配線を外す必要が出てきます。
実用的にはソフトウェアシリアルを使った接続の方が便利な場合がありますが、その場合ESP-01のボーレート(通信速度)を変更する必要があります。

ESP-01のデフォルトのボーレートは115200bpsとなっています。
ソフトウェアシリアルで接続する場合、この速度ではデータ転送が安定しないため下げる必要が出てきます。
もちろんこれはATコマンドを打ち込み変更することは簡単ですが、少し長くなるので今回は割愛します。
ソフトウェアシリアルでの接続は、別記事で紹介できればと思います。

【Arduino】小型Wi-FiモジュールESP8266(ESP-01)をArduinoのソフトウェアシリアルで使う手順！ATコマンドによるボーレート(通信速度)の変更方法！

Arduinoのシリアル通信(UART通信)に関してはこちらの記事も参考にして下さい！

【Arduino入門編㉖】UARTシリアル通信の基礎知識！Arduino間でのデータのやり取りなどをやってみる！

【Arduino入門編㉘】ソフトウェアシリアルを使ってみる！

ArduinoとESP-01との接続が出来ました。
今回簡単な作例としてArduinoに繋いだ4本のLEDをWi-Fi経由でスマホアプリから操作してみたいと思います。
3本のLEDはON/OFFのみ、そしてもう1本はPWMで制御し調光出来るようにしてみます。
こんな感じです。

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

上記回路のデジタルピンD2~D5にLEDを4本追加します。
Arduino UnoのD2~D4端子に繋いだ3本のLEDは単純なON/OFF制御、D5端子はPWMで使える端子なのでこれに繋いだLEDは調光制御を出来るようにしてみます。
接続はこのようになります。

【手順③】RemoteXYのWebサイトでUI&ベーススケッチの作成

Arduinoとの接続ができました。
今回スマホアプリRemoteXYを使います。

Wi-Fi接続で必要となってくるSSIDやアクセスポイントなどの設定、そしてスマホアプリで使うボタンの配置などUIの作成はRemoteXYのWebベージから作成できます。

ここでベースとなるArduinoスケッチを作成し、必要に応じて修正&追加していく形となります。

まずRemoteXYのWebサイトにアクセスします。

参考 RemoteXYトップページRemoteXY

[START NOW]から無料で試すことが出来ます。

ここからスマホアプリRemoteXYとArduinoをWi-Fi接続するための各種設定やアプリ側のUIを作っていきます。

マイコンボード&無線機器の選択

まず使用するマイコンボードと無線機器の選択です。
画面右の[Configuration]の項目をクリックします。

使用するマイコンボードや接続する無線モジュールの設定を行います。
今回Arduino UnoにWi-FiモジュールESP-01を接続して使います。

[Connection]の項目は[Wi-Fi access point]を選択します。

次に使用するマイコンボードの選択です。
[Board]をクリックすると各種Arduinoボードやその他のマイコンボードが選択できます。
今回Arduino Unoを使うのでこれを選択します。

次に使用する無線モジュールの選択です。
[Module]から選択します。
今回ESP-01を使うので、[ESP8266 Wi-Fi module]を選択します。

最後にIDE(総合開発環境)の選択です。
Arduino IDEを使うのでこれを選択します。

設定は以上です。
問題なければ画面下の[Apply]をクリックします。
接続デバイスの選択は以上となります。

シリアルポート&Wi-Fiアクセスポイントの設定

次にシリアルインターフェイスとWi-Fiアクセスポイントの設定です。
[Module interface]の項目を設定していきます。

まずシリアルの設定です。
デフォルトではソフトウェアシリアルでの設定となっていますが、今回ハードウェアシリアルでの接続で行うので[Connection interface]の項目は[Hardware Serial]に変更します。
[Serial port]の項目が、[Serial pins 0(RX) and 1(TX)]に設定されます。

次に通信速度(ボーレート)の設定です。
ESP-01のデフォルトのボーレートは115200bpsとなるので、[Speed(baud rate)]の項目を[115200]に変更します。

次にWi-Fiアクセスポイントの設定です。
デフォルトではSSID名は[RemoteXY]、パスワードは[12345678]となっています。
特に変える必要はありませんが、任意に変更することも出来ます。(パスワードは8桁以上必要です)
今回パスワードのみ[123456789]に変更しました。
ポート設定[Port]は特に変える必要はありません。

以上でハードウェアの設定は完了です。
続いてアプリのUIを作り込んでいきます。

アプリのUI設定

最後に各種ボタンや機能の付いたブロックを配置していきアプリのUIを作っていきます。
[View]の項目に進みます。

必要なら[Background color]でアプリのベースカラーが設定出来ます。
何でもいいのですが緑ベースでいきましょうかね。
[Orientation]でスマホの向きを縦置き・横置き・両対応に設定できます。
[Access password]はアプリ使用時に必要となってくるパスワードです。
今回[12345]を設定しました。

ここからはスマホのUIを作っていきます。
画面左端にある各種ボタン等をドラッグ&ドロップで配置していくだけなので簡単です！

使える項目が多いので、よく使う[Switch]ボタンを使ったON/OFF制御と[Slider]を使ったアナログ的な操作で使ってみたいと思います。
ドラッグ&ドロップでスマホ画面内に配置します。

サイズの調整等は直感的に行えるので簡単です！
最終的にこのような画面で動かしてみたいと思います。

配置した各ボタンをクリックすると[Element]の項目で文字や色などの設定も行なえます。
今回は機能させるデジタルピンだけ設定しておきます。

上記接続ではLEDはD2~D5に接続しています。
LED1はD2、LED2はD3、LED3はD4に設定しました。
スライダーで調光させるLEDはこのあとのスケッチで追加調整します。

以上の設定が出来たら[Get source Code]をクリックします。

Arduinoに書き込むベーススケッチの完成です。
スケッチをコピーしてArduino IDEの新規スケッチにペーストするか、ZIPファイルとしてダウンロードすることも出来ます。

一応スケッチを載せておきます。(コピペで使えます)
ここから一部コードを追加&修正していきます。

/*
   -- LED Test --
   
   This source code of graphical user interface 
   has been generated automatically by RemoteXY editor.
   To compile this code using RemoteXY library 3.1.8 or later version 
   download by link http://remotexy.com/en/library/
   To connect using RemoteXY mobile app by link http://remotexy.com/en/download/                   
     - for ANDROID 4.11.1 or later version;
     - for iOS 1.9.1 or later version;
    
   This source code is free software; you can redistribute it and/or
   modify it under the terms of the GNU Lesser General Public
   License as published by the Free Software Foundation; either
   version 2.1 of the License, or (at your option) any later version.    
*/

//////////////////////////////////////////////
//        RemoteXY include library          //
//////////////////////////////////////////////

// RemoteXY select connection mode and include library 
#define REMOTEXY_MODE__ESP8266_HARDSERIAL_POINT

#include <RemoteXY.h>

// RemoteXY connection settings 
#define REMOTEXY_SERIAL Serial
#define REMOTEXY_SERIAL_SPEED 115200
#define REMOTEXY_WIFI_SSID "RemoteXY"
#define REMOTEXY_WIFI_PASSWORD "123456789"
#define REMOTEXY_SERVER_PORT 6377
#define REMOTEXY_ACCESS_PASSWORD "12345"


// RemoteXY configurate  
#pragma pack(push, 1)
uint8_t RemoteXY_CONF[] =   // 117 bytes
  { 255,4,0,0,0,110,0,16,150,1,2,1,20,15,37,17,2,26,31,31,
  79,78,0,79,70,70,0,2,1,21,44,36,16,2,26,31,31,79,78,0,
  79,70,70,0,2,1,21,72,36,15,2,26,31,31,79,78,0,79,70,70,
  0,4,0,7,9,10,78,2,26,129,0,39,7,16,6,1,76,69,68,49,
  0,129,0,39,37,16,6,1,76,69,68,50,0,129,0,39,65,16,6,1,
  76,69,68,51,0,129,0,4,7,16,6,1,76,69,68,52,0 };
  
// this structure defines all the variables and events of your control interface 
struct {

    // input variables
  uint8_t switch_1; // =1 if switch ON and =0 if OFF 
  uint8_t switch_2; // =1 if switch ON and =0 if OFF 
  uint8_t switch_3; // =1 if switch ON and =0 if OFF 
  int8_t slider_1; // =0..100 slider position 

    // other variable
  uint8_t connect_flag;  // =1 if wire connected, else =0 

} RemoteXY;
#pragma pack(pop)

/////////////////////////////////////////////
//           END RemoteXY include          //
/////////////////////////////////////////////

#define PIN_SWITCH_1 2
#define PIN_SWITCH_2 3
#define PIN_SWITCH_3 4


void setup() 
{
  RemoteXY_Init (); 
  
  pinMode (PIN_SWITCH_1, OUTPUT);
  pinMode (PIN_SWITCH_2, OUTPUT);
  pinMode (PIN_SWITCH_3, OUTPUT);
  
  // TODO you setup code
  
}

void loop() 
{ 
  RemoteXY_Handler ();
  
  digitalWrite(PIN_SWITCH_1, (RemoteXY.switch_1==0)?LOW:HIGH);
  digitalWrite(PIN_SWITCH_2, (RemoteXY.switch_2==0)?LOW:HIGH);
  digitalWrite(PIN_SWITCH_3, (RemoteXY.switch_3==0)?LOW:HIGH);
  
  // TODO you loop code
  // use the RemoteXY structure for data transfer
  // do not call delay() 


}

-- LED Test --

This source code of graphical user interface

has been generated automatically by RemoteXY editor.

To compile this code using RemoteXY library 3.1.8 or later version

download by link http://remotexy.com/en/library/

To connect using RemoteXY mobile app by link http://remotexy.com/en/download/

- for ANDROID 4.11.1 or later version;

- for iOS 1.9.1 or later version;

This source code is free software; you can redistribute it and/or

modify it under the terms of the GNU Lesser General Public

License as published by the Free Software Foundation; either

version 2.1 of the License, or (at your option) any later version.

//////////////////////////////////////////////

// RemoteXY include library //

//////////////////////////////////////////////

// RemoteXY select connection mode and include library

#define REMOTEXY_MODE__ESP8266_HARDSERIAL_POINT

#include <RemoteXY.h>

// RemoteXY connection settings

#define REMOTEXY_SERIAL Serial

#define REMOTEXY_SERIAL_SPEED 115200

#define REMOTEXY_WIFI_SSID "RemoteXY"

#define REMOTEXY_WIFI_PASSWORD "123456789"

#define REMOTEXY_SERVER_PORT 6377

#define REMOTEXY_ACCESS_PASSWORD "12345"

// RemoteXY configurate

#pragma pack(push, 1)

uint8_t RemoteXY_CONF[] = // 117 bytes

{ 255,4,0,0,0,110,0,16,150,1,2,1,20,15,37,17,2,26,31,31,

79,78,0,79,70,70,0,2,1,21,44,36,16,2,26,31,31,79,78,0,

79,70,70,0,2,1,21,72,36,15,2,26,31,31,79,78,0,79,70,70,

0,4,0,7,9,10,78,2,26,129,0,39,7,16,6,1,76,69,68,49,

0,129,0,39,37,16,6,1,76,69,68,50,0,129,0,39,65,16,6,1,

76,69,68,51,0,129,0,4,7,16,6,1,76,69,68,52,0 };

// this structure defines all the variables and events of your control interface

struct {

// input variables

uint8_t switch_1; // =1 if switch ON and =0 if OFF

uint8_t switch_2; // =1 if switch ON and =0 if OFF

uint8_t switch_3; // =1 if switch ON and =0 if OFF

int8_t slider_1; // =0..100 slider position

// other variable

uint8_t connect_flag; // =1 if wire connected, else =0

} RemoteXY;

#pragma pack(pop)

/////////////////////////////////////////////

// END RemoteXY include //

/////////////////////////////////////////////

#define PIN_SWITCH_1 2

#define PIN_SWITCH_2 3

#define PIN_SWITCH_3 4

void setup()

{

RemoteXY_Init ();

pinMode (PIN_SWITCH_1, OUTPUT);

pinMode (PIN_SWITCH_2, OUTPUT);

pinMode (PIN_SWITCH_3, OUTPUT);

// TODO you setup code

}

void loop()

{

RemoteXY_Handler ();

digitalWrite(PIN_SWITCH_1, (RemoteXY.switch_1==0)?LOW:HIGH);

digitalWrite(PIN_SWITCH_2, (RemoteXY.switch_2==0)?LOW:HIGH);

digitalWrite(PIN_SWITCH_3, (RemoteXY.switch_3==0)?LOW:HIGH);

// TODO you loop code

// use the RemoteXY structure for data transfer

// do not call delay()

}

【手順④】Arduino IDEでスケッチの追加&修正

出来上がったベースとなるスケッチを見ると、こちらがWi-Fi設定部分アクセスポイントの設定ですね。

// RemoteXY connection settings 
#define REMOTEXY_SERIAL Serial
#define REMOTEXY_SERIAL_SPEED 115200
#define REMOTEXY_WIFI_SSID "RemoteXY"
#define REMOTEXY_WIFI_PASSWORD "123456789"
#define REMOTEXY_SERVER_PORT 6377
#define REMOTEXY_ACCESS_PASSWORD "12345"

// RemoteXY connection settings

#define REMOTEXY_SERIAL Serial

#define REMOTEXY_SERIAL_SPEED 115200

#define REMOTEXY_WIFI_SSID "RemoteXY"

#define REMOTEXY_WIFI_PASSWORD "123456789"

#define REMOTEXY_SERVER_PORT 6377

#define REMOTEXY_ACCESS_PASSWORD "12345"

そして先程作ったボタン配置等のUIデータはこのあたりに書かれています。

// RemoteXY configurate  
#pragma pack(push, 1)
uint8_t RemoteXY_CONF[] =   // 117 bytes
  { 255,4,0,0,0,110,0,16,150,1,2,1,20,15,37,17,2,26,31,31,
  79,78,0,79,70,70,0,2,1,21,44,36,16,2,26,31,31,79,78,0,
  79,70,70,0,2,1,21,72,36,15,2,26,31,31,79,78,0,79,70,70,
  0,4,0,7,9,10,78,2,26,129,0,39,7,16,6,1,76,69,68,49,
  0,129,0,39,37,16,6,1,76,69,68,50,0,129,0,39,65,16,6,1,
  76,69,68,51,0,129,0,4,7,16,6,1,76,69,68,52,0 };

// RemoteXY configurate

#pragma pack(push, 1)

uint8_t RemoteXY_CONF[] = // 117 bytes

{ 255,4,0,0,0,110,0,16,150,1,2,1,20,15,37,17,2,26,31,31,

79,78,0,79,70,70,0,2,1,21,44,36,16,2,26,31,31,79,78,0,

79,70,70,0,2,1,21,72,36,15,2,26,31,31,79,78,0,79,70,70,

0,4,0,7,9,10,78,2,26,129,0,39,7,16,6,1,76,69,68,49,

0,129,0,39,37,16,6,1,76,69,68,50,0,129,0,39,65,16,6,1,

76,69,68,51,0,129,0,4,7,16,6,1,76,69,68,52,0 };

ここからスケッチの一部追加&修正作業が必要となってきます。
単純なON/OFFボタンの判定は自動的に作られています。
このあたりのスケッチです。

  digitalWrite(PIN_SWITCH_1, (RemoteXY.switch_1==0)?LOW:HIGH);
  digitalWrite(PIN_SWITCH_2, (RemoteXY.switch_2==0)?LOW:HIGH);
  digitalWrite(PIN_SWITCH_3, (RemoteXY.switch_3==0)?LOW:HIGH);

digitalWrite(PIN_SWITCH_1, (RemoteXY.switch_1==0)?LOW:HIGH);

digitalWrite(PIN_SWITCH_2, (RemoteXY.switch_2==0)?LOW:HIGH);

digitalWrite(PIN_SWITCH_3, (RemoteXY.switch_3==0)?LOW:HIGH);

その他の項目は、使用用途によってスケッチが変わってくるため追加で記述する必要があります。
今回の例で言うとスライダーの設定ですね。

スケッチのコメント欄にも記述されていますが、配置したボタンは関数[switch_1][switch_2][switch_3]で呼び出せます。
またスライダーも同様で関数[slider_1]に受け取ったデータが格納されます。
スライダーはコメント欄にあるように0~100の値として取得されるようです。(0..100 slider position)

    // input variables
  uint8_t switch_1; // =1 if switch ON and =0 if OFF 
  uint8_t switch_2; // =1 if switch ON and =0 if OFF 
  uint8_t switch_3; // =1 if switch ON and =0 if OFF 
  int8_t slider_1; // =0..100 slider position

// input variables

uint8_t switch_1; // =1 if switch ON and =0 if OFF

uint8_t switch_2; // =1 if switch ON and =0 if OFF

uint8_t switch_3; // =1 if switch ON and =0 if OFF

int8_t slider_1; // =0..100 slider position

今回Arduino UnoのD5に繋いだLEDをスライダーで調光させて点灯させます。
Arduino UnoのD5ピンはPWM制御で使える端子となり、analogWrite();関数を使ったPWM制御ができます。

analogWrite();関数では、デューティ比は0~255の範囲で指定します。

今回の用途ではこの範囲になるように調整しスケッチを追加する必要があります。
map関数を使いこの範囲に調整し点灯させます。
スライダー部分はvoid loop(){}内にこのように追加記述すれば動くということですね。

  int pos = RemoteXY.slider_1;
  pos = map(pos, 0, 100, 0, 255);
  analogWrite(5, pos);

int pos = RemoteXY.slider_1;

pos = map(pos, 0, 100, 0, 255);

analogWrite(5, pos);

ArduinoのPWM制御(analog.Write()関数)に関してはこちらの記事も参考にして下さい。

【Arduino入門編③】PWM制御でLEDをゆっくり点灯＆消灯させてみる！アナログ出力(PWM)の解説その①

以上でスケッチの修正は完了です！
完成したスケッチがこちらです。

// RemoteXYアプリを使ったLEDの点灯テストスケッチ
// https://burariweb.info

#define REMOTEXY_MODE__ESP8266_HARDSERIAL_POINT

#include <RemoteXY.h>

// RemoteXY connection settings 
#define REMOTEXY_SERIAL Serial
#define REMOTEXY_SERIAL_SPEED 115200
#define REMOTEXY_WIFI_SSID "RemoteXY"
#define REMOTEXY_WIFI_PASSWORD "123456789"
#define REMOTEXY_SERVER_PORT 6377
#define REMOTEXY_ACCESS_PASSWORD "12345"


// RemoteXY configurate  
#pragma pack(push, 1)
uint8_t RemoteXY_CONF[] =   // 117 bytes
  { 255,4,0,0,0,110,0,16,150,1,2,1,20,15,37,17,2,26,31,31,
  79,78,0,79,70,70,0,2,1,21,44,36,16,2,26,31,31,79,78,0,
  79,70,70,0,2,1,21,72,36,15,2,26,31,31,79,78,0,79,70,70,
  0,4,0,7,9,10,78,2,26,129,0,39,7,16,6,1,76,69,68,49,
  0,129,0,39,37,16,6,1,76,69,68,50,0,129,0,39,65,16,6,1,
  76,69,68,51,0,129,0,4,7,16,6,1,76,69,68,52,0 };
  
// this structure defines all the variables and events of your control interface 
struct {

    // input variables
  uint8_t switch_1; // =1 if switch ON and =0 if OFF 
  uint8_t switch_2; // =1 if switch ON and =0 if OFF 
  uint8_t switch_3; // =1 if switch ON and =0 if OFF 
  int8_t slider_1; // =0..100 slider position 

    // other variable
  uint8_t connect_flag;  // =1 if wire connected, else =0 

} RemoteXY;
#pragma pack(pop)

/////////////////////////////////////////////
//           END RemoteXY include          //
/////////////////////////////////////////////

#define PIN_SWITCH_1 2
#define PIN_SWITCH_2 3
#define PIN_SWITCH_3 4


void setup() 
{
  RemoteXY_Init (); 
  
  pinMode (PIN_SWITCH_1, OUTPUT);
  pinMode (PIN_SWITCH_2, OUTPUT);
  pinMode (PIN_SWITCH_3, OUTPUT);

  
  // TODO you setup code
  
}

void loop() 
{ 
  RemoteXY_Handler ();
  
  digitalWrite(PIN_SWITCH_1, (RemoteXY.switch_1==0)?LOW:HIGH);
  digitalWrite(PIN_SWITCH_2, (RemoteXY.switch_2==0)?LOW:HIGH);
  digitalWrite(PIN_SWITCH_3, (RemoteXY.switch_3==0)?LOW:HIGH);
  

  
  int pos = RemoteXY.slider_1;
  pos = map(pos, 0, 100, 0, 255);
  analogWrite(5, pos);


}

// RemoteXYアプリを使ったLEDの点灯テストスケッチ

// https://burariweb.info

#define REMOTEXY_MODE__ESP8266_HARDSERIAL_POINT

#include <RemoteXY.h>

// RemoteXY connection settings

#define REMOTEXY_SERIAL Serial

#define REMOTEXY_SERIAL_SPEED 115200

#define REMOTEXY_WIFI_SSID "RemoteXY"

#define REMOTEXY_WIFI_PASSWORD "123456789"

#define REMOTEXY_SERVER_PORT 6377

#define REMOTEXY_ACCESS_PASSWORD "12345"

// RemoteXY configurate

#pragma pack(push, 1)

uint8_t RemoteXY_CONF[] = // 117 bytes

{ 255,4,0,0,0,110,0,16,150,1,2,1,20,15,37,17,2,26,31,31,

79,78,0,79,70,70,0,2,1,21,44,36,16,2,26,31,31,79,78,0,

79,70,70,0,2,1,21,72,36,15,2,26,31,31,79,78,0,79,70,70,

0,4,0,7,9,10,78,2,26,129,0,39,7,16,6,1,76,69,68,49,

0,129,0,39,37,16,6,1,76,69,68,50,0,129,0,39,65,16,6,1,

76,69,68,51,0,129,0,4,7,16,6,1,76,69,68,52,0 };

// this structure defines all the variables and events of your control interface

struct {

// input variables

uint8_t switch_1; // =1 if switch ON and =0 if OFF

uint8_t switch_2; // =1 if switch ON and =0 if OFF

uint8_t switch_3; // =1 if switch ON and =0 if OFF

int8_t slider_1; // =0..100 slider position

// other variable

uint8_t connect_flag; // =1 if wire connected, else =0

} RemoteXY;

#pragma pack(pop)

/////////////////////////////////////////////

// END RemoteXY include //

/////////////////////////////////////////////

#define PIN_SWITCH_1 2

#define PIN_SWITCH_2 3

#define PIN_SWITCH_3 4

void setup()

{

RemoteXY_Init ();

pinMode (PIN_SWITCH_1, OUTPUT);

pinMode (PIN_SWITCH_2, OUTPUT);

pinMode (PIN_SWITCH_3, OUTPUT);

// TODO you setup code

}

void loop()

{

RemoteXY_Handler ();

digitalWrite(PIN_SWITCH_1, (RemoteXY.switch_1==0)?LOW:HIGH);

digitalWrite(PIN_SWITCH_2, (RemoteXY.switch_2==0)?LOW:HIGH);

digitalWrite(PIN_SWITCH_3, (RemoteXY.switch_3==0)?LOW:HIGH);

int pos = RemoteXY.slider_1;

pos = map(pos, 0, 100, 0, 255);

analogWrite(5, pos);

}

RemoteXYでは、他にもボタンやスイッチ・ジョイスティックやグラフなど使える機能はまだまだあります。
詳しくはこちらを参考にしてスケッチの追加&修正を行って下さい。

参考 How it worksRemoteXY

【手順⑤】Arduinoへのスケッチの書き込み

スケッチが完成しました。
それではArduinoにスケッチを書き込みます。

今回RemoteXYというスマホアプリに対応したスケッチとなっているため、「RemoteXYライブラリ」をArduinoにインストールする必要があります。
この部分ですね！

#include <RemoteXY.h>

1	#include <RemoteXY.h>

[スケッチ]→[ライブラリをインクルード]→[ライブラリを管理]へと進みます。

検索ボックスから[remotexy]で検索するとライブラリを見つけることが出来ます。
これをインストールしておきます。

準備は以上です。
あとは通常の手順でArduino Unoにスケッチを書き込みます。
既にESP-01との接続が完了していますが、今回ハードウェアシリアルでの接続なのでArduinoのD0/D1に繋いでいるケーブルだけ一旦外してからスケッチの書き込みを行って下さい。(書き込みエラーが出ます)

スケッチの書き込みが完了したら、実際にスマホアプリから操作してみます。

【手順⑥】スマホアプリ「RemoteXY」から操作する

それでは実際にスマホアプリRemoteXYからArduinoを操作してみます。
RemoteXYアプリのインストールはこちらから出来ます。
iPhone・Android両スマホに対応しています。

参考 Application for remote control your microcontroller boardRemoteXY

Arduinoに通電しスマホのWi-Fi設定へと進みます。(今回iPhoneを使用しています)
ネットワークの項目に設定したSSID名が表示されるのでこれをタップします。(今回デフォルトのRemoteXYとしています)

設定したパスワード[今回123456789で設定]を入力し[接続]をタップします。

ネットワークに繋がった事を確認しアプリへと進みます。

次にスマホのRemoteXYアプリを立ち上げ、画面右上の[＋]をタップし[WiFi point]を選択します。

[Connect]をタップして設定したパスワード[今回12345を設定]を入力するとWi-Fiモジュールとの接続(Arduinoとの接続)が完了します。

先程Webページで作成したボタン等のUI画面が表示されArduinoを操作することが出来ます。

どうですか、下記動画のように上手く動いたでしょうか？
ArduinoにWi-FiモジュールESP-01を接続してスマホアプリから操作する事が出来ましたね！

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

MEMO

RemoteXYアプリは初回起動後、5項目ほど無料で試すことが出来ます。
以後使用は30秒に制限されてしまいますが、簡単なテストでは30秒で十分で再度接続すればまた30秒テストすることが出来ます。
Wi-Fi接続の基本を学習するのに便利なアプリなので私はサブスク購入しました。
新しいBlinkアプリは1ヶ月750円だったかな？
RemoteXYアプリは3ヶ月で370円と安価なのでお試しにはいいと思います。

SNSでスマホアプリでの操作についてのコメントが多かったことからRemoteXYアプリを使った方法をご紹介しました。

簡単なLEDの点灯という作例を見ていきましたが、スマホを使っているので加速度センサーを使って操作することも出来ます。
便利ですね！

この投稿をInstagramで見る

東京バード(@bird_tokyo)がシェアした投稿

RemoteXYのWebサイトでベースとなるスケッチの作成ができ、指定された関数を使い取得した値を取り出せるので分かりやすいかと思います。

Wi-Fiで操作する場合、スマホアプリを作るのは難易度が当然高く、またブラウザから操作する事も出来ますがこれまたボタンを配置したりと凝ったものを作る場合HTMLなどの知識も必要となってきます。

アプリを使うと自由にUIも作り込め、自分でサーバーを立てたりする必要もなく簡単に出来るのは非常に便利ですね！
有料アプリですが他のアプリと比べると安価で無料版でも試せるので、まずお試しで使ってみるのはいいと思います。

その他デバイスで使ってみる！

今回Arduino UnoとWi-FiモジュールESP-01という組み合わせで使ってみました。
RemoteXYは他のマイコンボードにも対応しており、無線モジュールとしてBluetoothなどを使うことも出来ます。

Arduinoで使えるBluetoothモジュールはHC-05/HC-06がありますが、モジュールの設定を変えればこれらを同様の手順で使うことも出来ます。

HC-05/HC-06 Bluetoothモジュールに関してはこちらの記事も参考にして下さい！

Arduinoを使いBluetooth通信をやってみる！HC-05/HC-06 Bluetoothモジュールの使い方！

しかし残念なことにHC-05/HC-06などのBluetoothモジュールは、Appleとのライセンスの関係でiPhoneでは使うことが出来ません。(iPhone側からBluetoothモジュールとして認識されません！)
これはRemoteXYアプリの問題ではなくBluetoothモジュールの問題なのでiPhoneユーザーとしてはちょっと残念ですが、Androidスマホを使っている方はこれらBluetoothモジュールも今回ご紹介した手順で同様に使うことが出来ます。

またESP-01は先述のようにスケッチを書き込むことにより単体で動かすこともできます。
Arduinoを経由せず単体でWi-Fi搭載ミニArduinoとして動いてくれるので面白いですね！