Arduino UNO R4 - Farbsensor über Web
Dieses lustige Projekt kombiniert den TCS3200D/TCS230 Farbsensor mit einem webbasierten Minion-Charakter. Der Arduino UNO R4 WiFi liest Farben vom Sensor und sendet die erkannte Farbe über WebSocket an einen Webbrowser. Der Minion auf der Webseite ändert seine Hautfarbe in Echtzeit und passt sich an jede Farbe an, die Sie vor den Sensor halten! Um die Erstellung der Weboberfläche und die Echtzeitkommunikation zu vereinfachen, verwenden wir die DIYables WebApps Bibliothek.
- Der Arduino UNO R4 liest RGB-Werte vom TCS3200D/TCS230 Farbsensor
- Der Arduino konvertiert die RGB-Werte zu einem HEX-Farbcode
- Der Farbcode wird über WebSocket in Echtzeit an einen Webbrowser gesendet
- Die Webseite zeigt einen lustigen animierten Minion, dessen Körper, Arme und Augenlider ihre Farbe ändern
Wir stellen auch eine schrittweise Video-Anleitung am Ende dieses Tutorials bereit.
Hardware Erforderlich
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino enthalten) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Über TCS3200D/TCS230 Farbsensor und DIYables WebApps
Lernen Sie mehr über den TCS3200D/TCS230 Farbsensor, die DIYables WebApps Bibliothek und wie Sie benutzerdefinierte Web-Apps erstellen in den Tutorials unten:
Schaltplan
Dieses Bild zeigt, wie der TCS3200 Farbsensor mit dem Arduino UNO R4 WiFi verbunden wird:
| TCS3200 Farbsensor | Arduino UNO R4 |
|---|---|
| VCC | 5V |
| GND | GND |
| S0 | Pin 4 |
| S1 | Pin 3 |
| S2 | Pin 6 |
| S3 | Pin 5 |
| OUT | Pin 7 |
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Siehe Der beste Weg, den Arduino Uno R4 und andere Komponenten mit Strom zu versorgen.
Funktionsweise
- Der Arduino liest den Farbsensor alle 1 Sekunde aus.
- Für jeden Messwert wählt er nacheinander die roten, grünen und blauen Filter mit den S2/S3 Pins aus und misst dann die Pulsbreite am OUT Pin.
- Die rohen Pulsbreitenwerte werden mit Hilfe von Kalibrierungswerten auf 0-255 RGB-Werte gemappt (vom Kalibrierungsschritt).
- Die RGB-Werte werden zu einem HEX-Farb-String konvertiert (z.B. #FF8000).
- Der HEX-Farb-String wird über WebSocket mit der DIYables WebApps Bibliothek an den Webbrowser gesendet.
- Die Webseite empfängt die Farbe und aktualisiert in Echtzeit den Körper, die Arme und Augenlider des Minions auf diese Farbe.
Arduino UNO R4 Code - Farbsensor Minion Web App
Der Code besteht aus 4 Dateien:
- ColorSensor.ino - Haupt-Arduino Sketch: liest den Farbsensor und sendet die Farbe an die Webseite
- CustomWebApp.h - Header-Datei: definiert die benutzerdefinierte Web-App Seitenklasse
- CustomWebApp.cpp - Implementierungsdatei: behandelt WebSocket-Kommunikation mit der "Color Sensor:" Kennung
- custom_page_html.h - Webseite: enthält den animierten Minion HTML/CSS/JavaScript, der Farben empfängt und die Minion-Haut aktualisiert
ColorSensor.ino
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-r4/arduino-uno-r4-color-sensor-via-web
*/
#include <DIYablesWebApps.h>
#include "CustomWebApp.h"
// CHANGE THESE TO YOUR WIFI DETAILS
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
int status = WL_IDLE_STATUS;
// TCS3200 Pins
const int S0 = 4, S1 = 3, S2 = 6, S3 = 5, sensorOut = 7;
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
CustomWebAppPage customPage;
unsigned long lastColorRead = 0;
void setup() {
Serial.begin(9600);
// Initialize TCS3200 pins
pinMode(S0, OUTPUT);
pinMode(S1, OUTPUT);
pinMode(S2, OUTPUT);
pinMode(S3, OUTPUT);
pinMode(sensorOut, INPUT);
digitalWrite(S0, HIGH);
digitalWrite(S1, LOW); // 20% frequency scaling
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&customPage);
// Check for the WiFi module
if (WiFi.status() == WL_NO_MODULE) {
Serial.println("Communication with WiFi module failed!");
// Stop program execution
while (true);
}
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION) {
Serial.println("Please upgrade the firmware");
}
// Attempt to connect to WiFi network
while (status != WL_CONNECTED) {
// Connect to WPA/WPA2 network (change if using open or WEP)
status = WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
// Wait 10 seconds for connection
delay(10000);
}
webAppsServer.begin();
Serial.println("Color Web Server Ready!");
}
void loop() {
webAppsServer.loop();
// Read color every 1 second
if (millis() - lastColorRead > 1000) {
// Read Red color
digitalWrite(S2, LOW);
digitalWrite(S3, LOW);
int r = map(pulseIn(sensorOut, LOW), 31, 150, 255, 0);
// Read Green color
digitalWrite(S2, HIGH);
digitalWrite(S3, HIGH);
int g = map(pulseIn(sensorOut, LOW), 35, 180, 255, 0);
// Read Blue color
digitalWrite(S2, LOW);
digitalWrite(S3, HIGH);
int b = map(pulseIn(sensorOut, LOW), 30, 150, 255, 0);
// Convert to HEX and send to Web
char hexColor[8];
sprintf(hexColor, "#%02X%02X%02X", constrain(r, 0, 255), constrain(g, 0, 255), constrain(b, 0, 255));
customPage.sendToWeb(String(hexColor));
Serial.println("Sent to Minion: " + String(hexColor));
lastColorRead = millis();
}
}
CustomWebApp.h
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-r4/arduino-uno-r4-color-sensor-via-web
*/
#ifndef CUSTOM_WEBAPP_H
#define CUSTOM_WEBAPP_H
#include <DIYablesWebApps.h>
/**
* Simple Custom WebApp Page
*
* This is a template for creating your own custom web applications.
* It provides basic controls like buttons and sliders that communicate
* with your Arduino in real-time.
*/
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
// WebSocket message identifier for this custom app
static const String APP_IDENTIFIER;
public:
CustomWebAppPage();
// ========================================
// REQUIRED METHODS - USED BY LIBRARY - DON'T CHANGE THESE!
// ========================================
void handleHTTPRequest(IWebClient& client) override;
void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) override;
const char* getPageInfo() const override;
String getNavigationInfo() const override;
// ========================================
// YOUR METHODS - USE THESE IN YOUR CODE!
// ========================================
void onCustomMessageReceived(void (*callback)(const String& payload));
void sendToWeb(const String& message);
};
#endif
CustomWebApp.cpp
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-r4/arduino-uno-r4-color-sensor-via-web
*/
#include "CustomWebApp.h"
#include "custom_page_html.h"
// Define the static member - WebSocket message identifier for this custom app
const String CustomWebAppPage::APP_IDENTIFIER = "Color Sensor:";
// Callback function for handling messages from web browser
void (*customMessageCallback)(const String& payload) = nullptr;
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
void CustomWebAppPage::handleHTTPRequest(IWebClient& client) {
// Send the HTML page to web browser
sendHTTPHeader(client);
client.print(CUSTOM_PAGE_HTML);
}
void CustomWebAppPage::handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) {
String messageStr = String(message, length);
Serial.print("Color Sensor WebApp received: ");
Serial.println(messageStr);
// Only handle messages that start with our app identifier
if (messageStr.startsWith(APP_IDENTIFIER)) {
String payload = messageStr.substring(APP_IDENTIFIER.length()); // Remove identifier
// Call your callback function with the payload
if (customMessageCallback) {
customMessageCallback(payload);
}
}
}
void CustomWebAppPage::onCustomMessageReceived(void (*callback)(const String& payload)) {
customMessageCallback = callback;
}
void CustomWebAppPage::sendToWeb(const String& message) {
// Send message to web browser with app identifier
String fullMessage = APP_IDENTIFIER + message;
broadcastToAllClients(fullMessage.c_str());
}
const char* CustomWebAppPage::getPageInfo() const {
return "🔧 Color Sensor WebApp";
}
String CustomWebAppPage::getNavigationInfo() const {
String result = "<a href=\"";
result += getPagePath();
result += "\" class=\"app-card custom\" style=\"background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\">";
result += "<h3>🔧 Color Sensor WebApp</h3>";
result += "<p>Simple template for your own apps</p>";
result += "</a>";
return result;
}
custom_page_html.h
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-r4/arduino-uno-r4-color-sensor-via-web
*/
#ifndef CUSTOM_PAGE_HTML_H
#define CUSTOM_PAGE_HTML_H
const char CUSTOM_PAGE_HTML[] PROGMEM = R"HTML_WRAPPER(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mobile Laughing Minion</title>
<style>
body { margin: 0; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #f0f8ff; font-family: sans-serif; overflow-x: hidden; }
.text { font-size: clamp(16px, 5vw, 24px); font-weight: bold; color: #333; margin-bottom: 20px; text-align: center; z-index: 10; }
.scale-wrapper { transform-origin: top center; display: flex; justify-content: center; align-items: flex-start; }
.minion-container { position: relative; width: 200px; height: 400px; }
.body { position: absolute; top: 20px; left: 25px; width: 150px; height: 300px; background-color: #FFD90F; border-radius: 75px; box-shadow: inset -10px -10px 20px rgba(0,0,0,0.1); overflow: hidden; z-index: 2; transition: background-color 0.5s; }
.overalls { position: absolute; bottom: 0; width: 100%; height: 90px; background-color: #225A94; border-radius: 0 0 75px 75px; box-shadow: inset -10px -10px 20px rgba(0,0,0,0.2); }
.pocket { position: absolute; bottom: 30px; left: 50px; width: 50px; height: 40px; background-color: #1A4674; border-radius: 10px 10px 20px 20px; border: 2px dashed #fce144; }
.strap { position: absolute; top: 65px; left: 0; width: 100%; height: 25px; background-color: #333; z-index: 1; }
.goggles-wrapper { position: absolute; top: 50px; left: -5px; width: 160px; display: flex; justify-content: center; z-index: 3; }
.goggle { position: relative; width: 50px; height: 50px; background-color: white; border: 12px solid #999; border-radius: 50%; box-shadow: 3px 3px 8px rgba(0,0,0,0.2), inset 3px 3px 8px rgba(0,0,0,0.1); margin: 0 -2px; overflow: hidden; }
.pupil { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; background-color: #4B3621; border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.2s ease-out; }
.pupil::after { content: ''; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; background-color: black; border-radius: 50%; }
.catchlight { position: absolute; top: 2px; right: 4px; width: 4px; height: 4px; background-color: white; border-radius: 50%; z-index: 4; }
.eyelid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFD90F; border-bottom: 3px solid #D4B200; transform-origin: top; transform: scaleY(0); z-index: 5; animation: blink 4s infinite; }
.mouth { position: absolute; top: 145px; left: 35px; width: 80px; height: 45px; background-color: #3E2723; border-radius: 10px 10px 60px 60px; overflow: hidden; z-index: 3; box-shadow: inset 0 5px 10px rgba(0,0,0,0.5); animation: laugh 0.2s infinite alternate ease-in-out; }
.teeth { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background-color: #fff; border-radius: 0 0 5px 5px; }
.tongue { position: absolute; bottom: -5px; left: 20px; width: 40px; height: 25px; background-color: #FF5252; border-radius: 50%; animation: wag 0.2s infinite alternate ease-in-out; }
.arm { position: absolute; top: 140px; width: 25px; height: 80px; background-color: #FFD90F; border-radius: 12px; z-index: 1; transition: background-color 0.5s; }
.arm.left { left: 10px; transform: rotate(35deg); }
.arm.right { right: 15px; transform: rotate(-35deg); }
.glove { position: absolute; bottom: -15px; left: -5px; width: 35px; height: 35px; background-color: #333; border-radius: 50%; }
.leg { position: absolute; bottom: 50px; width: 25px; height: 40px; background-color: #225A94; z-index: 1; }
.leg.left { left: 60px; }
.leg.right { left: 115px; }
.shoe { position: absolute; bottom: -15px; left: -10px; width: 45px; height: 20px; background-color: #222; border-radius: 20px 20px 5px 5px; border-bottom: 5px solid #111; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }
@keyframes laugh { 0% { height: 40px; transform: scaleX(1); } 100% { height: 55px; transform: scaleX(1.05); } }
@keyframes wag { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
</style>
</head>
<body>
<div class="text" id="status-text">Just watch him look around! 👀</div>
<div class="scale-wrapper" id="minionWrapper">
<div class="minion-container">
<div class="arm left" id="armL"><div class="glove"></div></div>
<div class="arm right" id="armR"><div class="glove"></div></div>
<div class="leg left"><div class="shoe"></div></div>
<div class="leg right"><div class="shoe"></div></div>
<div class="body" id="minionBody">
<div class="overalls">
<div class="pocket"></div>
</div>
<div class="strap"></div>
<div class="goggles-wrapper">
<div class="goggle"><div class="pupil"><div class="catchlight"></div></div><div class="eyelid" id="eyelidL"></div></div>
<div class="goggle"><div class="pupil"><div class="catchlight"></div></div><div class="eyelid" id="eyelidR"></div></div>
</div>
<div class="mouth">
<div class="teeth"></div>
<div class="tongue"></div>
</div>
</div>
</div>
</div>
<script>
const APP_IDENTIFIER = 'Color Sensor:';
let ws = null;
function connectWebSocket() {
ws = new WebSocket('ws://' + location.hostname + ':81');
ws.onopen = () => document.getElementById('status-text').textContent = "Arduino Uno R4 - Color Sensor";
ws.onclose = () => setTimeout(connectWebSocket, 2000);
ws.onmessage = (event) => {
if (event.data.startsWith(APP_IDENTIFIER)) {
let color = event.data.substring(APP_IDENTIFIER.length);
// Cập nhật màu cho thân, tay và mí mắt
document.getElementById('minionBody').style.backgroundColor = color;
document.getElementById('armL').style.backgroundColor = color;
document.getElementById('armR').style.backgroundColor = color;
document.getElementById('eyelidL').style.backgroundColor = color;
document.getElementById('eyelidR').style.backgroundColor = color;
document.getElementById('status-text').style.color = color;
}
};
}
function resizeMinion() {
const wrapper = document.getElementById('minionWrapper');
const availableWidth = window.innerWidth - 40;
const minionTrueWidth = 260;
const minionHeight = 400;
let scaleFactor = availableWidth / minionTrueWidth;
if (scaleFactor > 1.5) scaleFactor = 1.5;
wrapper.style.transform = `scale(${scaleFactor})`;
wrapper.style.height = `${minionHeight * scaleFactor}px`;
}
window.addEventListener('resize', resizeMinion);
resizeMinion();
connectWebSocket();
const pupils = document.querySelectorAll('.pupil');
function moveEyesAutomatically() {
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 15;
const pupilX = Math.cos(angle) * distance;
const pupilY = Math.sin(angle) * distance;
pupils.forEach(pupil => {
pupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px))`;
});
}
setInterval(moveEyesAutomatically, 600);
</script>
</body>
</html>
)HTML_WRAPPER";
#endif
Schnelle Schritte
Befolgen Sie diese Anweisungen Schritt für Schritt:
- Falls Sie das Arduino Uno R4 WiFi zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi in der Arduino IDE.
- Kalibrieren Sie zuerst Ihren Farbsensor, indem Sie dem TCS3200D/TCS230 Kalibrierungsleitfaden folgen. Notieren Sie sich Ihre Kalibrierungswerte (redMin, redMax, greenMin, greenMax, blueMin, blueMax).
- Verkabeln Sie die Komponenten entsprechend dem obigen Schaltplan.
- Verbinden Sie das Arduino Uno R4 WiFi Board über ein USB-Kabel mit Ihrem Computer.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Arduino Uno R4 Board (z.B. Arduino Uno R4 WiFi) und den COM-Port.
- Navigieren Sie zum Libraries Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie nach "DIYables WebApps" und finden Sie die DIYables WebApps Bibliothek von DIYables.
- Klicken Sie auf Install um die Bibliothek zu installieren.
- Sie werden gefragt, ob Sie weitere Bibliotheksabhängigkeiten installieren möchten.
- Klicken Sie auf Install All um alle Bibliotheksabhängigkeiten zu installieren.
- Erstellen Sie einen neuen Sketch in der Arduino IDE und nennen Sie ihn ColorSensor.
- Kopieren Sie alle 4 oben stehenden Dateien und fügen Sie sie in das Arduino IDE Projekt ein. Das Arduino IDE Projekt sollte 4 Dateien haben, wie unten gezeigt:
- In der ColorSensor.ino Datei aktualisieren Sie die WLAN-Details (SSID und Passwort) mit Ihren eigenen:
const char WIFI_SSID[] = "YOUR_WIFI_NAME";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Aktualisieren Sie die Kalibrierungswerte in den map() Aufrufen innerhalb von loop() mit Ihren eigenen Kalibrierungswerten aus dem Kalibrierungsschritt. Zum Beispiel, wenn Ihre Kalibrierung redMin = 42, redMax = 210, greenMin = 55, greenMax = 185, blueMin = 60, blueMax = 172 ergeben hat, ändern Sie die Zeilen zu:
int r = map(pulseIn(sensorOut, LOW), 42, 210, 255, 0);
int g = map(pulseIn(sensorOut, LOW), 55, 185, 255, 0);
int b = map(pulseIn(sensorOut, LOW), 60, 172, 255, 0);
- Klicken Sie auf den Upload Button in der Arduino IDE, um den Code auf den Arduino UNO R4 hochzuladen.
- Öffnen Sie den Serial Monitor. Sie werden eine Ausgabe wie diese sehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
Color Web Server Ready!
INFO: Added app /
INFO: Added app /custom
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🔧 Color Sensor WebApp: http://192.168.0.2/custom
==========================================
Sent to Minion: #FFD200
Sent to Minion: #00C832
Sent to Minion: #0028FF
- Falls Sie nichts sehen, starten Sie das Arduino Board neu.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite. Klicken Sie auf den Color Sensor WebApp Link.
- Oder Sie können die Minion-Seite direkt über die IP-Adresse gefolgt von /custom aufrufen. Zum Beispiel: http://192.168.0.2/custom
- Sie sehen den animierten Minion-Charakter auf der Webseite.
- Halten Sie ein farbiges Objekt vor den TCS3200 Sensor — die Hautfarbe des Minions wird sich in Echtzeit ändern und der erkannten Farbe entsprechen!
Sie können die schrittweisen Anweisungen im Video unten sehen.
Wie der Code funktioniert
Arduino-Seite (ColorSensor.ino)
Der Haupt-Sketch macht folgendes:
- Initialisiert die TCS3200 Sensor-Pins: S0, S1 sind für 20% Frequenzskalierung gesetzt. S2, S3 werden zur Auswahl der Farbfilter verwendet.
- Liest Farbe alle 1 Sekunde: In der loop() wählt der Arduino nacheinander die roten, grünen und blauen Filter aus, liest die Pulsbreite mit pulseIn() und mappt die rohen Werte mit Ihren Kalibrierungszahlen auf 0-255 RGB-Werte.
- Konvertiert zu HEX: Die RGB-Werte werden mit sprintf() zu einem HEX-Farb-String wie #FF8000 formatiert.
- Sendet an Webbrowser: Der HEX-String wird über customPage.sendToWeb() an alle verbundenen Web-Clients gesendet.
Webseiten-Seite (custom_page_html.h)
Die HTML-Seite enthält:
- Einen animierten Minion-Charakter, vollständig mit CSS erstellt — einschließlich blinkender Augen, lachendem Mund und zufällig bewegenden Pupillen.
- WebSocket-Verbindung: Das JavaScript verbindet sich mit dem WebSocket-Server des Arduino (Port 81) und lauscht auf eingehende Farbnachrichten.
- Farbaktualisierung: Wenn eine Nachricht wie #FF8000 empfangen wird, wechseln Körper, Arme und Augenlider des Minions sanft zur neuen Farbe mit CSS transition.
- Automatische Wiederverbindung: Falls die WebSocket-Verbindung abbricht, versucht die Seite automatisch alle 2 Sekunden eine Wiederverbindung.
- Responsive Design: Der Minion skaliert automatisch für verschiedene Bildschirmgrößen (Telefone, Tablets, Desktops).
Kommunikationsprotokoll
Dieses Projekt verwendet das DIYables WebApps benutzerdefinierte Web-App Framework mit der Kennung "Color Sensor:":
- Arduino sendet: Color Sensor:#FF8000 (Kennung + HEX-Farbe)
- Webseite empfängt: Entfernt die Kennung und wendet die verbleibende HEX-Farbe #FF8000 auf den Minion an
Für weitere Details über das Kommunikationsprotokoll und wie Sie die Web-App anpassen können, siehe das DIYables WebApps Custom WebApp Tutorial.