IoT-apparaat Bouwen met ESP8266-01 en Arduino Nano: Complete Gids

Onderdelen en Benodigdheden

Benodigde Tools en Machines

• Solderbout
• Soldeerdraad (loodvrij)
• Soldeervloeistof

Apps en Online Services

• Microsoft Visual Studio Code (optioneel)
• Arduino IDE
• Autodesk Eagle (optioneel)

Over dit Project

Inleiding

Vandaag bouwen we een apparaat dat via internet verbindt en thuisapparaten op afstand laat bedienen over WiFi. We gebruiken een Arduino (elk model werkt) met de ESP8266-01 WiFi-module. Laten we beginnen!

Wat is een Slimme Huis?

Een slimme huis gebruikt verbonden apparaten die je vanaf je telefoon of computer kunt bedienen.

Werkscenario

Het Controlepaneel

We bouwen een simpele webpagina (HTML, CSS, jQuery) die als bedieningspaneel fungeert.

De Ingebouwde Hardware

De webpagina stuurt commando's naar de ESP8266-01 (als webserver) die communiceert met de Arduino. De Arduino schakelt dan de apparaten (lamp, TV, etc.).

Aan de slag met de ESP8266-01

De Arduino Nano heeft geen ingebouwde WiFi. De ESP8266-01 lost dit op. Er zijn veel ESP-modellen; de ESP-01 is populair, goedkoop (~$1,50), heeft een ingebouwde microcontroller, 2 GPIO's en communiceert via serieel.

ESP8266-01 Pinout

• VCC: 3,3V (nooit 5V – beschadigt de module)
• GND: Aarde
• CH_PD: Chip enable – HIGH actief
• RST: Reset – LOW actief
• GPIO0, GPIO2: Algemeen doel I/O
• Tx: Naar Rx van Arduino
• Rx: Naar Tx van Arduino

ESP8266-01 Configuratie

De ESP communiceert serieel met de Arduino. De hardware seriele poort (pinnen 0/1) is nodig voor debugging. We gebruiken de SoftwareSerial bibliotheek om pinnen 2 en 3 als seriele poort te gebruiken.

Probleem: ESP-01 komt standaard op 115.200 baud, te snel voor SoftwareSerial (max ~19.200 baud). Oplossing: herprogrammeer de ESP naar 9600 baud met AT-commando's.

Communicatiesnelheid Wijzigen

1. Lege sketch uploaden naar Arduino (niets draait op achtergrond).
2. ESP8266-01 aansluiten op hardware seriele poort (pinnen 0/1).
3. Serial Monitor openen op 115.200 baud, "Both NL & CR".
4. "AT" sturen – antwoord "OK" betekent dat de module luistert.
5. Baudrate wijzigen: Stuur AT+UART_DEF=9600,8,1,0,0 (werkt voor firmware 1.6). Als dat faalt, probeer AT+CIOBAUD=9600. "OK" = succes.
6. Serial Monitor op 9600 baud zetten en "AT" testen – moet weer "OK" geven.

Belangrijke AT-Commando's

• AT – test communicatie
• AT+RST – reset module
• AT+CWMODE=1 – station mode
• AT+CWJAP="SSID","PASSWORD" – verbind met WiFi
• AT+CIFSR – toon IP/MAC adres
• AT+CIPMUX=1 – meerdere verbindingen
• AT+CIPSERVER=1,80 – start server op poort 80

Wat is het Internet?

Het internet is een fysieke kabel (glasvezel, koper, satelliet). Computers die er direct op aangesloten zijn heten servers (uniek IP-adres, bv. 172.217.171.228). Domeinnamen (google.com) maken IP-adressen onthoudbaar. Clients (onze laptops/telefoons) zijn indirect verbonden via een ISP.

Werkscenario: Verzoek en Antwoord

Browser (client) stuurt verzoek → Webserver (ESP8266) stuurt HTML terug. Dat bouwen we nu: een verzoek van de browser naar de ESP met data om een lamp aan/uit te zetten.

De Webpagina Bouwen

We gebruiken HTML (structuur), CSS (styling), JavaScript/jQuery (interactie).

HTML Structuur

<!DOCTYPE html>
<html>
<head>
  <title>Smart Home Control Panel</title>
</head>
<body style="background-color: seagreen; color: seashell; text-align: center;">
  <h1> Smart Home Control Panel</h1>
  <h4>Sorry But I'm a Meme Addict!</h4>
  <img src="dogMeme.jpg" width="400px" height="400px">
  <br>
  <button style="margin: 10px;" id="111" class="button">LAMP AAN</button>
  <br>
  <button style="margin:10px;" id="110" class="button">LAMP UIT</button>
</body>
</html>

CSS Styling

Inline CSS in de <body> tag: groene achtergrond, wit tekst, gecentreerd. Knoppen hebben 10px marge.

jQuery: Verzoek Sturen naar Webserver

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(".button").click(function () {
    var p = $(this).attr('id'); // bv. "111" of "110"
    $.get("https://192.168.1.4:80/", { pin: p });
    // BELANGRIJK: vervang IP-adres door dat van JOUW ESP8266!
  });
</script>

Logica van de button IDs:

• Eerste twee cijfers (11) = Arduino pinnummer
• Derde cijfer (1 of 0) = staat (AAN/UIT)

De Arduino splitst dit op in pinNumber en pinState en doet digitalWrite(pinNumber, pinState).

De Last Aansluiten (Test met LEDs)

Eerst testen met lage spanning (LEDs) voordat je hoogspanningsapparaten aansluit.

Schema: LED anode → Arduino pin 11, kathode → GND via 1k ohm weerstand.

Arduino Code

#include <SoftwareSerial.h>
SoftwareSerial esp8266(2, 3); // Rx=2, Tx=3
#define serialCommunicationSpeed 9600
#define DEBUG true

int redLED = 12;
int blueLED = 11;

void setup() {
  pinMode(redLED, OUTPUT);
  pinMode(blueLED, OUTPUT);
  digitalWrite(redLED, LOW);
  digitalWrite(blueLED, HIGH);
  Serial.begin(serialCommunicationSpeed);
  esp8266.begin(serialCommunicationSpeed);
  InitWifiModule();
  digitalWrite(blueLED, LOW);
}

void loop() {
  if (esp8266.available()) {
    if (esp8266.find("+IPD,")) {
      delay(1000);
      int connectionId = esp8266.read() - 48;
      esp8266.find("pin=");
      int pinNumber = (esp8266.read() - 48) * 10;
      pinNumber += (esp8266.read() - 48);
      int statusLed = (esp8266.read() - 48);
      digitalWrite(pinNumber, statusLed);
      Serial.println(connectionId);
      Serial.print(pinNumber);
      Serial.print(" ");
      Serial.println(statusLed);
      String closeCommand = "AT+CIPCLOSE=";
      closeCommand += connectionId;
      closeCommand += "\r\n";
      sendData(closeCommand, 1000, DEBUG);
    }
  }
}

String sendData(String command, const int timeout, boolean debug) {
  String response = "";
  esp8266.print(command);
  long int time = millis();
  while ((time + timeout) > millis()) {
    while (esp8266.available()) {
      char c = esp8266.read();
      response += c;
    }
  }
  if (debug) Serial.print(response);
  return response;
}

void InitWifiModule() {
  sendData("AT+RST\r\n", 2000, DEBUG);
  sendData("AT+CWJAP=\"JOUW_SSID\",\"JOUW_WACHTWOORD\"\r\n", 2000, DEBUG);
  delay(3000);
  sendData("AT+CWMODE=1\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIFSR\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIPMUX=1\r\n", 1500, DEBUG);
  delay(1000);
  sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG);
}

Let op: Vervang "JOUW_SSID" en "JOUW_WACHTWOORD" in regel 103.

Hoe het Werkt

Na uploaden, open Serial Monitor. "OK" = ESP verbonden met WiFi en heeft IP-adres. Open de webpagina en bedien je apparaten. "FAIL" of "ERROR" = check SSID/wachtwoord.

Hoogspanningslast Toevoegen (Relais)

Na succesvolle test met LEDs, vervang door relaismodule voor 230V apparaten (TV, lamp, airco).

Relaismodule: Mechanische schakelaar bestuurd door 5V/0V signaal. IN1/IN2 → Arduino pinnen 11/12. COM → een kant van de last. NO (Normaal Open) → andere kant van de last.

Webpagina uitbreiden: Voeg twee knoppen toe voor de tweede last (id="121" en "120").

Professioneel Maken: PCB

Ontwerp je eigen PCB met Autodesk Eagle. Bestel via PCBWay (open source projectbestanden beschikbaar).

Probleemoplossing

• Controleer of verzoek vanaf poort 80 (HTTP) gaat
• PC en ESP moeten op hetzelfde WiFi-netwerk zitten
• Controleer IP-adres in jQuery-code
• Last aan pinnen 11 en 12 aangesloten?
• Webpagina opslaan en herladen na wijzigingen

Conclusie

We leerden: webpagina bouwen (HTML/CSS/jQuery), draadloos AC-apparaten bedienen via webinterface, ESP8266-01 met Arduino gebruiken. Meer tutorials: www.makesomestuff.org.