DuvelBot - ESP32 -CAM шар айраг өгөх робот: 4 алхам (зурагтай)

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:01

Хэцүү өдрийн ажлын дараа буйдан дээр дуртай шар айргаа шимэхэд юу ч ойрхон байдаггүй. Миний хувьд энэ бол Бельгийн шаргал алтан "Duvel" юм. Гэсэн хэдий ч нуран унаснаас хойш бид хамгийн ноцтой асуудалтай тулгарч байна: миний Дювел агуулсан хөргөгч нь буйдангаас 20 футын зайтай байдаг.

Хажуу талаас нь бага зэрэг дарамт шахалт үзүүлэх нь хааяа нэг өсвөр насны хөргөгч цэвэрлэгчийг миний долоо хоногийн тэтгэмж болох Дувелийг цутгахад хүргэж болох боловч түүнийг бараг ядарсан өвөг дээдэст нь хүргэх нь нэг алхам хэтэрхий хол байгаа нь ойлгомжтой.

Гагнуурын төмөр, гарыг салгах цаг болжээ …

DuvelBot бол ухаалаг гар утас, хөтөч эсвэл таблетаас удирдах боломжтой AI-Thinker ESP32-CAM дээр суурилсан жолоодлогын вэбкамер юм.

Энэ платформыг согтууруулах ундааны хэрэглээ багатай болгоход хялбар болгох (SpouseSpy, NeighbourWatch, KittyCam… гэж бодоорой).

Би энэ роботыг юу ч мэдэхгүй вэб програмчлал, IoT -ийн талаар бага зэрэг сурахын тулд бүтээсэн. Зааварчилгааны төгсгөлд энэ нь хэрхэн ажилладаг талаар нарийвчилсан тайлбар юм.

Энэхүү зааварчилгааны олон хэсгүүд нь Random Nerd хичээлүүдээс олж авсан маш сайн тайлбар дээр үндэслэсэн тул та бүхэн очиж үзээрэй!

Хангамж

Чамд юу хэрэгтэй вэ:

Сэлбэгийн жагсаалтыг чулуугаар сийлдэггүй бөгөөд олон хэсгийг олон янзын хувилбараар, өөр өөр газраас авах боломжтой. Би ихэнхийг Али-Экспрессээс худалдаж авсан. Макетегийн хэлснээр: импровиз хийх.

Техник хангамж:

• AI Thinker ESP32-CAM модуль. Энэ нь бусад ESP32-CAM модулиудтай ажиллах боломжтой байсан ч үүнийг би ашиглаж байсан
• L298N мотор жолоочийн самбар,
• 4 дугуйтай робот техникийн хямд платформ,
• Hammond Electronics 1599KGY гэх мэт том хавтгай гадаргуутай орон сууц,
• Програмчлалын зориулалттай USB-to-3.3V-TTL хөрвүүлэгч.
• Гэрэлтүүлгийн хувьд: 3 цагаан LED, BC327 эсвэл бусад ерөнхий зориулалтын транзистор NPN (Ic = 500mA), 4k7k резистор, 3 82 Ом эсэргүүцэл, перфорд самбар, кабель (схем ба зургийг үз).
• Асаах/унтраах унтраалга, програмчлалын ердийн нээлттэй товчлуур.

Нэмэлт:

• ESP32-CAM модульд суурилуулсан стандарт OV2460 камераас илүү урт уян хатан чанартай загасны нүдний камер,
• Тохиромжтой урт кабель, хэт жижиг коакс холбогч бүхий WiFi антен. ESP32-CAM нь антеннтай, орон сууц нь хуванцар тул антенн үнэхээр хэрэггүй, гэхдээ энэ нь дажгүй харагдаж байсан гэж би бодсон …
• Дээд талын хавтасны дизайны зориулалттай бэхэн хэвлэх наалт цаас.

Тоног төхөөрөмжийн ердийн хэрэгсэл: гагнуурын төмөр, өрөм, халив, бахө …

Алхам 1: Робот платформыг бий болгох

Схем:

Схем нь онцгой зүйл биш юм. ESP32 камер нь хоёр суваг бүхий L298N хөдөлгүүрийн жолоочийн самбараар дамжуулан моторуудыг хянадаг. Зүүн ба баруун талын моторуудыг зэрэгцээ байрлуулсан бөгөөд тал бүр нэг суваг эзэлдэг. Хөдөлгүүрийн голтой ойролцоо 10..100nF хэмжээтэй дөрвөн жижиг керамик конденсатор нь RF -ийн хөндлөнгийн оролцоог эсэргүүцэхийг зөвлөж байна. Түүнчлэн, схемд үзүүлсэн шиг моторын самбар дээр нийлүүлсэн том электролит таг (2200 … 4700uF) нь тэжээлийн хүчдэлийн долгионыг бага зэрэг хязгаарлаж чаддаг (хэрэв та аймшгийн кино үзэхийг хүсвэл Vbat -ийг шалгаарай. мотор идэвхтэй байхад осциллографоор).

Хөдөлгүүрийн хоёр суваг ENABLE-ийг хоёуланг нь ESP32 (IO12) -ийн импульсийн өргөнтэй модуляцлагдсан (PWM) зүүгээр удирддаг болохыг анхаарна уу. Энэ нь ESP32-CAM модульд олон тонн GPIO байхгүйтэй холбоотой (модулийн схемийг лавлагаа болгон оруулсан болно). Роботын LED -ийг IO4 хөтөлдөг бөгөөд энэ нь мөн л флэш LED -ийг жолооддог тул хаалттай орон сууцанд флэш LED асахгүйн тулд Q1 -ийг хасна.

Програмчлалын товчлуур, асаах/унтраах унтраалга, цэнэглэгч холбогч, програмчлалын холбогчийг роботын доор ашиглах боломжтой. Би програмчлалын холбогчийн хувьд илүү сайн ажил хийж чадах байсан (3.5 мм үүр), гэхдээ шар айраг цаашид хүлээж чадахгүй байв. Мөн агаарын шинэчлэлт (OTA) -ийг тохируулахад таатай байх болно.

Роботыг програмчлалын горимд оруулахын тулд програмчлалын товчлуурыг дарна уу (энэ нь IO0 -ийг бууруулдаг), дараа нь асаана уу.

Анхаарах зүйл: роботын NiMH батерейг цэнэглэхийн тулд лабораторийн нийлүүлэлтийн багцыг 14В ба 250 мА хүртэл хязгаарлаж, хүчдэл нь батерейны хүчдэлд дасан зохицох болно. Хэрэв робот халуу оргих буюу зайны хүчдэл 12.5В орчим хүрвэл түүнийг салга. Батерейны зохих цэнэглэгчийг нэгтгэх нь мэдээжийн хэрэг сайжрах болно, гэхдээ энэ нь энэхүү зааварчилгааны хамрах хүрээнээс гадуур юм.

Тоног төхөөрөмж:

Мөн зурган дээрх тэмдэглэлийг үзнэ үү. Орон сууцыг роботын суурин дээр 4 М4 боолт, өөрөө түгжигддэг самар ашиглан суурилуулсан болно. Зай тусгаарлагч болгон ашигладаг резинэн хоолойг анхаарна уу. Энэ нь Duvel -ийг түдгэлзүүлсэн гэж үзэж болно. ESP32-CAM модуль ба L298N моторт хавтанг нэмэлт нүх өрөмдөхөөс урьдчилан сэргийлэхийн тулд хуванцар наалдамхай хөл ашиглан (англи хэл дээр зөв нэрийг нь сайн мэдэхгүй байна) орон сууцанд суулгасан болно. Түүнчлэн ESP32 нь өөрийн перфрон самбар болон залгагддаг зүү толгой дээр суурилагдсан. Энэ нь ESP32 -ийг солиход хялбар болгодог.

Бүү мартаарай: хэрэв та суурилуулсан биш харин гадаад WiFi антентай бол ESP32-CAM хавтангийн доод талд антен сонгох холбогчийг гагнах хэрэгтэй.

Дээд талын логог DuvelBot.svg файлын бэхэн наалт цаасан дээр хэвлээрэй (эсвэл өөрийн загвараар хий), та бэлэн боллоо!

Алхам 2: Роботыг програмчлах

Роботыг хаахаасаа өмнө бүх зүйлийг ажиллуулж, ид шидийн утаа гарч ирэхгүй байхын тулд програмчлахыг зөвлөж байна.

Танд дараах програм хангамжийн хэрэгслүүд хэрэгтэй болно

• Arduino IDE,
• ESP32 номын сан, SPIFFS (цуваа захын флаш файлын систем), ESPAsync вэб серверийн номын сан.

Сүүлийнх нь энэхүү санамсаргүй зааварчилгааг дагаж "файлуудаа цэгцлэх" хэсгийг оруулснаар суулгаж болно. Би үнэхээр үүнийг илүү сайн тайлбарлаж чадаагүй.

Код:

Миний кодыг https://github.com/larsupilami73/DuvelBot/tree/mas… дээрээс олж болно.

• Arduino -ийн ноорог DuvelBot.ino,
• SPIFFS ашиглан ESP флаш руу байршуулах гэж буй файлуудыг агуулсан мэдээллийн дэд хавтас. Энэ фолдерт ESP -ийн үйлчлэх вэб хуудас (index.html), вэб хуудасны нэг хэсэг болох лого дүрс (duvel.png) болон каскад хэлбэрийн хуудас эсвэл CSS файл (style.css) багтсан болно.

Роботыг програмчлахын тулд:

• USB-TTL хөрвүүлэгчийг схемд үзүүлсэн шиг холбоно уу.
• Файл -> Нээлттэй -> DuvelBot.ino байрладаг хавтас руу очно уу.
• Ноорог дээр сүлжээнийхээ итгэмжлэлийг өөрчлөх:

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

• Багаж хэрэгсэл -> Самбар -> "AI -Thinker ESP -32 CAM" -ийг сонгоод компьютерт тохирох цуваа портыг сонгоно уу (Хэрэгсэл -> Порт -> /dev /ttyUSB0 эсвэл COM4 гэх мэт),
• Цуваа дэлгэцийг Arduino IDE дээр нээ, PROG товчлуурыг дарж байхдаа (IO0 -ийг сулруулдаг) роботыг асаагаарай.
• Цуваа дэлгэц дээр ESP32 татаж авахад бэлэн байгаа эсэхийг шалгаарай.
• Цуваа дэлгэцийг хаах (эс тэгвээс SPIFFS -ийг байршуулах амжилтгүй болно),
• Хэрэгслүүд -> "ESP32 Sketch Data Upload" ба үүнийг дуустал хүлээнэ үү.
• Програмчлалын горим руу буцахын тулд PROG товчийг дарж унтраа.
• "Байршуулах" сумыг дарж ноорогыг програмчилж, дуустал нь хүлээнэ үү.
• Цуваа дэлгэцийг нээж, ESP32 -ийг унтрааж/асаах замаар дахин тохируулна уу.
• Ачаалсны дараа ip хаягийг (192.168.0.121 гэх мэт) тэмдэглээд роботыг USB-TTL хөрвүүлэгчээс салга.
• Энэ ip хаягаар хөтөч нээнэ үү. Та зураг дээрх шиг интерфэйсийг харах ёстой.
• Нэмэлт: ESP32-ийн mac хаягийг чиглүүлэгчийнхээ тогтмол IP хаягаар тохируулах (чиглүүлэгч хэрхэн хийхээс хамаарна).

Ингээд л боллоо! Хэрэв энэ нь хэрхэн ажилладаг талаар мэдэхийг хүсвэл үргэлжлүүлэн уншина уу …

Алхам 3: Энэ нь хэрхэн ажилладаг талаар

Одоо бид сонирхолтой хэсэг рүүгээ орлоо: энэ бүхэн хэрхэн хамтарч ажилладаг вэ?

Би үүнийг алхам алхамаар тайлбарлахыг хичээх болно … алхам алхамаар, гэхдээ Кажнжапс бол вэб програмчлалын мэргэжилтэн биш гэдгийг санаарай. Үнэн хэрэгтээ жаахан вэб програмчлал сурах нь DuvelBot -ийг бүтээх бүх үндэс болсон юм. Хэрэв би илт алдаа гаргасан бол сэтгэгдлээ үлдээнэ үү!

За, ESP32 -ийг асаасны дараа ердийн байдлаар GPIO -ийг эхлүүлж, мотор болон LED удирдлагын ХОУХ -ны таймеруудтай холбож өгдөг. Моторын хяналтын талаар илүү ихийг эндээс үзнэ үү, энэ нь нэлээд стандарт юм.

Дараа нь камерыг тохируулна. Удаан хариу өгөхгүйн тулд би нягтралыг нэлээд доогуур (VGA эсвэл 640x480) хадгалсан. AI-Thinker ESP32-CAM самбар нь илүү нарийвчлалтай камерын хүрээ хадгалахад ашигладаг цуваа хуц чиптэй (PSRAM) болохыг анхаарна уу.

if (psramFound ()) {Serial.println ("PSRAM олдсон."); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; // хүрээ буферын тоог үзнэ үү: https://github.com/espressif/esp32-camera} өөр {Serial.println ("PSRAM олдсонгүй."); config.frame_size = FRAMESIZE_QVGA; config.jpg_quality = 12; config.fb_count = 1; }

Дараа нь цуваа захын флаш файлын системийг (SPIFFS) эхлүүлнэ.

// эхлүүлэх SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("SPIFFS -ийг суулгах явцад алдаа гарлаа!"); буцах; }

SPIFFS нь ESP32 дээр жижиг файлын систем шиг ажилладаг. Энд энэ нь гурван файлыг хадгалахад ашиглагддаг: вэб хуудас өөрөө index.html, caskaded файлын загварын хуудас style.css,-p.webp

Дараа нь ESP32 нь таны чиглүүлэгчтэй холбогддог (байршуулахаасаа өмнө итгэмжлэлээ тохируулахаа бүү мартаарай):

// чиглүүлэгчийнхээ итгэмжлэлийг өөрчлөх hereconst char* ssid = "yourNetworkSSIDHere"; const char* password = "yourPasswordHere"; … // WiFi Serial.print руу холбогдох ("WiFi -д холбогдох"); WiFi.begin (ssid, нууц үг); while (WiFi.status ()! = WL_CONNECTED) {Serial.print ('.'); саатал (500); } // одоо чиглүүлэгчид холбогдсон байна: ESP32 одоо ip хаягтай боллоо

Ашигтай зүйл хийхийн тулд бид асинхрон вэб серверийг эхлүүлдэг.

// порт 80AsyncWebServer сервер дээр AsyncWebServer объект үүсгэх (80); … Server.begin (); // холболтыг сонсож эхлээрэй

Одоо, хэрэв та хөтчийн хаягийн мөрөнд чиглүүлэгчээс ESP32 -д өгсөн ip хаягийг оруулбал ESP32 нь хүсэлт хүлээн авна. Энэ нь үйлчлүүлэгч (та эсвэл таны хөтөч) -д ямар нэгэн зүйл, жишээ нь вэб хуудас өгөх замаар хариу өгөх ёстой гэсэн үг юм.

ESP32 хэрхэн хариулахаа мэддэг, учир нь тохиргоонд зөвшөөрөгдсөн бүх хүсэлтийн хариуг server.on () ашиглан бүртгэсэн болно. Жишээлбэл, үндсэн вэб хуудас эсвэл индексийг (/) дараах байдлаар зохицуулдаг.

server.on ("/", HTTP_GET, (AsyncWebServerRequest *хүсэлт) {Serial.println ("/хүсэлт хүлээн авлаа!"); хүсэлт-> илгээх (SPIFFS, "/index.html", String (), худал, процессор);});

Хэрэв үйлчлүүлэгч холбогдсон бол ESP32 нь SPIFFS файлын системээс index.html файлыг илгээж хариу өгдөг. Параметрийн процессор нь html -ийг урьдчилан боловсруулж, тусгай хаягийг орлуулдаг функцын нэр юм.

// %DATA %// гэх мэт html дахь орлуулагчийг харуулахыг хүссэн хувьсагчаар солино //

Өгөгдөл: %DATA %

String процессор (const String & var) {if (var == "DATA") {//Serial.println("процессор дотор! "); буцах String (dutyCycleNow); } String буцаах ();}

Одоо index.html вэб хуудсыг өөрөө задалж үзье. Ерөнхийдөө үргэлж гурван хэсэг байдаг:

1. html код: ямар элементүүдийг харуулах ёстой (товч/текст/гулсагч/зураг гэх мэт),
2. загварын код, тусдаа.css файл эсвэл… хэсэгт: элементүүд ямар байх ёстой,
3. javascript a… хэсэг: вэб хуудас хэрхэн ажиллах ёстой.

Index.html хөтөч дээр ачаалагдсаны дараа (энэ нь DOCTYPE шугамын улмаас html гэдгийг мэддэг) энэ мөр рүү орно.

Энэ бол CSS загварын хүснэгтийн хүсэлт юм. Энэ хуудасны байршлыг href = "…" гэж өгсөн болно. Тэгэхээр таны хөтөч юу хийдэг вэ? Зөв, энэ нь серверт өөр хүсэлт илгээдэг бөгөөд энэ удаад style.css. Сервер бүртгүүлсэн тул энэ хүсэлтийг авдаг.

server.on ("/style.css", HTTP_GET, (AsyncWebServerRequest *хүсэлт) {Serial.println ("css хүсэлт хүлээн авсан"); хүсэлт-> илгээх (SPIFFS, "/style.css", "текст/css) ");});

Цэвэрхэн үү? Дашрамд хэлэхэд, энэ нь таны хөтөч бүхэнд санаа тавьдаг байсан бол href = "/some/file/on/the/other/side/of/the/moon" байж болох байсан. Тэр файлыг баяртайгаар авчирна. Загварын хүснэгтийн талаар тайлбарлахгүй, учир нь энэ нь зөвхөн гадаад төрхийг хянадаг тул энд тийм ч сонирхолтой биш, гэхдээ хэрэв та илүү ихийг мэдэхийг хүсч байвал энэ хичээлийг үзнэ үү.

DuvelBot лого хэрхэн гарч ирдэг вэ? Index.html дээр бидэнд байгаа:

ESP32 нь дараахь байдлаар хариулдаг.

server.on ("/duvel", HTTP_GET, (AsyncWebServerRequest *хүсэлт) {Serial.println ("duvel логоны хүсэлтийг хүлээн авлаа!"); request-> илгээх (SPIFFS, "/duvel.png", "image/png) ");});

.. өөр нэг SPIFFS файл, энэ удаад хариунд "image/png" гэж заасан бүрэн зураг байна.

Одоо бид үнэхээр сонирхолтой хэсэг рүү орлоо: товчлууруудын код. FORWARD товчлуур дээр анхаарлаа хандуулцгаая.

УРД

Ангилал = "…" нэр нь зөвхөн хэмжээ, өнгө гэх мэтийг тохируулахын тулд загварын хуудсан дээр холбох нэр юм. Чухал хэсгүүд нь onmousedown = "toggleCheckbox ('урагш')" ба onmouseup = "toggleCheckbox ('зогсоох') ". Эдгээр нь товчлуурын үйлдлийг бүрдүүлдэг (ontouchstart/ontouchend -тэй ижил боловч мэдрэгчтэй дэлгэц/утас). Энд товчлуурын үйлдэл нь javascript хэсэгт toggleCheckbox (x) функцийг дууддаг.

функц toggleCheckbox (x) {var xhr = new XMLHttpRequest (); xhr.open ("GET", "/" + x, үнэн); xhr.send (); // бэлэн болмогц хариутай ямар нэгэн зүйл хийж болно, гэхдээ бид тэгдэггүй}

Дамжуулах товчлуурыг дарахад шууд toggleCheckbox ('урагш') дуудагдах болно. Дараа нь энэ функц нь "/урагш" гэсэн байршлын "GET" XMLHttpRequest -ийг ажиллуулдаг бөгөөд хэрэв та хөтчийнхөө хаягийн мөрөнд 192.168.0.121/forward гэж бичсэн шиг ажилладаг. Энэхүү хүсэлтийг ESP32 дээр ирмэгц дараах байдлаар зохицуулдаг.

server.on ("/forward", HTTP_GET, (AsyncWebServerRequest *request) {Serial.println ("хүлээн авсан/урагшлуулах"); actionNow = FORWARD; request-> илгээх (200, "текст/энгийн", "OK урагшлуулах"). ");});

Одоо ESP32 нь "OK урагшаа" гэсэн текстээр хариулдаг. Тэмдэглэл toggleCheckBox () нь энэ хариултаар юу ч хийдэггүй (эсвэл хүлээдэггүй), гэхдээ энэ нь камерын кодод сүүлд харуулсан болно.

Энэхүү хариултын явцад програм нь зөвхөн товчлуур дарсны хариуд ActionNow = FORWARD хувьсагчийг тохируулдаг. Одоо програмын үндсэн хэсэгт энэ хувьсагчийг хянадаг бөгөөд энэ нь хөдөлгүүрийн ХОУХ -ийг дээш/доошлуулах зорилготой юм. Логик нь: хэрэв бид ЗОГСООГҮЙ үйлдэл хийх юм бол тодорхой тооны (dutyCycleMax) хүрэх хүртэл мотороо тэр чиглэлд дээшлүүлээрэй. ActionNow өөрчлөгдөөгүй л бол энэ хурдыг дэмжээрэй.

void loop () {currentMillis = millis (); if (currentMillis - previousMillis> = dutyCycleStepDelay) {// давталтыг хамгийн сүүлд гүйцэтгэх үедээ хадгална уу өмнөхMillis = currentMillis; // mainloop нь (actionNow! = previousAction) {// доошлох, дараа нь зогсоох, дараа нь үйлдлийг өөрчлөх, ramp uputyCycleNow = dutyCycleNow-dutyCycleStep; if (dutyCycleNow <= 0) {// хэрэв dc -ийг доошлуулсны дараа 0 бол шинэ чиглэлд тохируулаарай. setDir (actionNow) previousAction = actionNow; dutyCycleNow = dutyCycleMin; }} else // actionNow == previousAction нь STOP {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow+dutyCycleStep; if (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax; } else dutyCycleNow = 0; } ledcWrite (pwmChannel, dutyCycleNow); // моторт дугуйг тохируулах}}

Энэ нь моторын хурдыг аажмаар нэмэгдүүлдэг бөгөөд зүгээр л бүрэн хурдаар эхлүүлж, үнэ цэнэтэй үнэт Дэвелийг асгахаас өөр аргагүй юм. Энэ кодыг таймер таслах горимд шилжүүлэх нь мэдэгдэхүйц сайжруулалт байх болно, гэхдээ энэ нь байгаагаараа ажилладаг.

Хэрэв бид дамжуулах товчлуурыг суллавал таны хөтөч toggleCheckbox ('зогсоох') руу залгаж, GET /зогсоох хүсэлт гаргана. ESP32 нь actionNow -ийг STOP болгоно (мөн "OK stop" гэж хариулна), энэ нь моторыг эргүүлэх гол цөмийг эхлүүлнэ.

LED -ийн талаар юу хэлэх вэ? Үүнтэй ижил механизм боловч одоо бидэнд гулсагч байна:

JavaScript дээр гулсагчийн тохиргоог хянадаг тул өөрчлөлт бүрт "/LED/xxx" гэсэн дуудлага ирдэг бөгөөд энд xxx нь LED -ийн гэрэлтүүлгийн утгыг тохируулах ёстой.

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

Бид document.getElementByID ('слайд') ашиглан гулсагч обьектийг өөрөө олж авсан бөгөөд энэ утга нь өөрчлөлт бүрт текст элемент рүү гардаг болохыг анхаарна уу.

Ноорог дээрх зохицуулагч нь боловсруулагчийн бүртгэлд "/LED/*" ашиглан бүх тод байдлын хүсэлтийг хүлээн авдаг. Дараа нь сүүлийн хэсгийг (тоо) хувааж, int руу илгээнэ:

server.on ("/LED/ *", HTTP_GET, (AsyncWebServerRequest *хүсэлт) {Serial.println ("удирдсан хүсэлтийг хүлээн авлаа!"); setLedBrightness ((request-> url ()). дэд мөр (5).toInt ()); request-> илгээх (200, "text/plain", "OK Leds.");});

Дээр дурдсантай адил радио товчлуурууд нь ХБХ -ны анхдагч утгыг тохируулдаг хувьсагчдыг хянадаг бөгөөд ингэснээр DuvelBot шар айргийг аажмаар жолооддог бөгөөд шингэн алтаа асгаруулахгүйн тулд гал тогооны өрөөнд хурдан очдог.

… Тэгэхээр та хуудсыг шинэчлэхгүйгээр камерын дүрсийг хэрхэн шинэчлэх вэ? Үүний тулд бид AJAX (асинхрон JavaScript ба XML) хэмээх техникийг ашигладаг. Асуудал нь ихэвчлэн клиент-серверийн холболт нь тогтмол журмыг дагаж мөрддөгт оршино: үйлчлүүлэгч (хөтөч) хүсэлт гаргадаг, сервер (ESP32) хариу өгдөг, хэргийг хаасан. Дууссан. Дахиж юу ч болохгүй. Хэрэв бид ямар нэгэн байдлаар хөтөчийг хуурч ESP32 -ээс шинэчлэлт авах хүсэлт гаргаж чадвал … бид энэ javascript -ийн дагуу үүнийг хийх болно.

setInterval (function () {var xhttp = new XMLHttpRequest (); xhttp.open ("GET", "/CAMERA", true); xhttp.responseType = "blob"; xhttp.timeout = 500; xhttp.ontimeout = function () {}; xhttp.onload = функц (e) {if (this.readyState == 4 && this.status == 200) {// үзнэ үү: 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); // блокоос объект үүсгэх document.querySelector ("#camimage"). src = imageUrl; urlCreator.revokeObjectURL (imageurl)}}; xhttp.send ();}, 250);

setInterval нь функцийг параметр болгон авч ойр ойрхон гүйцэтгэдэг (энд 250 мс тутамд нэг удаа 4 фрэйм/секундын үр дүн гардаг). Гүйцэтгэсэн функц нь /CAMERA хаягаар хоёртын "блок" хийх хүсэлт гаргадаг. Үүнийг ESP32-CAM ноорог дээр (Randomnerdtutorials-ээс) дараах байдлаар зохицуулдаг.

server.on ("/CAMERA", HTTP_GET, (AsyncWebServerRequest * хүсэлт) {Serial.println ("камерын хүсэлтийг хүлээн авлаа!"); camera_fb_t * fb = NULL; // esp_err_t res = ESP_OK; size_t _jpg_buf_len = 0; uint8 * _jpg_buf = NULL; // хүрээ барих fb = esp_camera_fb_get (); if (! fb) {Serial.println ("Frame buffer олж авах боломжгүй"); буцах;} if (fb-> format! = PIXFORMAT_JPEG)/ /аль хэдийн энэ форматаар {bool jpeg_converted = frame-j.webp

Чухал хэсэг нь fb = esp_camera_fb_get () хүрээг-j.webp

Дараа нь JavaScript функц энэ зургийг ирэхийг хүлээнэ. Дараа нь хүлээн авсан "blob" -ыг html хуудсан дээрх зургийг шинэчлэх эх сурвалж болгон ашиглаж болох url болгон хөрвүүлэхэд бага зэрэг ажил шаардагдана.

Өө, бид дууслаа!

Алхам 4: Санаа, үлдэгдэл

Миний хувьд энэ төслийн зорилго бол техник хангамжийг интернетэд холбоход хангалттай вэб програмчлал сурах явдал байв. Энэ төсөлд хэд хэдэн өргөтгөл хийх боломжтой. Энд хэдэн санаа байна:

• Энд болон энд тайлбарласны дагуу "жинхэнэ" камерын урсгалыг хэрэгжүүлж, үүнийг ижил ESP32 дээр тайлбарласан 2 дахь сервер рүү шилжүүлээрэй, гэхдээ бусад CPU цөм дээр камерын урсгалыг 1 -р серверээр ажилладаг html руу импортлоорой. Энэ нь камерын шинэчлэлтийг хурдан хийх ёстой.
• Хандалтын цэг (AP) горимыг ашигла, ингэснээр робот энд тайлбарласнаар илүү бие даасан болно.
• Зайны хүчдэлийн хэмжилт, гүн нойрны чадвар гэх мэтийг өргөжүүлээрэй. Энэ нь одоогоор жаахан хэцүү байна, учир нь AI-Thinker ESP32-CAM нь олон GPIO-той байдаггүй; uart, жишээлбэл боолын arduino ашиглан өргөжүүлэх шаардлагатай.
• Том товчлуур дээр дарж муурны эмчилгээг үе үе гаргадаг муур хайж буй робот руу хөрвүүлээрэй, өдрийн турш олон сайхан муурны зургийг цацаарай.

Хэрэв танд таалагдсан эсвэл асуулт байвал сэтгэгдлээ бичээрэй, уншсанд баярлалаа!