おもしろ工作・プログラミング動画配信中!せでぃあのYouTube

Arduino UNO R4 WiFiをネットワーク接続する方法を分かりやすく解説!

Arduino UNO R4 WiFiをWiFi接続する方法を分かりやすく解説!
  • URLをコピーしました!

この記事内には、プロモーションが含まれます。

こんにちは、せでぃあ(@cediablog)です。

Arduino UNO R4 WIFIを手にしたらやってみたいのが、本体の名前にもなっているWiFi接続です。

WiFi接続とは

スマホやノートPCなどのネットワーク接続に対応した機器を、無線LAN接続する技術のことです。

せでぃあ

「WiFi」と書いて、「ワイファイ」と読みます。

今回はこのArduino UNO R4 WIFIを使って、自宅などの無線LANにWiFi接続動作をさせる方法を紹介します。

この記事を読んでわかること
  • WiFiネットワークへの接続方法
  • ネットワーク接続状態の確認方法
  • マトリクスLEDへのアニメーション表示方法
せでぃあ

WiFi接続のやり方が分からない方に読んで欲しい記事です!

この記事を書いた人
せでぃあ

せでぃあはこんな人物です

✅プライム企業に勤める電気・機械設計エンジニア

✅親子の絆を深めるため、夏休みに子供と一緒に電子工作を製作

✅Arduinoプログラミングを用いて作ったプログラミング電子工作「信GO機」が市の発明くふう展で「優秀賞」を受賞

✅本ブログにてArduinoスクラッチプログラミングLESSON記事投稿中

✅YouTubeチャンネル「せでぃあブログちゃんねる」運営中

Arduino UNO R4 WiFiはここで買えます

目次

WiFi接続とネットワーク接続状態をマトリクスLEDに表示させる

今回作成するプログラム動作を説明します。

動作の解説動画「せでぃあブログちゃんねる」より
プログラムの動作説明
  • プログラム動作を開始する。
  • WiFiネットワーク接続を行う。
    マトリクスLEDに接続中アニメーションを表示。
  • 3秒後に接続状態を確認する。
    接続状態に応じてマトリクスLEDにOK・NGを表示。
STEP
プログラム動作を開始

プログラム転送後、または本体のリセットボタンを押すとプログラム動作を開始します。

STEP
WiFiネットワークに接続
マトリクスLED「接続中」表示
接続中アニメーション「4コマ目」
STEP
3秒後に接続状態を確認

WiFi接続状態に応じてマトリクスLEDに「OK」または「NG」を表示させます。

接続に成功したときは、OKが表示されます。

マトリクスLED「接続OK」表示
接続に成功していたとき

接続に失敗しているときは、NGの表示がされます。

マトリクスLED「接続NG」表示
接続に失敗したとき

あくまでWiFiネットワークに接続して、接続状態を確認する動作になります。

WiFiネットワークに接続してデータをやりとりするにはさらにプログラムを作りこむ必要があります。

せでぃあ

今回はネットワークに接続させるプログラムの紹介になります。

WiFi接続方法が理解できたら、ネットワーク経由で現在時刻を取得してみましょう!

マトリクスLED表示パターンを作る

メインプログラムを作る前に、マトリクスLED点灯パターンファイルを作成しておく必要があります。

今回作成するマトリクスLED表示

  • WiFi接続中アニメーション
  • 接続OK表示
  • 接続NG表示

これらの作り方を順番に説明していきます。

WiFi接続中アニメーションの作り方

LEDマトリクスエディタを使ったマトリクス表示作成方法を紹介します。

ブラウザ上でマトリクス表示を作成してプログラムコードを生成することができます。

STEP
マトリクスエディタを開く

Arduinoの公式LEDマトリクスエディタサイトを開く。

LEDマトリクスエディタの画面
LEDマトリクスエディタの画面
マトリクスエディタ画面の説明
  • マトリクス作画エリア
  • 表示パターンエリア
  • コード生成ボタン

実際のLEDマトリクスと同じ「縦8×横12=96マス」表示になっています。

STEP
アニメーション表示パターンを作成する
マトリクスエディタを使った表示パターンの作り方
LEDマトリクスエディタの使い方

LEDマトリクスエディタの使い方はとても簡単です。

点灯させたいLEDマスをクリックして、黒塗り表示にするだけです。

コピーボタンを押すことで、同じ表示パターンがコピーされます。
コピーボタンを押すと、同じ表示パターンが作成されます。

画面左下のコピーボタンを使うと、同じ表示パターンがコピーされます。

アニメーション表示をさせるときに便利です。

せでぃあ

表示パターン下の数字は、アニメーション表示するときの1コマ表示時間(msec)になります。

デフォルト値は、66msec/コマ≒15コマ/秒です。

2コマ目表示パターン作成画面
2コマ目表示パターン

2コマ目の表示パターンを作ります。

3コマ目表示パターン作成画面
3コマ目表示パターン

3コマ目の表示パターンを作ります。

マウスでポチポチ。楽しいですね!

4コマ目表示パターン作成画面
4コマ目表示パターン

最後の4コマ目を作ります。

電波が飛んでいるイメージの絵になりましたね。

これでWiFi接続中アニメーションの作成は完了です。

STEP
アニメーションプログラムコードを生成する
LEDマトリクスエディタを使った、アニメーション表示プログラム生成方法
アニメーション表示プログラムコードの生成方法

アニメーション表示パターンの作成が完了したら、プログラムコードを生成します。

画面右上のコード生成ボタンをクリックして、任意のファイル名を指定してデータを生成します。

生成したプログラムコードはダウンロードフォルダに保存されます。

生成したプログラムコードファイルは、ダウンロードフォルダに保存されています。

せでぃあ

アニメーション表示コードファイルはメインプログラム作成時に使用しますので、削除しないようにしてください。

接続OK・NG表示パターンコードを生成する

アニメーションではなく、単独表示パターンであってもLEDマトリクスエディタを使ってコード生成すると、32ビット整列のデータを確認できるため便利です。

STEP
OK表示パターンを作る
LEDマトリクスエディタを使った、OK表示の作り方

LEDマトリクスエディタを使って、OK表示パターンを作ります。

パターンを作ったら画面右上のコードファイル生成ボタンを押して、ファイル生成します。

今回ファイル名を「ok」にしましたが、他ファイル名と重複しなければ何でも良いです。

STEP
プログラムコードを確認する
生成したプログラムコードをメモ長で開いて確認します。

生成したコードファイルは、ダウンロードフォルダに保存されています。

生成ファイルを右クリックして、プログラムから開くからメモ帳を使ってファイルを開きます。

メモ帳を使ってOK表示のコードを確認します。

すると、コードの中身をかくにんすることができます。

中かっこ内の4列のうち、上から1~3列目までがマトリクス表示コードです。

4列目はアニメーション表示時間のため、今回は使用しません。

STEP
NG表示パターンを作る
LEDマトリクスエディタを使った、NG表示の作り方

OK表示と同様に、NG表示パターンも作成します。

作成できたらコードを生成します。

メモ帳を使ってNG表示のコードを確認します。

生成したコードをメモ帳で開いて、NG表示させるためのコードを確認します。

せでぃあ

確認したコードは、プログラム作成時に使用します。

これでプログラム作成前の準備は完了です。

動作プログラムの作り方

プログラムは「メインプログラム」と「アニメーション表示プログラム」の2つで構成されます。

まずはプログラムファイルから作っていきます。

Arduino IDE2.2を使ってプログラムを作成しています。

Arduino IDEのインストール方法を紹介しています。

プログラムファイルの作り方

STEP
Arduino IDEファイルを保存する。
Arduino IDEを開いて、ファイルを名前を付けて保存する。

Arduino IDEを開いて、ファイルを名前を付けて保存します。

プログラムは後ほど作りますので、まずは未作成状態のまま保存しても大丈夫です。

ファイル名は「UNO_R4_WiFiConnect」にしました。

STEP
アニメーションファイルをスケッチフォルダに保存する
アニメーションプログラムファイルをメインプログラムファイルと同じフォルダに保存します。

アニメーションプログラムファイルを、メインプログラムファイルと同じスケッチフォルダに保存します。

同じフォルダに保存することで、メインプログラムに自動的に組み込まれます。

STEP
メインプログラムスケッチを開いて確認する

スケッチファイル「UNO_R4_WiFiConnect.ino」をダブルクリックして開きます。

プログラムの上のタブに「connect_animation.h」が表示されていることを確認してください。

メインプログラム

Arduino IDEプログラム画面

メインプログラムを作成していきます。

/* 作品名:UNO_R4_WiFiConnect */
/* 作成者:せでぃあ https://cediablog.com */
/* WiFiネットワーク接続動作確認プログラム */

// WiFiS3ライブラリをインクルードする
#include "WiFiS3.h"
// Arduino_LED_Matrixライブラリをインクルードする
#include "Arduino_LED_Matrix.h"
// connect_animationをインクルードする
#include "connect_animation.h"

// ネットワークのSSIDとパスワードを定義する
#define SECRET_SSID "your_ssid"
#define SECRET_PASS "your_password" 

// マトリクスパネルのオブジェクトを作成する
ArduinoLEDMatrix matrix;

// 接続成功時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ok[] = {
  0x31149285,
  0x48588588,
  0x54492311,
};

// 接続失敗時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ng[] = {
  0x85fc50a5,
  0xa509579,
  0x518d185f,
};

void setup() {
  // シリアル通信を開始する
  Serial.begin(9600);
  // LEDマトリクス動作を開始する
  matrix.begin();
  // WiFiネットワークに接続されているかチェックする
  if (WiFi.status() != WL_CONNECTED) {
    // 接続を試みる
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(SECRET_SSID);
    // WPA/WPA2ネットワークに接続する
    WiFi.begin(SECRET_SSID, SECRET_PASS);
    // 接続中マトリクスアニメーション表示を読み出す
    matrix.loadSequence(connect_animation);
    // 接続中マトリクスアニメーション表示を有効
    matrix.play(true);
    // 3秒待つ
    delay(3000);
  }
}
void loop() {
  if (WiFi.status() == WL_CONNECTED) {
    // 接続に成功したことをシリアルモニタに表示する
    Serial.println("Connected to wifi");
    // マトリクスパネルにOKマークを表示する
    matrix.loadFrame(connect_ok);
  } else {
    // 接続に失敗したことをシリアルモニタに表示する
    Serial.println("Disonnected to wifi");
    // マトリクスパネルにNGマークを表示する
    matrix.loadFrame(connect_ng);
  }
}

上記のサンプルプログラムをコピーアンドペーストしてもOKです。

ネットワークのSSIDとパスワードは、使用するネットワーク環境に合わせて書き換えてください。

your_ssid:ネットワークのSSID
your_password:ネットワークのパスワード

アニメーションプログラム

const uint32_t connect_animation[][4] = {
	{
		0x0,
		0x0,
		0x60060,
		66
	},
	{
		0x0,
		0xf01,
		0x8060060,
		66
	},
	{
		0x1f,
		0x82044f21,
		0x8060060,
		66
	},
	{
		0x3fc4029f,
		0x92044f21,
		0x8060060,
		66
	}
};

アニメーションプログラムは、LEDマトリクスエディタで生成したコードファイルをそのまま使います。

初期設定やデータ転送方法などはこちらの記事を参考にしてください。

WiFi接続動作のプログラム解説

Arduino uno r4 wifiに実装されたマイコンESP32-S3

Espressif(エスプレッシフ)社製のマイコン「ESP32-S3」を実装することで、Wi-FiやBluetoothに対応しています。

Arduino UNO R4 WIFIを使ってWiFi接続するための専用ライブラリ「WiFiS3.h」を使ってWiFi接続します。

WiFiS3ライブラリのクラス

Arduino UNO R4 WIFI専用で用意されているライブラリ「WiFiS3.h」には4つのクラスがあります。

WiFiS3ライブラリのクラス

  • WiFiクラス
  • WiFiUdpクラス
  • WiFiClientクラス
  • WiFiServerクラス

WiFiクラスは、ArduinoボードのWi-Fi機能を制御するためのクラスです。

このクラスを使用すると、ArduinoをWi-Fiネットワークに接続させることができます。

その他3つのクラスは、Arduino本体とネットワーク経由でデータのやりとりを行うためのクラスです。

今回は、ネットワーク接続だけ行うためWiFiクラス以外は使用しません。

WiFiクラスを使ってネットワーク接続する

WiFiクラスを使ってネットワーク接続するプログラムの作り方を解説します。

STEP
ライブラリをインクルードする
// WiFiS3ライブラリをインクルードする
#include "WiFiS3.h"

WiFiS3ライブラリをインクルードして、プログラム内で使用可能にします。

STEP
ネットワークのSSIDとパスワードを記述する
// ネットワークのSSIDとパスワードを定義する
#define SECRET_SSID "your_ssid"
#define SECRET_PASS "your_password" 

接続するWiFiネットワークのSSIDとパスワードを定義します。

STEP
ネットワークに接続する
 // WPA/WPA2ネットワークに接続する
 WiFi.begin(SECRET_SSID, SECRET_PASS);

WPA/WPA2ネットワークに接続するために、begin()メソッドを使用します。

WiFi接続するためのメソッド

WiFi.begin(“接続するSSID” , “接続するためのパスワード”)

ネットワーク接続状態を確認する

WiFiネットワークへの接続状態を確認するために、statusメソッドを使用します。

接続状態を確認するためのメソッド

WiFi.status()

WiFi.status()の戻り値(抜粋)

  • WL_CONNECTED:Wi-Fiネットワークに接続された状態
  • WL_IDLE_STATUS:接続されていない状態
  • WL_NO_SSID_AVAIL:利用可能なSSIDがない状態
  • WL_SCAN_COMPLETED:Wi-Fiネットワークをスキャンした状態
  • WL_CONNECT_FAILED:Wi-Fiネットワークへの接続に失敗した状態
  • WL_CONNECTION_LOST:Wi-Fiネットワークとの接続が切断された状態
  • WL_DISCONNECTED:Wi-Fiネットワークから切断された状態

WiFiネットワークに接続されているかどうかの確認には、戻り値「WL_CONNECTED」を使います。

「WL_CONNECTED」が戻ってこれば「接続できている」と判断します。

それ以外の戻り値は接続できていないときに戻ってくるものであるため、「WL_CONNECTED」が戻ってこない場合は「WiFiネットワークに接続できていない」と判断します。

  // WiFiネットワークに接続されているかチェックする
  if (WiFi.status() != WL_CONNECTED) {

上記プログラムでは、「!=」の条件になっているので、「WiFiネットワークに接続されていないとき」という条件になります。

マトリクスLED点灯動作のプログラム解説

Arduino uno r4 wifi内蔵のマトリクスLED

Arduino UNO R4 WIFIには、本体に12×8=96個のマトリクスLEDが実装されています。

マトリクスLEDの表示方法は主に下記3種類あります。

マトリクスLEDの表示方法

  • 単独表示
  • アニメーション表示
  • テキストスクロール表示

今回作成するプログラムでは、①単独表示と②アニメーション表示を使用します。

マトリクスLEDのアニメーション表示

WiFi接続中アニメーション表示プログラムの作り方を解説します。

STEP
ライブラリをインクルードする
// Arduino_LED_Matrixライブラリをインクルードする
#include "Arduino_LED_Matrix.h"
// connect_animationをインクルードする
#include "connect_animation.h"

Arduino_LED_Matrixライブラリをインクルードして、プログラム内で使用可能にします。

またWiFi接続中アニメーション表示用プログラムもインクルードします。

STEP
ArduinoLEDMatrix型のオブジェクトを作成する
// マトリクスパネルのオブジェクトを作成する
ArduinoLEDMatrix matrix;

マトリクスパネルを点灯させるためのオブジェクトを作成します。

STEP
マトリクスアニメーションを表示させる
 // 接続中マトリクスアニメーション表示を読み出す
 matrix.loadSequence(connect_animation);
 // 接続中マトリクスアニメーション表示を有効
 matrix.play(true);

LEDマトリクスアニメーション表示データを格納するために、loadSequence()メソッドを使用します。

格納したアニメーションを表示させるために、play()メソッドを使用します。

マトリクスアニメーション表示させるためのメソッド

matrix.loadSequence(アニメーション表示データ)
matrix.play(true)
※True:無限ループ表示 False(デフォルト):1度だけ表示

マトリクスLEDの単独表示

STEP
ライブラリをインクルードする
// Arduino_LED_Matrixライブラリをインクルードする
#include "Arduino_LED_Matrix.h"

Arduino_LED_Matrixライブラリをインクルードして、プログラム内で使用可能にします。

STEP
ArduinoLEDMatrix型のオブジェクトを作成する
// マトリクスパネルのオブジェクトを作成する
ArduinoLEDMatrix matrix;

マトリクスパネルを点灯させるためのオブジェクトを作成します。

STEP
OKとNG表示パターンを定義する
// 接続成功時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ok[] = {
  0x31149285,
  0x48588588,
  0x54492311,
};

// 接続失敗時にマトリクスパネルに表示するマークを定義
const uint32_t connect_ng[] = {
  0x85fc50a5,
  0xa509579,
  0x518d185f,
};

接続成功、失敗時に表示させるパターンを定義します。

メモ帳を使ってOK表示のコードを確認します。
OKパターン表示データ

ここであらかじめ準備しておいた、OK・NGそれぞれのパターン表示データを使います。

STEP
OKとNGパターンを表示させる
 // マトリクスパネルにOKマークを表示する
 matrix.loadFrame(connect_ok);
 // マトリクスパネルにNGマークを表示する
 matrix.loadFrame(connect_ng);

シーケンスにない単独パターンを表示させるために、loadFrame()メソッドを使用します。

単独パターン表示するためのメソッド

matrix.loadFrame(単独パターン表示データ)

まずはWiFi接続からはじめてみよう

マトリクスLED「接続中」表示

WiFiS3ライブラリはArduino UNO R4 WIFI専用ライブラリのため、クラスやメソッドについての情報が見つからず困っている方も多いと思います。

ネットワークに接続してみたいけど、どうやったらいいのか分からない。

このようなお悩みを解決したいと思って本記事を執筆しましたが、お役に立てましたでしょうか?

本記事で紹介したプログラムでは、WiFiネットワークに接続するだけでデータのやり取りはありませんが、ネットワークに接続してデータのやり取りするプログラムについても紹介していきますのでお楽しみに!

Arduino UNO R4 WiFiで遊んでみたい!と思った方は下記サイトで購入できますのでご検討ください。

Arduino UNO R4 WIFIが買える国内サイト

通信ケーブルは別売りですので、併せて購入検討されることをおすすめします。

せでぃあ

最後まで読んでいただき、ありがとうございました。

Arduino UNO R4シリーズはビジュアルプログラミングには対応していません。

Arduino UNO R3はビジュアルプログラミングにも対応していますので、小学生にはこちらがおすすめです。

ELEGOOのArduino互換キットは、コスパに優れた初心者向けキットです!

応援ありがとうございます(^^)/

Arduino UNO R4 WiFiをWiFi接続する方法を分かりやすく解説!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次