Controlar el vostre Arduino amb HTML / Javascript de la manera més senzilla: 8 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

Aquest tutorial us mostra com controlar un arduino amb una trucada ajax des d'un Huzzah adafruit mitjançant només funcions javascript. Bàsicament podeu utilitzar javascript a la pàgina html que us permetrà escriure fàcilment interfícies html amb funcions javascript simples que utilitzen una devolució de trucada ajax. Per permetre que l'ESP8266 es comuniqui amb l'arduino. Per tant, tots els pins es poden configurar des d’una funció javascript. De la mateixa manera, també podem llegir el valor de qualsevol pin mitjançant una funció javascript. Espero que això ajudi a facilitar el control d'un arduino des d'un document html. Vaig pensar que hi ha molta gent que pot escriure html. La majoria dels quals no es volen molestar intentant crear una aplicació per a mòbils amb java o xcode o algun altre framework. Això ho farà molt fàcil per a la gent, perquè tot el que han de fer és utilitzar una funció javascript per establir i llegir els valors dels pins. Per exemple, no és molt més fàcil escriure

Encendre

Per activar un botó. El més important és que no hi ha cap altra programació arduino implicada a més de declarar el pinMode (12, INPUT); A la funció de configuració. Sempre que es declari el pin, es pot utilitzar javascript per a tota la resta.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Això és tot el que heu de fer per obtenir el valor del pin analògic 0 i retornar el resultat al div. Per tant, aquesta hauria de ser una manera fàcil perquè la gent pugui crear pàgines html que controlin l’arduino. A més de crear una interfície perquè els pins arduino es puguin configurar i llegir amb javascript.

Pas 1: què necessiteu

He construït aquest projecte per als usuaris que volen controlar el seu arduino amb una pàgina html en un ESP8266. L'objectiu d'aquest projecte és crear un mètode senzill per establir els valors dels pins al vostre arduino amb una funció javascript. For examplate onclick = "SetPin (12, 1, 0)" establirà el pin 12 del vostre arduino a High.

Per a aquest tutorial, necessitareu els elements següents per seguir exactament. Tot i això, suposo que hauria de funcionar en la majoria de les combinacions d’arduino i ESP8266. No obstant això, per seguir exactament el que tinc aquí, necessitareu els components següents.

Arduino Uno: hauria de funcionar amb qualsevol arduino compatible que tingui una placa RX TxAdafruit Huzzah Breakout Board USB to Serial Cable 4 testor de turbiditat analògica de LED de baixa potència: qualsevol sensor analògic que proporcioni una sortida analògica farà un telèfon mòbil amb enrutador Wifi Wire amb biblioteques Arduino del navegador mòbil.

Pas 2: Preparació de l'identificador d'Arduino

Aquest projecte requereix una nova llibreria arduino i una certa configuració i pel temps. No posaré cap captura de pantalla de totes les pantalles i només passaré per allò que necessiteu per configurar-ho i fer-lo funcionar. Vaig intentar fer-ho el més fàcil possible per a l'usuari.

El codi utilitza diverses biblioteques per treballar. Primer ens centrarem en la configuració de l’arduino per a l’ESP8266 que estic fent servir l’Adafruit Huzzah en aquest exemple, perquè trobo que els productes adafruit són els més fiables i tenen el millor suport. Sempre que no intenteu obtenir assistència del servidor Adafruit Discord. Tindreu molta millor sort aconseguint ajuda als fòrums de suport.

De totes maneres, estic fent servir les biblioteques següents a l’ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer Arduino JSON Això no és un tutorial sobre com descarregar i instal·lar biblioteques, però, són les biblioteques que s’utilitzen al HUZZAH. Si us plau, busqueu-los i instal·leu-los. També haureu d’instal·lar les definicions de tauler per a HUZZAH, de manera que si aneu a FITXER> Preferències Al quadre que diu URL de gestor de taules addicionals, afegiu el següent https://arduino.esp8266.com/stable/package_esp8266c… si ja teniu alguna cosa en aquest camp, que assegureu-vos que hi afegiu una coma per afegir una url addicional del tauler. Feu clic a D'acord

Eines> Tauler> Gestor de taules Que busqueu ESP8266 que instal·leu ESP8266 per la comunitat ESP8266.

Excel·lent ara ens assegurem que tinguem tot el necessari per fer funcionar el codi arduino. One the arduino Side, el mateix arduino només utilitza 2 biblioteques per a aquest tutorial.

SoftwareSerialArduinoJSON Que ja hauríeu de tenir.

Pas 3: Preparació de l'ESP8266

Ara posarem el codi a l’ESP8266 (Adafruit HUZZAH) i el prepararem per connectar-lo a l’Arduino. Descomprimiu el codi del HUZZAH i obriu l'esbós. A les línies 11 i 12 canvieu el ssid i la contrasenya per la de la vostra connexió WIFI a la vostra xarxa local. Notareu que hi ha 2 fitxers, el fitxer d'esbós i el fitxer index.h. El fitxer index.h és on s’emmagatzema l’html que es mostrarà al telèfon.

Després d’haver definit l’SSID i la contrasenya correctes al vostre wifi, podeu compilar el codi i carregar-lo al vostre ESP8266. Al HUZZAH heu de mantenir premut el botó etiquetat GPIO0 i, a continuació, fer clic al botó de descans, que deixar anar el botó GPIO0 per posar el xip al mode de carregador d'arrencada. Si el xip s'ha posat amb èxit en mode carregador d'arrencada, s'encendrà un llum vermell que indica que el xip està en mode carregador d'arrencada.

Per connectar-vos a l’ESP8266 necessitareu un cable sèrie o un adaptador USB a sèrie o un xip FDTI. En aquest cas, faig servir el cable d’adafruit tal com s’indica a les instruccions. Tot i això, podeu connectar-vos al xip de diverses maneres, mitjançant TTL als pins Tx i Rx. Cosa que espero que les persones que ho visualitzen sàpiguen connectar-se al xip per carregar-hi el codi. De totes maneres, seguiu endavant i feu flaixar el xip amb el codi al fitxer zip adjunt a aquest pas.

Pas 4: Preparació de l'Arduino

Per carregar el codi a l'arduino, canvieu la definició de la vostra placa a Arduino / Genuino Uno. Que descomprimiu el fitxer adjunt a aquest pas. Que penjar-lo a l'ardunio. Bastant senzill, ja s’ha fet tot el treball dur per vosaltres. Ja he experimentat un procés d'error, de manera que tot el que heu de fer és penjar el codi.

Pas 5: connectar-ho tot junt

D'acord, doncs, per al cablejat, tinc una imatge superior del que tinc aquí.

Connecteu Tx a l’Huzzah al Pin 2 de l’arduino. Connecteu Rx a l’Huzzah al Pin 3 de l’arduino. Vaig crear un altre sòcol sèrie als pins 2 i 3 de l’arduino per alliberar la consola sèrie predeterminada.

Connecteu el Pin V + i En a 5v des de l'arduino. - L'Adafruit Huzzah té un regulador de voltatge incorporat de 3,3 V, de manera que connectar aquests pins en aquest cas pot no funcionar amb tots els mòduls ESP8266. És possible que hagueu de connectar el vostre propi regulador de voltatge. Us recomano utilitzar el Huzzah si només voleu que la cosa funcioni fàcilment. Connecteu el GND al GND de l'arduino

Als pins 12, 11, 9, 8 del cable arduino dels vostres LED, he utilitzat LED de poca potència perquè els que treuen massa corrent poden treure massa energia per tal de mantenir aquest experiment senzill.

Que al pin analògic A0 0 de l’arduino he connectat la línia de sortida del meu provador Turpitity. Tot i això, podeu connectar la sortida de bàsicament qualsevol sensor que us doni una lectura analògica. Això és tot el que heu de fer per connectar-ho.

Pas 6: accedir a la pàgina web

Ara que teniu l’arduino connectat i teniu tot carregat a les vostres taules, heu de poder veure l’html al vostre telèfon mòbil. Ara vull que us connecteu al mateix encaminador wifi per al qual heu definit l’SSID i la contrasenya al codi del Huzzah. Cal que esbrineu quina adreça IP ha assignat el vostre encaminador al vostre dispositiu. Normalment, si inicieu sessió a la configuració dels routers, hi hauria d’haver una llista de clients. Es mostren les adreces IP de tots els dispositius connectats a la vostra connexió Wifi. Tanmateix, si no trobeu aquesta adreça IP, podeu desconnectar-la de l'arduino i tornar-la a executar amb el cable sèrie. Si obriu la consola sèrie al dispositiu, imprimirà l'adreça IP al dispositiu a la consola sèrie per si no la trobeu d'una altra manera. De totes maneres, un cop connectat a la mateixa xarxa Wifi amb el telèfon mòbil. Més que dirigir el navegador web mòbil a l'adreça IP de la Huzzah. El que probablement té un aspecte similar a això. https://192.168.0.107 o alguna cosa molt similar. Allà vaig posar una pàgina bàsica que us permetrà encendre i apagar els 4 leds, així com llegir el valor del sensor analògic.

Pas 7: utilitzar Javascipt

Al fitxer anomenat index.h de l'esbós ESP8266Code hauria de sortir com una pestanya separada a l'editor arduino. Podeu veure l’exemple bàsic que he fet aquí. Bàsicament, la seva manera de funcionar és així.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}, {IsAnalog 1 Yes 0 No})

Això establirà el valor del pin digital 12 a alt

SetPin (4, 0, 0);

Això establirà el valor del pin digital 4 a baix

SetPin (A2, 439, 1) Establirà el valor del pin analògic 2 a 439

De la mateixa manera, la funció GetJSON retornarà el valor sol·licitat d'un pin i el col·locarà en un html seleccionat amb l'identificador de div especificat.

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

Això enviarà una sol·licitud a l'arduino per demanar-li el valor del pin analògic 0 i retornar el resultat a Div amb ID resp_iGetJSON (12, 0, 'mydiv'); Això demanarà a l'arduino obtenir el valor del pin digital 0 i retornar el resultat a un element html amb i l'identificador de mydiv

Pas 8: assistència

Espero que el meu script us ajudi a aquells que vulgueu utilitzar-lo. He utilitzat un exemple HTML molt bàsic amb l'esperança que altres persones n'explorin totes les capacitats que no puc. Tanmateix, això hauria de demostrar com es pot utilitzar ajax per controlar un arduino sense càrregues de pàgina html i coses d'aquesta naturalesa.

Si teniu algun comentari, no dubteu a demanar-me que faré tot el possible per respondre. M'agradaria ampliar la funcionalitat d'això més, però em vaig quedar sense temps i diners. Tot i això, estic treballant en una implementació més robusta, que emmagatzemi els fitxers en un servidor web normal en lloc de fer-ho a l’ESP8266.

Gràcies per dedicar-vos el temps per veure el meu codi.

John Anderson Envia’m un correu electrònic

Vermont Internet Design LLC

www.vermontinternetdesign.com