DuvelBot - Robot na servírování piva ESP32 -CAM: 4 kroky (s obrázky)

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:20

Po náročném pracovním dni se nic nepřibližuje popíjení vašeho oblíbeného piva na gauči. V mém případě je to belgické blond pivo „Duvel“. Nicméně, po kolapsu, stojíme před nejzávažnějším problémem: lednice obsahující můj Duvel je nepřekonatelná 20 stop odstraněná z pohovky.

Zatímco mírné donucení z mé strany by mohlo přesunout příležitostného mladistvého mrchožrouta, aby vylil můj týdenní příspěvek na Duvel, úkol skutečně jej doručit téměř vyčerpanému předkovi je zjevně o krok příliš daleko.

Čas rozbít páječku a klávesnici…

DuvelBot je nenáročná webová kamera založená na AI-Thinker ESP32-CAM, kterou můžete ovládat ze svého smartphonu, prohlížeče nebo tabletu.

Je snadné přizpůsobit nebo rozšířit tuto platformu na méně alkoholické použití (například SpouseSpy, NeighbourWatch, KittyCam…).

Tento robot jsem postavil hlavně proto, abych se trochu dozvěděl o celém webovém programování a věcech o IoT, o kterých jsem nic nevěděl. Takže na konci tohoto Instructable je propracované vysvětlení, jak to funguje.

Mnoho částí tohoto Instructable je založeno na vynikajících vysvětleních nalezených v Random Nerd Tutorials, takže je prosím navštivte!

Zásoby

Co potřebuješ:

Seznam dílů není vytesán do kamene a mnoho dílů lze získat v mnoha různých verzích a na mnoha různých místech. Nejvíce jsem získal od Ali-Express. Jak řekl Machete: improvizujte.

Hardware:

• Modul AI Thinker ESP32-CAM. Pravděpodobně by to mohlo fungovat s jinými moduly ESP32-CAM, ale to jsem použil
• Deska ovladače motoru L298N,
• Levná 4kolová robotická platforma,
• Pouzdro s velkým rovným povrchem, jako je Hammond Electronics 1599KGY,
• Převodník USB-na-3.3V-TTL pro programování.
• Pro osvětlení: 3 bílé LED diody, BC327 nebo jiný univerzální tranzistor NPN (Ic = 500mA), odpor 4k7k, 3 odpory 82Ohm, perfboard, kabely (viz schéma a obrázky).
• Přepínač zapnutí/vypnutí a normálně otevřené tlačítko pro programování.

Volitelný:

• Kamera typu rybí oko s delší ohniskovou vzdáleností než standardní kamera OV2460 dodávaná s modulem ESP32-CAM,
• WiFi anténa s vhodně dlouhým kabelem a ultra miniaturním koaxiálním konektorem, jako je tento. ESP32-CAM má vestavěnou anténu a kryt je plastový, takže anténa není ve skutečnosti potřeba, ale myslel jsem si, že to vypadá skvěle, takže …
• Nálepkový papír pro potisk inkoustem pro design horního krytu.

Obvyklé hardwarové nástroje: páječka, vrtačky, šroubováky, kleště…

Krok 1: Sestavení platformy robota

Schéma:

Schéma není nic zvláštního. Vačka ESP32 ovládá motory prostřednictvím desky ovladače motoru L298N, která má dva kanály. Motory levé a pravé strany jsou umístěny paralelně a každá strana zaujímá jeden kanál. Čtyři malé 10..100nF keramické kondenzátory v blízkosti kolíků motoru jsou jako vždy vhodné k potlačení vysokofrekvenčního rušení. Také velká elektrolytická krytka (2200… 4700uF) na napájení motorové desky, jak je znázorněno na schématu, i když to není nezbytně nutné, může trochu omezit zvlnění napájecího napětí (pokud chcete vidět horor, pak sondujte Vbat s osciloskopem, když jsou motory aktivní).

Všimněte si, že oba POVOLENÉ piny kanálů motoru jsou poháněny stejným kolíkem modulovaným šířkou impulzů (PWM) na ESP32 (IO12). Důvodem je, že modul ESP32-CAM nemá tunu GPIO (schema modulu je zahrnuto pro referenci). LED diody robota jsou poháněny IO4, který také pohání vestavěný blesk LED, takže odstraňte Q1, aby LED dioda blesku nesvítila v uzavřeném krytu.

Programovací tlačítko, vypínač, nabíjecí konektor a programovací konektor jsou přístupné pod robotem. Mohl jsem udělat mnohem lepší práci pro programovací konektor (3,5 mm jack?), Ale pivo už nemohlo čekat. Bylo by také příjemné nastavit bezdrátové aktualizace (OTA).

Chcete -li robot přepnout do režimu programování, stiskněte programovací tlačítko (tím se sníží IO0 nízko) a poté jej zapněte.

Důležité: k nabíjení baterií NiMH robota použijte laboratorní napájecí soupravu (nezatíženou) na přibližně 14 V a proud omezený na 250 mA. Napětí se přizpůsobí napětí baterií. Pokud je robot horký nebo napětí baterie dosáhne přibližně 12,5 V, odpojte jej. Zjevným zlepšením by bylo integrovat správnou nabíječku baterií, ale to je mimo rozsah tohoto Instructable.

Hardware:

Podívejte se také na poznámky na obrázcích. Skříň je namontována na základně robota pomocí 4 šroubů M4 a samosvorných matic. Všimněte si gumových hadiček používaných jako distanční vložky. Naštěstí to také dává Duvel nějaké pozastavení, pokud by se jízda ukázala jako hrbolatá. Modul ESP32-CAM a motorová deska L298N jsou namontovány v krytu pomocí plastových lepicích nožiček (v angličtině si nejste jisti správným názvem), aby se zabránilo vyvrtávání dalších otvorů. ESP32 je také namontován na vlastní perfboard a zásuvných pinheaderech. To usnadňuje výměnu ESP32.

Nezapomeňte: pokud jedete s externí WiFi anténou místo vestavěné, pak také pájejte propojku pro výběr antény na spodní straně desky ESP32-CAM.

Vytiskněte si horní logo v souboru DuvelBot.svg na papír s nálepkami pro inkoustové tiskárny (nebo si vytvořte vlastní) a můžete vyrazit!

Krok 2: Naprogramujte robota

Doporučujeme naprogramovat robota, než jej zavřete, abyste se ujistili, že vše funguje a neobjevuje se žádný kouzelný kouř.

Potřebujete následující softwarové nástroje:

• Arduino IDE,
• Knihovny ESP32, SPIFFS (sériový periferní flash souborový systém), knihovna ESPAsync Webserver.

Ten lze nainstalovat podle tohoto randomnerdtutoriálu až do sekce „organizace souborů“včetně. Opravdu jsem to nemohl lépe vysvětlit.

Kód:

Můj kód najdete na:

• Skica Arduino DuvelBot.ino,
• Datová podsložka, která obsahuje soubory, které budou nahrány do ESP flash pomocí SPIFFS. Tato složka obsahuje webovou stránku, kterou bude ESP zobrazovat (index.html), obrázek loga, který je součástí webové stránky (duvel.png) a kaskádový styl nebo CSS soubor (style.css).

Programování robota:

• Připojte převodník USB-TTL podle schématu,
• Soubor -> Otevřít -> přejděte do složky, kde je DuvelBot.ino.
• Změňte přihlašovací údaje sítě v náčrtu:

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

• Nástroje -> Deska -> "AI -Thinker ESP -32 CAM" a vyberte příslušný sériový port pro váš počítač (Nástroje -> Port -> něco jako /dev /ttyUSB0 nebo COM4),
• Otevřete sériový monitor v Arduino IDE. Stiskněte tlačítko PROG (které stáhne IO0 low), zapněte robot,
• Na sériovém monitoru zkontrolujte, zda je ESP32 připraven ke stažení,
• Zavřete sériový monitor (jinak selže odeslání SPIFFS),
• Nástroje -> „Nahrání dat skici ESP32“a počkejte, až se dokončí,
• Vypněte a znovu zapněte podržením tlačítka PROG, abyste se vrátili do režimu programování,
• Stisknutím šipky „Nahrát“naprogramujte skicu a počkejte, až se dokončí,
• Otevřete sériový monitor a resetujte ESP32 vypnutím/zapnutím,
• Jakmile se spustí, poznamenejte si IP adresu (něco jako 192.168.0.121) a odpojte robota od převodníku USB-TTL,
• Otevřete prohlížeč na této IP adrese. Rozhraní byste měli vidět jako na obrázku.
• Volitelné: nastavte mac adresu ESP32 na pevnou IP adresu ve vašem routeru (záleží na routeru, jak postupovat).

A je to! Čtěte dále, pokud chcete vědět, jak to funguje…

Krok 3: Jak to funguje

Nyní se dostáváme k zajímavé části: jak to všechno funguje dohromady?

Pokusím se to vysvětlit krok za krokem, ale mějte na paměti, že Kajnjaps není specialista na webové programování. Ve skutečnosti, naučit se trochu webového programování byl celý předpoklad stavby DuvelBot. Pokud dělám zjevné chyby, zanechte prosím komentář!

Dobře, po zapnutí ESP32, jako obvykle v nastavení, inicializuje GPIO, spojí je s časovači PWM pro ovládání motoru a LED. Zde najdete další informace o ovládání motoru, je to docela standardní.

Poté je kamera nakonfigurována. Záměrně jsem ponechal rozlišení docela nízké (VGA nebo 640x480), abych se vyhnul pomalé odezvě. Všimněte si, že deska AI-Thinker ESP32-CAM má sériový RAM čip (PSRAM), který používá k ukládání snímků kamer s větším rozlišením:

if (psramFound ()) {Serial.println ("PSRAM found."); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; // počet framebufferů viz: 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; }

Poté se inicializuje sériový periferní flash souborový systém (SPIFFS):

// inicializace SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("Při připojování SPIFFS došlo k chybě!"); vrátit se; }

SPIFFS funguje jako malý souborový systém na ESP32. Zde se používá k ukládání tří souborů: samotná webová stránka index.html, kaskádový soubor stylů style.css a logo obrázku-p.webp

Poté se ESP32 připojí k vašemu routeru (nezapomeňte před odesláním nastavit své přihlašovací údaje):

// zde změňte přihlašovací údaje svého routeruconst char* ssid = "yourNetworkSSIDHere"; const char* heslo = "yourPasswordHere"; … // připojení k WiFi Serial.print („Připojení k WiFi“); WiFi.begin (ssid, heslo); while (WiFi.status ()! = WL_CONNECTED) {Serial.print ('.'); zpoždění (500); } // nyní připojeno k routeru: ESP32 má nyní IP adresu

Abychom skutečně udělali něco užitečného, spustíme asynchronní webový server:

// vytvoření objektu AsyncWebServer na portu 80AsyncWebServer server (80); … Server.begin (); // začněte poslouchat připojení

Nyní, když do adresního řádku prohlížeče zadáte IP adresu, kterou routeru přidělil ESP32 router, ESP32 dostane požadavek. To znamená, že by měl klientovi (vám nebo vašemu prohlížeči) odpovědět tak, že mu něco naservíruje, například webovou stránku.

ESP32 ví, jak reagovat, protože v nastavení byly reakce na všechny možné povolené požadavky zaregistrovány pomocí server.on (). Například hlavní webová stránka nebo index (/) je zpracován takto:

server.on ("/", HTTP_GET, (požadavek AsyncWebServerRequest *) {Serial.println ("/požadavek přijat!"); request-> send (SPIFFS, "/index.html", String (), false, zpracovatel);});

Pokud se tedy klient připojí, ESP32 odpoví odesláním souboru index.html ze souborového systému SPIFFS. Parametrický procesor je název funkce, která předzpracovává html a nahrazuje všechny speciální značky:

// Nahradí zástupné symboly v html jako %DATA %// proměnnými, které chcete zobrazit //

Data: %DATA %

Řetězcový procesor (const String & var) {if (var == "DATA") {//Serial.println("in processor! "); return String (dutyCycleNow); } vrátit String ();}

Nyní pojďme rozebrat samotnou webovou stránku index.html. Obecně existují vždy tři části:

1. html kód: jaké prvky by se měly zobrazovat (tlačítka/text/jezdce/obrázky atd.),
2. kód stylu, buď v samostatném souboru.css, nebo v … sekci: jak by měly prvky vypadat,
3. javascript a … část: jak by měla webová stránka fungovat.

Jakmile se index.html načte do prohlížeče (který ví, že je to html kvůli řádku DOCTYPE), spustí se do tohoto řádku:

To je požadavek na styl CSS. Umístění tohoto listu je uvedeno v href = "…". Co tedy váš prohlížeč dělá? Správně, spustí další požadavek na server, tentokrát pro style.css. Server zachytí tento požadavek, protože byl zaregistrován:

server.on ("/style.css", HTTP_GET, (požadavek AsyncWebServerRequest *) {Serial.println ("požadavek css přijat"); request-> send (SPIFFS, "/style.css", "text/css ");});

Úhledné co? Mimochodem, mohlo to být href = "/some/file/on/the/other/side/of/the/moon", pro všechny vaše prohlížeče. Stejně šťastně by to přineslo ten soubor. Nebudu vysvětlovat šablonu stylů, protože ovládá pouze vzhled, takže to zde není nijak zajímavé, ale pokud se chcete dozvědět více, podívejte se na tento návod.

Jak vypadá logo DuvelBot? V index.html máme:

na které ESP32 reaguje:

server.on ("/duvel", HTTP_GET, (požadavek AsyncWebServerRequest *) {Serial.println ("požadavek na logo duvel přijat!"); request-> send (SPIFFS, "/duvel.png", "image-p.webp

..jiný soubor SPIFFS, tentokrát kompletní obrázek, jak je uvedeno v odpovědi "image/png".

Nyní se dostáváme k opravdu zajímavé části: kódu pro tlačítka. Soustřeďme se na tlačítko VPŘED:

VPŘED

Název třídy = "…" je pouze název, který jej propojí se šablonou stylů a přizpůsobí velikost, barvu atd. Důležité části jsou onmousedown = "toggleCheckbox ('forward')" a onmouseup = "toggleCheckbox ('stop') “. Ty představují činnost tlačítka (stejné pro ontouchstart/ontouchend, ale pro dotykové obrazovky/telefony). Zde akce tlačítka vyvolá funkci toggleCheckbox (x) v sekci javascript:

funkce toggleCheckbox (x) {var xhr = new XMLHttpRequest (); xhr.open ("ZÍSKAT", "/" + x, true); xhr.send (); // když bude připraven, mohl by s odpovědí také něco udělat, ale my ne}

Stisknutím tlačítka vpřed se okamžitě vyvolá volání toggleCheckbox ('forward'). Tato funkce pak spustí XMLHttpRequest „GET“pro umístění „/forward“, který funguje stejně, jako kdybyste do adresního řádku prohlížeče zadali 192.168.0.121/forward. Jakmile tento požadavek dorazí na ESP32, bude zpracován:

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

Nyní ESP32 jednoduše odpoví textem „OK vpřed“. Všimněte si, že toggleCheckBox () s touto odpovědí nic nedělá (ani na ni nečekejte), jakkoli to může být ukázáno později v kódu kamery.

Během této reakce program sám nastaví pouze proměnnou actionNow = FORWARD, jako reakci na stisknutí tlačítka. Nyní v hlavní smyčce programu je tato proměnná monitorována s cílem zvýšit/snížit PWM motorů. Logika zní: pokud máme akci, která není STOP, rozběhněte motory v tomto směru, dokud není dosaženo určitého počtu (dutyCycleMax). Pak tuto rychlost držte, dokud se actionNow nezmění:

void loop () {currentMillis = millis (); if (currentMillis - previousMillis> = dutyCycleStepDelay) {// uložení posledního spuštění smyčky previousMillis = currentMillis; // mainloop je zodpovědný za zvyšování/snižování otáček motorů if (actionNow! = previousAction) {// ramp down, then stop, then change action and ramp up dutyCycleNow = dutyCycleNow-dutyCycleStep; if (dutyCycleNow <= 0) {// pokud po doběhu dc je 0, nastavte nový směr, začněte na min. cyklu cyklu 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 motoru}}

To pomalu zvyšuje rychlost motorů, místo aby se pouštěly na plné otáčky a rozlévaly drahocenný drahocenný Duvel. Zjevným zlepšením by bylo přesunout tento kód do rutiny přerušení časovače, ale funguje tak, jak je.

Pokud nyní uvolníme tlačítko pro předávání, váš prohlížeč zavolá toggleCheckbox ('stop'), což má za následek požadavek na GET /stop. ESP32 nastaví actionNow na STOP (a odpoví „OK stop.“), Což uvede hlavní smyčku do roztočení motorů.

A co LED diody? Stejný mechanismus, ale nyní máme posuvník:

V javascriptu je monitorováno nastavení posuvníku, takže při každé změně dojde k volání „/LED/xxx“, kde xxx je hodnota jasu, na kterou by měly být diody LED nastaveny:

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

Všimněte si toho, že jsme použili document.getElementByID ('snímek') k získání samotného objektu posuvníku, který byl deklarován pomocí a že hodnota je při každé změně odeslána do textového prvku.

Obsluha v náčrtu zachytí všechny požadavky na jas pomocí "/LED/*" v registraci obsluhy. Poté se poslední část (číslo) rozdělí a přenese na int:

server.on ("/LED/ *", HTTP_GET, (požadavek AsyncWebServerRequest *) {Serial.println ("požadavek na led přijat!"); setLedBrightness ((požadavek-> url ()). podřetězec (5).toInt ()); request-> send (200, "text/plain", "OK Leds.");});

Podobně, jak je popsáno výše, radiotlačítka ovládají proměnné, které nastavují výchozí hodnoty PWM, takže DuvelBot k vám může s pivem jezdit pomalu, dávat pozor, aby se nerozlilo tekuté zlato, a rychle zpět do kuchyně, aby přinesl další.

… Jak se tedy obraz z kamery aktualizuje, aniž byste museli stránku obnovovat? K tomu používáme techniku zvanou AJAX (asynchronní JavaScript a XML). Problém je v tom, že připojení klient-server obvykle probíhá podle pevného postupu: klient (prohlížeč) vytvoří požadavek, server (ESP32) odpoví, případ uzavřen. Hotovo. Už se nic neděje. Kdybychom nějakým způsobem mohli přimět prohlížeč, aby pravidelně požadoval aktualizace z ESP32 … a přesně to uděláme s tímto kusem javascriptu:

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

setInterval bere jako parametr funkci a spouští ji tak často (zde jednou za 250 ms, což má za následek 4 snímky za sekundu). Funkce, která je spuštěna, vyvolá požadavek na binární "blob" na adrese /CAMERA. O to se stará ESP32-CAM v náčrtu jako (z Randomnerdtutorials):

server.on ("/CAMERA", HTTP_GET, (požadavek AsyncWebServerRequest *) {Serial.println ("požadavek na kameru přijat!"); camera_fb_t * fb = NULL; // esp_err_t res = ESP_OK; size_t _jpg_buf_len = 0; uint8_t * _jpg_buf = Null /již v tomto formátu z config {bool jpeg_converted = frame-j.webp

Důležitými částmi je získání rámce fb = esp_camera_fb_get () jeho převedení na-j.webp

Funkce javascript poté čeká, až tento obrázek dorazí. Poté stačí trochu práce převést přijatý „blob“na URL, kterou lze použít jako zdroj pro aktualizaci obrázku na stránce html.

fuj, máme hotovo!

Krok 4: Nápady a zbytky

Cílem tohoto projektu pro mě bylo naučit se dost webového programování pro propojení hardwaru s webem. K tomuto projektu je možné několik rozšíření. Zde je několik nápadů:

• Implementujte „skutečné“streamování kamery, jak je vysvětleno zde a zde, a přesuňte jej na 2. server, jak je zde vysvětleno, na stejném ESP32, ale na druhém jádru CPU, poté importujte kamerový tok do html obsluhovaného 1. serverem pomocí…. Výsledkem by měly být rychlejší aktualizace kamer.
• Použijte režim přístupového bodu (AP), aby byl robot samostatnější, jak je vysvětleno zde.
• Rozšiřte o měření napětí baterie, možnosti hlubokého spánku atd. To je v tuto chvíli trochu obtížné, protože AI-Thinker ESP32-CAM nemá mnoho GPIO; potřebuje expanzi přes uart a například slave arduino.
• Přeměňte se na robota hledajícího kočku, který čas od času vysune kočičí pamlsky stisknutím tlapky velkého tlačítka, streamujte během dne spoustu pěkných fotek koček …

Pokud se vám líbí nebo máte dotazy, napište do komentářů a děkujeme za přečtení!