সুচিপত্র:

DuvelBot - ESP32 -CAM বিয়ার সার্ভিং রোবট: 4 টি ধাপ (ছবি সহ)
DuvelBot - ESP32 -CAM বিয়ার সার্ভিং রোবট: 4 টি ধাপ (ছবি সহ)

ভিডিও: DuvelBot - ESP32 -CAM বিয়ার সার্ভিং রোবট: 4 টি ধাপ (ছবি সহ)

ভিডিও: DuvelBot - ESP32 -CAM বিয়ার সার্ভিং রোবট: 4 টি ধাপ (ছবি সহ)
ভিডিও: В США сварили пиво из сточных вод 2024, জুন
Anonim
DuvelBot - ESP32 -CAM বিয়ার সার্ভিং রোবট
DuvelBot - ESP32 -CAM বিয়ার সার্ভিং রোবট

কঠোর দিনের পরিশ্রমের পরে, পালঙ্কে আপনার প্রিয় বিয়ারটি চুমুক দেওয়ার কাছাকাছি কিছুই আসে না। আমার ক্ষেত্রে, যে বেলজিয়ান স্বর্ণকেশী "Duvel"। যাইহোক, ভেঙে পড়ার পরেও আমরা একটি মারাত্মক সমস্যার মুখোমুখি হয়েছি: আমার ডুভেল ধারণকারী ফ্রিজটি পালঙ্ক থেকে 20 ফুট অপসারণযোগ্য।

যদিও আমার দিক থেকে কিছু হালকা জবরদস্তি কিশোর -কিশোরীদের ফ্রিজ স্ক্যাভেঞ্জারকে আমার সপ্তাহের ডুভেলের ভাতা moveালতে পারে, আসলে এটিকে তার প্রায় ক্লান্ত প্রজন্মের কাছে পৌঁছে দেওয়ার কাজটি স্পষ্টতই এক ধাপ দূরে।

সোল্ডারিং লোহা এবং কীবোর্ড ভাঙার সময় …

ডুভেলবট একটি নন-ফ্রিলস এআই-থিংকার ESP32-CAM ভিত্তিক ড্রাইভিং ওয়েবক্যাম, যা আপনি আপনার স্মার্টফোন, ব্রাউজার বা ট্যাবলেট থেকে নিয়ন্ত্রণ করতে পারেন।

এই প্ল্যাটফর্মটিকে কম মদ্যপ ব্যবহারের জন্য মানিয়ে নেওয়া বা সম্প্রসারণ করা সহজ (মনে করুন SpouseSpy, NeighbourWatch, KittyCam…)।

আমি এই রোবটটি তৈরি করেছি মূলত পুরো ওয়েব প্রোগ্রামিং এবং আইওটি স্টাফ সম্পর্কে কিছুটা জানার জন্য, যার সম্পর্কে আমি কিছুই জানতাম না। সুতরাং এই নির্দেশনার শেষে এটি কীভাবে কাজ করে তার একটি বিস্তৃত ব্যাখ্যা।

এই নির্দেশাবলীর অনেক অংশ র্যান্ডম নার্ড টিউটোরিয়ালগুলিতে পাওয়া চমৎকার ব্যাখ্যার উপর ভিত্তি করে, তাই দয়া করে তাদের একটি দর্শন দিন!

সরবরাহ

তুমি কি চাও:

যন্ত্রাংশের তালিকা পাথরে খোদাই করা হয়নি এবং অনেকগুলি অংশ এক টন বিভিন্ন সংস্করণে এবং বিভিন্ন স্থান থেকে পাওয়া যেতে পারে। আমি আলি-এক্সপ্রেস থেকে সবচেয়ে বেশি সংগ্রহ করেছি। মত Machete বলেছেন: improvise।

হার্ডওয়্যার:

  • এআই চিন্তাবিদ ESP32-CAM মডিউল। এটি সম্ভবত অন্যান্য ESP32-CAM মডিউলগুলির সাথে কাজ করতে পারে কিন্তু আমি এটি ব্যবহার করেছি
  • L298N মোটর ড্রাইভার বোর্ড,
  • একটি সস্তা 4 চাকার রোবোটিক্স প্ল্যাটফর্ম,
  • হ্যামন্ড ইলেকট্রনিক্স 1599KGY এর মতো একটি বড় সমতল পৃষ্ঠের একটি আবাসন,
  • প্রোগ্রামিং এর জন্য USB-to-3.3V-TTL- কনভার্টার।
  • আলোর জন্য: 3 সাদা LEDs, BC327 বা অন্যান্য সাধারণ উদ্দেশ্য ট্রানজিস্টার NPN (Ic = 500mA), 4k7k প্রতিরোধক, 3 82Ohm প্রতিরোধক, পারফোর্ড, তারগুলি (পরিকল্পিত এবং ছবি দেখুন)।
  • প্রোগ্রামিংয়ের জন্য একটি অন/অফ টগল সুইচ এবং একটি স্বাভাবিকভাবে খোলা পুশবটন।

চ্ছিক:

  • ESP32-CAM মডিউল সরবরাহ করা স্ট্যান্ডার্ড OV2460 ক্যামেরার চেয়ে দীর্ঘ ফ্লেক্সযুক্ত একটি ফিশাই ক্যামেরা,
  • ওয়াইফাই অ্যান্টেনা যথাযথভাবে লম্বা তারের এবং আল্ট্রা মিনিয়েচার কক্স কানেক্টর এর মত। ESP32-CAM এর একটি অনবোর্ড অ্যান্টেনা আছে এবং হাউজিংটি প্লাস্টিকের, তাই একটি অ্যান্টেনার সত্যিই প্রয়োজন নেই, তবে আমি ভেবেছিলাম এটি ঠান্ডা লাগছে, তাই…
  • শীর্ষ কভার ডিজাইনের জন্য ইঙ্কজেট মুদ্রণযোগ্য স্টিকার পেপার।

সাধারণ হার্ডওয়্যার সরঞ্জাম: সোল্ডারিং আয়রন, ড্রিলস, স্ক্রু ড্রাইভার, প্লায়ার…

ধাপ 1: রোবট প্ল্যাটফর্ম তৈরি করা

রোবট প্ল্যাটফর্ম নির্মাণ
রোবট প্ল্যাটফর্ম নির্মাণ
রোবট প্ল্যাটফর্ম নির্মাণ
রোবট প্ল্যাটফর্ম নির্মাণ
রোবট প্ল্যাটফর্ম নির্মাণ
রোবট প্ল্যাটফর্ম নির্মাণ

পরিকল্পিত:

পরিকল্পিত বিশেষ কিছু নয়। ESP32-cam L298N মোটর ড্রাইভার বোর্ডের মাধ্যমে মোটরগুলিকে নিয়ন্ত্রণ করে, যার দুটি চ্যানেল রয়েছে। বাম এবং ডান দিকের মোটর সমান্তরালভাবে স্থাপন করা হয় এবং প্রতিটি পাশ একটি চ্যানেল দখল করে। মোটর পিনের কাছাকাছি চারটি ছোট 10..100nF সিরামিক ক্যাপাসিটারগুলি আরএফ হস্তক্ষেপ মোকাবেলার জন্য সর্বদা পরামর্শ দেওয়া হয়। এছাড়াও, মোটর বোর্ডের সরবরাহের উপর একটি বড় ইলেক্ট্রোলাইটিক ক্যাপ (2200… 4700uF) যেমনটি পরিকল্পিতভাবে দেখানো হয়েছে, যখন কঠোরভাবে প্রয়োজন হয় না, সরবরাহের ভোল্টেজকে কিছুটা সীমাবদ্ধ করতে পারে (যদি আপনি একটি হরর মুভি দেখতে চান, তাহলে Vbat অনুসন্ধান করুন একটি অসিলোস্কোপ দিয়ে যখন মোটর সক্রিয় থাকে)।

লক্ষ্য করুন যে উভয় মোটর চ্যানেল সক্ষম পিন ESP32 (IO12) এর একই পালস-প্রস্থ মডুলেটেড (PWM) পিন দ্বারা চালিত হয়। এর কারণ হল ESP32-CAM মডিউলে GPIOs (মডিউলের পরিকল্পিত রেফারেন্স অন্তর্ভুক্ত) এর একটি টন নেই। রোবটের এলইডিগুলি আইও 4 দ্বারা চালিত হয়, যা অনবোর্ড ফ্ল্যাশ এলইডি চালায়, তাই একটি বন্ধ হাউজিংয়ে ফ্ল্যাশ এলইডি আলোর প্রতিরোধ করতে Q1 সরান।

প্রোগ্রামিং বোতাম, অন/অফ সুইচ, চার্জিং কানেক্টর এবং প্রোগ্রামিং কানেক্টর রোবটের নিচে অ্যাক্সেসযোগ্য। আমি প্রোগ্রামিং সংযোগকারী (3.5 মিমি জ্যাক?) এর জন্য অনেক ভালো কাজ করতে পারতাম, কিন্তু বিয়ার আর অপেক্ষা করতে পারত না। এছাড়াও ওভার-দ্য-এয়ার-আপডেটগুলি (ওটিএ) সেটআপ করা ভাল হবে।

রোবটকে প্রোগ্রামিং মোডে রাখার জন্য, প্রোগ্রামিং বোতাম টিপুন (এটি IO0 কম টেনে নেয়) এবং তারপরে এটি চালু করুন।

গুরুত্বপূর্ণ: রোবটের NiMH ব্যাটারি চার্জ করার জন্য, একটি ল্যাব সাপ্লাই সেট ব্যবহার করুন (আনলোড) প্রায় 14V এবং বর্তমান 250mA সীমিত। ভোল্টেজ ব্যাটারির ভোল্টেজের সাথে মানিয়ে যাবে। যদি রোবট গরম অনুভব করে বা ব্যাটারির ভোল্টেজ প্রায় 12.5V পৌঁছায় তবে সংযোগ বিচ্ছিন্ন করুন। এখানে একটি সুস্পষ্ট উন্নতি হবে একটি সঠিক ব্যাটারি চার্জার সংহত করা, কিন্তু এটি এই নির্দেশের সুযোগের বাইরে।

হার্ডওয়্যার:

দয়া করে ছবিতে নোটগুলি দেখুন। হাউজিংটি 4 এম 4 বোল্ট এবং স্ব-লকিং বাদাম ব্যবহার করে রোবট বেসে মাউন্ট করা হয়েছে। দূরত্ব spacers হিসাবে ব্যবহৃত রাবার পাইপ লক্ষ্য করুন। আশা করি, এটি ডুয়েলকে কিছুটা স্থগিতাদেশও দেয়, যদি যাত্রাটি অস্থির প্রমাণিত হয়। ESP32-CAM মডিউল এবং L298N মোটর বোর্ড প্লাস্টিকের স্টিকি ফুট (ইংরেজিতে সঠিক নাম সম্পর্কে নিশ্চিত নয়) ব্যবহার করে হাউজিংয়ে মাউন্ট করা হয়, যাতে অতিরিক্ত গর্ত ড্রিল করা না যায়। এছাড়াও ESP32 তার নিজস্ব পারফোর্ড এবং প্লাগযোগ্য পিনহেডারে লাগানো আছে। এটি ESP32 অদলবদল করা সহজ করে তোলে।

ভুলে যাবেন না: যদি আপনি অন্তর্নির্মিত ওয়াইফাই অ্যান্টেনার পরিবর্তে যান, তবে ESP32-CAM বোর্ডের নীচের অংশে অ্যান্টেনা-নির্বাচন জাম্পারও বিক্রি করুন।

DuvelBot.svg ফাইলের উপরের লোগোটি ইঙ্কজেট স্টিকার পেপারে প্রিন্ট করুন (অথবা আপনার নিজের ডিজাইন করুন), এবং আপনি যেতে প্রস্তুত!

ধাপ 2: রোবট প্রোগ্রাম করুন

প্রোগ্রাম রোবট
প্রোগ্রাম রোবট

রোবটটি বন্ধ করার আগে এটি প্রোগ্রাম করার পরামর্শ দেওয়া হয়, যাতে সবকিছু কাজ করে এবং কোন জাদুকরী ধোঁয়া না দেখা যায়।

আপনার নিম্নলিখিত সফ্টওয়্যার সরঞ্জামগুলির প্রয়োজন:

  • Arduino IDE,
  • ESP32 লাইব্রেরি, SPIFFS (সিরিয়াল পেরিফেরাল ফ্ল্যাশ ফাইল সিস্টেম), ESPAsync ওয়েবসাইট সার্ভার লাইব্রেরি।

পরেরটি "আপনার ফাইলগুলি সংগঠিত করা" বিভাগটি সহ এবং এই র্যান্ডম রিডারটিউটোরিয়াল অনুসরণ করে ইনস্টল করা যেতে পারে। আমি আসলে এর চেয়ে ভাল ব্যাখ্যা করতে পারিনি।

কোড:

আমার কোড এখানে পাওয়া যাবে:

  • একটি Arduino স্কেচ DuvelBot.ino,
  • একটি ডেটা সাবফোল্ডার যা SPIFFS ব্যবহার করে ESP ফ্ল্যাশে আপলোড করা ফাইলগুলি ধারণ করে। এই ফোল্ডারে রয়েছে ওয়েবপৃষ্ঠা যা ESP পরিবেশন করবে (index.html), একটি লোগো চিত্র যা ওয়েবপেজের অংশ (duvel.png) এবং একটি ক্যাসকেড স্টাইল শীট বা CSS ফাইল (style.css)।

রোবট প্রোগ্রাম করার জন্য:

  • ইউএসবি-টিটিএল কনভার্টারটি স্কিম্যাটিক হিসাবে দেখান,
  • ফাইল -> খুলুন -> ফোল্ডারে যান যেখানে 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 স্কেচ ডেটা আপলোড" এবং এটি শেষ হওয়ার জন্য অপেক্ষা করুন,
  • প্রোগ্রামিং মোডে ফিরে আসার জন্য PROG বোতামটি ধরে আবার বন্ধ করুন,
  • স্কেচ প্রোগ্রাম করার জন্য "আপলোড" তীর টিপুন এবং এটি শেষ হওয়ার জন্য অপেক্ষা করুন,
  • সিরিয়াল মনিটর খুলুন এবং বন্ধ/চালু করে ESP32 রিসেট করুন,
  • একবার এটি বুট হয়ে গেলে, আইপি ঠিকানাটি নোট করুন (192.168.0.121 এর মতো কিছু) এবং ইউএসবি-টিটিএল রূপান্তরকারী থেকে রোবটটি সংযোগ বিচ্ছিন্ন করুন,
  • এই আইপি ঠিকানায় একটি ব্রাউজার খুলুন। আপনি ছবির মত ইন্টারফেস দেখতে হবে।
  • Ptionচ্ছিক: আপনার রাউটারে একটি নির্দিষ্ট আইপি ঠিকানায় ESP32 এর ম্যাক-ঠিকানা সেট করুন (কিভাবে করবেন রাউটারের উপর নির্ভর করে)।

এটাই! এটি কীভাবে কাজ করে তা জানতে চাইলে পড়ুন …

ধাপ 3: এটি কিভাবে কাজ করে

এখন আমরা আকর্ষণীয় অংশে আসি: এটি কীভাবে একসাথে কাজ করে?

আমি ধাপে ধাপে … ধাপে ধাপে ব্যাখ্যা করার চেষ্টা করব কিন্তু দয়া করে মনে রাখবেন Kajnjaps ওয়েব প্রোগ্রামিং বিশেষজ্ঞ নয়। আসলে, ওয়েব প্রোগ্রামিংয়ের কিছুটা শেখা ডুয়েলবট তৈরির পুরো ভিত্তি ছিল। যদি আমি স্পষ্ট ভুল করি, দয়া করে একটি মন্তব্য করুন!

ঠিক আছে, ESP32 চালু হওয়ার পরে, সেটআপের ক্ষেত্রে যথারীতি এটি GPIO গুলিকে আরম্ভ করে, মোটর এবং LED নিয়ন্ত্রণের জন্য PWM টাইমারের সাথে যুক্ত করে। মোটর নিয়ন্ত্রণের জন্য এখানে আরও দেখুন, এটি বেশ মানসম্মত।

তারপর ক্যামেরা কনফিগার করা হয়। অলস প্রতিক্রিয়া এড়াতে আমি ইচ্ছাকৃতভাবে রেজোলিউশনটি বেশ কম (VGA বা 640x480) রেখেছি। নোট করুন AI-Thinker ESP32-CAM বোর্ডের একটি সিরিয়াল র্যাম চিপ (PSRAM) আছে যা এটি বড় রেজোলিউশনের ক্যামেরা ফ্রেম সংরক্ষণ করতে ব্যবহার করে:

যদি (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 আরম্ভ করুন যদি (! SPIFFS.begin (true)) {Serial.println ("SPIFFS মাউন্ট করার সময় একটি ত্রুটি ঘটেছে!"); প্রত্যাবর্তন; }

SPIFFS ESP32 এ সামান্য ফাইল সিস্টেমের মত কাজ করে। এখানে এটি তিনটি ফাইল সংরক্ষণ করতে ব্যবহৃত হয়: ওয়েবপেজ নিজেই index.html, একটি ক্যাসকেড ফাইল স্টাইলশীট style.css, এবং একটি-p.webp

পরবর্তীতে ESP32 আপনার রাউটারের সাথে সংযুক্ত হয় (আপলোড করার আগে আপনার পরিচয়পত্র সেট করতে ভুলবেন না):

// আপনার রাউটারের শংসাপত্র পরিবর্তন করুন এখানে char* ssid = "yourNetworkSSIDHere"; const char* password = "yourPasswordHere"; … // ওয়াইফাই সিরিয়াল.প্রিন্টের সাথে সংযুক্ত করুন ("ওয়াইফাইতে সংযুক্ত হচ্ছে"); WiFi.begin (ssid, password); while (WiFi.status ()! = WL_CONNECTED) {Serial.print ('।'); বিলম্ব (500); } // এখন রাউটারের সাথে সংযুক্ত: ESP32 এর এখন আইপি ঠিকানা আছে

আসলে কিছু উপকারী করার জন্য, আমরা একটি অ্যাসিঙ্ক্রোনাস ওয়েব সার্ভার শুরু করি:

// পোর্ট 80AsyncWebServer সার্ভারে একটি AsyncWebServer অবজেক্ট তৈরি করুন (80); … Server.begin (); // সংযোগের জন্য শুনতে শুরু করুন

এখন, যদি আপনি ব্রাউজারের অ্যাড্রেস বারে রাউটার দ্বারা ESP32 কে নির্ধারিত আইপি ঠিকানা টাইপ করেন, তাহলে ESP32 একটি অনুরোধ পায়। এর মানে হল এটি ক্লায়েন্টকে (আপনি, অথবা আপনার ব্রাউজার) এটিকে কিছু পরিবেশন করে সাড়া দেওয়া উচিত, উদাহরণস্বরূপ একটি ওয়েবপেজ।

ESP32 কীভাবে সাড়া দিতে হয় তা জানে, কারণ সেটআপের মধ্যে সমস্ত সম্ভাব্য অনুমোদিত অনুরোধের প্রতিক্রিয়াগুলি server.on () ব্যবহার করে নিবন্ধিত হয়েছে। উদাহরণস্বরূপ, প্রধান ওয়েবপেজ বা সূচী (/) এইভাবে পরিচালনা করা হয়:

server.on ("/", HTTP_GET, (AsyncWebServerRequest *request) {Serial.println ("/request receive!"); request-> send (SPIFFS, "/index.html", String (), false, প্রসেসর);});

সুতরাং যদি ক্লায়েন্ট সংযোগ করে, ESP32 SPIFFS ফাইল সিস্টেম থেকে index.html ফাইল পাঠিয়ে সাড়া দেয়। প্যারামিটার প্রসেসর হল একটি ফাংশনের নাম যা এইচটিএমএল প্রিপ্রোসেস করে এবং কোন বিশেষ ট্যাগ প্রতিস্থাপন করে:

// এইচটিএমএল -এ %DATA %// এর মত স্থানধারক প্রতিস্থাপন করে যে ভেরিয়েবল আপনি দেখাতে চান //

ডেটা: %DATA %

স্ট্রিং প্রসেসর (const String & var) {if (var == "DATA") {//Serial.println("in প্রসেসর! "); রিটার্ন স্ট্রিং (dutyCycleNow); } রিং স্ট্রিং ();}

এখন, ওয়েবপেজ index.html নিজেই বিচ্ছিন্ন করা যাক। সাধারণভাবে সবসময় তিনটি অংশ থাকে:

  1. এইচটিএমএল কোড: কোন উপাদানগুলি দেখানো উচিত (বোতাম/পাঠ্য/স্লাইডার/চিত্র ইত্যাদি),
  2. শৈলী কোড, একটি পৃথক.css ফাইলে অথবা একটি… বিভাগে: উপাদানগুলি কেমন হওয়া উচিত,
  3. জাভাস্ক্রিপ্ট একটি … বিভাগ: ওয়েবপৃষ্ঠা কিভাবে কাজ করবে।

একবার index.html ব্রাউজারে লোড হয়ে যায় (যা জানে যে এটি DOCTYPE লাইনের কারণে html), এটি এই লাইনে চলে:

এটি একটি সিএসএস স্টাইল শীটের অনুরোধ। এই শীটের অবস্থান href = "…" এ দেওয়া আছে। তাহলে আপনার ব্রাউজার কি করে? ঠিক আছে, এটি সার্ভারে আরেকটি অনুরোধ চালু করে, এই সময় style.css এর জন্য। সার্ভার এই অনুরোধটি ক্যাপচার করে, কারণ এটি নিবন্ধিত ছিল:

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

ঝরঝরে? ঘটনাক্রমে, এটি আপনার সমস্ত ব্রাউজারের যত্নের জন্য href = "/some/file/on/the/other/side/of/the moon" হতে পারে। এটি সেই ফাইলটি আনন্দের সাথে আনবে। আমি স্টাইলশীট সম্পর্কে ব্যাখ্যা করব না কারণ এটি কেবল উপস্থিতি নিয়ন্ত্রণ করে তাই এটি এখানে সত্যিই আকর্ষণীয় নয়, তবে আপনি যদি আরও জানতে চান তবে এই টিউটোরিয়ালটি দেখুন।

DuvelBot লোগো কিভাবে প্রদর্শিত হয়? Index.html এ আমাদের আছে:

যার সাথে ESP32 সাড়া দেয়:

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

.. অন্য একটি SPIFFS ফাইল, এইবার একটি সম্পূর্ণ চিত্র, প্রতিক্রিয়া হিসাবে "image/png" দ্বারা নির্দেশিত।

এখন আমরা সত্যিই আকর্ষণীয় অংশে আসি: বোতামগুলির জন্য কোড। আসুন ফরওয়ার্ড বোতামে ফোকাস করি:

ফরওয়ার্ড

শ্রেণী = "…" নামটি কেবল একটি নাম যা এটি স্টাইলশীটে লিঙ্ক করার জন্য আকার, রঙ ইত্যাদি কাস্টমাইজ করে। "। এগুলি বোতামের ক্রিয়াগুলি গঠন করে (অন টাচস্টার্ট/অনটচেন্ডের জন্য একই কিন্তু এর জন্য টাচস্ক্রিন/ফোন)। এখানে, বোতাম অ্যাকশন জাভাস্ক্রিপ্ট বিভাগে একটি ফাংশন toggleCheckbox (x) কল করে:

ফাংশন toggleCheckbox (x) {var xhr = new XMLHttpRequest (); xhr.open ("GET", "/" + x, সত্য); xhr.send (); // প্রস্তুত হওয়ার সময়ও প্রতিক্রিয়া সহ কিছু করতে পারে, কিন্তু আমরা তা করি না}

তাই ফরোয়ার্ড বোতাম টিপে, অবিলম্বে ফলাফল টগলচেকবক্স ('ফরোয়ার্ড') কল করা হচ্ছে। এই ফাংশনটি তখন "/ফরওয়ার্ড" অবস্থানের একটি XMLHttpRequest "GET" চালু করে যা আপনার ব্রাউজার অ্যাড্রেস বারে 192.168.0.121/forward টাইপ করলে ঠিক কাজ করে। একবার এই অনুরোধ ESP32 এ পৌঁছালে, এটি দ্বারা পরিচালিত হয়:

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

এখন ESP32 কেবল "ওকে ফরোয়ার্ড" পাঠ্য দিয়ে উত্তর দেয়। নোট toggleCheckBox () এই প্রতিক্রিয়ার সাথে (বা অপেক্ষা) কিছু করে না, তবে এটি ক্যামেরা কোডে পরে দেখানো যেতে পারে।

এই প্রতিক্রিয়া চলাকালীন, প্রোগ্রামটি শুধুমাত্র একটি পরিবর্তনশীল actionNow = FORWARD সেট করে, যেমন বোতাম টিপে প্রতিক্রিয়া। এখন প্রোগ্রামের মেইনলুপে, মোটরগুলির PWM র‍্যাম্পিং/ডাউন করার লক্ষ্যে এই ভেরিয়েবলটি পর্যবেক্ষণ করা হয়। যুক্তি হল: যতক্ষণ না আমাদের একটি কর্ম আছে যা স্টপ নয়, ততক্ষণ পর্যন্ত মোটরগুলিকে একটি নির্দিষ্ট সংখ্যায় (ডিউটিসাইকেলম্যাক্স) না পৌঁছানো পর্যন্ত সেই দিকে মোটরগুলিকে ালুন। তারপরে সেই গতিটি ধরে রাখুন, যতক্ষণ না অ্যাকশননাউ পরিবর্তিত হয়নি:

অকার্যকর লুপ () {currentMillis = মিলিস (); যদি (currentMillis - previousMillis> = dutyCycleStepDelay) {// শেষবারের মতো আপনি লুপটি সঞ্চালন পূর্ববর্তী Millis = currentMillis; // মেইনলুপ মোটরগুলিকে উপরে/নিচে নামানোর জন্য দায়ী যদি (actionNow! = previousAction) {// ramp down, then stop, then action change and ramp up dutyCycleNow = dutyCycleNow-dutyCycleStep; যদি (dutyCycleNow <= 0) {// যদি র‍্যাম্প করার পর ডিসি 0 হয়, নতুন দিকে সেট করুন, মিনি ডিউটিসাইকেল setDir (actionNow) থেকে শুরু করুন; previousAction = actionNow; dutyCycleNow = dutyCycleMin; }} // actionNow == previousAction রmp্যাম্প আপ, ব্যতীত যখন দিক বন্ধ হয় {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow+dutyCycleStep; যদি (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax; } else dutyCycleNow = 0; } ledcWrite (pwmChannel, dutyCycleNow); // মোটর ডিউটি সাইকেল সামঞ্জস্য করুন}}

এটি ধীরে ধীরে মোটরগুলির গতি বাড়ায়, বরং সম্পূর্ণ গতিতে চালু করা এবং মূল্যবান মূল্যবান ডুভেল ছড়িয়ে দেওয়ার পরিবর্তে। একটি সুস্পষ্ট উন্নতি হবে এই কোডটিকে টাইমার ইন্টারাপ্ট রুটিনে নিয়ে যাওয়া, কিন্তু এটি যেমন আছে তেমনই কাজ করে।

এখন যদি আমরা ফরওয়ার্ড বোতামটি ছেড়ে দেই, আপনার ব্রাউজার টগলচেকবক্স ('স্টপ') কল করে, ফলে GET /স্টপ করার অনুরোধ আসে। ESP32 অ্যাকশননাও স্টপ -এ সেট করে (এবং "ওকে স্টপ।" দিয়ে সাড়া দেয়), যা মোটরগুলিকে স্পিন করার জন্য মেইনলুপ ব্যবহার করে।

LEDs সম্পর্কে কি? একই প্রক্রিয়া, কিন্তু এখন আমাদের একটি স্লাইডার আছে:

জাভাস্ক্রিপ্টে, স্লাইডারের সেটিং পর্যবেক্ষণ করা হয়, যেমন প্রতিটি পরিবর্তনের সময় "/LED/xxx" পাওয়ার জন্য একটি কল হয়, যেখানে xxx হল উজ্জ্বলতার মান যা LEDs এ সেট করা উচিত:

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 *request) {Serial.println ("নেতৃত্বের অনুরোধ পাওয়া গেছে!"); ()); অনুরোধ-> পাঠান (200, "টেক্সট/প্লেইন", "ওকে লিডস।")}});

উপরে বর্ণিত অনুরূপ, রেডিওবুটনগুলি ভেরিয়েবলগুলিকে নিয়ন্ত্রণ করে যা PWM ডিফল্ট সেট করে, যেমন ডুয়েলবট বিয়ার দিয়ে আপনার কাছে ধীরে ধীরে চালাতে পারে, সেই তরল সোনা ছড়ানো থেকে সাবধান, এবং আরও কিছু আনতে রান্নাঘরে দ্রুত ফিরে আসে।

… তাহলে আপনি কিভাবে পৃষ্ঠাটি রিফ্রেশ না করে ক্যামেরা ইমেজ আপডেট করবেন? তার জন্য আমরা AJAX (অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল) নামে একটি কৌশল ব্যবহার করি। সমস্যা হল যে সাধারণত একটি ক্লায়েন্ট-সার্ভার সংযোগ একটি নির্দিষ্ট পদ্ধতি অনুসরণ করে: ক্লায়েন্ট (ব্রাউজার) অনুরোধ করে, সার্ভার (ESP32) সাড়া দেয়, কেস বন্ধ। সম্পন্ন. আর কিছু হয় না। যদি শুধুমাত্র কোনভাবে আমরা ব্রাউজারকে ESP32 থেকে নিয়মিত আপডেটের অনুরোধ করার জন্য চালিত করতে পারি …

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) {// দেখুন: 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 একটি ফাংশনকে প্যারামিটার হিসেবে নেয় এবং প্রতিবারই এটি চালায় (এখানে প্রতি 250ms প্রতি একবার 4 ফ্রেম/সেকেন্ডে)। সম্পাদিত ফাংশনটি ঠিকানা /ক্যামেরায় একটি বাইনারি "ব্লব" এর জন্য অনুরোধ করে। এটি ESP32-CAM দ্বারা স্কেচে পরিচালিত হয় (Randomnerdtutorials থেকে):

server.on ("/CAMERA", HTTP_GET, (AsyncWebServerRequest * request) {Serial.println ("ক্যামেরা রিকোয়েস্ট প্রাপ্ত!"); camera_fb_t * fb = NULL; * _jpg_buf = NULL; // একটি ফ্রেম ক্যাপচার করুন fb = esp_camera_fb_get (); if (! fb) {Serial.println ("ফ্রেম বাফার অর্জন করা যায়নি"); ফেরত;} if (fb-> format! = PIXFORMAT_JPEG)/ /ইতিমধ্যে কনফিগারেশন থেকে এই ফর্ম্যাটে আছে {bool jpeg_converted = frame-j.webp

গুরুত্বপূর্ণ অংশগুলি ফ্রেমটি পাচ্ছে fb = esp_camera_fb_get () এটিকে একটি-j.webp

জাভাস্ক্রিপ্ট ফাংশন তারপর এই ছবিটি আসার জন্য অপেক্ষা করে। তারপরে প্রাপ্ত "ব্লব" কে একটি ইউআরএলে রূপান্তর করতে কিছুটা কাজ লাগে যা এইচটিএমএল পৃষ্ঠায় চিত্রটি আপডেট করতে উৎস হিসাবে ব্যবহার করা যেতে পারে।

ভাই, আমাদের কাজ শেষ!

ধাপ 4: আইডিয়া এবং অবশিষ্ট

আইডিয়া এবং বাকি
আইডিয়া এবং বাকি

আমার জন্য এই প্রকল্পের লক্ষ্য ছিল ওয়েবে হার্ডওয়্যার ইন্টারফেস করার জন্য পর্যাপ্ত ওয়েব প্রোগ্রামিং শেখা। এই প্রকল্পের বেশ কয়েকটি এক্সটেনশন সম্ভব। এখানে কয়েকটি ধারনা:

  • এখানে এবং এখানে ব্যাখ্যা করা 'বাস্তব' ক্যামেরা স্ট্রিমিং বাস্তবায়ন করুন এবং একই ESP32 এ এখানে ব্যাখ্যা করা হিসাবে এটি একটি দ্বিতীয় সার্ভারে স্থানান্তর করুন, কিন্তু অন্য CPU কোরে, তারপর একটি 1 ব্যবহার করে 1 ম সার্ভার দ্বারা পরিবেশিত এইচটিএমএল -এ ক্যামেরা স্ট্রিম আমদানি করুন। এর ফলে দ্রুত ক্যামেরা আপডেট হওয়া উচিত।
  • অ্যাক্সেস পয়েন্ট (এপি) মোড ব্যবহার করুন যাতে রোবটটি এখানে স্বতন্ত্রভাবে ব্যাখ্যা করা হয়।
  • ব্যাটারি ভোল্টেজ পরিমাপ, গভীর ঘুমের ক্ষমতা ইত্যাদি দিয়ে প্রসারিত করুন এই মুহুর্তে এটি কিছুটা কঠিন কারণ AI-Thinker ESP32-CAM- এর অনেক GPIO নেই; Uart এর মাধ্যমে সম্প্রসারণ প্রয়োজন এবং উদাহরণস্বরূপ একটি ক্রীতদাস arduino।
  • একটি বিড়াল খোঁজার রোবটে রূপান্তর করুন যা একটি বড় বোতামের থাবায় সময় সময় বিড়ালের আচরণ বের করে দেয়, দিনের বেলা প্রচুর বিড়ালের ছবি প্রবাহিত করে …

দয়া করে মন্তব্য করুন যদি আপনি পছন্দ করেন বা প্রশ্ন থাকে এবং পড়ার জন্য ধন্যবাদ!

প্রস্তাবিত: