DuvelBot - robot na servírovanie piva ESP32 -CAM: 4 kroky (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

Po náročnom pracovnom dni sa nič nepribližuje k popíjaniu obľúbeného piva na gauči. V mojom prípade je to belgické blond pivo „Duvel“. Napriek tomu, že sme sa zrútili, sme konfrontovaní s najvážnejším problémom: chladnička obsahujúca môj Duvel je neprekonateľná 20 stôp odstránená z uvedeného gauča.

Aj keď trochu ľahkého nátlaku z mojej strany môže posunúť príležitostného mladistvého lapača chladničiek, aby vylial môj týždenný príspevok k Duvelu, úloha skutočne ho doručiť svojmu takmer vyčerpanému predkovi je zrejme o krok príliš ďaleko.

Čas vybuchnúť spájkovačku a klávesnicu …

DuvelBot je jednoduchá webová kamera založená na AI-Thinker ESP32-CAM, ktorú môžete ovládať zo svojho smartfónu, prehliadača alebo tabletu.

Je ľahké prispôsobiť alebo rozšíriť túto platformu na menej alkoholické použitie (napríklad SpouseSpy, NeighbourWatch, KittyCam …).

Tento robot som postavil hlavne preto, aby som sa dozvedel niečo o celom webovom programovaní a veciach IoT, o ktorých som nič nevedel. Na konci tohto Instructable je teda podrobné vysvetlenie, ako to funguje.

Mnoho častí tohto Návodu je založených na vynikajúcich vysvetleniach, ktoré nájdete v Návode pre Random Nerd, takže ich navštívte!

Zásoby

Čo potrebuješ:

Zoznam dielov nie je vytesaný do kameňa a mnoho dielov je možné získať v tóne rôznych verzií a z mnohých rôznych miest. Väčšinu som zaobstaral od Ali-Express. Ako povedal Machete: improvizujte.

Hardvér:

• Modul AI Thinker ESP32-CAM. Pravdepodobne by to mohlo fungovať s inými modulmi ESP32-CAM, ale to som použil
• Doska vodiča motora L298N,
• Lacná 4-kolesová robotická platforma,
• Kryt s veľkým rovným povrchom, ako je Hammond Electronics 1599KGY,
• Prevodník USB na 3,3 V-TTL na programovanie.
• Na osvetlenie: 3 biele LED diódy, BC327 alebo iný univerzálny tranzistor NPN (Ic = 500mA), odpor 4k7k, 3 odpory 82Ohm, perfboard, káble (pozri schému a obrázky).
• Prepínač zapnutia/vypnutia a normálne otvorené tlačidlo na programovanie.

Voliteľné:

• Kamera typu rybie oko s dlhším ohnutím ako štandardná kamera OV2460 dodávaná s modulom ESP32-CAM,
• WiFi anténa s dostatočne dlhým káblom a ultra miniatúrnym koaxiálnym konektorom, napríklad takto. ESP32-CAM má vstavanú anténu a kryt je plastový, takže anténa nie je skutočne potrebná, ale myslel som si, že to vyzerá skvele, takže …
• Papier na nálepky pre atramentové tlačiarne pre dizajn horného krytu.

Bežné hardvérové nástroje: spájkovačka, vŕtačky, skrutkovače, kliešte…

Krok 1: Zostavenie platformy robota

Schéma:

Schéma nie je nič zvláštne. Vačka ESP32 ovláda motory prostredníctvom dosky ovládača motora L298N, ktorá má dva kanály. Motory ľavej a pravej strany sú umiestnené paralelne a každá strana zaberá jeden kanál. Štyri malé 10..100nF keramické kondenzátory blízko kolíkov motora sú ako vždy vhodné na boj proti rušeniu RF. Aj veľká elektrolytická čiapočka (2 200… 4 700 uF) na napájaní motorovej dosky, ako je znázornené na schéme, hoci nie je striktne potrebná, môže trochu obmedziť zvlnenie napájacieho napätia (ak chcete vidieť horor, potom sondujte Vbat s osciloskopom, keď sú motory aktívne).

Všimnite si toho, že obidva POVOLENÉ kolíky motora sú poháňané rovnakým pinom modulovaným na šírku impulzov (PWM) na ESP32 (IO12). Dôvodom je, že modul ESP32-CAM nemá veľa GPIO (schéma modulu je zahrnutá ako referencia). LED diódy robota poháňa IO4, ktorý poháňa aj integrovanú LED blesku, preto odstráňte Q1, aby sa dióda LED blesku nerozsvietila v uzavretom kryte.

Programovacie tlačidlo, vypínač/vypínač, nabíjací konektor a programovací konektor sú prístupné pod robotom. Oveľa lepšiu prácu som mohol urobiť pre programovací konektor (3,5 mm jack?), Ale pivo už nemohlo čakať. Tiež by bolo vhodné nastaviť bezdrôtové aktualizácie (OTA).

Ak chcete robot prepnúť do režimu programovania, stlačte programovacie tlačidlo (tým sa zníži IO0 nízko) a potom ho zapnite.

Dôležité: Na nabíjanie batérií NiMH robota použite laboratórnu súpravu (nenabitú) na približne 14 V a prúd obmedzený na 250 mA. Napätie sa prispôsobí napätiu batérií. Ak je robot horúci alebo napätie batérie dosiahne približne 12,5 V, odpojte ho. Zjavným zlepšením by bolo integrovať správnu nabíjačku batérií, ale to je mimo rozsahu tohto návodu.

Hardvér:

Pozrite si tiež poznámky na obrázkoch. Kryt je namontovaný na základni robota pomocou 4 skrutiek M4 a samosvorných matíc. Všimnite si gumových rúrok používaných ako dištančné vložky. Našťastie to tiež prinesie určité pozastavenie pre Duvel, ak by sa jazda ukázala ako hrboľatá. Modul ESP32-CAM a motorová doska L298N sú namontované v puzdre pomocou plastových lepiacich nožičiek (v angličtine nie je isté správne meno), aby sa zabránilo vŕtaniu ďalších otvorov. ESP32 je tiež namontovaný na vlastnej perfboardovej doske a zásuvných pinheaderoch. To uľahčuje výmenu ESP32.

Nezabudnite: ak idete s externou anténou WiFi namiesto vstavanej, prepojte tiež prepojku na výber antény na spodnej strane dosky ESP32-CAM.

Vytlačte si najvyššie logo v súbore DuvelBot.svg na papier s atramentovými nálepkami (alebo si vytvorte vlastný) a môžete ísť!

Krok 2: Naprogramujte robota

Odporúča sa naprogramovať robota skôr, ako ho zatvoríte, aby ste sa uistili, že všetko funguje a neobjavuje sa žiadny magický dym.

Potrebujete nasledujúce softvérové nástroje:

• Arduino IDE,
• Knižnice ESP32, SPIFFS (sériový periférny súborový systém flash), knižnica webového servera ESPAsync.

Ten druhý je možné nainštalovať podľa tohto randomnerdututoriálu až po sekciu „Organizácia súborov“vrátane. Naozaj som to nedokázal lepšie vysvetliť.

Kód:

Môj kód nájdete na:

• Skica Arduino DuvelBot.ino,
• Dátový podpriečinok, ktorý obsahuje súbory, ktoré sa majú nahrať do ESP Flash pomocou SPIFFS. Tento priečinok obsahuje webovú stránku, ktorú bude ESP zobrazovať (index.html), obrázok loga, ktorý je súčasťou webovej stránky (duvel.png), a kaskádový štýl alebo súbor CSS (style.css).

Programovanie robota:

• Pripojte prevodník USB-TTL podľa schémy,
• Súbor -> Otvoriť -> prejdite do priečinka, kde sa nachádza DuvelBot.ino.
• Zmeňte svoje sieťové poverenia v náčrte:

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

• Nástroje -> Doska -> „AI -Thinker ESP -32 CAM“a vyberte príslušný sériový port pre svoj počítač (Nástroje -> Port -> niečo ako /dev /ttyUSB0 alebo COM4),
• Otvorte sériový monitor v Arduino IDE a súčasne stlačte tlačidlo PROG (ktoré ťahá IO0 nízko), zapnite robot,
• Na sériovom monitore skontrolujte, či je ESP32 pripravený na stiahnutie,
• Zatvorte sériový monitor (inak zlyhá nahrávanie SPIFFS),
• Nástroje -> „Nahranie údajov skici ESP32“a počkajte, kým sa dokončí,
• Vypnite a znova zapnite podržaním tlačidla PROG, aby ste sa vrátili do režimu programovania,
• Stlačením šípky „Nahrať“naprogramujte skicu a počkajte, kým sa dokončí,
• Otvorte sériový monitor a resetujte ESP32 vypnutím/zapnutím,
• Akonáhle sa spustí, poznamenajte si IP adresu (niečo ako 192.168.0.121) a odpojte robota od prevodníka USB-TTL,
• Otvorte prehliadač na tejto adrese IP. Rozhranie by ste mali vidieť ako na obrázku.
• Voliteľné: nastavte mac-adresu ESP32 na pevnú ip adresu vo vašom smerovači (závisí od postupu routera).

To je všetko! Pokračujte v čítaní, ak chcete vedieť, ako to funguje …

Krok 3: Ako to funguje

Teraz sa dostávame k zaujímavej časti: ako to všetko funguje dohromady?

Pokúsim sa to vysvetliť krok za krokom, ale majte na pamäti, že Kajnjaps nie je odborníkom na webové programovanie. Naučiť sa trochu webového programovania bolo v skutočnosti hlavným predpokladom budovania DuvelBot. Ak robím zrejmé chyby, zanechajte prosím komentár!

Ok, po zapnutí ESP32, ako obvykle v nastavení, inicializuje GPIO, spojí ich s časovačmi PWM na ovládanie motora a LED. Tu nájdete ďalšie informácie o ovládaní motora, je to celkom štandardné.

Potom je kamera nakonfigurovaná. Zámerne som nechal rozlíšenie dosť nízke (VGA alebo 640x480), aby som predišiel spomalenej reakcii. Upozorňujeme, že doska AI-Thinker ESP32-CAM má sériový čip RAM (PSRAM), ktorý používa na ukladanie snímok kamier s väčším rozlíšením:

if (psramFound ()) {Serial.println ("PSRAM found."); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; // počet framebufferov pozri: https://github.com/espressif/esp32-camera} else {Serial.println ("no PSRAM found."); config.frame_size = FRAMESIZE_QVGA; config.jpg_quality = 12; config.fb_count = 1; }

Potom sa inicializuje sériový periférny súborový systém Flash (SPIFFS):

// inicializácia SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("Pri montáži SPIFFS sa vyskytla chyba!"); návrat; }

SPIFFS funguje ako malý súborový systém na ESP32. Tu sa používa na ukladanie troch súborov: samotná webová stránka index.html, kaskádový súbor štýlov style.css a logo obrázku-p.webp

Potom sa ESP32 pripojí k vášmu smerovaču (pred odoslaním nezabudnite nastaviť svoje poverenia):

// tu zmeňte poverenia svojho routeraconst char* ssid = "yourNetworkSSIDHere"; const char* heslo = "yourPasswordHere"; … // pripojenie k WiFi Serial.print ("Pripojenie k WiFi"); WiFi.begin (ssid, heslo); while (WiFi.status ()! = WL_CONNECTED) {Serial.print ('.'); oneskorenie (500); } // teraz je pripojený k routeru: ESP32 má teraz ip adresu

Aby sme urobili niečo užitočné, spustíme asynchrónny webový server:

// vytvorenie objektu AsyncWebServer na porte 80AsyncWebServer server (80); … Server.begin (); // začnite počúvať spojenia

Teraz, keď do panela s adresou prehliadača zadáte IP adresu, ktorú routeru priradil ESP32 smerovač, ESP32 dostane požiadavku. To znamená, že by malo klientovi (vám alebo vášmu prehliadaču) odpovedať tak, že mu niečo poskytne, napríklad webovú stránku.

ESP32 vie, ako reagovať, pretože v nastavení boli reakcie na všetky možné povolené požiadavky zaregistrované pomocou server.on (). Napríklad s hlavnou webovou stránkou alebo indexom (/) sa zaobchádza takto:

server.on ("/", HTTP_GET, (požiadavka AsyncWebServerRequest *) {Serial.println ("/požiadavka prijatá!"); request-> send (SPIFFS, "/index.html", String (), false, procesor); });

Ak sa teda klient pripojí, ESP32 odpovie odoslaním súboru index.html zo súborového systému SPIFFS. Parametrový procesor je názov funkcie, ktorá predbežne spracuje html a nahradí všetky špeciálne značky:

// Nahradí zástupné symboly v html ako %DATA %// premennými, ktoré chcete zobraziť //

Údaje: %DATA %

Reťazcový procesor (konšt. Reťazec & var) {if (var == "DATA") {//Serial.println("v procesore! "); return String (dutyCycleNow); } vrátiť String ();}

Teraz rozoberieme samotnú webovú stránku index.html. Vo všeobecnosti existujú vždy tri časti:

1. html kód: aké prvky by sa mali zobrazovať (tlačidlá/text/posuvníky/obrázky atď.),
2. kód štýlu, buď v samostatnom súbore.css, alebo v … sekcii: ako by mali prvky vyzerať,
3. javascript a … časť: ako by mala webová stránka fungovať.

Akonáhle sa index.html načíta do prehliadača (ktorý vie, že je to html kvôli riadku DOCTYPE), prejde do tohto riadka:

To je žiadosť o šablónu štýlu CSS. Umiestnenie tohto hárka je uvedené v href = "…". Čo teda robí váš prehliadač? Správne, spustí to ďalšiu požiadavku na server, tentoraz pre style.css. Server zachytáva túto požiadavku, pretože bola zaregistrovaná:

server.on ("/style.css", HTTP_GET, (požiadavka AsyncWebServerRequest *) {Serial.println ("požiadavka css bola prijatá"); žiadosť-> odoslať (SPIFFS, "/style.css", "text/css" ");});

Úhľadné čo? Mimochodom, mohlo by to byť href = "/some/file/on/the/other/side/of/the/moon", o to sa váš prehliadač staral. Rovnako šťastne by to viedlo k načítaniu tohto súboru. Nebudem vysvetľovať tabuľku štýlov, pretože iba kontroluje vzhľad, takže tu nie je nič zaujímavé, ale ak sa chcete dozvedieť viac, pozrite si tento návod.

Ako sa zobrazuje logo DuvelBot? V index.html máme:

Na ktorý ESP32 reaguje:

server.on ("/duvel", HTTP_GET, (požiadavka AsyncWebServerRequest *) {Serial.println ("požiadavka na logo duvel bola prijatá!"); request-> send (SPIFFS, "/duvel.png", "image/png ");});

..iný súbor SPIFFS, tentokrát kompletný obrázok, ako v odpovedi naznačuje „image/png“.

Teraz sa dostávame k skutočne zaujímavej časti: kódu pre tlačidlá. Zamerajme sa na tlačidlo Vpred:

Vpred

Názov triedy = "…" je iba názov, ktorý sa má prepojiť so šablónou štýlov, aby sa dala prispôsobiť veľkosť, farba atď. Dôležité časti sú onmousedown = "toggleCheckbox ('forward')" a onmouseup = "toggleCheckbox ('stop') “. Tieto predstavujú činnosti tlačidla (rovnaké pre ontouchstart/ontouchend, ale pre dotykové obrazovky/telefóny). Tu akcia tlačidla vyvoláva funkciu toggleCheckbox (x) v sekcii javascript:

funkcia toggleCheckbox (x) {var xhr = new XMLHttpRequest (); xhr.open („ZÍSKAŤ“, „/“+ x, pravda); xhr.send (); // keď bude pripravený, môže s reakciou aj niečo urobiť, ale my nie}

Ak teda stlačíte tlačidlo dopredu, okamžite sa vyvolá funkcia toggleCheckbox („dopredu“). Táto funkcia potom spustí príkaz XMLHttpRequest „GET“pre umiestnenie „/forward“, ktorý funguje rovnako, ako keby ste do panela s adresou prehliadača zadali 192.168.0.121/forward. Hneď ako táto požiadavka príde na ESP32, spracuje ju:

server.on ("/forward", HTTP_GET, (požiadavka AsyncWebServerRequest *) {Serial.println ("prijatý/preposlaný"); actionNow = FORWARD; request-> send (200, "text/plain", "OK forward. ");});

Teraz ESP32 jednoducho odpovie textom „OK dopredu“. Všimnite si, že toggleCheckBox () s touto odpoveďou nerobí nič (ani nečakajte), ale môže to byť uvedené ďalej v kóde kamery.

Program sám počas tejto reakcie nastaví ako odpoveď na stlačenie tlačidla iba premennú actionNow = FORWARD. Teraz v hlavnej časti programu je táto premenná monitorovaná s cieľom zvýšiť/znížiť PWM motorov. Logika je: pokiaľ máme akciu, ktorá nie je STOP, rozbiehajte motory v tomto smere, kým sa nedosiahne určité číslo (dutyCycleMax). Potom túto rýchlosť držte, pokiaľ sa actionNow nezmení:

void loop () {currentMillis = millis (); if (currentMillis - previousMillis> = dutyCycleStepDelay) {// uloženie posledného spustenia slučky previousMillis = currentMillis; // mainloop je zodpovedný za rozbiehanie/spúšťanie motorov, ak (actionNow! = previousAction) {// rozbeh, potom zastavenie, potom zmena akcie a rozbehnutie dutyCycleNow = dutyCycleNow-dutyCycleStep; if (dutyCycleNow <= 0) {// ak po dobehu dc je 0, nastav na novy smer, zacni na min dutycycle setDir (actionNow); previousAction = actionNow; dutyCycleNow = dutyCycleMin; }} else // actionNow == previousAction ramp up, except when direction is STOP {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow+dutyCycleStep; if (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax; } else dutyCycleNow = 0; } ledcWrite (pwmChannel, dutyCycleNow); // úprava pracovného cyklu motora}}

To pomaly zvyšuje rýchlosť motorov, namiesto toho, aby sa rozbehli na plné obrátky a rozliali vzácny vzácny Duvel. Zjavným zlepšením by bolo presunúť tento kód do rutiny prerušenia časovača, ale funguje to tak, ako to je.

Teraz, keď uvoľníme tlačidlo dopredu, váš prehliadač zavolá toggleCheckbox („stop“), čo má za následok žiadosť o ZASTAVENIE /zastavenie. ESP32 nastaví actionNow na STOP (a odpovie „OK stop.“), Ktoré uvedie hlavnú sieť do činnosti, aby roztočil motory.

A čo LED diódy? Rovnaký mechanizmus, ale teraz máme posúvač:

V JavaScripte je nastavenie posúvača monitorované tak, že pri každej zmene dôjde k volaniu na získanie „/LED/xxx“, kde xxx je hodnota jasu, na ktorú by mali byť diódy LED nastavené:

var slide = document.getElementById ('slide'), sliderDiv = document.getElementById ("sliderAmount"); slide.onchange = function () {var xhr = new XMLHttpRequest (); xhr.open („ZÍSKAŤ“, „/LED/“+ táto.hodnota, true); xhr.send (); sliderDiv.innerHTML = this.value; }

Všimnite si toho, že sme použili document.getElementByID ('slide') na získanie samotného objektu posuvníka, ktorý bol deklarovaný s a že hodnota je pri každej zmene odoslaná do textového prvku.

Psovod v náčrte zachytáva všetky požiadavky na jas pomocou "/LED/*" v registrácii obsluhy. Potom je posledná časť (číslo) rozdelená a vložená do int:

server.on ("/LED/ *", HTTP_GET, (požiadavka AsyncWebServerRequest *) {Serial.println ("požiadavka led bola prijatá!"); setLedBrightness ((request-> url ()). podreťazec (5).toInt ()); request-> send (200, "text/plain", "OK Leds.");});

Podobne, ako je popísané vyššie, rádiové tlačidlá ovládajú premenné, ktoré nastavujú predvolené hodnoty PWM, takže DuvelBot k vám môže pomaly jazdiť s pivom, pričom dbá na to, aby sa nerozlialo tekuté zlato, a rýchlo sa vráti do kuchyne, aby priniesol ďalšie.

… Ako sa teda aktualizuje obraz z kamery bez toho, aby ste museli stránku obnovovať? Na to používame techniku nazývanú AJAX (asynchrónny JavaScript a XML). Problém je v tom, že pripojenie klient-server obvykle prebieha podľa pevného postupu: klient (prehliadač) požiada, server (ESP32) odpovie, prípad sa uzavrie. Hotový. Už sa nič nedeje. Ak by sme len mohli prinútiť prehliadač, aby pravidelne požadoval aktualizácie z ESP32 … a presne to urobíme s týmto kúskom javascriptu:

setInterval (function () {var xhttp = new XMLHttpRequest (); xhttp.open ("GET", "/CAMERA", true); xhttp.responseType = "blob"; xhttp.timeout = 500; xhttp.ontimeout = function () {}; xhttp.onload = funkcia (e) {if (this.readyState == 4 && this.status == 200) {// pozri: 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); // vytvorenie objektu z objektu blob document.querySelector ("#camimage"). src = imageUrl; urlCreator.revokeObjectURL (imageurl)}}; xhttp.send ();}, 250);

setInterval berie ako parameter funkciu a vykonáva ju tak často (tu raz za 250 ms, čo má za následok 4 snímky za sekundu). Funkcia, ktorá sa vykoná, požiada o binárny "blob" na adrese /CAMERA. O to sa stará ESP32-CAM v náčrte ako (z Randomnerdtutorials):

server.on ("/CAMERA", HTTP_GET, (požiadavka AsyncWebServerRequest *) {Serial.println ("požiadavka na kameru bola prijatá!"); camera_fb_t * fb = NULL; // esp_err_t res = ESP_OK; size_t _jpg_buf_len = 0; uint8_t * _jpg_buf = Null /už v tomto formáte z config {bool jpeg_converted = frame2jpg (fb, 80, & _jpg_buf, & _jpg_buf_len); esp_camera_fb_return (fb); fb = NULL; if (! jpeg_converted) {Serial.println ("kompresia JPEG zlyhala"); }} else {_jpg_buf_len = fb-> len; _jpg_buf = fb-> buf;} //Serial.println(_jpg_buf_len); // odoslanie požiadavky na formátovaný obrázok-> send_P (200, "obrázok/jpg", _jpg_buf, _jpg_buf_len); // vyčistenie if (fb) {esp_camera_fb_return (fb); fb = NULL; _jpg_buf = NULL;} else if (_jpg_buf) {free (_jpg_buf); _jpg_buf = NULL;}});

Dôležitou súčasťou je získanie rámca fb = esp_camera_fb_get () jeho konverzie na-j.webp

Funkcia javascript potom čaká na príchod tohto obrázku. Potom stačí trocha práce previesť prijatý „blob“na adresu URL, pomocou ktorej je možné aktualizovať obrázok na stránke html ako zdroj.

fuj, sme hotoví!

Krok 4: Nápady a zvyšky

Cieľom tohto projektu pre mňa bolo naučiť sa dostatok webového programovania na prepojenie hardvéru s webom. K tomuto projektu je možné niekoľko rozšírení. Tu je niekoľko nápadov:

• Implementujte „skutočné“streamovanie kamery, ako je vysvetlené tu a tu, a presuňte ho na 2. server, ako je tu vysvetlené, na rovnakom ESP32, ale na druhom jadre CPU, potom importujte kamerový tok do html obsluhovaného 1. serverom pomocou …. Výsledkom by mali byť rýchlejšie aktualizácie kamier.
• Použite režim prístupového bodu (AP), aby bol robot samostatnejší, ako je tu vysvetlené.
• Rozšírte o meranie napätia batérie, možnosti hlbokého spánku atď. To je v tejto chvíli trochu ťažké, pretože AI-Thinker ESP32-CAM nemá veľa GPIO; potrebuje expanziu cez uart a napríklad slave arduino.
• Premeňte na robota hľadajúceho mačku, ktorý z času na čas vyhodí mačacie maškrty stlačením labky veľkého tlačidla, streamujte počas dňa veľa pekných fotografií mačiek …

Ak sa vám páčia alebo máte otázky, napíšte do komentárov a ďakujeme za prečítanie!