Nano 33 IoT + EC/pH/ORP + WebAPK: 8 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:35

Ακολουθήστε περισσότερα από τον συγγραφέα:

Σχετικά: Προσθέστε τη δυνατότητα μέτρησης pH, ORP, EC ή αλατότητας στο έργο σας Arduino ή Raspberry Pi. Περισσότερα για το ufire »

Συσκευή μέτρησης EC, pH, ORP και θερμοκρασίας. Θα μπορούσε να χρησιμοποιηθεί για την παρακολούθηση μιας πισίνας ή υδροπονικής εγκατάστασης. Θα επικοινωνεί μέσω Bluetooth Low Energy και θα εμφανίζει τις πληροφορίες σε μια ιστοσελίδα χρησιμοποιώντας το Web Bluetooth. Και για διασκέδαση, θα το μετατρέψουμε σε Progressive Web App που μπορείτε να εγκαταστήσετε από τον ιστό.

Βήμα 1: Ποιοι είναι όλοι αυτοί οι όροι;

EC/pH/ORP/θερμοκρασία είναι μερικές από τις πιο συνηθισμένες μετρήσεις ποιότητας νερού. Η ηλεκτρική αγωγιμότητα (EC) χρησιμοποιείται στην υδροπονία για τη μέτρηση του θρεπτικού διαλύματος, το pH για το πόσο όξινο/βασικό είναι το νερό και το ORP χρησιμοποιείται για να καθορίσει την ικανότητα του νερού να απολυμαίνεται

• Το Bluetooth Low Energy είναι ένα ασύρματο πρωτόκολλο για την εύκολη αποστολή και λήψη πληροφοριών. Ο πίνακας Arduino που χρησιμοποιείται σε αυτό το έργο είναι το Nano 33 IoT και έρχεται με διασυνδέσεις WiFi και BLE.
• Το Web Bluetooth είναι ένα σύνολο API που υλοποιούνται στο πρόγραμμα περιήγησης Chrome (και Opera) της Google που επιτρέπουν σε μια ιστοσελίδα να επικοινωνεί απευθείας με μια συσκευή BLE.
• Οι προοδευτικές εφαρμογές Ιστού είναι βασικά ιστοσελίδες που λειτουργούν σαν κανονικές εφαρμογές. Το Android και το iPhone τα χειρίζονται διαφορετικά και είναι διαφορετικά σε επιτραπέζιους υπολογιστές, οπότε θα χρειαστεί να διαβάσετε λίγο για συγκεκριμένες λεπτομέρειες.

Βήμα 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
• Η ιστοσελίδα στέλνει εντολές βασισμένες σε κείμενο για να ζητήσετε πληροφορίες ή να προβείτε σε ενέργειες
• Το Nano ακούει αυτές τις εντολές, τις εκτελεί και επιστρέφει πληροφορίες
• Η ιστοσελίδα λαμβάνει τις απαντήσεις και ενημερώνει το περιβάλλον χρήστη ανάλογα

Αυτή η ρύθμιση επιτρέπει στην ιστοσελίδα να εκτελεί όλες τις απαιτούμενες λειτουργίες που θα περιμένατε, όπως να κάνετε μια μέτρηση ή να βαθμονομήσετε τους αισθητήρες.

Βήμα 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 στις σελίδες τεκμηρίωσής τους.

Αυτό το έργο θα χρησιμοποιήσει JSON επειδή είναι λίγο πιο εύκολο να εργαστεί και να διαβαστεί, σε αντίθεση με τη μορφή MsgPack που είναι δυαδική.

Ακολουθεί ένα παράδειγμα για το πώς συνδέονται όλα μεταξύ τους:

• Η ιστοσελίδα ζητά από τη συσκευή μια μέτρηση EC στέλνοντας ec (ή πιο συγκεκριμένα γράφοντας ec στο χαρακτηριστικό rx_Characteristic)
• Η συσκευή λαμβάνει την εντολή και την εκτελεί. Στη συνέχεια, στέλνει πίσω μια απόκριση μορφοποιημένη με JSON του {"ec": 1.24} γράφοντας στο tx_Characteristic χαρακτηριστικό.
• Η ιστοσελίδα λαμβάνει τις πληροφορίες και τις εμφανίζει

Βήμα 6: Η ιστοσελίδα

Η ιστοσελίδα για αυτό το έργο θα χρησιμοποιεί το Vue.js για το front-end. Δεν απαιτείται backend. Επιπλέον, για να είναι τα πράγματα λίγο πιο απλά, δεν χρησιμοποιείται σύστημα κατασκευής. Διαχωρίζεται στους συνήθεις φακέλους, js για javascript, css για CSS, στοιχεία για εικονίδια. Το html τμήμα του δεν είναι τίποτα το ιδιαίτερο. Χρησιμοποιεί το bulma.io για στυλ και δημιουργεί τη διεπαφή χρήστη. Θα παρατηρήσετε πολλά στην ενότητα. Προσθέτει όλα τα css και τα εικονίδια, αλλά προσθέτει και μια γραμμή συγκεκριμένα.

Αυτό φορτώνει το αρχείο manifest.json που είναι αυτό που κάνει όλα τα πράγματα PWA να συμβούν. Δηλώνει ορισμένες πληροφορίες που λένε στο τηλέφωνό μας ότι αυτή η ιστοσελίδα μπορεί να μετατραπεί σε εφαρμογή.

Το javascript είναι εκεί όπου συμβαίνουν τα περισσότερα ενδιαφέροντα πράγματα. Χωρίζεται σε αρχεία, το app.js περιέχει τα βασικά στοιχεία για τη δημιουργία μιας ιστοσελίδας Vue μαζί με όλες τις μεταβλητές που σχετίζονται με το περιβάλλον χρήστη και μερικά άλλα πράγματα. Το ble.js έχει τα στοιχεία bluetooth.

Βήμα 7: Javascript και Bluetooth Web

Πρώτον, αυτό λειτουργεί μόνο στο Chrome και την Opera. Μακάρι να το υποστηρίξουν άλλα προγράμματα περιήγησης, αλλά για οποιονδήποτε λόγο, δεν το κάνουν. Ρίξτε μια ματιά στο app.js και θα δείτε τα ίδια UUID που χρησιμοποιήσαμε στο υλικολογισμικό μας. Ένα για την υπηρεσία uFire και ένα για τα χαρακτηριστικά tx και rx.

Τώρα, αν κοιτάξετε στο ble.js, θα δείτε τις λειτουργίες σύνδεσης () και αποσύνδεσης ().

Η λειτουργία σύνδεσης () περιέχει κάποια λογική για να διατηρείται το UI σε συγχρονισμό, αλλά κυρίως ρυθμίζει τα πράγματα για την αποστολή και λήψη πληροφοριών σχετικά με τα χαρακτηριστικά.

Υπάρχουν κάποιες ιδιαιτερότητες όταν ασχολείστε με το Bluetooth Web. Η σύνδεση πρέπει να ξεκινήσει από κάποιο είδος φυσικής αλληλεπίδρασης χρήστη, όπως το πάτημα ενός κουμπιού. Δεν μπορείτε να συνδεθείτε προγραμματικά όταν φορτώνεται η ιστοσελίδα, για παράδειγμα.

Ο κώδικας για την έναρξη μιας σύνδεσης μοιάζει με αυτόν:

this.device = αναμονή navigator.bluetooth.requestDevice ({

φίλτρα: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});

Η ενότητα φίλτρα: και η προαιρετική υπηρεσία απαιτούνται για να αποφύγετε να δείτε κάθε μεμονωμένη συσκευή BLE εκεί έξω. Θα νομίζατε ότι μόνο η ενότητα φίλτρου θα ήταν εντάξει, αλλά χρειάζεστε επίσης το τμήμα προαιρετικών υπηρεσιών.

Ο παραπάνω κώδικας θα εμφανίσει ένα παράθυρο διαλόγου σύνδεσης. Είναι μέρος της διεπαφής Chrome και δεν μπορεί να αλλάξει. Ο χρήστης θα επιλέξει από τη λίστα. Ακόμα κι αν υπάρχει μόνο μία συσκευή στην οποία θα συνδεθεί ποτέ η εφαρμογή, ο χρήστης εξακολουθεί να χρειάζεται να περάσει από αυτό το παράθυρο διαλόγου επιλογής, λόγω προβλημάτων ασφάλειας.

Ο υπόλοιπος κώδικας ρυθμίζει την υπηρεσία και τα χαρακτηριστικά. Λάβετε υπόψη ότι δημιουργήσαμε μια ρουτίνα επανάκλησης, παρόμοια με την επανάκληση ειδοποιήσεων του υλικολογισμικού:

service = αναμονή server.getPrimaryService (this.serviceUuid);

χαρακτηριστικό = αναμονή service.getCharacteristic (this.txUuid); αναμένουμε το χαρακτηριστικό.startNotifications (); χαρακτηριστικό.addEventListener ("χαρακτηριστική τιμή αλλαγής", this.value_update);

this.value_update θα καλείται τώρα κάθε φορά που υπάρχουν νέες πληροφορίες για το χαρακτηριστικό tx.

Ένα από τα τελευταία πράγματα που κάνει είναι να ορίσετε ένα χρονόμετρο για την ενημέρωση των πληροφοριών κάθε 5 δευτερόλεπτα.

Το value_update () είναι απλώς μια μακρά συνάρτηση που περιμένει την είσοδο νέων πληροφοριών JSON και ενημερώνει το περιβάλλον χρήστη με αυτό.

Τα ec.js, ph.js και orp.js περιέχουν πολλές μικρές λειτουργίες που στέλνουν τις εντολές για την ανάκτηση πληροφοριών και τη βαθμονόμηση των συσκευών.

Για να το δοκιμάσετε, θα πρέπει να έχετε κατά νου ότι για να χρησιμοποιήσετε το Bluetooth Web, πρέπει να εξυπηρετείται μέσω HTTPS. Μία από τις πολλές επιλογές για έναν τοπικό διακομιστή HTTPS είναι η υπηρεσία-https. Με το υλικολογισμικό που μεταφορτώθηκε, τα πάντα συνδεδεμένα και την ιστοσελίδα που προβάλλεται, θα πρέπει να μπορείτε να δείτε τα πάντα να λειτουργούν.

Βήμα 8: Το μέρος PWA

Υπάρχουν μερικά βήματα για να μετατρέψετε την ιστοσελίδα σε πραγματική εφαρμογή. Οι προοδευτικές διαδικτυακές εφαρμογές μπορούν να κάνουν πολλά περισσότερα από όσα χρησιμοποιεί αυτό το έργο.

• Εγκατάσταση ιστοσελίδας
• Μόλις εγκατασταθεί, είναι δυνατή η πρόσβαση εκτός σύνδεσης
• Ξεκίνησε και εκτελείται ως κανονική εφαρμογή με εικονίδιο εφαρμογής κανονικής εμφάνισης

Για να ξεκινήσουμε, θα χρειαστεί να δημιουργήσουμε ένα σωρό αρχεία. Το πρώτο είναι ένα αρχείο manifest.json. Υπάρχουν μια χούφτα ιστότοποι που θα το κάνουν αυτό για εσάς, το App Manifest Generator, ένας από αυτούς.

Δυο πράγματα να καταλάβετε:

• Το πεδίο εφαρμογής είναι σημαντικό. Βάζω αυτήν την ιστοσελίδα στη διεύθυνση ufire.co/uFire-BLE/. Αυτό σημαίνει ότι το πεδίο εφαρμογής μου είναι /uFire-BLE /.
• Το URL έναρξης είναι επίσης σημαντικό. Είναι η διαδρομή προς τη συγκεκριμένη ιστοσελίδα σας με τον βασικό τομέα να έχει ήδη υποτεθεί. Επειδή λοιπόν το έβαλα στο ufire.co/uFire-BLE/, το URL έναρξης είναι/uFire-BLE/επίσης.
• Η λειτουργία εμφάνισης θα καθορίσει την εμφάνιση της εφαρμογής, η Αυτόνομη θα την κάνει να μοιάζει με μια κανονική εφαρμογή χωρίς κουμπιά ή διεπαφή Chrome.

Θα καταλήξετε με ένα αρχείο json. Πρέπει να τοποθετηθεί στη ρίζα της ιστοσελίδας, ακριβώς μαζί με το index.html.

Το επόμενο πράγμα που θα χρειαστείτε είναι ένας Service Worker. Και πάλι, μπορούν να κάνουν πολλά, αλλά αυτό το έργο θα χρησιμοποιεί μόνο την προσωρινή μνήμη για να επιτρέψει την πρόσβαση σε αυτήν την εφαρμογή εκτός σύνδεσης. Η υλοποίηση των εργαζομένων υπηρεσιών είναι ως επί το πλείστον λέβητας. Αυτό το έργο χρησιμοποίησε το παράδειγμα της Google και άλλαξε τη λίστα των αρχείων που πρέπει να αποθηκευτούν. Δεν μπορείτε να αποθηκεύσετε προσωρινά αρχεία εκτός του τομέα σας.

Προχωρήστε στο FavIcon Generator και δημιουργήστε μερικά εικονίδια.

Το τελευταίο πράγμα είναι να προσθέσετε κάποιο κώδικα στη λειτουργία Vue mounted ().

mounted: function () {if ('serviceWorker' στο navigator) {navigator.serviceWorker.register ('service-karker.js'); }}

Αυτό θα καταχωρήσει τον εργαζόμενο στο πρόγραμμα περιήγησης.

Μπορείτε να ελέγξετε ότι όλα λειτουργούν και αν όχι, ίσως καταλάβετε γιατί χρησιμοποιώντας το Lighthouse, θα αναλύσει τον ιστότοπο και θα σας πει όλα τα είδη.

Εάν όλα λειτουργούσαν, όταν μεταβείτε στην ιστοσελίδα, το Chrome θα σας ρωτήσει εάν θέλετε να το εγκαταστήσετε με ένα αναδυόμενο banner. Μπορείτε να το δείτε εν ενεργεία στη διεύθυνση ufire.co/uFire-BLE/ εάν χρησιμοποιείτε κινητό Chrome. Εάν βρίσκεστε σε επιφάνεια εργασίας, μπορείτε να βρείτε ένα στοιχείο μενού για να το εγκαταστήσετε.