過年期間有去伯父家拜個年，由於我伯父家是做燈藝的所以可以看到各式各種LED燈飾還有多種不同的LED佈景，這次回去也和伯父聊了一下也談到控制不同燈光組合的模式，於是我就想到利用現在最夯的開發版ESP來弄一套好像也蠻好玩的，結果伯父拿了幾隻燈條給我玩看看，於是就有了這篇文章XD
回歸主題 現在市面上的許多產品這種燈光控制產品總類甚多，但其運行模式卻大同小異，從氣氛燈、汽機車RGB套件、電腦RGB等等都可以看到這方面應用的存在，本次主題是利用ESP32來控制一個RGB的燈具來達成無線控制的功能!
準備工具:
WEMOS D1 ESP32 開發版
TIP120 NPN型電晶體 3個
10K電阻 3個
RGB燈條
Arduino IDE 1.8
我這邊拿到的是藍色燈管，但其實這燈管使用RGB的燈珠所以可以將剩下的功能解除封印
首先我們要先了解到燈條的供應電源是12V 我們的開發版的電源是5V，基本上我沒辦法直接用開發版去驅動燈條，所以需要透過電晶體去驅動電路如下圖所示(隨手畫XD)
做出來大概長這樣，我這邊是使用實驗洞洞板來進行快速佈線
接著使用ESP用的 RGB控制程式寫進到我們的開發版裡
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "Your_SSID"; //輸入你家裡WIFI
const char* password = "Your_Password"; //輸入你家裡WIFI密碼
const byte DNS_PORT = 53;
const int red_pin = 26; //定義控制R腳位輸出
const int green_pin = 27; //定義控制G腳位輸出
const int blue_pin = 25; //定義控制B腳位輸出
// 設置 PWM 頻率、通道和位分辨率
const int frequency = 5000;
const int redChannel = 0;
const int greenChannel = 1;
const int blueChannel = 2;
const int resolution = 8;
WebServer webServer(80);
//
設定網頁調色的HTML與JS
String webpage = ""
"<!DOCTYPE html><html><head><title>RGB control</title><meta name='mobile-web-app-capable' content='yes' />"
"<meta name='viewport' content='width=device-width' /></head><body style='margin: 0px; padding: 0px;'>"
"<canvas id='colorspace'></canvas></body>"
"<script type='text/javascript'>"
"(function () {"
" var canvas = document.getElementById('colorspace');"
" var ctx = canvas.getContext('2d');"
" function drawCanvas() {"
" var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0);"
" for(var i=0; i <= 360; i+=10) {"
" colours.addColorStop(i/360, 'hsl(' + i + ', 100%, 50%)');"
" }"
" ctx.fillStyle = colours;"
" ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);"
" var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);"
" luminance.addColorStop(0, '#ffffff');"
" luminance.addColorStop(0.05, '#ffffff');"
" luminance.addColorStop(0.5, 'rgba(0,0,0,0)');"
" luminance.addColorStop(0.95, '#000000');"
" luminance.addColorStop(1, '#000000');"
" ctx.fillStyle = luminance;"
" ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);"
" }"
" var eventLocked = false;"
" function handleEvent(clientX, clientY) {"
" if(eventLocked) {"
" return;"
" }"
" function colourCorrect(v) {"
" return Math.round(1023-(v*v)/64);"
" }"
" var data = ctx.getImageData(clientX, clientY, 1, 1).data;"
" var params = ["
" 'r=' + colourCorrect(data[0]),"
" 'g=' + colourCorrect(data[1]),"
" 'b=' + colourCorrect(data[2])"
" ].join('&');"
" var req = new XMLHttpRequest();"
" req.open('POST', '?' + params, true);"
" req.send();"
" eventLocked = true;"
" req.onreadystatechange = function() {"
" if(req.readyState == 4) {"
" eventLocked = false;"
" }"
" }"
" }"
" canvas.addEventListener('click', function(event) {"
" handleEvent(event.clientX, event.clientY, true);"
" }, false);"
" canvas.addEventListener('touchmove', function(event){"
" handleEvent(event.touches[0].clientX, event.touches[0].clientY);"
"}, false);"
" function resizeCanvas() {"
" canvas.width = window.innerWidth;"
" canvas.height = window.innerHeight;"
" drawCanvas();"
" }"
" window.addEventListener('resize', resizeCanvas, false);"
" resizeCanvas();"
" drawCanvas();"
" document.ontouchmove = function(e) {e.preventDefault()};"
" })();"
"</script></html>";
void handleRoot() {
String red_pin = webServer.arg(0);
String green_pin = webServer.arg(1);
String blue_pin = webServer.arg(2);
//顏色比例控制
if((red_pin != "") && (green_pin != "") && (blue_pin != ""))
{
ledcWrite(redChannel, 1023 - red_pin.toInt());
ledcWrite(greenChannel, 1023 - green_pin.toInt());
ledcWrite(blueChannel, 1023 - blue_pin.toInt());
}
Serial.print("Red: ");
Serial.println(red_pin.toInt());
Serial.print("Green: ");
Serial.println(green_pin.toInt());
Serial.print("Blue: ");
Serial.println(blue_pin.toInt());
Serial.println();
webServer.send(200, "text/html", webpage);
}
void setup() {
ledcSetup(redChannel, frequency, resolution);
ledcSetup(greenChannel, frequency, resolution);
ledcSetup(blueChannel, frequency, resolution);
//PWM定義套用RGB腳位上
ledcAttachPin(red_pin, redChannel);
ledcAttachPin(green_pin, greenChannel);
ledcAttachPin(blue_pin, blueChannel);
delay(1000);
Serial.begin(115200);
Serial.println();
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
webServer.on("/", handleRoot);//啟動網頁伺服器
webServer.begin();
}
void loop() {
webServer.handleClient();
}
執行後我們測試連線由開發版所建立的一個網頁來控制燈條
這樣就可以控制啦，我是阿俊謝謝觀看~~
