نانو 33 IoT + EC/pH/ORP + WebAPK: 8 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:55

بیشتر توسط نویسنده دنبال کنید:

درباره: قابلیت اندازه گیری pH ، ORP ، EC یا شوری را به پروژه Arduino یا Raspberry Pi خود اضافه کنید. اطلاعات بیشتر درباره ufire »

دستگاهی برای اندازه گیری EC ، pH ، ORP و دما. این می تواند برای نظارت بر استخر یا تنظیم هیدروپونیک استفاده شود. این دستگاه از طریق بلوتوث کم انرژی ارتباط برقرار کرده و اطلاعات را با استفاده از وب بلوتوث در صفحه وب نمایش می دهد. و برای سرگرمی ، ما این را به یک برنامه وب پیشرفته تبدیل می کنیم که می توانید از وب نصب کنید.

مرحله 1: همه آن شرایط چیست؟

EC/pH/ORP/دما برخی از رایج ترین اندازه گیری های کیفیت آب هستند. رسانایی الکتریکی (EC) در هیدروپونیک برای اندازه گیری محلول مغذی ، pH برای میزان اسیدی/اساسی آب و ORP برای تعیین توانایی آب در ضدعفونی خود استفاده می شود

• Bluetooth Low Energy یک پروتکل بی سیم برای ارسال و دریافت آسان اطلاعات است. برد آردوینو مورد استفاده در این پروژه Nano 33 IoT است و دارای رابط WiFi و BLE است.
• بلوتوث وب مجموعه ای از API ها است که در مرورگر کروم گوگل (و اپرا) پیاده سازی شده است و به یک صفحه وب اجازه می دهد مستقیماً با یک دستگاه BLE ارتباط برقرار کند.
• برنامه های پیشرفته وب اساساً صفحات وب هستند که مانند برنامه های معمولی عمل می کنند. اندروید و آیفون به گونه ای متفاوت با آنها کار می کنند و در رایانه های رومیزی متفاوت هستند ، بنابراین باید برای مطالعه جزئیات کمی مطالعه کنید.

مرحله 2: سخت افزار

قبل از اینکه بتوانیم سخت افزار را مونتاژ کنیم ، باید به یک نکته توجه کرد. دستگاه های حسگر uFire ISE با آدرس I2C یکسان هستند و ما از دو دستگاه استفاده می کنیم ، بنابراین یکی باید تغییر کند. برای این پروژه ، ما قصد داریم یکی از بردهای ISE را انتخاب کرده و از آن برای اندازه گیری ORP استفاده کنیم. در ادامه مراحل اینجا ، آدرس را به 0x3e تغییر دهید.

اکنون که آدرس تغییر کرده است ، کنار هم قرار دادن سخت افزار آسان است. همه دستگاه های حسگر از سیستم اتصال Qwiic استفاده می کنند ، بنابراین فقط همه چیز را به صورت زنجیره ای به هم وصل کنید. برای اتصال یکی از سنسورها به نانو 33 به سیم Qwiic به Male نیاز دارید. سیم ها یکدست و دارای کد رنگی هستند. رنگ مشکی را به GND نانو ، قرمز را به پین +3.3V یا +5V ، آبی را به پین SDA که A4 است و زرد را به پین SCL در A5 وصل کنید.

برای این پروژه ، انتظار می رود که اطلاعات دما از سنسور EC دریافت شود ، بنابراین مطمئن شوید که یک سنسور دما را به برد EC وصل کنید. همه تخته ها توانایی اندازه گیری دما را دارند. فراموش نکنید که پروب های EC ، pH و ORP را به سنسورهای مناسب وصل کنید. آنها به راحتی با اتصالات BNC متصل می شوند.

اگر محوطه ای دارید ، قرار دادن همه اینها در داخل ایده خوبی خواهد بود ، به ویژه با توجه به اینکه آب در این مورد دخیل است.

مرحله 3: نرم افزار

بخش نرم افزاری این بخش به دو بخش اصلی تقسیم می شود: سیستم عامل Nano 33 و صفحه وب.

جریان اصلی این است:

• صفحه وب از طریق BLE به نانو متصل می شود
• صفحه وب دستورات مبتنی بر متن را برای درخواست اطلاعات یا انجام اقدامات ارسال می کند
• نانو به این دستورات گوش می دهد ، آنها را اجرا می کند و اطلاعات را برمی گرداند
• صفحه وب پاسخ ها را دریافت می کند و بر این اساس UI را به روز می کند

این تنظیم به صفحه وب اجازه می دهد تا تمام عملکردهای مورد نیاز خود را انجام دهد ، مانند اندازه گیری یا کالیبراسیون سنسورها.

مرحله 4: خدمات و ویژگی های BLE

یکی از اولین چیزهایی که باید یاد بگیرید اصول نحوه عملکرد BLE است.

قیاس های زیادی وجود دارد ، بنابراین اجازه دهید یک کتاب انتخاب کنیم. یک سرویس یک کتاب است و یک ویژگی صفحات خواهد بود. در این "کتاب BLE" ، صفحات دارای چند ویژگی غیر کتابی هستند مانند اینکه بتوانید آنچه را که صفحه می گوید تغییر دهید و در صورت وقوع اعلان دریافت کنید.

یک دستگاه BLE می تواند هر چقدر که می خواهد خدمات ارائه دهد. برخی از پیش تعریف شده اند و به عنوان راهی برای استانداردسازی اطلاعات متداول مانند Tx Power یا قطع ارتباط ، به موارد خاص تر مانند انسولین یا پالس اکسیمتری عمل می کنند. همچنین می توانید یکی را درست کنید و هر کاری که می خواهید با آن انجام دهید. آنها در نرم افزار تعریف شده و با UUID مشخص می شوند. در اینجا می توانید UUID بسازید.

در سیستم عامل این دستگاه ، یک سرویس وجود دارد که به شرح زیر تعریف شده است:

BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408") ؛

و دو ویژگی:

BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a" ، BLENotify ، 20)؛

BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b" ، BLEWrite ، 20)؛

tx_Characteristic جایی است که دستگاهها اطلاعات را مانند اندازه گیری EC برای نمایش صفحه وب ارسال می کنند. rx_Characteristic جایی است که دستوراتی را برای اجرا از صفحه وب دریافت می کند.

این پروژه از کتابخانه ArduinoBLE استفاده می کند. اگر نگاه کنید ، می بینید که چند حالت متفاوت با اعلام یک ویژگی وجود دارد. این پروژه از BLEStringCharacteristic استفاده می کند زیرا ما با نوع String سروکار داریم و کار ساده تری است ، اما شما همچنین می توانید BLECharCharacteristic یا BLEByteCharacteristic را از بین تعداد انگشت شماری دیگر انتخاب کنید.

علاوه بر این ، برخی ویژگی ها وجود دارد که می توانید ویژگی را به آنها بدهید. tx_Characteristic BLENotify را به عنوان یک گزینه دارد. این بدان معناست که هنگام تغییر ارزش صفحه وب ، اعلانی دریافت می شود. rx_Characteristic دارای BLEWrite است که به صفحه وب ما اجازه می دهد آن را تغییر دهد. دیگران وجود دارند.

سپس کمی چسب کد برای اتصال همه این موارد به هم وجود دارد:

BLE.setLocalName ("uFire BLE") ؛

BLE.setAdvertisedService (uFire_Service) ؛ uFire_Service.addCharacteristic (tx_Characteristic) ؛ uFire_Service.addCharacteristic (rx_Characteristic) ؛ BLE.addService (uFire_Service) ؛ rx_Characteristic.setEventHandler (BLEWritten ، rxCallback) ؛ BLE.advertise ()؛

این کم و بیش توضیح می دهد ، اما اجازه دهید چند نکته را لمس کنیم.

rx_Characteristic.setEventHandler (BLEWritten ، rxCallback) ؛

جایی است که از مزایای اطلاع از ارزش در حال تغییر استفاده می کنید. خط به کلاس می گوید هنگام تغییر مقدار تابع rxCallback را اجرا کنید.

BLE.advertise ()؛

این چیزی است که کل کار را آغاز می کند یک دستگاه BLE به صورت دوره ای بسته کوچکی از اطلاعات را ارسال می کند و اعلام می کند که در دسترس است و برای اتصال به آن در دسترس است. بدون آن ، نامرئی خواهد بود.

مرحله 5: دستورات متنی

همانطور که قبلاً ذکر شد ، این دستگاه از طریق دستورات متنی ساده با صفحه وب صحبت می کند. اجرای همه چیز آسان است زیرا کار سخت قبلاً انجام شده است. سنسورهای uFire دارای کتابخانه مبتنی بر JSON و MsgPack برای ارسال و دریافت دستورات هستند. می توانید دستورات EC و ISE را در صفحات اسناد آنها بخوانید.

این پروژه برخلاف فرمت MsgPack که باینری است ، از JSON استفاده می کند زیرا کار با آن کمی راحت تر و قابل خواندن است.

در اینجا مثالی از نحوه اتصال همه اینها به هم آمده است:

• صفحه وب از دستگاه برای اندازه گیری EC با ارسال ec (یا به طور خاص نوشتن ec به rx_Characteristic feature) درخواست می کند.
• دستگاه فرمان را دریافت کرده و آن را اجرا می کند. سپس با نوشتن بر روی ویژگی tx_Characteristic یک پاسخ فرمت JSON از {"ec": 1.24} ارسال می کند.
• صفحه وب اطلاعات را دریافت کرده و نمایش می دهد

مرحله 6: صفحه وب

صفحه وب این پروژه از Vue.js برای قسمت جلویی استفاده می کند. نیازی به پشتیبان نیست علاوه بر این ، برای ساده تر نشان دادن موارد ، از هیچ سیستم ساختی استفاده نمی شود. به پوشه های معمول تقسیم می شود ، js برای javascript ، css برای CSS ، دارایی ها برای نمادها. قسمت html آن چیز خاصی نیست. از bulma.io برای یک ظاهر طراحی شده استفاده می کند و رابط کاربری را ایجاد می کند. در قسمت زیادی متوجه خواهید شد. این همه CSS و نمادها را اضافه می کند ، اما به طور خاص یک خط اضافه می کند.

این بارگذاری فایل manifest.json ما است که باعث می شود همه موارد PWA اتفاق بیفتد. برخی اطلاعات را اعلام می کند که به تلفن ما می گوید این صفحه وب را می توان به یک برنامه تبدیل کرد.

جاوا اسکریپت جایی است که بیشتر اتفاقات جالب در آن رخ می دهد. این برنامه به فایل ها تقسیم شده است ، app.js شامل اصول اولیه ایجاد یک صفحه وب Vue همراه با همه متغیرهای مربوط به UI و چند مورد دیگر است. ble.js موارد بلوتوث دارد.

مرحله 7: جاوا اسکریپت و وب بلوتوث

اول ، این فقط در Chrome و Opera کار می کند. ای کاش مرورگرهای دیگر از این پشتیبانی می کردند ، اما به هر دلیلی ، این کار را نمی کنند. نگاهی به app.js بیاندازید و همان UUID هایی را که در سیستم عامل خود استفاده می کردیم ، خواهید دید. یکی برای سرویس uFire و یکی برای ویژگی های tx و rx.

حالا اگر به ble.js نگاه کنید ، توابع connect () و disconnect () را مشاهده خواهید کرد.

تابع connect () دارای منطقی برای حفظ هماهنگی UI است ، اما بیشتر مواردی را برای ارسال و دریافت اطلاعات در مورد ویژگی ها تنظیم می کند.

هنگام برخورد با بلوتوث وب برخی از ویژگی های خاص وجود دارد. اتصال باید با نوعی تعامل فیزیکی کاربر ، مانند ضربه زدن روی دکمه ، آغاز شود. به عنوان مثال ، هنگام بارگیری صفحه وب ، نمی توانید بصورت برنامه ای متصل شوید.

کد شروع اتصال به شکل زیر است:

this.device = منتظر navigator.bluetooth.requestDevice ({

فیلترها: [{namePrefix: "uFire"}] ، اختیاری سرویس: [this.serviceUuid]}) ؛

بخش فیلترها: و اختیاری خدمات مورد نیاز است تا از مشاهده هر دستگاه BLE موجود در آنجا خودداری کنید. شما فکر می کنید فقط بخش فیلتر خوب است ، اما شما همچنین به قسمت optionalServices نیز نیاز دارید.

کد بالا گفتگوی اتصال را نشان می دهد. این بخشی از رابط Chrome است و قابل تغییر نیست. کاربر از لیست انتخاب می کند. حتی اگر تنها یک دستگاه وجود داشته باشد که برنامه به آن متصل شود ، به دلیل نگرانی های امنیتی ، کاربر همچنان باید از این گفتگوی انتخابی عبور کند.

بقیه کد تنظیم سرویس و ویژگی ها است. توجه داشته باشید که ما یک روال بازگشت به تماس ، مشابه تماس اعلان سیستم عامل را تنظیم کرده ایم:

service = منتظر server.getPrimaryService (this.serviceUuid)؛

feature = منتظر service.getCharacteristic (this.txUuid)؛ منتظر feature.startNotifications () باشید؛ karakteristik.addEventListener ("charactervaluechanged"، this.value_update)؛

this.value_update اکنون هر زمان که اطلاعات جدیدی در مورد ویژگی tx وجود داشته باشد فراخوانی می شود.

یکی از آخرین کارهایی که می کند این است که یک تایمر تنظیم کنید تا اطلاعات را هر 5 ثانیه به روز کند.

value_update () فقط یک تابع طولانی است که منتظر ورود اطلاعات جدید JSON است و UI را با آن به روز می کند.

ec.js ، ph.js و orp.js دارای بسیاری از توابع کوچک هستند که دستوراتی را برای بازیابی اطلاعات و کالیبراسیون دستگاه ها ارسال می کنند.

برای امتحان این کار ، باید به خاطر داشته باشید که برای استفاده از وب بلوتوث ، باید از طریق HTTPS سرویس داده شود. یکی از گزینه های متعدد برای سرور HTTPS محلی serv-https است. با بارگذاری سیستم عامل ، همه چیز متصل شده و صفحه وب در حال سرویس دهی ، باید بتوانید همه چیز را در حال کار مشاهده کنید.

مرحله 8: قسمت PWA

چند مرحله برای تبدیل صفحه وب به یک برنامه واقعی وجود دارد. برنامه های وب مترقی می توانند کارهای بسیار بیشتری از آنچه این پروژه برای آنها استفاده می کند ، انجام دهند.

• نصب صفحه وب
• پس از نصب ، دسترسی آفلاین امکان پذیر است
• شروع شد و به عنوان یک برنامه معمولی با نماد برنامه معمولی ظاهر می شود

برای شروع ، ما باید تعدادی فایل ایجاد کنیم. اولین فایل manifest.json است. تعدادی سایت وجود دارد که این کار را برای شما انجام می دهند ، App Manifest Generator ، یکی از آنها.

چند نکته برای درک:

• محدوده کاربرد مهم است. این صفحه وب را در ufire.co/uFire-BLE/ قرار دادم. این بدان معناست که دامنه برنامه من /uFire-BLE /است.
• URL شروع نیز مهم است. این مسیر به صفحه وب خاص شما با دامنه اصلی قبلاً فرض شده است. بنابراین چون این را در ufire.co/uFire-BLE/ قرار دادم ، نشانی وب شروع/uFire-BLE/نیز است.
• حالت نمایش نحوه ظاهر برنامه را تعیین می کند ، مستقل باعث می شود یک برنامه معمولی بدون هیچ دکمه یا رابط Chrome به نظر برسد.

در انتها یک فایل json خواهید داشت. باید در ریشه صفحه وب ، درست همراه index.html قرار گیرد.

مورد بعدی که به آن احتیاج دارید Service Worker است. دوباره ، آنها می توانند کارهای زیادی انجام دهند ، اما این پروژه فقط از ذخیره سازی برای دسترسی آفلاین به این برنامه استفاده می کند. اجرای کارکنان سرویس عمدتا بویلر است. این پروژه از مثال Google استفاده کرد و لیست فایل های ذخیره شده را تغییر داد. شما نمی توانید فایل های خارج از دامنه خود را ذخیره کنید.

به FavIcon Generator بروید و چند آیکون بسازید.

آخرین مورد این است که مقداری کد در تابع Vue mounted () اضافه کنید.

mounted: function () {if ('serviceWorker' in navigator) {navigator.serviceWorker.register ('service-karker.js')؛ }}

این کارگر را با مرورگر ثبت می کند.

شما می توانید بررسی کنید که همه چیز در حال کار است ، و اگر نه ، شاید دلیل آن را با استفاده از Lighthouse تشخیص دهید ، سایت را تجزیه و تحلیل کرده و همه چیز را به شما می گوید.

اگر همه چیز کار کرد ، وقتی به صفحه وب می روید ، Chrome از شما می پرسد که آیا می خواهید آن را با یک بنر بازشو نصب کنید. اگر از Chrome تلفن همراه استفاده می کنید ، می توانید آن را در عمل در ufire.co/uFire-BLE/ مشاهده کنید. اگر روی میز کار هستید ، می توانید یک آیتم منو برای نصب آن پیدا کنید.