アドベントカレンダーの記事ですので、クリスマスに合わせた内容がよいと思い、クリスマスツリーのイルミネーション用にLEDを光らせることにしました。
光らせるのはこちらのNeoPixelタイプのフルカラーLEDです。
コントロールにはM5Stack NanoC6を使おうと思います。
小さくて1000円くらいで買えるのでとてもいいですね。
準備
NanoC6はUIFLowに対応していないので、Arduino IDEを使い開発します。
このページの説明通りに設定していきます。
デバッグなどのために Serial.println() を使いたい場合、
"ツール" → "USB CDC On Boot" → "Enabled" に設定しないと表示されないので注意です。
接続
M5NanoC6とNeoPixelを接続します。
NeoPixelとの接続には、簡単に接続ができるGROVEコネクタを使います。今回はLEDの個数もあまり多くないので、電源もここから取ろうと思います。
NeoPixelには接続向きがあります。矢印などが書いてあるので確認して接続してください。
M5NanoC6への給電はモバイルバッテリーを使います。
| 端子 | Pin No |
|---|---|
| G(GND) | G |
| 5V(VCC) | 5V |
| G2 | GPIO2 |
一部のみの紹介になりますので、ソースコードの全体はこちらに上げてあります。
LED制御
Arduino IDEのライブラリマネージャーからAdafruit NeoPixelをインストールします。
#include <Adafruit_NeoPixel.h>
#define LED_PIN 2 // GPIOのピン番号
#define LED_COUNT 50 // LEDの個数
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
// 開始
strip.begin();
// 色を設定
strip.setPixelColor(i, targetColor);
// LEDの状態を更新
strip.show();
web server
サーバーを立てて、ブラウザからLEDの色をコントロールできるようにしようと思います。
Wifiに接続します。
// WiFi station modeで接続
WiFi.mode(WIFI_STA);
// SSIDとパスワードを設定
WiFi.begin(ssid, pass);
// 接続されるまで繰り返します
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
if (WiFi.status() == WL_CONNECT_FAILED) {
Serial.println("Connect Failed");
}
}
Serial.println("Connected");
ブラウザで表示されるHTMLを作成し、設定します。
// ポート番号80でサーバーを定義
WebServer server(80);
// htmlは R"()" 内に記載
char html[] = R"(
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Select</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById("form")
const submitButton = document.getElementById("submit-button")
submitButton.onclick = () => {
const formData = new FormData(form)
const action = form.getAttribute("action")
const options = {
method: 'POST',
body: formData,
}
fetch(action, options).then((e) => {
if(e.status === 200) {
return
}
})
}
})
</script>
<style>
// 省略
// CSSを記載
</style>
</head>
<body>
<!-- 省略 -->
<!-- LEDの色を選択するためのフォームを配置 -->
</body>
</html>
)";
void handleRoot() {
// POSTで送られた値を取得
if (server.method() == HTTP_POST) {
String val = server.arg("color");
// 色を変える
changeColorSequential(val.c_str(), 10);
}
// 値をクライアントに返す
server.send(200, "text/html", html);
}
void setup() {
// ルートアクセス時のHTMLを登録
server.on("/", handleRoot);
// サーバー開始
server.begin();
}
WiFi.localIPで確認できるIPにブラウザからアクセスします。
WiFi.localIP();
完成
ブラウザで選択した色へと変化するようになりました