今回のプロジェクトでは、ESP32デバイスを使用して、Webサーバーとサーボモーターを組み合わせて制御する方法に焦点を当てます。このプロジェクトでは、ESP32が内蔵するWebサーバーを通じて、ブラウザからの指示に応じてサーボモーターの動作を変更します。更に、興味深い機能として、ブラウザの情報をESP32のフラッシュメモリに保存し、それを利用して柔軟かつ効果的に情報を管理します。
この記事では、ESP32の基本的な初期化から始め、Webサーバーの構築、サーボモーターの制御までを詳細に解説します。また、ブラウザ情報をフラッシュメモリに保存する手法を導入し、その応用可能性についても探ります。さらに、実際の利用シーンやプロジェクトの応用についても考察していきましょう。ESP32の新たな可能性を広げる一歩を共に踏み出していきましょう。
・携帯からサーボモータを動かしたい
・自由研究で電子工作してみたい
・IOTに興味があるな～
こんな悩みに答えます。
・初心者だけど電子工作に興味がある
・携帯操作で動くものを作ってみたい
・IOTに興味がある人
こういうものが作れるようになります。
YouTubeでも紹介しています。
必要なもの
- ESP32デバイス
- サーボモーター
- WiFiネットワークに接続可能な環境
上記部品を準備してください。合わせて、ジャンパー線なども準備してください。
電子工作をしていくと、プログラミングにも興味が出てきます。未経験からでもプログラムを学び、ITエンジニアになりたい人は、無料のカウンセリングを受けることをお勧めします。私も、無料で一度カウンセリングを受けどのように勉強すればスキルを身にられるかがわかりました。この経験が現在の大手メーカでの経験に生きていると考えています。
プログラムの概要
このプログラムは、ESP32を用いてサーボモーターを制御し、Webサーバーを通じてユーザーが指定した角度にサーボモーターを動かすことができます。以下、プログラムの主な機能を説明します。
Arduinoのプログラムはこちらです。
#include <ESP32Servo.h>
#include <WiFi.h>
#include <FS.h>
#include <SPIFFS.h>
#include <ESPAsyncWebSrv.h>
// WiFiの接続情報
const char* ssid = "Buffalo-G-5200";
const char* password = "x5vavndfsc36a";
const int servoPin = 25; // サーボモーターの制御ピン
Servo myservo;
AsyncWebServer server(80);
int currentAngle = 90; // 初期のサーボ角度
void setup() {
Serial.begin(115200);
// サーボモーターの初期化
myservo.attach(servoPin);
myservo.write(currentAngle);
// SPIFFSをマウント
if (!SPIFFS.begin(true)) {
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
// WiFi接続
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Webサーバーの設定
server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");
server.on("/servo", HTTP_POST, [](AsyncWebServerRequest *request){
if (request->hasParam("angle", true)) {
int angle = request->getParam("angle", true)->value().toInt();
if (angle >= 0 && angle <= 180) {
myservo.write(angle);
currentAngle = angle;
}
}
request->send(200, "text/plain", "OK");
});
server.begin();
}
void loop() {
// 何か追加の処理があればここに追加
}ライブラリのインクルード
初めにライブラリを入れてください。
#include <ESP32Servo.h>
#include <WiFi.h>
#include <FS.h>
#include <SPIFFS.h>
#include <ESPAsyncWebSrv.h>ESP32のサーボモーター制御とWiFi通信、SPIFFS（SPI Flash File System）を利用するためのライブラリをインクルードします。ESPAsyncWebSrv.hについては、”#include ESPAsyncWebServer.h”と記載すると、うまく作動しなかったため、ESPAsyncWevSrv.hとしてください。
WiFi接続情報の設定
const char* ssid = "Your SSID";
const char* password = "Your Password";WiFi接続に必要なSSIDとパスワードを指定します。自分のSSID, パスワードを入れてください。
サーボモーターの初期化
const int servoPin = 25;
Servo myservo;サーボモーターを制御するためのピンとServoクラスのインスタンスを宣言します。
Webサーバーの設定
AsyncWebServer server(80);ESPAsyncWebSrvライブラリを使用して、ESP32上にWebサーバーを構築します。この行は、AsyncWebServerクラスのインスタンスを作成しています。このクラスは非同期なWebサーバーを構築するための機能を提供します。
- AsyncWebServerクラスのインスタンス化:
AsyncWebServer server(80);
この行は、AsyncWebServerクラスのインスタンスを作成しています。このクラスは非同期なWebサーバーを構築するための機能を提供します。 - ポートの指定:
server(80);の引数として80が指定されています。これはWebサーバーがリクエストを受け付けるためのポート番号で、通常HTTP通信においてはポート80が使用されます。 - Webサーバーの設定と初期化:
serverオブジェクトはその後、server.begin();で初期化され、Webサーバーが開始されます。これにより、ESP32はHTTPリクエストを受け付けることができ、指定されたポート（この場合は80）で待機します。 - サーバーへのハンドラの追加:
serverオブジェクトには、onメソッドを使用してさまざまな種類のリクエストに対するハンドラを追加できます。上記のプログラムでは、server.on("/servo", HTTP_POST, ...)のように、”/servo”へのPOSTリクエストに対するハンドラが追加されています。
簡単に言えば、この行はESP32上でHTTP通信を処理できるWebサーバーを構築するための初期化を行っています。その後、指定したポート（この場合は80）でクライアントからのリクエストを待ち受け、対応するハンドラで処理することが可能になります。
サーボモーターの初期化とSPIFFSのマウント
myservo.attach(servoPin);
myservo.write(currentAngle);
if (!SPIFFS.begin(true)) {
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}サーボモーターの初期化とSPIFFSのマウントを行います。
myservo.attach(servoPin);はサーボモーターを指定したピン（servoPinで指定されたピン）に接続します。これにより、サーボモーターが指定されたピンから信号を受け取り、制御することが可能になります。myservo.write(currentAngle);はサーボモーターの初期位置を設定します。currentAngleはプログラム内で定義された変数で、初期のサーボモーターの角度を表しています。この例では90度に設定されていますが、プロジェクトの要件に合わせて変更できます。
SPIFFS.begin(true)はSPIFFS（SPI Flash File System）を初期化し、マウントします。SPIFFSはESP32のフラッシュメモリを使用してファイルシステムを提供するもので、ファイルの読み書きが可能です。if (!SPIFFS.begin(true))は初期化が成功したかどうかを確認しています。もし初期化に失敗した場合、シリアルモニターにエラーメッセージを表示し、プログラムの実行を終了します。trueはSPIFFSが初めてマウントされる場合に、自動的にフォーマットを行うオプションです。初回のみ有効で、2回目以降は無視されます。
これにより、サーボモーターの初期化とSPIFFSのマウントが行われ、サーボモーターの制御とファイルの読み書きが可能になります。特にSPIFFSを使用することで、プログラム内でWebページやその他のデータを格納し、ESP32をWebサーバーとして活用できるようになります。
WiFi接続
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");WiFiに接続します。
Webサーバーの設定
server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");Webサーバーを構築し、SPIFFSから静的ファイル（ここではindex.html）を提供します。SPIFFSに事前にIndex.html, CSSファイルを保存しておくことで、ブラウザの表示方法を事前に設定できます。
設定するためには下記手順で事前に準備をしておきます。
①Arduinoのフォルダの下にtoolsのフォルダを生成します。
②ESP32FSを下記サイトよりダウンロードしてて、Zipファイルを解凍し、toolsのフォルダに格納します。
下記URLよりダウンロード
こんな感じになります。
すると、このようにESP32 Sketch Data Uploadが表示されます。
はじめは、Arduino IDEのバージョンが2.x.xですと表示されないということで、1.8.19をダウンロードしたところ、表示されました。
③プログラムのフォルダにdataフォルダを作成し、index.htmlと、style.cssを保存します。（画像も入れたい場合は、画像も保存します。）
事前にhtml, cssファイルを作成します。加えて、サーボモータの画像も入れておきます。これらのファイルを事前に作ったdataフォルダに保存します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Servo Control</h1>
<img src="image.png" alt="aa"> <!-- 画像のパスを修正 -->
<input type="range" name="angle" id="angleInput" min="0" max="180" value="90" onchange="updateAngle(this.value); sendAngle(this.value);">
<div id="angleDisplay">Current Angle: 90</div>
</div>
<script>
function updateAngle(value) {
document.getElementById('angleDisplay').innerHTML = 'Current Angle: ' + value;
}
function sendAngle(value) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/servo', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('angle=' + value);
}
</script>
</body>
</html>body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
h1 {
font-size: 60px;
margin-bottom: 20px;
}
input[type="range"] {
-webkit-appearance: none;
position: relative;
overflow: hidden;
height: 40px;
width: 80%; /* 幅をパーセントで指定 */
max-width: 300px; /* 最大幅を指定 */
cursor: pointer;
border-radius: 0;
}
::-webkit-slider-runnable-track {
background: #ddd;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 40px;
background: #fff;
box-shadow: -200px 0 0 200px dodgerblue;
border: 2px solid #999;
}
@media screen and (max-width: 600px) {
/* 600px以下の場合のスタイル */
input[type="range"] {
width: 90%; /* 幅を変更 */
}
}こんな感じでスライダーでサーボの角度を調整できるhtmlファイルを作成しています。
サーボモーターの角度変更処理
server.on("/servo", HTTP_POST, [](AsyncWebServerRequest *request){
if (request->hasParam("angle", true)) {
int angle = request->getParam("angle", true)->value().toInt();
if (angle >= 0 && angle <= 180) {
myservo.write(angle);
currentAngle = angle;
}
}
request->send(200, "text/plain", "OK");
});WebブラウザからのPOSTリクエストを受け取り、指定された角度にサーボモーターを動かします。変更が成功した場合には”OK”の応答を返します。
実際に携帯でサーボを動かしてみる
実際に動かした動画がこちらです。これらを行うことで、自分好みのブラウザを作成して、サーボモータをコントロールすることができました。簡単に作成できるので一度トライしてみてください。
Chat GPTでESP32のプログラムを作成する様子
ChatGPTを使用すると、非常に簡単にプログラムを作成することができます。ぜひ動画をご覧ください。
