WiFi RGB Control
Difficulty: ● ● ● ● ○
-
Make Sure You have:
-
Did you know ?
Parts Required
No products found in parts_required metafield
How It Works ?
GENESIS
Connection Guide
Snap your modules as shown above, copy the code into the Arduino IDE and Click upload
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "SSID"; //your router SSID
const char* password = "password"; //your router password
// --- FIXED IP ---
IPAddress local_IP(192, 168, 1, 27);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
#define RED_PIN 17
#define GREEN_PIN 21
#define BLUE_PIN 4
WebServer server(80);
int brightness = 128; // 0–255
int hue = 0; // 0–360
void hueToRGB(int h, int v, int &r, int &g, int &b) {
float hh = h / 60.0;
int i = int(hh) % 6;
float f = hh - int(hh);
int p = 0;
int q = (int)(v * (1 - f));
int t = (int)(v * f);
switch (i) {
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
default:r = v; g = p; b = q; break;
}
}
void updateLED() {
int r, g, b;
hueToRGB(hue, brightness, r, g, b);
ledcWrite(RED_PIN, r);
ledcWrite(GREEN_PIN, g);
ledcWrite(BLUE_PIN, b);
}
String htmlPage() {
String page = R"rawliteral(
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body{background:#111;color:white;text-align:center;font-family:Arial}
input{width:80%;height:40px;margin:20px}</style></head><body>
<h2>RGB LED Control</h2>
<label>Brightness</label><br>
<input type="range" min="0" max="255" value=")" + String(brightness) + R"(" id="brightness"><br>
<label>Color Hue</label><br>
<input type="range" min="0" max="360" value=")" + String(hue) + R"(" id="color"><br>
<script>
function sendData(url){fetch(url).catch(e=>console.log(e));}
document.getElementById("brightness").addEventListener("input", e=>sendData("/brightness?val="+e.target.value));
document.getElementById("color").addEventListener("input", e=>sendData("/color?val="+e.target.value));
</script></body></html>)rawliteral";
return page;
}
void handleRoot() { server.send(200, "text/html", htmlPage()); }
void handleBrightness() { if (server.hasArg("val")) { brightness = server.arg("val").toInt(); updateLED(); } server.send(200, "text/plain", "OK"); }
void handleColor() { if (server.hasArg("val")) { hue = server.arg("val").toInt(); updateLED(); } server.send(200, "text/plain", "OK"); }
void setup() {
Serial.begin(115200);
ledcAttach(RED_PIN, 5000, 8);
ledcAttach(GREEN_PIN, 5000, 8);
ledcAttach(BLUE_PIN, 5000, 8);
if (!WiFi.config(local_IP, gateway, subnet)) {
Serial.println("Failed to configure Static IP");
}
WiFi.begin(ssid, password);
Serial.print("Connecting");
while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
Serial.println("\nConnected! IP: " + WiFi.localIP().toString());
server.on("/", handleRoot);
server.on("/brightness", handleBrightness);
server.on("/color", handleColor);
server.begin();
updateLED();
}
void loop() { server.handleClient(); }