Uw Arduino besturen met HTML/Javascript op de gemakkelijke manier: 8 stappen

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

Deze tutorial laat je zien hoe je een Arduino bestuurt met een ajax-oproep van een adafruit Huzzah met alleen javascript-functies. In principe kunt u javascript gebruiken op de html-pagina waarmee u eenvoudig html-interfaces kunt schrijven met eenvoudige javascript-functies die een ajax-callback gebruiken. Om de ESP8266 te laten communiceren met de Arduino. Daarom kunnen alle pinnen worden ingesteld vanuit een javascript-functie. Evenzo kunnen we ook de waarde van elke pin lezen met behulp van een javascript-functie. Ik hoop dat dit helpt om het gemakkelijker te maken om een Arduino vanuit een html-document te besturen. Ik dacht dat er veel mensen zijn die html kunnen schrijven. De meesten van hen willen niet de moeite nemen om een app voor mobiele telefoons te maken met java of xcode of een ander framework. Dit maakt het voor mensen heel gemakkelijk, omdat ze alleen een javascript-functie hoeven te gebruiken om waarden van pinnen in te stellen en te lezen. Is het bijvoorbeeld niet een stuk makkelijker om te schrijven?

Aanzetten

Om een knop aan te zetten. Het mooie is dat er geen andere Arduino-programmering bij betrokken is, behalve het declareren van de pinMode (12, INPUT); In je instelfunctie. Zolang de pin is gedeclareerd, kan javascript voor al het andere worden gebruikt.

document.onload = {

GetJSON('A0', 1 'return_json')

}

Dit is alles wat u hoeft te doen om de waarde van analoge pin 0 te krijgen en het resultaat terug te sturen naar de div. Dus dit zou een gemakkelijke manier moeten zijn voor mensen om html-pagina's te maken die de Arduino besturen. Evenals een interface maken zodat de arduino-pinnen kunnen worden ingesteld en gelezen met javascript.

Stap 1: Wat heb je nodig?

Ik heb dit project gebouwd voor gebruikers die hun arduino willen besturen met een html-pagina op een ESP8266. Het doel van dit project is om een eenvoudige methode te creëren voor het instellen van de waarden van pinnen op je arduino met een javascript-functie. Bijvoorbeeld, onclick="SetPin(12, 1, 0)" zal Pin 12 op je arduino op High zetten.

Voor deze tutorial heb je de volgende items nodig om precies te kunnen volgen. Ik neem echter aan dat het zou moeten werken op de meeste arduino- en ESP8266-combinaties. Om echter precies te volgen wat ik hier heb, hebt u de volgende componenten nodig.

Arduino Uno - Zou moeten werken met elke arduino-compatibel met een seriële Rx TxAdafruit Huzzah Breakout Board USB-naar-seriële kabel 4 low power LED's Analoge Turpidity-testor - elke analoge sensor die analoge output biedt, doet Wire Wifi Router Mobiele telefoon met mobiele browser Arduino-bibliotheken.

Stap 2: De Arduino-ID voorbereiden

Dit project vereist een nieuwe arduino-bibliotheken en enige configuratie en omwille van de tijd. Ik zal geen sreenshot van elk scherm plaatsen en ik ga gewoon doornemen wat je nodig hebt om dit te configureren en te laten werken. Ik heb geprobeerd het de gebruiker zo gemakkelijk mogelijk te maken.

De code gebruikt een aantal bibliotheken om aan de slag te gaan. Eerst zullen we ons concentreren op het instellen van de arduino voor de ESP8266. Ik gebruik de Adafruit Huzzah in dit voorbeeld, omdat ik vind dat adafruit-producten het meest betrouwbaar zijn en de beste ondersteuning hebben. Zolang je geen ondersteuning probeert te krijgen van de Adafruit Discord-server. U zult veel meer geluk hebben om hulp te krijgen in de ondersteuningsforums.

Hoe dan ook, ik gebruik de volgende bibliotheken op de ESP8266:

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONDit is geen tutorial over het downloaden en installeren van bibliotheken, maar dit zijn de bibliotheken die op de HUZZAH worden gebruikt. Dus zoek ze op en installeer ze. U moet ook de borddefinities voor de HUZZAH installeren, dus als u naar BESTAND> Voorkeuren gaat, voegt u in het vak met de URL's van aanvullende bordenbeheerders het volgende toe https://arduino.esp8266.com/stable/package_esp8266c…als u dat al heeft iets in dit veld, zorg er dan voor dat je daar een komma toevoegt om een extra bord-url toe te voegen. Klik ok dat gaat

Tools>Board>Boards Manager Zoek vervolgens naar ESP8266 en installeer ESP8266 door ESP8266 Community.

Geweldig nu, laten we ervoor zorgen dat we alles hebben wat we nodig hebben om de Arduino-code te laten werken. Een van de arduino-kant, de arduino zelf gebruikt slechts 2 bibliotheken voor deze tutorial.

SoftwareSerialArduinoJSONDie u al zou moeten hebben.

Stap 3: De ESP8266 voorbereiden

Nu gaan we de code op de ESP8266 (Adafruit HUZZAH) plaatsen en voorbereiden om verbinding te maken met de Arduino. Pak de code voor de HUZZAH uit en open de schets. Wijzig op lijn 11 en 12 de ssid en het wachtwoord naar die van uw WIFI-verbinding op uw lokale netwerk. U zult merken dat er 2 bestanden zijn, het schetsbestand en het index.h-bestand. Het index.h-bestand is waar de html wordt opgeslagen die op uw telefoon wordt weergegeven.

Nadat je de juiste SSID en het juiste wachtwoord voor je wifi hebt ingesteld, kun je de code compileren en op je ESP8266 laden. Op de HUZZAH moet je de knop met het label GPIO0 ingedrukt houden en vervolgens op de rest-knop klikken, en dan de GPIO0-knop loslaten om de chip in de bootloader-modus te zetten. Als de chip succesvol in de bootloader-modus is gezet, gaat er een rood lampje branden om aan te geven dat de chip in de bootloader-modus staat.

Om verbinding te maken met de ESP8266 heeft u een seriële kabel of USB-naar-serieel-adapter of FDTI-chip nodig. In dit geval gebruik ik de kabel van adafruit zoals vermeld in de instructies. U kunt echter op verschillende manieren verbinding maken met de chip, met behulp van TTL op de Tx- en Rx-pinnen. Ik hoop dat de mensen die dit bekijken weten hoe ze de chip moeten aansluiten om de code erop te laden. Hoe dan ook, ga je gang en flash de chip met de code in het zip-bestand dat bij deze stap is gevoegd.

Stap 4: De Arduino voorbereiden

Om de code op de Arduino te laden, verander je je boarddefinitie in de Arduino/Genuino Uno. Pak vervolgens het bestand uit dat bij deze stap is bijgevoegd. Upload het dan op de ardunio. Eigenlijk best simpel, al het harde werk is al voor je gedaan. Ik heb al een trial-and-error-proces doorlopen, dus je hoeft alleen maar de code te uploaden.

Stap 5: Alles samen aansluiten

Ok dus voor de bedrading heb ik een foto hierboven van wat ik hier heb.

Verbind Tx op de Huzzah met Pin 2 op de Arduino. Sluit Rx op de Huzzah aan op Pin 3 op de Arduino. Ik heb nog een seriële socket gemaakt op pinnen 2 en 3 op de Arduino om de standaard seriële console vrij te maken.

Verbind de Pin V+ en En met 5v van de arduino. - De adafruit Huzzah heeft een ingebouwde spanningsregelaar van 3,3 V, dus het op deze manier aansluiten van deze pinnen werkt mogelijk niet met alle ESP8266-modules. Mogelijk moet u uw eigen spanningsregelaar aansluiten. Ik raad aan om de Huzzah te gebruiken als je het ding gewoon gemakkelijk wilt laten werken. Verbind de GND met de GND van de arduino

Op pinnen 12, 11, 9, 8 op de Arduino-draad in uw LED's heb ik hier LED's met een laag vermogen gebruikt, omdat degenen die te veel stroom trekken, te veel stroom kunnen trekken om dit experiment eenvoudig te houden.

Dan op A0 analoge Pin 0 op de arduino heb ik de uitgangslijn van mijn Turpitity-tester aangesloten. U kunt echter de uitgang van vrijwel elke sensor aansluiten die u een analoge uitlezing geeft. Dat is alles wat u hoeft te doen om dit te bedraden.

Stap 6: Toegang tot de webpagina

Nu je de arduino hebt aangesloten en alles op je boards hebt geladen, moet je de html op je mobiele telefoon kunnen bekijken. Nu wil ik dat je verbinding maakt met dezelfde wifi-router waarvoor je de SSID en het wachtwoord hebt ingesteld in de code op de Huzzah. Dan moet u uitzoeken welk IP-adres uw router aan uw apparaat heeft toegewezen. Gewoonlijk zou er een klantenlijst moeten zijn als u zich aanmeldt bij de configuratie van uw router. Dat toont de IP-adressen van alle apparaten die op uw wifi-verbinding zijn aangesloten. Als u dit IP-adres echter niet kunt vinden, kunt u het loskoppelen van de arduino en het opnieuw gebruiken met de seriële kabel. Als u de seriële console op het apparaat opent, wordt het IP-adres naar het apparaat in de seriële console afgedrukt voor het geval u het niet op een andere manier kunt vinden. Hoe dan ook, als je eenmaal bent verbonden met hetzelfde wifi-netwerk met je mobiele telefoon. Richt dan je mobiele webbrowser op het ip-adres van de Huzzah. Die er waarschijnlijk iets op lijkt. https://192.168.0.107 of iets vergelijkbaars. Daar heb ik een basispagina geplaatst waarmee je de 4 leds kunt in- en uitschakelen en de waarde van de analoge sensor kunt lezen.

Stap 7: Javascript gebruiken

In het bestand met de naam index.h in de ESP8266Code-schets zou het als een apart tabblad in de arduino-editor moeten verschijnen. Je kunt het basisvoorbeeld zien dat ik hier heb gemaakt. In principe is de manier waarop het werkt als volgt.

SetPin (12, 1, 0); SetPin({Pinnummer}, {Waarde 1 Hoog 0 Laag}, {IsAnaloog 1 Ja 0 Nee})

Hiermee wordt de waarde van digitale pin 12 op hoog gezet

SetPin (4, 0, 0);

Hiermee wordt de waarde van digitale pin 4 op laag gezet

SetPin(A2, 439, 1) Dit stelt de waarde van Analog Pin 2 in op 439

Op dezelfde manier retourneert de functie GetJSON een gevraagde waarde van een pin en plaatst deze in een HTML-element met de opgegeven div-ID.

GetJSON('A0', 1, 'resp_i') GetJSON({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element to return result})

Dit zal een verzoek naar de Arduino sturen om de waarde van analoge pin 0 te vragen en het resultaat terug te sturen naar Div met ID resp_iGetJSON(12, 0, 'mydiv'); Dit zal de Arduino vragen om de waarde van digitale pin 0 te krijgen en het resultaat terug te sturen naar een html-element met en Id van mydiv

Stap 8: Ondersteuning

Ik hoop dat mijn script degenen onder jullie helpt die het willen gebruiken. Ik heb hier een heel eenvoudig html-voorbeeld gebruikt in de hoop dat andere mensen alle mogelijkheden ervan zullen verkennen die ik niet kan. Dit zou echter moeten aantonen hoe ajax kan worden gebruikt om een arduino te besturen zonder dat html-pagina's worden geladen en dergelijke.

Als u opmerkingen heeft, aarzel dan niet om het mij te vragen, ik zal mijn best doen om te antwoorden. Ik zou de functionaliteit hiervan graag nog wat uitbreiden, maar ik had geen tijd en geld meer. Ik werk echter aan een robuustere implementatie hiervan, die de bestanden op een gewone webserver opslaat in plaats van op de ESP8266.

Bedankt dat je de tijd hebt genomen om mijn code te zien.

John AndersonE-mail mij

Vermont Internet Design LLC

www.vermontinternetdesign.com