ננו 33 IoT + EC/pH/ORP + WebAPK: 8 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

עקוב אחר מאת המחבר:

אודות: הוסף את היכולת למדוד pH, ORP, EC או מליחות לפרויקט Arduino או Raspberry Pi שלך. עוד על ufire »

מכשיר למדידת EC, pH, ORP וטמפרטורה. זה יכול לשמש לניטור בריכה או התקנה הידרופונית. הוא יתקשר באמצעות Bluetooth Low Energy ויציג את המידע בדף אינטרנט באמצעות Bluetooth Bluetooth. ולכיף, נהפוך את זה לאפליקציית Web Progressive שתוכל להתקין מהאינטרנט.

שלב 1: מה הם כל התנאים האלה?

EC/pH/ORP/טמפרטורה הן כמה מהמדידות הנפוצות ביותר לאיכות המים. מוליכות חשמלית (EC) משמשת בהידרופוניקה למדידת תמיסת חומרים מזינים, pH עד כמה המים חומציים/בסיסיים, ו- ORP משמש כדי לקבוע את יכולתם של המים לחטא את עצמם

• Bluetooth Low Energy הוא פרוטוקול אלחוטי לשליחת וקבלת מידע בקלות. לוח ה- Arduino המשמש בפרויקט זה הוא Nano 33 IoT ומגיע עם ממשקי WiFi ו- BLE.
• Bluetooth Bluetooth הוא קבוצה של ממשקי API המיושמים בדפדפן Chrome (ובאופרה) של Google המאפשרים לדף אינטרנט לתקשר ישירות עם מכשיר BLE.
• יישומי אינטרנט מתקדמים הם בעצם דפי אינטרנט המתנהלים כמו אפליקציות רגילות. אנדרואיד ואייפון מתמודדים איתם אחרת, והם שונים במחשבים שולחניים, כך שתצטרך לקרוא קצת לפרטים.

שלב 2: החומרה

לפני שנוכל להרכיב את החומרה, יש לדבר על דבר אחד. התקני חיישן uFire ISE מגיעים עם אותה כתובת I2C ואנחנו משתמשים בשניים, כך שיהיה צורך לשנות אחד. לפרויקט זה, אנו הולכים לבחור אחד מלוחות ISE ולהשתמש בו למדידת ORP. בצע את השלבים כאן, שנה את הכתובת ל- 0x3e.

כעת, לאחר שהכתובת משתנה, קל להרכיב את החומרה. כל התקני החיישנים משתמשים במערכת החיבור Qwiic אז פשוט חבר הכל יחד בשרשרת. תצטרך חוט אחד Qwiic to Male כדי לחבר את אחד החיישנים ל- Nano 33. החוטים עקביים ומקודדים בצבעים. חבר שחור ל- GND של ה- Nano, אדום לסיכה +3.3V או +5V, כחול לסיכת ה- SDA שהיא A4 וצהוב לסיכת SCL ב- A5.

עבור פרויקט זה, הוא יצפה שמידע הטמפרטורה יגיע מחיישן EC, לכן הקפד לחבר חיישן טמפרטורה ללוח ה- EC. בכל הלוחות יש את היכולת למדוד טמפרטורה. אל תשכח לצרף את חיישני EC, pH ו- ORP לחיישנים המתאימים. הם ניתנים לחיבור בקלות עם מחברי BNC.

אם יש לך מארז, זה יהיה רעיון טוב לשים את כל זה בפנים, במיוחד בהתחשב במים שיהיו מעורבים.

שלב 3: התוכנה

חלק התוכנה של זה מחולק לשני חלקים עיקריים: הקושחה ב- Nano 33 ודף האינטרנט.

הזרימה הבסיסית היא זו:

• דף האינטרנט מתחבר ל- Nano באמצעות BLE
• דף האינטרנט שולח פקודות מבוססות טקסט כדי לבקש מידע או לבצע פעולות
• הננו מקשיב לפקודות אלה, מבצע אותן ומחזיר מידע
• דף האינטרנט מקבל את התגובות ומעדכן את ממשק המשתמש בהתאם

התקנה זו מאפשרת לדף האינטרנט לבצע את כל הפונקציות הנדרשות שהיית מצפה להן, כמו לבצע מדידה או כיול החיישנים.

שלב 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 מכיוון שאנו נעסוק בסוג המחרוזת וזה פשוט יותר, אך תוכל גם לבחור 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 בדפי התיעוד שלהם.

הפרויקט הזה ישתמש ב- JSON מכיוון שהוא קצת יותר קל לעבודה וניתן לקריאה, בניגוד לפורמט MsgPack שהוא בינארי.

להלן דוגמה לאופן בו הכל מתחבר:

• דף האינטרנט מבקש מהמכשיר מדידת EC על ידי שליחת ec (או ליתר דיוק כתיבת ec למאפיין rx_Characteristic)
• המכשיר מקבל את הפקודה ומבצע אותה. לאחר מכן הוא שולח בחזרה תגובה בפורמט JSON של {"ec": 1.24} על ידי כתיבה למאפיין tx_Characteristic.
• דף האינטרנט מקבל את המידע ומציג אותו

שלב 6: דף האינטרנט

דף האינטרנט של פרויקט זה ישתמש ב- Vue.js לממשק הקדמי. אין צורך בתמיכת גב. בנוסף, כדי שהדברים יהיו קצת יותר פשוטים, אין להשתמש במערכת בנייה. הוא מחולק לתיקיות הרגילות, js עבור javascript, css עבור CSS, נכסים לסמלים. חלק ה- html של זה אינו מיוחד. הוא משתמש ב bulma.io לעיצוב ויוצר את ממשק המשתמש. תוכל להבחין בהרבה בקטע. זה מוסיף את כל ה- CSS והסמלים, אבל מוסיף שורה אחת במיוחד.

זה טוען את הקובץ manifest.json שלנו וזה מה שגורם לכל הדברים PWA לקרות. הוא מכריז על מידע שאומר לטלפון שלנו שניתן להפוך את דף האינטרנט הזה לאפליקציה.

Javascript הוא המקום בו מתרחשים רוב הדברים המעניינים. הוא מחולק לקבצים, app.js מכיל את היסודות של קבלת דף אינטרנט של Vue יחד עם כל המשתנים הקשורים לממשק המשתמש ועוד כמה דברים אחרים. ל- ble.js יש את הדברים של בלוטות '.

שלב 7: Javascript ו- Bluetooth Bluetooth

ראשית, זה עובד רק ב- Chrome ובאופרה. הלוואי שדפדפנים אחרים יתמכו בכך, אך מכל סיבה שהיא, הם אינם תומכים בכך. תסתכל על app.js ותראה את אותם UUID בהם השתמשנו בקושחה שלנו. אחד לשירות uFire ואחד לכל מאפייני tx ו- rx.

כעת, אם תסתכל ב- ble.js, תראה את הפונקציות connect () וניתוק ().

פונקציית החיבור () מכילה היגיון כלשהו כדי לשמור על ממשק המשתמש מסונכרן, אך היא בעיקר מגדירה דברים לשלוח ולקבל מידע על המאפיינים.

יש כמה ייחודיות בהתמודדות עם Bluetooth באינטרנט. החיבור חייב להיות יוזם על ידי איזושהי אינטראקציה פיזית של משתמשים, כמו הקשה על כפתור. אינך יכול להתחבר באופן תוכניתי כאשר דף האינטרנט נטען, למשל.

הקוד להתחלת חיבור נראה כך:

this.device = ממתין ל- navigator.bluetooth.requestDevice ({

מסננים: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});

יש צורך במקטע המסננים: ואופציות שירותים כדי להימנע מלראות כל מכשיר BLE בחוץ. היית חושב שרק קטע המסנן יהיה בסדר, אבל אתה צריך גם את החלק האופציונלי של שירותים.

הקוד לעיל יציג דו -שיח לחיבור. הוא חלק מממשק Chrome ואי אפשר לשנותו. המשתמש יבחר מתוך הרשימה. גם אם יש רק מכשיר אחד שהאפליקציה אי פעם הייתה מתחברת אליו, המשתמש עדיין צריך לעבור את דו -שיח הבחירה הזה, בשל בעיות אבטחה.

שאר הקוד הוא הגדרת השירות והמאפיינים. שימו לב כי הגדרנו שגרת שיחות חזרה, בדומה להחזרת ההתראה של הקושחה:

service = wait for server.getPrimaryService (this.serviceUuid);

מאפיין = ממתין לשירות. getCharacteristic (this.txUuid); ממתין ל- character.startNotifications (); character.addEventListener ("charactervaluechanged", this.value_update);

מעכשיו, זה יתקבל ל- this.value_update בכל פעם שיש מידע חדש על המאפיין tx.

אחד הדברים האחרונים שהוא עושה הוא להגדיר טיימר לעדכון המידע כל 5 שניות.

value_update () היא רק פונקציה ארוכה שמחכה למידע חדש של JSON ויעדכן את ממשק המשתמש איתו.

ec.js, ph.js ו- orp.js מכילים פונקציות קטנות רבות ששולחות את הפקודות לאחזור מידע וכיול המכשירים.

כדי לנסות זאת, עליך לזכור כי כדי להשתמש ב- Bluetooth באינטרנט, יש להגיש אותו באמצעות HTTPS. אחת האפשרויות הרבות לשרת HTTPS מקומי היא serve-https. כאשר הקושחה מועלה, כל מה שמחובר ודף האינטרנט מוצג, אתה אמור להיות מסוגל לראות הכל עובד.

שלב 8: חלק ה- PWA

ישנם מספר שלבים להפוך את דף האינטרנט לאפליקציה בפועל. יישומי אינטרנט מתקדמים יכולים לעשות הרבה יותר ממה שהפרויקט הזה משתמש בהם.

• התקנת דף אינטרנט
• לאחר ההתקנה, גישה לא מקוונת אפשרית
• התחיל ופועל כאפליקציה רגילה עם סמל אפליקציה למראה רגיל

כדי להתחיל, נצטרך ליצור חבורה של קבצים. הראשון הוא קובץ manifest.json. ישנם קומץ אתרים שיעשו זאת עבורך, מחולל מניפסט האפליקציות, להיות אחד מהם.

כמה דברים שכדאי להבין:

• היקף היישום חשוב. שמתי את דף האינטרנט הזה בכתובת ufire.co/uFire-BLE/. זה אומר שהיקף היישום שלי הוא /uFire-BLE /.
• כתובת אתר התחלה חשובה גם היא. זהו הנתיב לדף האינטרנט הספציפי שלך, כאשר הדומיין הבסיסי כבר מניח. אז מכיוון ששמתי את זה ב ufire.co/uFire-BLE/, כתובת האתר ההתחלתית היא/uFire-BLE/too.
• מצב התצוגה יקבע כיצד ייראה האפליקציה, עצמאי יגרום לה להיראות כאפליקציה רגילה ללא כל לחצני Chrome או ממשק.

בסופו של דבר תקבל קובץ json. יש להציב אותו בשורש דף האינטרנט, יחד עם index.html.

הדבר הבא שתצטרך הוא עובד שירות. שוב, הם יכולים לעשות הרבה, אבל הפרויקט הזה ישתמש רק במטמון בכדי לאפשר גישה לאפליקציה הזו במצב לא מקוון. יישום עובד השירות הוא ברובו פלטה. פרויקט זה השתמש בדוגמה של Google ושינה את רשימת הקבצים שיש לאחסן. אינך יכול לשמור קבצים מחוץ לדומיין שלך.

עבור אל מחולל FavIcon ועשה כמה סמלים.

הדבר האחרון הוא להוסיף קצת קוד בפונקציה Vue mounted ().

רכוב: function () {if ('serviceWorker' בנווט) {navigator.serviceWorker.register ('service-worker.js'); }}

פעולה זו תרשום את העובד בדפדפן.

אתה יכול לבדוק שהכל עובד, ואם לא, אולי תבין מדוע באמצעות Lighthouse הוא ינתח את האתר ויגיד לך כל מיני דברים.

אם הכל עבד, כשאתה נכנס לדף האינטרנט, Chrome ישאל אם ברצונך להתקין אותו עם באנר מוקפץ. אתה יכול לראות אותו בפעולה בכתובת ufire.co/uFire-BLE/ אם אתה משתמש ב- Chrome לנייד. אם אתה על שולחן עבודה, תוכל למצוא פריט לתפריט להתקנתו.