DuvelBot - ESP32 -CAM Robot za posluživanje piva: 4 koraka (sa slikama)

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:05

Nakon napornog radnog dana, ništa nije ni blizu da ispijate svoje omiljeno pivo na kauču. U mom slučaju to je belgijsko plavo pivo "Duvel". Međutim, nakon svega, osim što se srušio, suočeni smo s najozbiljnijim problemom: hladnjak u kojem se nalazi moj Duvel je nepremostiv 20 stopa uklonjen sa spomenutog kauča.

Iako bi lagana prisila s moje strane mogla pomaknuti povremenog tinejdžerskog čistača frižidera da izlije moj tjedni dodatak Duvel -u, zadatak da ga zapravo isporučim svom skoro iscrpljenom praocu očito je korak predaleko.

Vrijeme je za izbijanje lemilice i tastature …

DuvelBot je neograničena web kamera zasnovana na AI-Thinker ESP32-CAM bazi, kojom možete upravljati sa svog pametnog telefona, preglednika ili tableta.

Lako je prilagoditi ili proširiti ovu platformu na manje alkoholnu upotrebu (pomislite na SpouseSpy, NeighbourWatch, KittyCam …).

Napravio sam ovog robota uglavnom kako bih naučio nešto o cijelom web programiranju i stvarima interneta stvari, o kojima nisam znao ništa. Dakle, na kraju ovog uputstva nalazi se detaljno objašnjenje kako to funkcionira.

Mnogi dijelovi ovog Instructable -a zasnovani su na izvrsnim objašnjenjima koja se nalaze u Tutorials Random Nerd, stoga ih posjetite!

Supplies

Sta ti treba:

Lista dijelova nije isklesana u kamenu, a mnogi se dijelovi mogu nabaviti u toni različitih verzija i sa mnogo različitih mjesta. Najviše sam nabavio od Ali-Express-a. Kao što je Machete rekao: improvizirajte.

Hardver:

• AI Thinker ESP32-CAM modul. Vjerojatno bi mogao raditi s drugim ESP32-CAM modulima, ali to sam ja koristio
• Ploča upravljačkog programa motora L298N,
• Jeftina platforma za robotiku na četiri kotača,
• Kućište s velikom ravnom površinom, poput Hammond Electronics 1599KGY,
• USB-na-3.3V-TTL-pretvarač za programiranje.
• Za osvjetljenje: 3 bijele LED diode, BC327 ili drugi tranzistor opće namjene NPN (Ic = 500mA), otpornik 4k7k, 3 otpornika 82Ohm, perfboard, kabeli (pogledajte sheme i slike).
• Prekidač za uključivanje/isključivanje i normalno otvoreno dugme za programiranje.

Opciono:

• Kamera riblje oko s dužim savijanjem od standardne kamere OV2460 isporučene s modulom ESP32-CAM,
• WiFi antena sa prikladno dugim kablom i ultra minijaturnim koaksijalnim konektorom, poput ove. ESP32-CAM ima ugrađenu antenu, a kućište je plastično, tako da antena zapravo nije potrebna, međutim mislio sam da izgleda super, pa …
• Papir sa naljepnicama za inkjet štampanje za dizajn gornjeg poklopca.

Uobičajeni hardverski alati: lemilica, bušilice, odvijači, kliješta …

Korak 1: Izgradnja robotske platforme

Šema:

Shema nije ništa posebno. ESP32-cam upravlja motorima preko ploče upravljačkog programa motora L298N, koja ima dva kanala. Motori lijeve i desne strane postavljeni su paralelno i svaka strana zauzima jedan kanal. Četiri mala 10..100nF keramičkih kondenzatora blizu pinova motora su uvijek preporučljiva za suzbijanje RF smetnji. Također, velika elektrolitska kapa (2200… 4700uF) na napajanju ploče motora, kako je prikazano na shemi, iako nije strogo potrebna, može malo ograničiti mrežanje napona napajanja (ako želite pogledati horor film, onda sondirajte Vbat osciloskopom dok su motori aktivni).

Imajte na umu da oba pinova ENABLE kanala motora pokreću isti pin sa moduliranom širinom impulsa (PWM) ESP32 (IO12). To je zato što modul ESP32-CAM nema gomilu GPIO-ova (shema modula je uključena za referencu). Robot -ove LED diode pokreće IO4, koji također pokreće ugrađenu LED bljeskalicu, pa uklonite Q1 kako biste spriječili da LED bljeskalica svijetli u zatvorenom kućištu.

Tipka za programiranje, prekidač za uključivanje/isključivanje, konektor za punjenje i konektor za programiranje dostupni su ispod robota. Mogao sam učiniti mnogo bolji posao za konektor za programiranje (priključak od 3,5 mm?), Ali pivo više nije moglo čekati. Također bi bilo dobro postaviti OTA ažuriranja (OTA).

Da biste robota stavili u način programiranja, pritisnite tipku za programiranje (ovo povlači IO0 nisko), a zatim je uključite.

Važno: za punjenje NiMH baterija robota upotrijebite laboratorijski set za napajanje (istovaren) na približno 14V i struju ograničenu na 250mA. Napon će se prilagoditi naponu baterija. Prekinite vezu ako je robotu vruće ili napon baterije dosegne oko 12,5 V. Očigledno poboljšanje ovdje bi bilo integriranje odgovarajućeg punjača baterija, ali to je izvan opsega ovog uputstva.

Hardver:

Takođe pogledajte napomene na slikama. Kućište je montirano na bazu robota pomoću 4 vijka M4 i samoblokirajućih matica. Obratite pažnju na gumene cijevi koje se koriste kao odstojnici. Nadajmo se da će ovo također dati izvjesno suspenziju Duvelu, ako se pokaže da je vožnja neravna. ESP32-CAM modul i ploča motora L298N montirani su u kućište pomoću plastičnih ljepljivih nožica (nisam siguran u pravo ime na engleskom), kako bi se spriječilo dodatno bušenje rupa. Takođe, ESP32 je montiran na vlastitu ploču za montažu i utične zaglavlje koji se mogu priključiti. Ovo olakšava zamjenu ESP32.

Ne zaboravite: ako namjeravate koristiti vanjsku WiFi antenu umjesto ugrađene, onda lemite i kratkospojnik za odabir antene na donjoj strani ploče ESP32-CAM.

Odštampajte gornji logotip u datoteci DuvelBot.svg na inkjet papiru sa naljepnicama (ili dizajnirajte svoj vlastiti) i spremni ste za rad!

Korak 2: Programirajte robota

Preporučljivo je programirati robota prije nego što ga zatvorite, kako biste bili sigurni da sve radi i da se ne pojavi čarobni dim.

Potrebni su vam sljedeći softverski alati:

• Arduino IDE,
• Biblioteke ESP32, SPIFFS (serijski periferni fleš sistem datoteka), ESPAsync biblioteka veb servera.

Potonji se može instalirati slijedeći ovaj randomnerdtutorial do uključujući odjeljak "organiziranje vaših datoteka". Zaista to ne bih mogao bolje objasniti.

Kod:

Moj kôd možete pronaći na:

• Arduino skica DuvelBot.ino,
• Podmapa s podacima koja sadrži datoteke koje će se učitati na ESP flash pomoću SPIFFS -a. Ova mapa sadrži web stranicu koju će ESP posluživati (index.html), sliku logotipa koja je dio web stranice (duvel.png) i kaskadnu tablicu stilova ili CSS datoteku (style.css).

Da biste programirali robota:

• Spojite USB-TTL pretvarač kako je prikazano na shemi,
• Datoteka -> Otvori -> idite u mapu u kojoj se nalazi DuvelBot.ino.
• Promijenite mrežne vjerodajnice na skici:

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

• Alati -> Ploča -> "AI -Thinker ESP -32 CAM" i odaberite odgovarajući serijski port za svoje računalo (Alati -> Port -> nešto poput /dev /ttyUSB0 ili COM4),
• Otvorite serijski monitor u Arduino IDE -u. Dok pritiskate tipku PROG (koja povlači IO0 nisko), uključite robota,
• Provjerite na serijskom monitoru je li ESP32 spreman za preuzimanje,
• Zatvorite serijski monitor (u protivnom prenos SPIFFS -a ne uspije),
• Alati -> "ESP32 Sketch Data Upload" i pričekajte da se završi,
• Isključite i ponovo uključite držeći tipku PROG za povratak u način programiranja,
• Pritisnite strelicu "Upload" za programiranje skice i pričekajte da se završi,
• Otvorite serijski monitor i resetirajte ESP32 isključivanjem/uključivanjem,
• Nakon što se pokrene, zabilježite IP adresu (nešto poput 192.168.0.121) i odspojite robota s USB-TTL pretvarača,
• Otvorite pretraživač na ovoj IP adresi. Trebali biste vidjeti sučelje kao na slici.
• Opcionalno: postavite mac-adresu ESP32 na fiksnu IP adresu na usmjerivaču (ovisno o usmjerivaču kako to učiniti).

To je to! Čitajte dalje ako želite znati kako to funkcionira …

Korak 3: Kako to funkcionira

Sada dolazimo do zanimljivog dijela: kako sve to funkcionira zajedno?

Pokušat ću to objasniti korak po korak, ali imajte na umu da Kajnjaps nije stručnjak za web programiranje. U stvari, učenje web programiranja bila je cijela premisa izgradnje DuvelBot -a. Ako napravim očite greške, ostavite komentar!

U redu, nakon uključivanja ESP32, kao i obično u postavkama, inicijalizira GPIO -ove, povezuje ih s PWM tajmerima za upravljanje motorom i LED diodama. Ovdje pogledajte više o upravljanju motorom, prilično je standardno.

Zatim se kamera konfigurira. Rezoluciju sam namjerno držao prilično niskom (VGA ili 640x480) kako bih izbjegao spor odgovor. Imajte na umu da AI-Thinker ESP32-CAM ploča ima serijski ram čip (PSRAM) koji koristi za spremanje okvira kamere veće rezolucije:

if (psramFound ()) {Serial.println ("PSRAM je pronađen."); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; // broj framebuffers vidi: https://github.com/espressif/esp32-camera} else {Serial.println ("nije pronađen PSRAM."); config.frame_size = FRAMESIZE_QVGA; config.jpg_quality = 12; config.fb_count = 1; }

Zatim se pokreće serijski periferni flash datotečni sistem (SPIFFS):

// inicijalizira SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("Došlo je do greške pri montiranju SPIFFS!"); return; }

SPIFFS djeluje kao mali datotečni sistem na ESP32. Ovdje se koristi za spremanje tri datoteke: same web stranice index.html, kaskadne datoteke stilova style.css i logotip-p.webp

Zatim se ESP32 povezuje s vašim usmjerivačem (ne zaboravite postaviti vjerodajnice prije učitavanja):

// ovdje promijenite vjerodajnice vašeg usmjerivača const char* ssid = "yourNetworkSSIDHere"; const char* password = "yourPasswordHere"; … // povezivanje na WiFi Serial.print ("Povezivanje na WiFi"); WiFi.begin (ssid, lozinka); while (WiFi.status ()! = WL_CONNECTED) {Serial.print ('.'); kašnjenje (500); } // sada spojen na usmjerivač: ESP32 sada ima IP adresu

Da bismo zaista učinili nešto korisno, pokrećemo asinhroni web poslužitelj:

// kreiramo objekt AsyncWebServer na portu 80AsyncWebServer poslužitelja (80); … Server.begin (); // početi slušati veze

Sada, ako unesete IP adresu koju je usmjerivač dodijelio ESP32 od strane rutera u adresnoj traci preglednika, ESP32 dobiva zahtjev. To znači da bi trebao odgovoriti klijentu (vama ili vašem pregledniku) posluživanjem nečega, na primjer web stranice.

ESP32 zna kako odgovoriti, jer su u postavljanju odgovori na sve moguće dozvoljene zahtjeve registrirani pomoću server.on (). Na primjer, glavna web stranica ili indeks (/) se rukuje ovako:

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

Dakle, ako se klijent poveže, ESP32 odgovara slanjem datoteke index.html iz SPIFFS datotečnog sistema. Procesor parametara naziv je funkcije koja unaprijed obrađuje html i zamjenjuje sve posebne oznake:

// Zamjenjuje rezervirana mjesta u html -u kao %DATA %// varijablama koje želite prikazati //

Podaci: %DATA %

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

Sada, izdvojimo samu web stranicu index.html. Općenito, uvijek postoje tri dijela:

1. html kod: koji elementi trebaju biti prikazani (dugmad/tekst/klizači/slike itd.),
2. stilski kod, bilo u zasebnoj.css datoteci ili u… odjeljku: kako bi elementi trebali izgledati,
3. javascript a… odjeljak: kako bi web stranica trebala djelovati.

Nakon što se index.html učita u preglednik (koji zna da je html zbog linije DOCTYPE), trči u ovaj redak:

To je zahtjev za listu stilova u css -u. Lokacija ovog lista navedena je u href = "…". Dakle, šta vaš pretraživač radi? U redu, pokreće drugi zahtjev prema poslužitelju, ovaj put za style.css. Poslužitelj bilježi ovaj zahtjev jer je registriran:

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

Uredno a? Usput, moglo je biti href = "/some/file/on/the/other/side/of/the/moon", koliko je vašem pretraživaču bilo stalo. Išlo bi tako sretno po tu datoteku. Neću objašnjavati tablicu stilova jer samo kontrolira izgled pa ovdje nije baš zanimljivo, ali ako želite saznati više, pogledajte ovaj vodič.

Kako se pojavljuje logotip DuvelBot? U index.html imamo:

na šta ESP32 odgovara sa:

server.on ("/duvel", HTTP_GET, (AsyncWebServerRequest *zahtjev) {Serial.println ("zahtjev za logotip duvel primljen!"); request-> send (SPIFFS, "/duvel.png", "image-p.webp

..druga SPIFFS datoteka, ovaj put potpuna slika, označena sa "image/png" u odgovoru.

Sada dolazimo do zaista zanimljivog dijela: kod za dugmad. Usredotočimo se na gumb NAPRIJED:

NAPRIJED

Ime klase = "…" samo je ime za povezivanje sa stilskom tablicom za prilagodbu veličine, boje itd. Važni dijelovi su onmousedown = "toggleCheckbox ('naprijed')" i onmouseup = "toggleCheckbox ('stop') ". To predstavljaju radnje gumba (isto za početak pokretanja/dodira, ali za to su ekrani osjetljivi na dodir/telefoni). Ovdje akcija gumba poziva funkciju toggleCheckbox (x) u odjeljku javascript:

funkcija toggleCheckbox (x) {var xhr = novi XMLHttpRequest (); xhr.open ("GET", "/" + x, true); xhr.send (); // mogao bi učiniti i nešto s odgovorom kada je spreman, ali mi ne}

Dakle, pritiskom na tipku za naprijed odmah dolazi do pozivanja toggleCheckbox ('naprijed'). Ova funkcija tada pokreće XMLHttpRequest "GET", lokacije "/forward" koji djeluje baš kao da ste upisali 192.168.0.121/forward u adresnu traku preglednika. Kada ovaj zahtjev stigne na ESP32, njime se bave:

server.on ("/forward", HTTP_GET, (AsyncWebServerRequest *zahtjev) {Serial.println ("primljeno/proslijeđeno"); actionNow = FORWARD; request-> send (200, "text/plain", "OK forward". ");});

Sada ESP32 jednostavno odgovara s tekstom "OK forward". Napomena toggleCheckBox () ne radi ništa sa ovim odgovorom (ili sačekajte sa uključenim odgovorom), ali može, kao što je prikazano kasnije u kodu kamere.

Sam po sebi tokom ovog odgovora, program postavlja samo varijablu actionNow = FORWARD, kao odgovor na pritisak na dugme. Sada se u glavnoj petlji programa ova varijabla prati s ciljem povećanja/smanjenja PWM -a motora. Logika je: sve dok imamo akciju koja nije STOP, pojačavajte motore u tom smjeru dok se ne dosegne određeni broj (dutyCycleMax). Zatim zadržite tu brzinu, sve dok se actionNow nije promijenio:

void loop () {currentMillis = millis (); if (currentMillis - previousMillis> = dutyCycleStepDelay) {// spremite zadnji put kada ste izvršili petlju previousMillis = currentMillis; // mainloop je odgovoran za ubrzanje motora prema gore/dolje ako (actionNow! = previousAction) {// spustite, zatim zaustavite, zatim promijenite akciju i pojačate dutyCycleNow = dutyCycleNow-dutyCycleStep; if (dutyCycleNow <= 0) {// ako je nakon spuštanja dc 0, postavite na novi smjer, počnite od min. radnog ciklusa setDir (actionNow); previousAction = actionNow; dutyCycleNow = dutyCycleMin; }} else // actionNow == previousAction se povećava, osim ako je smjer STOP {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow+dutyCycleStep; if (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax; } else dutyCycleNow = 0; } ledcWrite (pwmChannel, dutyCycleNow); // podesite radni ciklus motora}}

Ovo polako povećava brzinu motora, umjesto samo lansiranja punom brzinom i prosipanja dragocjenog dragocjenog Duvela. Očigledno poboljšanje bilo bi premještanje ovog koda u rutinu prekida sa odbrojavanjem vremena, ali radi kako jest.

Sada, ako otpustimo gumb za naprijed, vaš preglednik poziva toggleCheckbox ('stop'), što rezultira zahtjevom za GET /stop. ESP32 postavlja actionNow na STOP (i odgovara sa "OK stop."), Što dovodi glavnu petlju do okretanja motora.

Šta je sa LED diodama? Isti mehanizam, ali sada imamo klizač:

U javascript -u se nadzire postavka klizača, tako da se pri svakoj promjeni dogodi poziv za dobivanje "/LED/xxx", gdje je xxx vrijednost svjetline na koju LED treba postaviti:

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

Imajte na umu da smo koristili document.getElementByID ('slide') za dobivanje samog objekta klizača, koji je deklariran sa i da se vrijednost ispisuje u tekstualni element pri svakoj promjeni.

Rukovatelj na skici hvata sve zahtjeve za svjetlinu pomoću "/LED/*" u registraciji rukovatelja. Zatim se posljednji dio (broj) dijeli i baca u int:

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

Slično kao što je gore opisano, radio tipke kontroliraju varijable koje postavljaju PWM na zadane vrijednosti, tako da DuvelBot može polako voziti do vas s pivom, pazeći da ne prolije to tekuće zlato, i brzo se vratiti u kuhinju po još.

… Kako se slika kamere ažurira, a da ne morate osvježavati stranicu? Za to koristimo tehniku koja se zove AJAX (Asinhroni JavaScript i XML). Problem je u tome što obično veza klijent-poslužitelj slijedi fiksnu proceduru: klijent (preglednik) šalje zahtjev, server (ESP32) odgovara, slučaj je zatvoren. Gotovo. Ništa se više ne događa. Kad bismo barem mogli navesti pretraživač da redovito traži ažuriranja s ESP32 … i upravo ćemo to učiniti s ovim komadom 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) {// vidi: 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); // kreirajte objekt iz mrlje document.querySelector ("#camimage"). src = imageUrl; urlCreator.revokeObjectURL (imageurl)}}; xhttp.send ();}, 250);

setInterval uzima kao parametar funkciju i izvršava je svako toliko (ovdje jednom na 250 ms što rezultira 4 kadra u sekundi). Funkcija koja se izvršava daje zahtjev za binarni "blob" na adresi /CAMERA. Ovim upravlja ESP32-CAM na skici kao (iz Randomnerdtutorials):

server.on ("/CAMERA", HTTP_GET, (AsyncWebServerRequest * zahtjev) {Serial.println ("zahtjev za kameru primljen!"); camera_fb_t * fb = NULL; // esp_err_t res = ESP_OK; size_t _jpg_buf_len = 0; * _jpg_buf = NULL; // hvatanje okvira fb = esp_camera_fb_get (); if (! fb) {Serial.println ("Nije moguće nabaviti međuspremnik okvira"); return;} if (fb-> format! = PIXFORMAT_JPEG)/ /već u ovom formatu iz konfiguracije {bool jpeg_converted = frame-j.webp

Važni dijelovi su dobivanje okvira fb = esp_camera_fb_get () pretvaranje u-j.webp

Javascript funkcija tada čeka da stigne ova slika. Tada je potrebno samo malo rada da se primljeni "blob" pretvori u url koji se može koristiti kao izvor za ažuriranje slike na html stranici.

fuj, gotovi smo!

Korak 4: Ideje i ostaci

Cilj ovog projekta za mene je bio naučiti dovoljno web programiranja za povezivanje hardvera s webom. Moguće je nekoliko proširenja ovog projekta. Evo nekoliko ideja:

• Implementirajte 'pravi' streaming kamere kako je ovdje i ovdje objašnjeno i premjestite ga na drugi server kako je ovdje objašnjeno na istom ESP32, ali na drugom jezgru procesora, a zatim uvezite stream kamere u html koji služi 1. server koristeći …. To bi trebalo rezultirati bržim ažuriranjem kamere.
• Koristite način pristupne tačke (AP) kako bi robot bio samostalniji kako je ovdje objašnjeno.
• Proširite mjerenjem napona baterije, mogućnostima dubokog sna itd. Ovo je trenutno malo teško jer AI-Thinker ESP32-CAM nema mnogo GPIO-ova; treba proširenje putem uart -a i na primjer slave arduino.
• Pretvorite se u robota koji traži mačke koji s vremena na vrijeme izbacuje poslastice mačaka pritiskom na veliko dugme šapom, pretočite tone lijepih slika mačaka tokom dana …

Komentirajte ako vam se sviđa ili imate pitanja i hvala na čitanju!