DuvelBot - Robot za serviranje piva ESP32 -CAM: 4 koraki (s slikami)

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:03

Po napornem delovnem dnevu se nič ne zgodi, da bi na kavču srkali svoje najljubše pivo. V mojem primeru je to belgijsko blond pivo "Duvel". Kljub vsemu, razen propadu, se soočamo z najresnejšo težavo: hladilnik, ki vsebuje moj Duvel, je nepremostljiv 20 čevljev, odstranjen iz omenjenega kavča.

Medtem ko bi lahko z rahlo prisilo z moje strani občasni najstnik odstranil hladilnik, da bi iz mojega tedna izplačal dodatek Duvel, je naloga, da ga dejansko dostavim skoraj izčrpanemu predniku, očitno korak predaleč.

Čas je, da razbijete spajkalnik in tipkovnico …

DuvelBot je preprosta spletna kamera za vožnjo na osnovi AI-Thinker ESP32-CAM, ki jo lahko upravljate s pametnim telefonom, brskalnikom ali tabličnim računalnikom.

To platformo je enostavno prilagoditi ali razširiti na uporabo manj alkohola (pomislite na SpouseSpy, NeighbourWatch, KittyCam …).

Tega robota sem zgradil predvsem zato, da bi izvedel nekaj o celotnem spletnem programiranju in stvareh interneta stvari, o katerih nisem vedel nič. Na koncu tega navodila je podrobna razlaga, kako to deluje.

Mnogi deli tega Instructable -a temeljijo na odličnih razlagah, ki jih najdete v vajah Random Nerd, zato jih obiščite!

Zaloge

Kaj rabiš:

Seznam delov ni izklesan v kamnu, številne dele pa je mogoče dobiti v toni različnih različic in na različnih mestih. Večino sem nabavil pri Ali-Expressu. Kot je rekel Machete: improviziraj.

Strojna oprema:

• Modul AI Thinker ESP32-CAM. Verjetno bi lahko deloval z drugimi moduli ESP32-CAM, vendar sem to uporabil
• Gonilna plošča motorja L298N,
• Poceni robotska platforma s 4 kolesi,
• Ohišje z veliko ravno površino, kot je Hammond Electronics 1599KGY,
• Pretvornik USB v 3.3V-TTL za programiranje.
• Za razsvetljavo: 3 bele LED, BC327 ali drug tranzistor splošnega namena NPN (Ic = 500mA), 4k7k upor, 3 upori 82Ohm, perfboard, kabli (glej shemo in slike).
• Preklopno stikalo za vklop/izklop in normalno odprt gumb za programiranje.

Neobvezno:

• Kamera z ribje oko z daljšim upogibom kot standardna kamera OV2460, priložena modulu ESP32-CAM,
• WiFi antena s primerno dolgim kablom in ultra miniaturnim koaksialnim priključkom, kot je ta. ESP32-CAM ima vgrajeno anteno in ohišje je plastično, zato antena v resnici ni potrebna, vendar se mi je zdelo kul, zato …
• Papir za nalepke za brizgalne tiskalnike za oblikovanje zgornjega pokrova.

Običajna strojna orodja: spajkalnik, svedri, izvijači, klešče …

1. korak: Izdelava robotske platforme

Shema:

Shema ni nič posebnega. ESP32-cam upravlja motorje prek plošče gonilnika motorja L298N, ki ima dva kanala. Motorji leve in desne strani so nameščeni vzporedno in vsaka stran zaseda en kanal. Štirje majhni 10..100nF keramični kondenzatorji blizu zatičev motorja so kot vedno priporočljivi za preprečevanje RF motenj. Tudi velik elektrolitski pokrov (2200… 4700uF) na napajanju motorne plošče, kot je prikazano na shemi, čeprav ni nujno potreben, lahko nekoliko omeji valovanje napajalne napetosti (če si želite ogledati grozljivko, potem sondirajte Vbat z osciloskopom, ko so motorji aktivni).

Upoštevajte, da oba zatiča ENABLE kanalov motorja poganja isti pin s modulirano širino impulza (PWM) ESP32 (IO12). To je zato, ker modul ESP32-CAM nima veliko GPIO-jev (shema modula je vključena za referenco). Robotove LED diode poganja IO4, ki poganja tudi vgrajeno LED bliskavico, zato odstranite Q1, da preprečite, da bi LED bliskavica zasvetila v zaprtem ohišju.

Gumb za programiranje, stikalo za vklop/izklop, priključek za polnjenje in priključek za programiranje so dostopni pod robotom. Za programski priključek (3,5 -milimetrski priključek?) Bi lahko naredil veliko boljše delo, a pivo ni moglo več čakati. Tudi posodobitve po zraku (OTA) bi bilo lepo nastaviti.

Če želite robot preklopiti v način programiranja, pritisnite gumb za programiranje (to potegne IO0 nizko) in ga nato vklopite.

Pomembno: za polnjenje NiMH baterij robota uporabite laboratorijski napajalni komplet (neobremenjen) na približno 14 V in tok omejen na 250 mA. Napetost se bo prilagodila napetosti baterij. Odklopite, če je robot vroč ali če napetost akumulatorja doseže približno 12,5 V. Očitna izboljšava bi bila vključitev ustreznega polnilnika baterij, vendar to ni v obsegu tega navodila.

Strojna oprema:

Oglejte si tudi opombe na slikah. Ohišje je pritrjeno na podnožje robota s pomočjo 4 vijakov M4 in samozapornih matic. Upoštevajte gumijaste cevi, ki se uporabljajo kot distančniki. Upajmo, da bo to tudi Duvelu dalo nekaj vzmetenja, če se bo vožnja izkazala za nerodno. Modul ESP32-CAM in motorna plošča L298N sta v ohišje nameščena s plastičnimi lepljivimi nogami (v angleščini ne vem pravega imena), da se prepreči vrtanje dodatnih lukenj. ESP32 je nameščen tudi na lastno ploščo in vtične glave. Tako je enostavno zamenjati ESP32.

Ne pozabite: če namesto vgrajene uporabljate zunanjo anteno WiFi, spajkajte tudi mostiček za izbiro antene na spodnji strani plošče ESP32-CAM.

Natisnite zgornji logotip v datoteki DuvelBot.svg na papirju za brizgalne brizgalne tiskalnike (ali oblikujte svojega) in pripravljeni ste!

2. korak: Programirajte robota

Robota je priporočljivo programirati, preden ga zaprete, da se prepričate, ali vse deluje in se ne pojavi čarobni dim.

Potrebujete naslednja programska orodja:

• Arduino IDE,
• Knjižnice ESP32, SPIFFS (serijski periferni datotečni sistem flash), knjižnica ESPAsync Webserver.

Slednje je mogoče namestiti tako, da sledite temu randomnerdtutorialu vse do vključno razdelka »organiziranje datotek«. Res ne bi mogel bolje razložiti.

Koda:

Mojo kodo najdete na:

• Arduino skica DuvelBot.ino,
• Podmapa podatkov, ki vsebuje datoteke, ki bodo naložene v bliskovni pogon ESP s pomočjo SPIFFS. Ta mapa vsebuje spletno stran, ki jo bo služil ESP (index.html), podobo logotipa, ki je del spletne strani (duvel.png), in kaskadno obliko sloga ali datoteko CSS (style.css).

Za programiranje robota:

• Priključite pretvornik USB-TTL, kot je prikazano na shemi,
• Datoteka -> Odpri -> pojdi v mapo, kjer je DuvelBot.ino.
• Spremenite poverilnice za omrežje v skici:

const char* ssid = "yourNetworkSSIDHere"; const char* geslo = "yourPasswordHere";

• Orodja -> Plošča -> "AI -Thinker ESP -32 CAM" in izberite ustrezna serijska vrata za vaš računalnik (Orodja -> Vrata -> nekaj podobnega /dev /ttyUSB0 ali COM4),
• Odprite serijski monitor v Arduino IDE, medtem ko pritisnete gumb PROG (ki potegne IO0 nizko), vklopite robota,
• Na serijskem monitorju preverite, ali je ESP32 pripravljen za prenos,
• Zaprite serijski monitor (sicer nalaganje SPIFFS ne uspe),
• Orodja -> "Nalaganje podatkov skice ESP32" in počakajte, da se konča,
• Izklopite in znova vklopite, tako da pritisnete gumb PROG, da se vrnete v način programiranja,
• Pritisnite puščico »Naloži«, da programirate skico in počakate, da se dokonča,
• Odprite serijski monitor in ponastavite ESP32 z izklopom/vklopom,
• Ko se zažene, si zapišite naslov ip (na primer 192.168.0.121) in odklopite robota iz pretvornika USB-TTL,
• Odprite brskalnik na tem naslovu ip. Videti bi morali vmesnik, kot je na sliki.
• Izbirno: nastavite mac-naslov ESP32 na fiksni naslov ip v usmerjevalniku (odvisno od usmerjevalnika, kako to storiti).

To je to! Če želite izvedeti, kako deluje, preberite dalje …

3. korak: Kako deluje

Zdaj smo prišli do zanimivega dela: kako vse skupaj deluje?

Poskušal bom to razložiti korak za korakom, vendar ne pozabite, da Kajnjaps ni specialist za spletno programiranje. Pravzaprav je bilo učenje o spletnem programiranju celoten premis za izgradnjo DuvelBot -a. Če naredim očitne napake, pustite komentar!

V redu, po vklopu ESP32, kot običajno v nastavitvah, inicializira GPIO -je, jih poveže s časovniki PWM za krmiljenje motorja in LED. Več o upravljanju motorja si oglejte tukaj, to je precej standardno.

Nato se kamera konfigurira. Ločljivost sem namenoma ohranil precej nizko (VGA ali 640x480), da bi se izognil počasnemu odzivu. Upoštevajte, da ima plošča AI-Thinker ESP32-CAM serijski RAM čip (PSRAM), ki ga uporablja za shranjevanje okvirjev fotoaparatov večje ločljivosti:

if (psramFound ()) {Serial.println ("Najden PSRAM."); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; // število framebuffers glej: https://github.com/espressif/esp32-camera} else {Serial.println ("ni najdenega PSRAM-a."); config.frame_size = FRAMESIZE_QVGA; config.jpg_quality = 12; config.fb_count = 1; }

Nato se inicializira serijski periferni datotečni sistem (SPIFFS):

// inicializiramo SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("Pri namestitvi SPIFFS je prišlo do napake!"); vrnitev; }

SPIFFS deluje kot majhen datotečni sistem na ESP32. Tukaj se uporablja za shranjevanje treh datotek: same spletne strani index.html, kaskadne datoteke slogi style.css in logotipa slik slike duvel.png. ESP32 bo te datoteke posredoval vsem, ki se z njim povežejo kot odjemalec. Čeprav je možno in enostavno v celoti strežiti spletno stran iz skice s strežnikom server.send (…), zelo podobno kot pri serial.println () v velikem besedilnem nizu, je lažje preprosto namesto tega vročiti datoteko, saj to deluje tudi za slike in druge nebesedilne podatke.

Nato se ESP32 poveže z usmerjevalnikom (ne pozabite nastaviti poverilnic pred nalaganjem):

// tukaj spremenite poverilnice svojega usmerjevalnika con* char* ssid = "yourNetworkSSIDHere"; const char* password = "yourPasswordHere"; … // povežite se z WiFi Serial.print ("Povezovanje z WiFi"); WiFi.begin (ssid, geslo); while (WiFi.status ()! = WL_CONNECTED) {Serial.print ('.'); zamuda (500); } // zdaj povezan z usmerjevalnikom: ESP32 ima zdaj naslov ip

Če želimo dejansko narediti nekaj uporabnega, zaženemo asinhroni spletni strežnik:

// ustvarite objekt AsyncWebServer na vratih 80AsyncWebServer strežnik (80); … Server.begin (); // začnite poslušati povezave

Zdaj, če v naslovno vrstico brskalnika vnesete naslov ip, ki ga je usmerjevalnik dodelil ESP32, bo ESP32 prejel zahtevo. To pomeni, da bi se moral odjemalec (vi ali vaš brskalnik) odzvati tako, da mu nekaj postreže, na primer spletno stran.

ESP32 ve, kako se odzvati, saj so bili pri nastavitvi odzivi na vse možne dovoljene zahteve registrirani s pomočjo server.on (). Na primer, glavna spletna stran ali indeks (/) se obravnava tako:

server.on ("/", HTTP_GET, (AsyncWebServerRequest *zahteva) {Serial.println ("/zahteva prejeta!"); request-> send (SPIFFS, "/index.html", String (), false, procesor);});

Če se torej odjemalec poveže, se ESP32 odzove tako, da pošlje datoteko index.html iz datotečnega sistema SPIFFS. Procesor parametrov je ime funkcije, ki predhodno obdela html in nadomesti vse posebne oznake:

// nadomešča nadomestna mesta v html -ju, na primer %DATA %// s spremenljivkami, ki jih želite prikazati //

Podatki: %DATA %

Procesor niza (const String & var) {if (var == "DATA") {//Serial.println("in procesor! "); return String (dutyCycleNow); } vrni niz ();}

Zdaj pa razčlenimo spletno stran index.html. Na splošno so vedno trije deli:

1. html koda: kateri elementi naj bodo prikazani (gumbi/besedilo/drsniki/slike itd.),
2. slog kodo, bodisi v ločeni datoteki.css ali v… razdelku: kako naj bodo elementi videti,
3. javascript a… section: kako naj deluje spletna stran.

Ko se index.html naloži v brskalnik (ki ve, da je html zaradi vrstice DOCTYPE), se zažene v to vrstico:

To je zahteva za list sloga css. Mesto tega lista je podano v href = "…". Kaj torej počne vaš brskalnik? Prav, zažene drugo zahtevo do strežnika, tokrat za style.css. Strežnik zajame to zahtevo, ker je bila registrirana:

server.on ("/style.css", HTTP_GET, (zahteva AsyncWebServerRequest *) {Serial.println ("prejeta zahteva css"); request-> send (SPIFFS, "/style.css", "text/css" ");});

Čisto a? Mimogrede, to bi lahko bilo href = "/some/file/on/the/other/side/of/the/moon", za vse vaše brskalnike. Prav tako bi z veseljem prišel do te datoteke. O slogovnem listu ne bom razlagal, saj samo nadzoruje videz, zato tukaj ni prav zanimiv, če pa želite izvedeti več, si oglejte to vadnico.

Kako se prikaže logotip DuvelBot? V index.html imamo:

na kar se ESP32 odzove z:

server.on ("/duvel", HTTP_GET, (zahteva AsyncWebServerRequest *) {Serial.println ("prejeta zahteva logotipa duvel!"); request-> send (SPIFFS, "/duvel.png", "image/png ");});

..druga datoteka SPIFFS, tokrat popolna slika, kot je v odgovoru označeno z "image/png".

Zdaj smo prišli do res zanimivega dela: kode za gumbe. Osredotočimo se na gumb NAPREJ:

NAPREJ

Ime razreda = "…" je samo ime, ki ga poveže s slogovno listo za prilagoditev velikosti, barve itd. Pomembni deli so onmousedown = "toggleCheckbox ('naprej')" in onmouseup = "toggleCheckbox ('stop') ". To so dejanja gumba (enako za začetek/odpiranje, vendar za to so zasloni na dotik/telefoni). Tukaj dejanje gumba pokliče funkcijo toggleCheckbox (x) v razdelku javascript:

funkcija toggleCheckbox (x) {var xhr = nov XMLHttpRequest (); xhr.open ("GET", "/" + x, res); xhr.send (); // bi lahko z odzivom naredil tudi nekaj, ko je pripravljen, vendar ne}

Če pritisnete gumb za naprej, takoj pride do klica toggleCheckbox ('naprej'). Ta funkcija nato zažene XMLHttpRequest "GET", lokacije "/forward", ki deluje tako, kot če bi v naslovno vrstico brskalnika vnesli 192.168.0.121/forward. Ko ta zahteva prispe na ESP32, jo obravnavajo:

server.on ("/naprej", HTTP_GET, (zahteva AsyncWebServerRequest *) {Serial.println ("prejeto/posredovano"); actionNow = FORWARD; request-> send (200, "text/plain", "OK forward". ");}); {101}

Zdaj ESP32 preprosto odgovori z besedilom "V redu naprej". Opomba toggleCheckBox () s tem odgovorom ne stori ničesar (ali počakajte), vendar bi lahko, kot je prikazano kasneje v kodi kamere.

Program sam med tem odzivom nastavi le spremenljivko actionNow = NAPREJ kot odgovor na pritisk gumba. Zdaj v glavni zanki programa to spremenljivko spremljamo s ciljem povečati/zmanjšati PWM motorjev. Logika je: dokler imamo dejanje, ki ni STOP, pospešujemo motorje v tej smeri, dokler ne dosežemo določenega števila (dutyCycleMax). Nato ohranite to hitrost, dokler se actionNow ni spremenil:

void loop () {currentMillis = millis (); if (currentMillis - previousMillis> = dutyCycleStepDelay) {// shranite zadnjič, ko ste izvedli zanko previousMillis = currentMillis; // mainloop je odgovoren za pospeševanje motorjev navzgor/navzdol, če (actionNow! = previousAction) {// ramp down, then stop, then change action and ramp up dutyCycleNow = dutyCycleNow-dutyCycleStep; if (dutyCycleNow <= 0) {// če je po znižanju dc 0, nastavljeno na novo smer, začnite pri minimalnem delovnem ciklu setDir (actionNow); previousAction = actionNow; dutyCycleNow = dutyCycleMin; }} else // actionNow == previousAction narašča, razen če je smer STOP {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow+dutyCycleStep; if (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax; } else dutyCycleNow = 0; } ledcWrite (pwmChannel, dutyCycleNow); // prilagodite delovno kolo motorja}}

S tem se počasi povečuje hitrost motorjev, namesto da se le zaženejo s polno hitrostjo in razlijejo dragoceni dragoceni Duvel. Očitno izboljšanje bi bilo, če bi to kodo premaknili v rutino časovnih prekinitev, vendar deluje tako, kot je.

Če spustimo gumb za naprej, vaš brskalnik pokliče toggleCheckbox ('stop'), kar povzroči zahtevo za GET /stop. ESP32 nastavi actionNow na STOP (in se odzove z "OK stop."), Ki vodi glavno zanko, da vrti motorje.

Kaj pa LED diode? Isti mehanizem, zdaj pa imamo drsnik:

V javascriptu se nadzoruje nastavitev drsnika, tako da se pri vsaki spremembi zgodi klic za pridobitev "/LED/xxx", kjer je xxx vrednost svetlosti, na kateri naj bodo LED diode nastavljene:

var slide = document.getElementById ('slide'), sliderDiv = document.getElementById ("sliderAmount"); slide.onchange = function () {var xhr = nov XMLHttpRequest (); xhr.open ("GET", "/LED/" + this.value, true); xhr.send (); sliderDiv.innerHTML = this.value; }

Upoštevajte, da smo uporabili document.getElementByID ('slide'), da smo dobili objekt drsnika, ki je bil deklariran z in da je vrednost pri vsaki spremembi izpisana v besedilni element.

Obdelovalec v skici ujame vse zahteve za svetlost z uporabo "/LED/*" v registraciji upravljavca. Nato se zadnji del (število) razdeli in odda v int:

server.on ("/LED/ *", HTTP_GET, (zahteva AsyncWebServerRequest *) {Serial.println ("prejeta zahteva LED!"); setLedBrightness ((request-> url ()). substring (5).toInt ()); request-> send (200, "text/plain", "OK Leds.");});

Podobno, kot je opisano zgoraj, radijski gumbi nadzorujejo spremenljivke, ki določajo privzete nastavitve PWM, tako da se DuvelBot lahko počasi pripelje do vas s pivom, pazi, da ne razlije tega tekočega zlata, in se hitro vrne v kuhinjo, da prinese še nekaj.

… Kako se torej posodobi slika kamere, ne da bi morali osveževati stran? Za to uporabljamo tehniko, imenovano AJAX (asinhroni JavaScript in XML). Težava je v tem, da običajno povezava odjemalec-strežnik sledi fiksnemu postopku: odjemalec (brskalnik) poda zahtevo, strežnik (ESP32) se odzove, zadeva zaprta. Končano. Nič se ne zgodi več. Če bi le nekako lahko prevarali brskalnik, da redno zahteva posodobitve iz ESP32 … in prav to bomo naredili s tem kosom javascripta:

setInterval (function () {var xhttp = new XMLHttpRequest (); xhttp.open ("GET", "/CAMERA", true); xhttp.responseType = "blob"; xhttp.timeout = 500; xhttp.ontimeout = function () {}; xhttp.onload = function (e) {if (this.readyState == 4 && this.status == 200) {// glej: https://stackoverflow.com/questions/7650587/using… // https://www.html5rocks.com/en/tutorials/file/xhr2/ var urlCreator = window. URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL (this.response); // ustvarite predmet iz bloba document.querySelector ("#camimage"). src = imageUrl; urlCreator.revokeObjectURL (imageurl)}}; xhttp.send ();}, 250);

setInterval kot parameter vzame funkcijo in jo izvaja vsake toliko (tukaj enkrat na 250 ms, kar ima za posledico 4 sličice/sekundo). Izvedena funkcija poda zahtevo za binarno "blob" na naslovu /CAMERA. To obravnava ESP32-CAM na skici kot (iz Randomnerdtutorials):

server.on ("/CAMERA", HTTP_GET, (zahteva AsyncWebServerRequest *) {Serial.println ("prejeta zahteva kamere!"); camera_fb_t * fb = NULL; // esp_err_t res = ESP_OK; size_t _jpg_buf_len = 0; * _jpg_buf = NULL; // zajem okvirja fb = esp_camera_fb_get (); if (! fb) {Serial.println ("Vmesnega pomnilnika ni mogoče pridobiti"); return;} if (fb-> format! = PIXFORMAT_JPEG)/ /že v tej obliki iz konfiguracije {bool jpeg_converted = frame2jpg (fb, 80, & _jpg_buf, & _jpg_buf_len); esp_camera_fb_return (fb); fb = NULL; if (! jpeg_converted) {Serial.println ("JPEG compression failed"; }} else {_jpg_buf_len = fb-> len; _jpg_buf = fb-> buf;} //Serial.println(_jpg_buf_len); // pošljite zahtevo za oblikovano sliko-> send_P (200, "image/jpg", _jpg_buf, _jpg_buf_len); // čiščenje if (fb) {esp_camera_fb_return (fb); fb = NULL; _jpg_buf = NULL;} drugače če (_jpg_buf) {brezplačno (_jpg_buf); _jpg_buf = NULL;}});

Pomembni deli so, da okvir fb = esp_camera_fb_get () pretvori v-j.webp

Funkcija javascript nato počaka, da ta slika prispe. Potem je potrebno le malo dela za pretvorbo prejetega bloba v url, ki ga lahko uporabimo kot vir za posodobitev slike s strani html.

uf, končali smo!

4. korak: Ideje in ostanki

Cilj tega projekta je bil zame, da sem se naučil ravno dovolj spletnega programiranja za vmesnik strojne opreme v splet. Možno je več razširitev tega projekta. Tukaj je nekaj idej:

• Izvedite "pravi" pretok kamere, kot je razloženo tukaj in tukaj, in ga premaknite na drugi strežnik, kot je razloženo tukaj na istem ESP32, vendar na drugem jedru procesorja, nato pa uvozite kamero v html, ki ga streži prvi strežnik, z uporabo…. To bi moralo povzročiti hitrejše posodobitve fotoaparata.
• Uporabite način dostopne točke (AP), da bo robot bolj samostojen, kot je razloženo tukaj.
• Razširite z merjenjem napetosti akumulatorja, zmogljivostmi globokega spanja itd. To je trenutno nekoliko težko, ker AI-Thinker ESP32-CAM nima veliko GPIO-jev; potrebuje razširitev prek uarta in na primer pomožnega arduina.
• Pretvorite se v robota, ki išče mačke, ki ob pritisku velikega gumba občasno izvrže mačje dobrote, čez dan pretakajte tone lepih slik mačk …

Komentirajte, če vam je všeč ali imate vprašanja in hvala za branje!