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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:33

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". No, nakon svega što se srušilo, 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 hladnjaka da izlije moj tjedni dodatak Duvelu, zadatak da ga zapravo isporučim svom gotovo iscrpljenom praocu očito je korak predaleko.

Vrijeme je za izbijanje lemilice i tipkovnice …

DuvelBot je jednostavna upravljačka web-kamera bazirana na AI-Thinker-u ESP32-CAM, kojom možete upravljati sa svog pametnog telefona, preglednika ili tableta.

Lako je prilagoditi ili proširiti ovu platformu za manje alkoholne potrebe (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 Instructablea nalazi se detaljno objašnjenje kako to funkcionira.

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

Pribor

Što trebaš:

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

Hardver:

• Modul AI Thinker ESP32-CAM. 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), 4k7k otpornik, 3 otpornika od 82Ohm, perfboard, kabeli (pogledajte shemu i slike).
• Prekidač za uključivanje/isključivanje i normalno otvoreni gumb za programiranje.

Izborno:

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

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

Korak 1: Izgradnja robotske platforme

Shema:

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 uvijek su preporučljiva za suzbijanje RF smetnji. Također, velika elektrolitska kapa (2200… 4700uF) na napajanju ploče motora, kao što je prikazano na shemi, iako nije strogo potrebna, može malo ograničiti mreženje napona napajanja (ako želite pogledati horor film, onda sondirajte Vbat osciloskopom dok su motori aktivni).

Imajte na umu da oba pina ENABLE kanala motora pokreću isti pin s moduliranom širinom impulsa (PWM) ESP32 (IO12). To je zato što modul ESP32-CAM nema gomilu GPIO-ova (shema modula uključena je kao referenca). Robotove 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.

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

Za stavljanje robota 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 14 V i struju ograničenu na 250 mA. 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 Uputa.

Hardver:

Također 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 određeni ovjes Duvelu, ako se pokaže da je vožnja neravna. Modul ESP32-CAM 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đer, ESP32 je montiran na vlastitu ploču za pričvršćivanje i utične zaglavlje koji se mogu priključiti. To olakšava zamjenu ESP32.

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

Ispišite gornji logotip u datoteci DuvelBot.svg na inkjet papiru s naljepnicama (ili dizajnirajte 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,
• Knjižnice ESP32, SPIFFS (serijski periferni flash datotečni sustav), ESPAsync biblioteka web poslužitelja.

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 prenijeti 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).

Za programiranje 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* lozinka = "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,
• Na serijskom monitoru provjerite je li ESP32 spreman za preuzimanje,
• Zatvorite serijski monitor (u protivnom prijenos SPIFFS -a ne uspije),
• Alati -> "ESP32 Sketch Data Upload" i pričekajte da 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 preglednik na ovoj IP adresi. Trebali biste vidjeti sučelje kao na slici.
• Izborno: postavite mac-adresu ESP32 na fiksnu IP adresu u 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 radi

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. Zapravo, učenje web programiranja bila je cijela premisa izgradnje DuvelBota. Ako pogriješim, ostavite komentar!

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

Zatim se kamera konfigurira. Namjerno sam držao prilično nisku razlučivost (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 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 inicijalizira serijski periferni flash datotečni sustav (SPIFFS):

// inicijalizirati SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("Došlo je do pogreške prilikom postavljanja SPIFFS -a!"); povratak; }

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

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

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

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

// stvorimo objekt AsyncWebServer na poslužitelju porta 80AsyncWebServer (80); … server.begin (); // početi slušati veze

Sada, ako upišete IP adresu koju je usmjerivač dodijelio ESP32 -u u adresnoj traci preglednika, ESP32 dobiva zahtjev. To znači da bi trebao odgovoriti klijentu (vama ili vašem pregledniku) tako da mu nešto posluži, na primjer web stranicu.

ESP32 zna kako odgovoriti jer su u postavljanju odgovori na sve moguće dopuštene zahtjeve registrirani pomoću poslužitelja.on (). Na primjer, glavna web stranica ili indeks (/) se obrađuje 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 datotečnog sustava SPIFFS. 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 %

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

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

1. html kod: koji elementi trebaju biti prikazani (gumbi/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 retka DOCTYPE), trči u ovaj redak:

To je zahtjev za css tablicu stila. Položaj ovog lista dan je u href = "…". Dakle, što vaš preglednik radi? U redu, pokreće drugi zahtjev 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 ha? Usput, to je mogao biti href = "/some/file/on/the/other/side/of/the/moon", koliko je vašem pregledniku 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 što ESP32 odgovara sa:

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

..druga SPIFFS datoteka, ovaj put potpuna slika, na što ukazuje "image/png" u odgovoru.

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

NAPRIJED

Naziv class = "…" samo je naziv 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/dodir, ali za to su ekrani osjetljivi na dodir/telefoni). Ovdje radnja 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 ne radimo}

Dakle, pritiskom na tipku za naprijed odmah dolazi do poziva toggleCheckbox ('naprijed'). Ova funkcija tada pokreće XMLHttpRequest "GET", lokacije "/forward" koji djeluje isto kao da ste upisali 192.168.0.121/forward u adresnu traku preglednika. Nakon što 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 tekstom "U redu naprijed". Napomena toggleCheckBox () ne radi ništa s ovim odgovorom (ili čekajte), no mogao bi, kao što je prikazano kasnije u kodu kamere.

Sam po sebi tijekom ovog odgovora, program postavlja samo varijablu actionNow = NAPRIJED, kao odgovor na pritisak na gumb. 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 izveli 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, krenite 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); // podešavanje radnog ciklusa motora}}

Ovo polako povećava brzinu motora, umjesto da se samo pokrene punom brzinom i prolije dragocjeni dragocjeni Duvel. 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 s "OK stop."), Što dovodi glavnu petlju do okretanja motora.

Što 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 prema zadanim postavkama, tako da se DuvelBot može polako odvesti 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, poslužitelj (ESP32) odgovara, slučaj je zatvoren. Gotovo. Ništa se više ne događa. Kad bismo barem mogli prevariti preglednik 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 (funkcija) {}; 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); // stvorite objekt od 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 šalje zahtjev za binarni "blob" na adresi /CAMERA. To rješava 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 tek 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 poslužitelj kako je ovdje objašnjeno na istom ESP32, ali na drugoj jezgri procesora, a zatim uvezite stream kamere u html koji poslužuje prvi poslužitelj pomoću …. To bi trebalo rezultirati bržim ažuriranjem kamere.
• Koristite način pristupne toč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-a; treba proširenje putem uarta i na primjer robovskog arduina.
• Pretvorite se u robota koji traži mačke koji s vremena na vrijeme izbacuje mačje poslastice pritiskom na veliko dugme šapom, tijekom dana emitirajte tone lijepih slika mačaka …

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