ESP32チュートリアル 54/55 - Wifi経由でWS2812 LEDストリップの色を設定 | SunFounderのESP32 IoT学習キット
このチュートリアルでは、ESP32マイクロコントローラーを介してWi-FiでWS2812 RGB LEDストリップの色を制御する方法を学びます。カラー選択ツールを使用することで、モバイルデバイスやデスクトップから異なる色を選択し、その情報をLEDストリップに送信できます。このプロジェクトは、ESP32の機能を示しており、ウェブインターフェースを介してLED照明とのシームレスな相互作用を可能にします。
ESP32 マイクロコントローラーは Wi-Fi と Bluetooth の両方を備えており、IoT アプリケーションにとって多目的な選択肢です。このプロジェクトでは、LED ストリップを制御するために Wi-Fi 機能に焦点を当てます。ユーザーは色を動的に選択でき、視覚的に魅力的な体験を作り出します。このプロジェクトについてのさらに明確な情報を得るために、(ビデオで 00:00) のビデオをぜひご覧ください。
ハードウェアの解説
このプロジェクトの主な構成要素には、ESP32マイクロコントローラーとWS2812 LEDストリップが含まれています。ESP32は強力なマイクロコントローラーで、内蔵のWi-Fi機能により、ワイヤレス通信と制御が可能です。
WS2812 LEDストリップは、個別にアドレス指定可能なRGB LEDで構成されており、各LEDの色を独立して設定することができます。各LEDは、制御回路とRGB LEDを1つのパッケージに組み込んでおり、複数のLEDの配線や制御を簡素化します。
データシートの詳細
| 製造業者 | ワールドセミ |
|---|---|
| 部品番号 | WS2812B |
| ロジック/IO電圧 | 3.5-5.3 V |
| 供給電圧 | 5 V |
| 出力電流(チャネルごと) | 20 mA |
| ピーク電流(チャネルあたり) | 60 mA |
| PWM周波数ガイダンス | 400ヘルツ |
| 入力論理の閾値 | 0.3 × VDD (低), 0.7 × VDD (高) |
| 電圧降下 / RDS(on)/ 飽和度 | 0.5 V |
| 熱的制限 | -40から+80 °C |
| パッケージ | 5050 SMD |
| ノート / バリアント | さまざまな長さと構成で利用可能です。 |
- LEDを損傷させないように、適切な電源を確保してください。
- ESP32とLEDストリップの間に共通のグラウンドを使用してください。
- データラインは短く保ち、信号劣化を防いでください。
- 電源に安定性を持たせるために、コンデンサー(1000 µF)を追加することを検討してください。
- データラインに抵抗器(470 Ω)を使用して信号の整合性を保ちます。
配線指示

ESP32をWS2812 LEDストリップに配線するには、コンポーネントを次のように接続します。最初に、LEDストリップの5VピンをESP32の5V出力に接続します。次に、LEDストリップのグランド(GND)ピンをESP32のGNDピンに接続します。最後に、LEDストリップのデータピン(通常はDIまたはData Inとラベル付けされています)をESP32のGPIOピン13に接続します。すべての接続が安全であることを確認して、正しい機能を確保してください。
動画では代替配線方法について簡単に言及されていますが、ここで説明されている設定は最適なパフォーマンスのために推奨される構成です(動画の03:00)。
コード例とウォークスルー
コードは、WS2812 LEDストリップを制御するための必要なライブラリを含め、ウェブサーバーを設定することから始まります。LEDピンは次のように定義されます。LED_PINストリップ内のLEDの数は設定されています。NUM_LEDS.
#define LED_PIN 13 // NeoPixel LED strip
#define NUM_LEDS 8 // Number of LEDs
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);
このスニペットは、NeoPixelライブラリを初期化し、指定されたピンにLEDストリップを設定します。Adafruit_NeoPixel物体、stripLEDの色を制御するために使用するものです。
次に、コードはWi-Fiを初期化し、受信リクエストを処理するためのウェブサーバーをセットアップします。ネットワークのSSIDとパスワードが定義され、ESP32がWi-Fiに接続できるようになります。
const char *ssid = "your_SSID";
const char *password = "your_PASSWORD";
WebServer server(80);
この抜粋では、置き換えますyour_SSIDそしてyour_PASSWORD実際のWi-Fiの認証情報を使用して。この接続により、ESP32は同じネットワーク上のデバイスと通信できるようになり、LEDストリップのリモートコントロールが可能になります。
LEDの色を変更する主な機能はsetColor()各LEDを順番に処理し、選択したRGB値に基づいてその色を設定します。
void setColor() {
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, valueR, valueG, valueB); // Set the color of the i-th LED
strip.show(); // Update the LED strip with the new colors
delay(10); // Wait for 10 milliseconds
}
}
この機能は、ストリップ内の各LEDが選択した色に更新されることを保証します。遅延により、LEDはスムーズに色を変更します。ウェブインターフェースと対話する際、この機能が呼び出されてあなたの色の選択を反映します。
デモンストレーション / 期待できること
設定が完了すると、ESP32のIPアドレスを通じてウェブインターフェースにアクセスできるようになります。任意の色を選択できるカラー Picker が表示され、その色が LED テープに送信されます。ESP32がWi-Fi接続を失うと、テープは警告色で点滅し、問題を示します(動画の14:30にて)。
一般的な落とし穴には、配線の誤りが含まれ、これによりLEDが点灯しないことや、不正なSSID/パスワードの組み合わせを使用することによってESP32がネットワークに接続できなくなることがあります。接続と認証情報を必ず再確認してください。
ビデオのタイムスタンプ
- 00:00 開始
- 2:01 プロジェクトの紹介
- 3:09 ドキュメント
- 3:47 RGBカラーの説明
- 7:47 配線
- 8:40 Wi-Fiで説明されたWS2812用のArduinoコード
- 19:35 Arduino IDEでESP32ボードとCOMポートを選択する
- 21:17 Wi-Fiを介してLEDストリップを制御するデモ
/*
* WiFiを使ってESP32でRGB LEDを制御する
*
* フルビデオの指示 https://youtu.be/J_UFHk_T9aE
* 📚⬇️ ダウンロードとリソースページ https://robojax.com/RJT687
* 2023年12月18日 アハマド・シャムシリによる執筆
*
* このビデオのためのビデオ指示を視聴してください:
*
* 私はAdafruitのDHTライブラリとESP8266 WebServerを組み合わせました。両方のリンク:
* GitHubのAdafruit DHTライブラリ: https://github.com/adafruit/DHT-sensor-library
* および
* GitHubのESP8266: https://github.com/esp8266/Arduino
*
* 著作権 (c) 2015, Majenko Technologies
* 全著作権所有。
*
* 修正の有無にかかわらず、ソースおよびバイナリ形式での再配布および使用は、以下の条件が満たされる限り許可されます:
*
* ソースコードの再配布は、上記の著作権表示、この条件のリスト、および以下の免責事項を保持する必要があります。
*
* バイナリ形式の再配布は、上記の著作権表示、この条件のリスト、および配布と共に提供された文書やその他の資料における以下の免責事項を再現する必要があります。
*
* Majenko Technologiesの名前またはその貢献者の名前は、特定の事前の書面による許可なしに、このソフトウェアから派生した製品を支持または宣伝するために使用することはできません。
*
* このソフトウェアは著作権者および貢献者によって「現状のまま」提供され、特定の目的への適合性や商品性を含む但しそれに限定されないいかなる明示的または暗示的な保証も否認されます。著作権者または製作者は、契約、厳格責任、または不法行為(過失またはその他を含む)に基づいて、使用に起因するいかなる直接的、間接的、偶発的、特別、例示的、または結果的損害(代替商品やサービスの調達、使用の喪失、データや利益の喪失、または事業の中断を含むがこれに限定されない)に対しても責任を負わないものとします。
*/
#include <Adafruit_NeoPixel.h> // Adafruit NeoPixelライブラリを含める
#define LED_PIN 13 // NeoPixel LEDストリップ
#define NUM_LEDS 8 // LEDの数
// Adafruit_NeoPixelクラスのインスタンスを作成する
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);
// LEDストリップの初期色
int valueR = 178; // 赤の範囲は0から255です
int valueG = 27; // 緑は0から255まで
int valueB = 84; // 青の範囲は0から255までです。
bool showSerialData = false;
String theColorR, theColorG, theColorB;
String theColor ="ff0000";
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
const char *ssid = "dars";
const char *password = "hhhhhhhhhhh";
WebServer server(80);
void showColorPicker() {
String page = "<!DOCTYPE html>\n";
page +="<html>\n";
page +="<body>\n";
page +="<div style=\"zoom: 300%;\">\n";
page +="<h2>Robojax RGB Color picker</h2>\n";
page +="<p id=\"result\"></p>\n";
page +="<form action=\"/color\">\n";
page +=" <label for=\"favcolor\">Select your favorite color:</label>\n";
page +=" <input type=\"color\" id=\"favcolor\" name=\"favcolor\" value=\"#";
page += theColor;
page +="\"><br><br>\n";
page +=" <input type=\"submit\" value=\"Set Color\" />\n";
page +="</form> \n</div>\n";
page +="</body>\n";
page +="</html>\n";
server.send(200, "text/html", page);
}
// from https://stackoverflow.com/questions/44683071/convert-string-as-hex-to-hexadecimal
uint64_t StrToHex(const char* str)
{
return (uint64_t) strtoull(str, 0, 16);
}
void getColor(){
// server.send(200, "text/plain", message);
if(server.argName(0) == "favcolor")
{
String newColor = String(server.arg(0)); // GET引数0を取得して文字列に変換する。
theColor = newColor.substring(1); // 色の先頭から#記号を削除してください。例えば#B2a48d。
theColorR = newColor.substring(1, 3); // #B2a48dからB2を抽出します。
theColorG = newColor.substring(3, 5); // 例として #B2a48d から a4 を抽出します。
theColorB = newColor.substring(5, 7); // #B2a48dから8dを抽出する例
valueR = StrToHex(theColorR.c_str()); // 文字列をHEXに変換するR
valueG = StrToHex(theColorG.c_str()); // Gのために文字列をHEXに変換する
valueB = StrToHex(theColorB.c_str()); // Bのために文字列をHEXに変換する
if(showSerialData)
{
Serial.print("valueR: ");
Serial.println(valueR);
Serial.print("valueG: ");
Serial.println(valueG);
Serial.print("valueB: ");
Serial.println(valueB );
}
}
showColorPicker(); // カラー選択ツールが表示されていることを確認してください。
// server.send(200, "text/plain", message);
}
void setColor()
{
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, valueR, valueG, valueB); // i番目のLEDの色を赤に設定する
strip.show(); // 新しい色でLEDストリップを更新してください。
delay(10); // 100ミリ秒待ってください
}
}
void noConnection()
{
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, 255, 45, 0); // i番目のLEDの色を赤に設定する
strip.show(); // 新しい色でLEDストリップを更新してください。
delay(50); // 100ミリ秒待ってください
}
delay(200);
for (int i = NUM_LEDS-1; i >=0; i--) {
strip.setPixelColor(i, 0, 255, 180); // i番目のLEDの色を赤に設定する
strip.show(); // 新しい色でLEDストリップを更新してください。
delay(50); // 100ミリ秒待ってください
}
}
void handleNotFound() {
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
void setup_wifi() {
delay(10);
// WiFiネットワークに接続することから始めます。
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// 接続を待っています
while (WiFi.status() != WL_CONNECTED) {
noConnection();
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("Open: http: // ");
Serial.print(WiFi.localIP());
Serial.println(" to read temperature");
if (MDNS.begin("robojaxRGB")) {
Serial.println("MDNS responder started");
}
}
void setup(void) {
Serial.begin(115200);
strip.begin(); // NeoPixelストリップを初期化する
strip.show(); // 初期の色を黒に設定する
setup_wifi();
server.on("/", showColorPicker); // カラーピッカーを表示するメインページを表示します。
// server.on("/color", setColor);//WS2812 RGB LEDの色を変更します
server.on("/color", HTTP_GET, getColor);
server.on("/inline", []() {
server.send(200, "text/plain", "this works as well");
});
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
// ロボジャックス.com
while (WiFi.status() != WL_CONNECTED) {
setup_wifi();
}
server.handleClient();
// showColorPicker();
setColor();
delay(300); // あまり頻繁に読み取る必要がない場合は、これを大きな値(1000以上)に変更してください。
// Robojax.comのESP32およびDHT11 DHT22用コード
}
Common Course Links
Common Course Files
リソースと参考文献
まだリソースはありません。
ファイル📁
ファイルは利用できません。