Internetgestuurde LED met behulp van op ESP32 gebaseerde webserver - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Projectoverzicht

In dit voorbeeld zullen we uitzoeken hoe we een op ESP32 gebaseerde webserver kunnen maken om de LED-status te regelen, die overal ter wereld toegankelijk is. Je hebt een Mac-computer nodig voor dit project, maar je kunt deze software zelfs uitvoeren op een goedkope en energiezuinige computer zoals de Raspberry Pi.

Voorbereiding van de ESP32 met de Arduino IDE

Om te beginnen met het programmeren van de ESP32 met behulp van de Arduino IDE en de Arduino-programmeertaal, heb je een speciale add-on nodig. Lees via de volgende link hoe u de Arduino IDE voor ESP32 op Mac OS voorbereidt.

Benodigdheden

Voor deze tutorial heb je de volgende items nodig:

• ESP32 ontwikkelbord 5 mm
• LEDWeerstand 220ohm
• 16x2 LCD-scherm met I2C-module
• Breadboard
• Doorverbindingsdraden
• Micro-USB-kabel

Stap 1: Het circuit bouwen

Voer de aansluitingen uit zoals weergegeven in het volgende schematische diagram hieronder

Begin door de 3V3-voedingsspanningsuitgang op de ESP32 en GND op het breadboard aan te sluiten. Sluit de LED via een weerstand aan op de ESP32 met behulp van GPIO-pin 23 als digitale uitgangspin. Sluit daarna de SDA-pin van het 16x2 LCD-scherm aan op GPIO-pin 21 en SCL op GPIO-pin 22.

Stap 2: Snel overzicht van SPIFFS-bestandssysteem

SPIFFS staat voor "Serial Peripheral Interface Flash File System", d.w.z. bestandssysteem voor flash-geheugen dat gegevens overdraagt via SPI. Daarom is SPIFFS een vereenvoudigd bestandssysteem dat is ontworpen voor microcontrollers met flashchips die gegevens verzenden via de SPI-bus (zoals ESP32-flashgeheugen).

SPIFFS is het meest geschikt voor gebruik met ESP32 in de volgende situaties:

• Bestanden maken om instellingen op te slaan
• Permanente gegevensopslag.
• Bestanden maken om een kleine hoeveelheid gegevens op te slaan (in plaats van hiervoor een microSD-kaart te gebruiken).
• HTML- en CSS-bestanden opslaan voor het maken van een webserver.

Stap 3: Installatie van de SPIFFS Bootloader op Mac OS

U kunt gegevens die zijn opgeslagen in het ESP32-bestandssysteem rechtstreeks maken, opslaan en schrijven naar bestanden met behulp van de plug-in op Arduino IDE.

Zorg er allereerst voor dat je de nieuwste versie van de Arduino IDE hebt geïnstalleerd en doe dan het volgende:

• Open de volgende link en download het archief “ESP32FS-1.0.zip”
• Ga naar de Arduino IDE-map, die zich in de map Documenten bevindt.
• Maak een map tools, als deze niet bestaat. Maak in de gereedschapsmap een andere map ESP32FS. Maak in ESP32FS een andere, die tool wordt genoemd.
• Pak het in stap 1 gedownloade ZIP-archief uit in de toolmap.
• Start uw Arduino IDE opnieuw op.
• Om te controleren of de plug-in succesvol is geïnstalleerd, opent u de Arduino IDE en klikt u op "Tools" en controleert u of er een item "ESP32 Sketch Data Upload" in dit menu is.

Stap 4: Bibliotheken installeren

Met ESPAsyncWebServer- en AsyncTCP-bibliotheken kunt u een webserver maken met behulp van bestanden uit het bestandssysteem van ESP32. Voor meer informatie over deze bibliotheken, check de volgende link.

Installeer de ESPAsyncWebServer-bibliotheek

• Klik hier om het ZIP-archief van de bibliotheek te downloaden.
• Pak dit archief uit. U zou de map ESPAsyncWebServer-master moeten krijgen.
• Hernoem het naar "ESPAsyncWebServer".

Installeer de AsyncTCP-bibliotheek

• Klik hier om het ZIP-archief van de bibliotheek te downloaden.
• Pak dit archief uit. U zou de map AsyncTCP-master moeten krijgen.
• Hernoem het naar "AsyncTCP".

Verplaats de ESPAsyncWebServer- en AsyncTCP-mappen naar de bibliothekenmap, die zich in de map Documenten bevindt.

Start ten slotte de Arduino IDE opnieuw.

Stap 5: Maak een Index.html- en Style.css-bestand met de volgende inhoud:

HTML/CSS-sjabloon voor schakelknop is afkomstig uit de volgende bron.

Stap 6: Arduino-code

De code was voornamelijk gebaseerd op de Arduino-code die was overgenomen van ESP32 Web Server met SPIFFS en How to Use I2C LCD with ESP32 on Arduino IDE.

Stap 7: Upload de Arduino-code en bestanden met behulp van de SPIFFS-lader

• Open de schetsmap met Arduino-code.
• Maak in deze map een nieuwe map met de naam "data".
• In de gegevensmap moet u de index.html en style.css plaatsen.
• Arduino-code uploaden
• Om de bestanden te uploaden, klikt u op de Arduino IDE op Tools> ESP32 Sketch Data Upload

Stap 8: Bepaal het IP-adres van de ESP32-webserver

Het is op twee manieren te vinden.

• Seriële monitor op Arduino IDE (Extra> Seriële monitor)
• Op LCD-scherm

Stap 9: De lokale webserver testen

Open vervolgens een webbrowser naar keuze en plak het volgende IP-adres in de adresbalk. U zou een uitvoer moeten krijgen die lijkt op onderstaande schermafbeelding.

Stap 10: Toegang tot een lokale webserver van overal ter wereld met behulp van Ngrok

Ngrok is een platform waarmee u vanaf het externe internet externe toegang tot een webserver of een andere service op uw pc kunt organiseren. De toegang wordt georganiseerd via de beveiligde tunnel die aan het begin van ngrok is gemaakt.

• Volg deze link en meld je aan.
• Na het aanmaken van een account logt u in en gaat u naar het tabblad "Auth". Kopieer de regel uit het veld "Your Tunnel Authtoken".
• Klik op het tabblad "Download" in de navigatiebalk. Selecteer de versie van ngrok die overeenkomt met uw besturingssysteem en download deze.
• Pak de gedownloade map uit en voer de opdrachtregel uit.
• Verbind uw account door de volgende opdracht in te voeren:

./ngrok authtoken

Start een HTTP-tunnel op poort 80

./ngrok http Uw_IP_Address:80

Als alles correct is gedaan, zou de tunnelstatus moeten veranderen in "online" en zou er een omleidingslink moeten verschijnen in de kolom "Doorsturen". Door deze link in uw browser in te voeren, hebt u overal ter wereld toegang tot de webserver.