Arduino WebChat Voorbeeld - Interactieve Chat Interface Tutorial
Overzicht
Het WebChat voorbeeld demonstreert hoe u een interactieve chat-interface maakt tussen een webbrowser en Arduino. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met verbeterde IoT-mogelijkheden en naadloze integratie met ingebouwde sensoren. De Arduino kan intelligent reageren op berichten en hardware besturen op basis van chatopdrachten.
Functies
- Realtime Chat: Directe berichten via WebSocket
- Intelligente Reacties: Arduino biedt contextuele antwoorden
- LED Besturing: Bestuur ingebouwde LED via chatopdrachten
- Gebruikersherkenning: Arduino onthoudt uw naam
- Berichtgeschiedenis: Bekijk gespreksgeschiedenis
- Responsief Ontwerp: Werkt op desktop en mobiel
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan uitgebreid worden voor andere hardware platformen. Zie DIYables_WebApps_ESP32
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/DIYables STEM V4 IoT, raadpleeg de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer via een USB kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM poort.
- Navigeer naar het Libraries pictogram in de linker balk van de Arduino IDE.
- Zoek "DIYables WebApps", vind dan de DIYables WebApps bibliotheek door DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheek afhankelijkheden te installeren
- Klik op Install All knop om alle bibliotheek afhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebChat voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van Arduino IDE
/*
* DIYables WebApp Library - WebChat Example
*
* This example demonstrates the WebChat feature:
* - Interactive chat interface
* - Intelligent Arduino responses
* - Built-in LED control via chat commands
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/chat
*/
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebChatPage chatPage;
// Chat variables
String userName = "";
int chatCount = 0;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - WebChat Example");
// Add only home and webchat pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&chatPage);
// Optional: Add 404 page for better user experience (local object)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Initialize LED for chat commands
pinMode(LED_BUILTIN, OUTPUT);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up chat callback
chatPage.onChatMessage([](const String& message) {
chatCount++;
Serial.println("Chat message #" + String(chatCount) + ": " + message);
String response = "";
String lowerMessage = message;
lowerMessage.toLowerCase();
// Process chat commands
if (lowerMessage.indexOf("hello") >= 0 || lowerMessage.indexOf("hi") >= 0) {
response = "Hello! I'm your Arduino assistant. Try saying 'led on' or 'led off' to control the LED!";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("led on") >= 0 || lowerMessage.indexOf("light on") >= 0) {
digitalWrite(LED_BUILTIN, HIGH);
response = "LED is now ON! ✨";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("led off") >= 0 || lowerMessage.indexOf("light off") >= 0) {
digitalWrite(LED_BUILTIN, LOW);
response = "LED is now OFF! 💡";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("status") >= 0) {
String ledStatus = digitalRead(LED_BUILTIN) ? "ON" : "OFF";
response = "Arduino Status: LED is " + ledStatus + ", Uptime: " + String(millis() / 1000) + " seconds";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("help") >= 0) {
response = "Available commands: 'led on', 'led off', 'status', 'help'. Just chat with me!";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("time") >= 0) {
response = "Arduino has been running for " + String(millis() / 1000) + " seconds.";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("name") >= 0) {
response = "I'm your Arduino Uno R4 WiFi! What's your name?";
chatPage.sendToChat(response);
return;
}
// General responses
String responses[] = {
"That's interesting! Tell me more.",
"I understand! As an Arduino, I love processing your messages.",
"Cool! I'm here and ready to help.",
"Thanks for chatting with me! Try 'led on' to see something happen.",
"I'm just an Arduino, but I enjoy our conversation!"
};
response = responses[chatCount % 5];
chatPage.sendToChat(response);
});
// Send welcome message
chatPage.sendToChat("Arduino Chat Bot is online! 🤖");
chatPage.sendToChat("Say 'hello' or 'help' to get started!");
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Add your main application code here
delay(10);
}
- Configureer WiFi-inloggegevens in de code door deze regels bij te werken:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload knop in Arduino IDE om code naar Arduino UNO R4/DIYables STEM V4 IoT te uploaden
- Open de Serial Monitor
- Bekijk het resultaat in Serial Monitor. Het ziet eruit zoals hieronder
COM6
DIYables WebApp - WebChat Example
INFO: Added app /
INFO: Added app /chat
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
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/
💬 WebChat: http://192.168.0.2/chat
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Als u niets ziet, herstart het Arduino board.
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk van een webbrowser op uw smartphone of PC in.
- Voorbeeld: http://192.168.0.2
- U ziet de startpagina zoals de onderstaande afbeelding:
- Klik op de Chat link, u ziet de Web Chat app's UI zoals hieronder:
- Of u kunt ook direct naar de pagina gaan via IP-adres gevolgd door /chat. Bijvoorbeeld: http://192.168.0.2/chat
- Begin met chatten met uw Arduino! Typ uw naam wanneer gevraagd en probeer opdrachten zoals "led on", "hello", of "help" om te interacteren met uw Arduino.
Hoe te Gebruiken
Een Gesprek Beginnen
- Open de chat-interface in uw browser
- Typ uw naam wanneer gevraagd
- Begin met chatten met uw Arduino!
Chatopdrachten
De Arduino herkent deze speciale opdrachten:
LED Besturing
- "led on" of "turn on led" → Zet ingebouwde LED aan
- "led off" of "turn off led" → Zet ingebouwde LED uit
- "blink" of "blink led" → Laat LED knipperen
Informatie Opdrachten
- "hello" of "hi" → Vriendelijke begroeting
- "help" → Toont beschikbare opdrachten
- "time" → Toont Arduino uptime
- "status" → Toont systeemstatus
Vragen
- "how are you?" → Arduino deelt zijn status
- "what can you do?" → Lijst van mogelijkheden
- "what is your name?" → Arduino stelt zichzelf voor
Voorbeeld Gesprek
You: Hello
Arduino: Hi there! I'm your Arduino assistant. What's your name?
You: My name is John
Arduino: Nice to meet you, John! I'm ready to help.
You: led on
Arduino: LED turned ON for you, John! 💡
You: what can you do?
Arduino: I can control LEDs, respond to your messages, and remember your name. Try saying 'help' for commands!
You: help
Arduino: Available commands:
* 'led on/off' - Control LED
* 'blink' - Blink LED
* 'status' - Show system info
* 'time' - Show uptime
Creatieve Aanpassing - Bouw Uw Interactieve Assistent
Transformeer dit basis chatvoorbeeld in iets geweldigs! Het modulaire ontwerp stelt u in staat om de functionaliteit aan te passen en uit te breiden om uw eigen unieke interactieve Arduino-assistent te maken.
Code Structuur
Hoofdcomponenten
- WebApp Server: Beheert HTTP en WebSocket verbindingen
- Chat Pagina: Biedt de webinterface
- Bericht Handler: Verwerkt inkomende chatberichten
- Response Generator: Creëert intelligente antwoorden
Belangrijke Functies
// Handle incoming chat messages
void handleChatMessage(String message, String clientId) {
// Process message and generate response
}
// Send message to web interface
void sendChatResponse(String response, String clientId) {
// Send response via WebSocket
}
Aangepaste Opdrachten Toevoegen
Om nieuwe chatopdrachten toe te voegen, wijzig de handleChatMessage functie:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Aanpassingsopties
Arduino Persoonlijkheid Wijzigen
Bewerk de reactieberichten om Arduino's persoonlijkheid te veranderen:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Hardware Besturing Toevoegen
Breid LED besturing uit naar andere componenten:
// Control servo motor
if (message.indexOf("move servo") >= 0) {
servo.write(90);
response = "Servo moved to 90 degrees!";
}
// Read sensor data
if (message.indexOf("temperature") >= 0) {
float temp = getTemperature();
response = "Current temperature: " + String(temp) + "°C";
}
Webinterface Thema Veranderen
De chat-interface kan aangepast worden door CSS te wijzigen in de bibliotheekbestanden:
- Kleuren: Bewerk gradient achtergronden
- Lettertypen: Verander lettertypefamilies
- Layout: Pas afstand en grootte aan
Probleemoplossing
Veelvoorkomende Problemen
1. Arduino reageert niet op berichten
- Controleer Serial Monitor voor foutmeldingen
- Verifieer WebSocket verbindingsstatus
- Ververs de browserpagina
2. WiFi verbinding mislukt
- Controleer SSID en wachtwoord nogmaals
- Zorg voor 2.4GHz netwerk (niet 5GHz)
- Controleer signaalsterkte
3. Kan chatpagina niet bereiken
- Verifieer dat IP-adres correct is
- Controleer of Arduino nog verbonden is met WiFi
- Probeer eerst startpagina te bereiken: http://[IP]/
4. LED reageert niet op opdrachten
- Controleer bedrading (ingebouwde LED zou standaard moeten werken)
- Verifieer dat opdrachten correct gespeld zijn
- Controleer Serial Monitor voor debug berichten
Debug Tips
Schakel debug modus in door deze regel toe te voegen in setup():
Serial.println("Debug mode enabled");
Monitor Serial output om te zien:
- Inkomende berichten
- Opdracht parsing
- Response generatie
- Hardware acties
Geavanceerde Functies
Meerdere Client Ondersteuning
De chat ondersteunt meerdere gebruikers tegelijkertijd:
- Elke gebruiker heeft een unieke sessie
- Arduino onthoudt individuele namen
- Broadcast berichten naar alle gebruikers
Bericht Persistentie
Voeg berichtlogboek toe aan EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Integratie met Sensoren
Verbind sensoren en maak ze toegankelijk via chat:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Volgende Stappen
Na het beheersen van het Chat voorbeeld, probeer:
- WebMonitor - Voor debugging en ontwikkeling
- DigitalPins - Voor het besturen van meerdere uitgangen
- Joystick - Voor richtingsbesturing
- MultipleWebApps - Alle functies combineren
Ondersteuning
Voor extra hulp:
- Controleer de API Reference documentatie
- Bezoek DIYables tutorials: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Arduino community forums