phptuts · March 30, 2025 04:50 · gsumpster · Apr 1, 2025
diff --git a/code.ino b/code.ino
 #include <WiFi.h>
 #include <FastLED.h>
 #include <WebServer.h>

 #define LED_PIN     5
 #define NUM_LEDS    35
 #define BRIGHTNESS  10

 const char* ssid = "Noisebridge";
 const char* password = "noisebridge";

 CRGB leds[NUM_LEDS];
 WebServer server(80);

 void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConnected. IP: " + WiFi.localIP().toString());

  FastLED.addLeds<WS2812, LED_PIN, GRB>(leds, NUM_LEDS);
  FastLED.setBrightness(BRIGHTNESS);
  setColor(0, 0, 0); // off initially

  server.on("/", handleRoot);
  server.on("/set_color", handleSetColor);
  server.begin();
  Serial.println("Server started");
 }

 void loop() {
  server.handleClient();
 }

 void handleRoot() {
  String html = R"rawliteral(
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>ESP32 LED Control</title>
      <style>
        body { font-family: sans-serif; text-align: center; padding: 20px; }
        input[type=color] { width: 100px; height: 100px; border: none; }
        button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
        #output { margin-top: 15px; font-size: 18px; }
      </style>
    </head>
    <body>
      <h2>🎨 Pick a color or 🎙 say it!</h2>
      <input type="color" id="picker" value="#ff0000">
      <br>
      <button onclick="sendColor()">Set Color</button>
      <br><br>
      <button onclick="startVoice()">🎤 Speak Color</button>
      <p id="output">...</p>

      <script>
        function hexToRgb(hex) {
          let bigint = parseInt(hex.slice(1), 16);
          return {
            r: (bigint >> 16) & 255,
            g: (bigint >> 8) & 255,
            b: bigint & 255
          };
        }

        function sendColor() {
          const hex = document.getElementById('picker').value;
          const { r, g, b } = hexToRgb(hex);
          fetch(`/set_color?r=${r}&g=${g}&b=${b}`);
        }

        function startVoice() {
          const output = document.getElementById("output");
          const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
          if (!SpeechRecognition) {
            output.textContent = "Speech Recognition not supported in this browser.";
            return;
          }

          const recognition = new SpeechRecognition();
          recognition.lang = 'en-US';
          recognition.start();

          recognition.onresult = function(event) {
            const color = event.results[0][0].transcript.toLowerCase().trim();
            output.textContent = 'You said: ' + color;
            fetch('/set_color?color=' + color);
          };

          recognition.onerror = function(event) {
            output.textContent = 'Error: ' + event.error;
          };
        }
      </script>
    </body>
    </html>
  )rawliteral";

  server.send(200, "text/html", html);
 }

 void handleSetColor() {
  if (server.hasArg("color")) {
    String color = server.arg("color");
    color.toLowerCase();

    if (color == "red") setColor(255, 0, 0);
    else if (color == "green") setColor(0, 255, 0);
    else if (color == "blue") setColor(0, 0, 255);
    else if (color == "yellow") setColor(255, 255, 0);
    else if (color == "cyan") setColor(0, 255, 255);
    else if (color == "magenta" || color == "purple") setColor(255, 0, 255);
    else if (color == "white") setColor(255, 255, 255);
    else if (color == "black" || color == "off") setColor(0, 0, 0);
    else server.send(400, "text/plain", "Unknown color");
  }
  else if (server.hasArg("r") && server.hasArg("g") && server.hasArg("b")) {
    int r = server.arg("r").toInt();
    int g = server.arg("g").toInt();
    int b = server.arg("b").toInt();
    setColor(r, g, b);
  }
  server.send(200, "text/plain", "Color set.");
 }

 void setColor(int r, int g, int b) {
  for (int i = 0; i < NUM_LEDS; i++) {
    leds[i] = CRGB(r, g, b);
  }
  FastLED.show();
 }
	#include <WiFi.h>
	#include <FastLED.h>
	#include <WebServer.h>

	#define LED_PIN 5
	#define NUM_LEDS 35
	#define BRIGHTNESS 10

	const char* ssid = "Noisebridge";
	const char* password = "noisebridge";

	CRGB leds[NUM_LEDS];
	WebServer server(80);

	void setup() {
	Serial.begin(115200);
	WiFi.begin(ssid, password);
	Serial.print("Connecting to WiFi");

	while (WiFi.status() != WL_CONNECTED) {
	delay(500);
	Serial.print(".");
	}
	Serial.println("\nConnected. IP: " + WiFi.localIP().toString());

	FastLED.addLeds<WS2812, LED_PIN, GRB>(leds, NUM_LEDS);
	FastLED.setBrightness(BRIGHTNESS);
	setColor(0, 0, 0); // off initially

	server.on("/", handleRoot);
	server.on("/set_color", handleSetColor);
	server.begin();
	Serial.println("Server started");
	}

	void loop() {
	server.handleClient();
	}

	void handleRoot() {
	String html = R"rawliteral(
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>ESP32 LED Control</title>
	<style>
	body { font-family: sans-serif; text-align: center; padding: 20px; }
	input[type=color] { width: 100px; height: 100px; border: none; }
	button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
	#output { margin-top: 15px; font-size: 18px; }
	</style>
	</head>
	<body>
	<h2>🎨 Pick a color or 🎙 say it!</h2>
	<input type="color" id="picker" value="#ff0000">
	<br>
	<button onclick="sendColor()">Set Color</button>
	<br><br>
	<button onclick="startVoice()">🎤 Speak Color</button>
	<p id="output">...</p>

	<script>
	function hexToRgb(hex) {
	let bigint = parseInt(hex.slice(1), 16);
	return {
	r: (bigint >> 16) & 255,
	g: (bigint >> 8) & 255,
	b: bigint & 255
	};
	}

	function sendColor() {
	const hex = document.getElementById('picker').value;
	const { r, g, b } = hexToRgb(hex);
	fetch(`/set_color?r=${r}&g=${g}&b=${b}`);
	}

	function startVoice() {
	const output = document.getElementById("output");
	const SpeechRecognition = window.SpeechRecognition \|\| window.webkitSpeechRecognition;
	if (!SpeechRecognition) {
	output.textContent = "Speech Recognition not supported in this browser.";
	return;
	}

	const recognition = new SpeechRecognition();
	recognition.lang = 'en-US';
	recognition.start();

	recognition.onresult = function(event) {
	const color = event.results[0][0].transcript.toLowerCase().trim();
	output.textContent = 'You said: ' + color;
	fetch('/set_color?color=' + color);
	};

	recognition.onerror = function(event) {
	output.textContent = 'Error: ' + event.error;
	};
	}
	</script>
	</body>
	</html>
	)rawliteral";

	server.send(200, "text/html", html);
	}

	void handleSetColor() {
	if (server.hasArg("color")) {
	String color = server.arg("color");
	color.toLowerCase();

	if (color == "red") setColor(255, 0, 0);
	else if (color == "green") setColor(0, 255, 0);
	else if (color == "blue") setColor(0, 0, 255);
	else if (color == "yellow") setColor(255, 255, 0);
	else if (color == "cyan") setColor(0, 255, 255);
	else if (color == "magenta" \|\| color == "purple") setColor(255, 0, 255);
	else if (color == "white") setColor(255, 255, 255);
	else if (color == "black" \|\| color == "off") setColor(0, 0, 0);
	else server.send(400, "text/plain", "Unknown color");
	}
	else if (server.hasArg("r") && server.hasArg("g") && server.hasArg("b")) {
	int r = server.arg("r").toInt();
	int g = server.arg("g").toInt();
	int b = server.arg("b").toInt();
	setColor(r, g, b);
	}
	server.send(200, "text/plain", "Color set.");
	}

	void setColor(int r, int g, int b) {
	for (int i = 0; i < NUM_LEDS; i++) {
	leds[i] = CRGB(r, g, b);
	}
	FastLED.show();
	}