Wifi ελεγχόμενη 12v Led Strip χρησιμοποιώντας Raspberry Pi With Tasker, Ifttt Integration .: 15 Steps (with Pictures)

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

Σε αυτό το έργο θα σας δείξω πώς να ελέγχετε μια απλή 12v αναλογική λωρίδα led μέσω wifi χρησιμοποιώντας ένα βατόμουρο pi.

Για αυτό το έργο θα χρειαστείτε:

• 1x Raspberry Pi (χρησιμοποιώ Raspberry Pi 1 Model B+)
• 1x RGB 12v Led Strip [Ebay Australia]
• 3x IRFZ44N N-Channel Mosfet's [Ebay Australia]
• 1x Προσαρμογέας θηλυκού τροφοδοτικού DC [Ebay Australia]
• Μερικά καλώδια
• Οθόνη, πληκτρολόγιο (μόνο για εγκατάσταση)

Βήμα 1: Εγκαταστήστε το Raspbian OS χρησιμοποιώντας Windows

Για να εγκαταστήσετε το Raspbian με παράθυρα θα χρειαστείτε:

• Win32 Disk Imager: [Λήψη]
• Raspbian OS Lite: [Zip], [Torrent]

** ΣΗΜΑΝΤΙΚΟ αν γίνει λάθος μπορεί να χάσετε όλα τα δεδομένα σας, Παρακαλώ δημιουργήστε αντίγραφα ασφαλείας των δεδομένων σας πριν συνεχίσετε **

1. Συνδέστε την κάρτα SD σας σε έναν αναγνώστη καρτών και ανοίξτε τον υπολογιστή μου
2. Αναζητήστε το γράμμα μονάδας δίσκου
3. Κάντε δεξί κλικ στο Win32DiskImager και κάντε κλικ στην επιλογή "Εκτέλεση ως διαχειριστής"
4. Στη συνέχεια, κάντε κλικ στο μικρό μπλε φάκελο και περιηγηθείτε στην εικόνα σας του RaspbianOS
5. Κάντε επίσης κλικ στο αναπτυσσόμενο πλαίσιο στην ενότητα Συσκευή και αλλάξτε το στο γράμμα μονάδας δίσκου της κάρτας SD
6. Στη συνέχεια, κάντε κλικ στο "Γράψτε"
7. Θα ανοίξει ένα παράθυρο διαλόγου ΠΡΙ Πιέζοντας Ναι, επαληθεύστε ότι η συσκευή προορισμού είναι σωστή
8. Στη συνέχεια, αφαιρέστε την κάρτα SD και τοποθετήστε την στο pi

Βήμα 2: Εγκαταστήστε το Raspbian OS χρησιμοποιώντας Mac OS X

Για να εγκαταστήσετε το Raspbian με Mac θα χρειαστείτε:

• ApplePi-Baker [Λήψη]
• Raspbian OS Lite: [Zip], [Torrent]

** ΣΗΜΑΝΤΙΚΟ αν γίνει λάθος μπορεί να χάσετε όλα τα δεδομένα σας, Παρακαλώ δημιουργήστε αντίγραφα ασφαλείας των δεδομένων σας πριν συνεχίσετε **

1. Ανοίξτε το Disk Utility και αναζητήστε την κάρτα SD στην αριστερή πλευρά και, στη συνέχεια, κάντε κλικ σε αυτήν
2. Αναζητήστε "Συσκευή" στο κάτω μέρος του παραθύρου θα δείτε κάτι σαν diskXsX όπου x είναι ένας αριθμός
3. Θυμηθείτε τον αριθμό "Συσκευή" και ανοίξτε το ApplePi-Baker
4. Θα σας ζητήσει κωδικό πρόσβασης επειδή πρέπει να μορφοποιήσει την κάρτα SD σας
5. Κάντε κλικ στον αριθμό "Συσκευή" που είναι After / dev / στην αριστερή πλευρά
6. Κάντε κλικ στην επιλογή "Επαναφορά-δημιουργία αντιγράφων ασφαλείας" Περιηγηθείτε στην εικόνα σας του RaspbianOS.
7. Θα αρχίσει να διαγράφει την κάρτα SD και να εγκαθιστά το Raspbian σε αυτήν
8. Όταν ολοκληρωθεί, θα εμφανιστεί ένα πλαίσιο ειδοποίησης που σας λέει ότι μπορείτε να αφαιρέσετε την κάρτα SD, να την αφαιρέσετε και να την τοποθετήσετε στο pi σας.

Βήμα 3: Ρύθμιση του Pi

Πριν ενεργοποιήσετε το pi θα χρειαστεί να συνδέσετε μια οθόνη HDMI, πληκτρολόγιο και ένα καλώδιο ethernet ή usb wifi (θα το ρυθμίσουμε στο επόμενο βήμα).

Ενεργοποιήστε το pi, Θα δείτε ένα σωρό κείμενο να γεμίζει την οθόνη, Αυτό είναι φυσιολογικό και αποτελεί μέρος της εκκίνησης του πυρήνα linux. Περιμένετε λίγο μέχρι να δείτε

Σύνδεση βατόμουρου:

Το όνομα χρήστη σας είναι pi και ο κωδικός πρόσβασης είναι βατόμουρο (δεν θα δείτε τίποτα να πληκτρολογείτε στην οθόνη αλλά εξακολουθεί να εισάγεται)

Στη συνέχεια, όταν συνδεθείτε θα δείτε:

pi@raspberrypi: ~ $

Στη συνέχεια, πρέπει να εισαγάγετε:

sudo raspi-config

Στη συνέχεια, η οθόνη σας θα γεμίσει με μια μπλε οθόνη με επιλογές σε ένα γκρι πλαίσιο στο κέντρο,

1. Χρησιμοποιώντας τα πλήκτρα πάνω και κάτω, επισημάνετε και πατήστε enter στην επιλογή "Expand Filesystem" μετά από μερικά δευτερόλεπτα θα μεταφερθείτε σε μια ειδοποίηση που λέει "το σύστημα αρχείων root έχει αλλάξει μέγεθος", κάντε κλικ στο Enter
2. Στη συνέχεια, πατήστε το κάτω βέλος και μεταβείτε στις Επιλογές εκκίνησης και κάντε κλικ στο enter, στη συνέχεια κάντε κλικ στο enter όταν είναι επιλεγμένο το "Desktop / CLI", έπειτα επισημάνετε το "Console Autologin" και κάντε κλικ στο enter
3. Στη συνέχεια, επιλέξτε Σύνθετες επιλογές και κάντε κλικ στο Enter
4. Στη συνέχεια, μετακινηθείτε προς τα κάτω στο ssh και κάντε κλικ στο enter και, στη συνέχεια, επιλέξτε ναι
5. στη συνέχεια, πατήστε το δεξί βέλος έως ότου επισημανθεί το πίσω μέρος και πατήστε enter
6. Στη συνέχεια, πηγαίνετε ξανά στο κάτω μέρος και κάντε κλικ στο τέλος και πείτε ναι για επανεκκίνηση

Μετά την επανεκκίνηση εάν είστε συνδεδεμένοι μέσω ethernet, πρέπει να εισαγάγετε αυτήν την εντολή για να βρείτε τη διεύθυνση IP σας, ώστε να μπορέσουμε να ssh στο pi

Εύρεση ip:

όνομα κεντρικού υπολογιστή -I

Βήμα 4: Ρύθμιση Wifi

Για να ρυθμίσετε το wifi στο pi πρέπει να επεξεργαστείτε ένα αρχείο

1. εισάγετε τη γραμμή εντολών

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

2. Μεταβείτε στο τέλος του αρχείου και εισαγάγετε

δίκτυο = {

ssid = "Your_Wifi_Name" psk = "Your_wifi_password"}

3. Στη συνέχεια, επανεκκινήστε το pi σας με

sudo επανεκκίνηση

Μετά την επανεκκίνηση του pi σας, λάβετε τη διεύθυνση IP πληκτρολογώντας

όνομα κεντρικού υπολογιστή -I

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

Βήμα 5: Απομακρυσμένη σύνδεση στο Pi σας χρησιμοποιώντας Windows

Τώρα που έχουμε το pi συνδεδεμένο στο διαδίκτυο, μπορούμε να αφαιρέσουμε το ποντίκι και την οθόνη του πληκτρολογίου και να το συνδέσουμε από απόσταση χρησιμοποιώντας το "ssh"

Για να ssh στο pi με τα παράθυρα πρέπει να κάνετε λήψη

στόκος: [Λήψη]

1. Ανοίξτε στόκο, στο πλαίσιο διεύθυνσης IP εισαγάγετε το raspberry pi ip και στη συνέχεια πατήστε το άνοιγμα
2. θα λάβετε ένα παράθυρο διαλόγου που μοιάζει με την εικόνα 2 πατήστε ναι
3. τότε θα δείτε ένα νέο παράθυρο διαλόγου που λέει "login as" enter "pi"
4. τότε θα ζητήσει κωδικό πρόσβασης πληκτρολογήστε "βατόμουρο"

Είστε τώρα συνδεδεμένοι με το pi over ssh

Βήμα 6: Συνδεθείτε απομακρυσμένα στο Pi σας χρησιμοποιώντας Mac

Τώρα που έχουμε το pi συνδεδεμένο στο διαδίκτυο, μπορούμε να αφαιρέσουμε το πληκτρολόγιο και το ποντίκι και να το συνδέσουμε από απόσταση χρησιμοποιώντας το "ssh"

1. Ανοίξτε το "Τερματικό"

2. Πληκτρολογήστε

ssh pi@IP_ADDRESS

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

4. Στη συνέχεια, όταν προωθηθείτε εισάγετε τον κωδικό raspberry pi που είναι "Raspberry"

Είστε τώρα συνδεδεμένοι με το pi over ssh

Βήμα 7: Εγκατάσταση του Λογισμικού

Καθώς τώρα έχουμε απομακρυσμένη πρόσβαση στο pi, πρέπει να εγκαταστήσουμε κάποιο λογισμικό για τον έλεγχο της λωρίδας led

Θα χρειαστεί να εγκαταστήσουμε

• pigpio (Αυτό μετατρέπει όλες τις καρφίτσες GPIO από ψηφιακές σε PWM)
• φιάλη (σενάριο από τον διακομιστή που συνομιλεί με τον pigpio και τον διακομιστή ιστού)
• apache2 (διακομιστής ιστοσελίδων)

Εγκαταστήστε pigpio

1. Πρώτα πρέπει να κατεβάσουμε έναν φάκελο zip που περιέχει το μη μεταγλωττισμένο λογισμικό pigpio, χρησιμοποιώντας αυτήν την εντολή

wget

2. Στη συνέχεια πρέπει να αποσυμπιέσουμε και να μπούμε στον κατάλογο

αποσυμπίεση pigpio.zip && cd PIGPIO

3. τώρα που βρισκόμαστε στον κατάλογο πρέπει να μεταγλωττίσουμε και να εγκαταστήσουμε το λογισμικό

make -j4 && sudo make install

4. Τώρα ανοίξτε το rc.local ώστε να μπορούμε να πούμε στο pi να τρέξει χοίρειος όταν ξεκινά

sudo nano /etc/rc.local

τότε λίγο πριν την είσοδο στη γραμμή εξόδου

sudo pigpiod

Έχετε εγκαταστήσει τώρα το λογισμικό pigpio

Τοποθετήστε τη φιάλη

Πρώτα πρέπει να ενημερώσουμε τη λίστα του λογισμικού για να το κάνουμε αυτό

sudo apt update && sudo apt upgrade -y

στη συνέχεια, εγκαταστήστε το pip

sudo apt-get install python-pip

τώρα μπορούμε να εγκαταστήσουμε φιάλη

φιάλη εγκατάστασης sudo pip

Εγκαταστήστε το Apache2

sudo apt -get install apache2 -y

sudo apt-get install libapache2-mod-wsgi -y

Εγκαταστήστε το git

sudo apt install git -y

Αφού τελειώσουν όλα με την εγκατάσταση τερματισμού, το pi με

sudo κλείσιμο τώρα

Βήμα 8: Καλωδίωση ισχύος

Πρώτα πρέπει να συνδέσουμε το βύσμα τροφοδοσίας στη σανίδα ψωμιού

1. Συνδέστε το μαύρο καλώδιο στον αρνητικό σύνδεσμο στην υποδοχή τροφοδοσίας
2. Συνδέστε το κόκκινο καλώδιο στη θετική υποδοχή στην υποδοχή τροφοδοσίας
3. Συνδέστε το άλλο άκρο του Κόκκινου σύρματος στη θετική πλευρά της σανίδας
4. Συνδέστε το άλλο άκρο του μαύρου σύρματος στη θετική πλευρά του ψωμιού
5. Στη συνέχεια, συνδέστε τον πείρο γείωσης από το pi (όπως φαίνεται στην εικόνα) με τον αρνητικό πείρο στη σανίδα ψωμιού

Τώρα πρέπει να συνδέσουμε το πιο ευέλικτο.

Βήμα 9: Καλωδίωση των Mosfets και σύνδεση του Pi

Το Mosfet σας επιτρέπει να ελέγχετε πόση ισχύς μπορεί να ταξιδέψει στα φώτα led, θα χρειαστούμε τρία mosfets όπως πρέπει να ελέγχουμε ξεχωριστά τα κόκκινα, πράσινα και μπλε φώτα.

Το mosfet έχει τρεις ακίδες, στα αριστερά έχει τον πείρο "Gate" που θα συνδεθεί με το pi για να ελέγξει πόση ισχύς μπορεί να ρέει στα φωτιστικά led

Ο κεντρικός πείρος ονομάζεται "Αποστράγγιση", ο οποίος πηγαίνει στα φώτα led και παρέχει την τάση που επιτρέπει η πύλη να περάσει

και η καρφίτσα στα δεξιά είναι η καρφίτσα "Πηγή". Αυτή η καρφίτσα πηγαίνει στο έδαφος στο breadboard.

Σύνδεση του Red Led

1. Βάλτε ένα μοσφέτα στο breadboard
2. συνδέστε ένα μαύρο καλώδιο από το GND στο breadboard στην πηγή (δεξιά καρφίτσα)
3. στη συνέχεια, συνδέστε ένα κόκκινο σύρμα από τον κεντρικό πείρο στο mosfet με τον κόκκινο πείρο στη λωρίδα led
4. στη συνέχεια, συνδέστε ένα κόκκινο καλώδιο από τον αριστερό πείρο στο GPIO 17 στο pi

Σύνδεση του Green Led

1. Βάλτε το 2ο mosfet στη σανίδα ψωμιού
2. τότε ακριβώς όπως πριν συνδέστε ένα μαύρο καλώδιο από το GND στο breadboard στην πηγή (δεξιά καρφίτσα)
3. στη συνέχεια, συνδέστε ένα πράσινο σύρμα από τον κεντρικό πείρο στο mosfet με τον πράσινο πείρο στη λωρίδα led.
4. στη συνέχεια, συνδέστε ένα πράσινο καλώδιο από τον αριστερό πείρο στο GPIO 22 στο pi

Συνδέοντας το Blue Led

1. Βάλτε το τελευταίο mosfet στο breadboard
2. συνδέστε ένα άλλο μαύρο καλώδιο από το GND στο breadboard στην πηγή (δεξιά καρφίτσα)
3. στη συνέχεια, συνδέστε ένα μπλε σύρμα από τον κεντρικό πείρο στο mosfet με το μπλε πείρο στη λωρίδα led.
4. στη συνέχεια, συνδέστε ένα μπλε σύρμα από την αριστερή ακίδα στο GPIO 24 στο pi

Στη συνέχεια, θα έχετε έναν ακόμη πείρο στη λωρίδα led που θα είναι λευκό ή μαύρο, απλώς συνδέστε ένα καλώδιο από τη θετική καρφίτσα στο breadboard σε αυτόν τον επιπλέον πείρο στη λωρίδα led

Τώρα που τελειώσαμε, μπορούμε να αρχίσουμε να το δοκιμάζουμε.

Βήμα 10: Λήψη και δοκιμή της λωρίδας Led

Για λήψη του πηγαίου κώδικα για τον έλεγχο της λωρίδας Led

git clone https://github.com/DavidMontesin/Raspberry-PI-Wifi-Led-Strip.git && cd Raspberry-PI-Wifi-Led-Strip/

Για να δοκιμάσετε τη λωρίδα led εκτελέστε το αρχείο test.py.

python Test.py

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

πώς λειτουργεί αυτό το σενάριο;

αν ανοίξετε το σενάριο python ίσως αναρωτηθείτε πώς λειτουργεί, στην πρώτη γραμμή θα δείτε:

χρόνο εισαγωγής

αυτή η μικρή βιβλιοθήκη μας επιτρέπει να διακόψουμε το σενάριο, ώστε να μπορούμε να κρατάμε τα φώτα πιο γρήγορα αναμμένα

εισαγωγή χοίρου

αυτή η βιβλιοθήκη μας επιτρέπει να επικοινωνούμε με τη λωρίδα led

pi = pigpio.pi ()

ρυθμίστε μια μεταβλητή ώστε να μπορούμε να χρησιμοποιήσουμε pi.set_pw… insted of pigpio.pi (). set_pw…

RedPin = 17

GreenPin = 22

BluePin = 24

Αυτές είναι απλώς μεταβλητές που μας επιτρέπουν να πούμε στο σενάριο σε τι συνδέονται τα led

εκτύπωση ("tesing for red")

αυτό απλά θα εκτυπώσει κείμενο στη γραμμή εντολών

pi.set_PWM_dutycycle (RedPin, 255)

Αυτή η εντολή είναι μέρος του libber pigpio και λέει να ορίσετε το "RedPin" το οποίο αναζητά τον αριθμό που ορίσαμε πριν και ορίζει τη φωτεινότητά του στο "255" που είναι το μέγιστο

ώρα. ύπνος (2)

Αυτό είναι μέρος της βιβλιοθήκης χρόνου και θα σταματήσει απλώς το σενάριο για 2 δευτερόλεπτα

Αυτή η εύκαμπτη εντολή θα επαναληφθεί για τα άλλα led έως ότου

pi.stop ()

που θα σταματήσει να μιλάει στη λωρίδα led και θα σβήνει όλα τα χρώματα.

Βήμα 11: Προγραμματισμός του Script Side Script

** Πριν ξεκινήσετε, σας συνιστώ να διαβάσετε σχετικά με τον πύθωνα και τη φιάλη:

Ακολουθούν ορισμένοι οδηγοί:

www.pythonforbeginners.com

docs.python-guide.org/en/latest/intro/learn…

flask.pocoo.org

Καθώς το Main.py βρίσκεται στο git απευθείας, αυτό το βήμα εξηγεί απλώς τον κώδικα.

Πρώτα έχουμε τις βιβλιοθήκες

από φιάλη εισαγωγής Φιάλη, render_template, αίτημα

εισαγωγή pigpio από νήμα εισαγωγή start_new_thread

τότε πρέπει να ορίσουμε κάποιες μεταβλητές

app = Φιάλη (_ όνομα_)

CurrentColour = "Λευκό" RedColourCode = 0 BlueColourCode = 0 GreenColourCode = 0 RedBeforeEffect = 0 BlueBeforeEffect = 0 GreenBeforeEffect = 0 pi = pigpio.pi ()

η πρώτη μεταβλητή είναι για τη φιάλη που είναι ο διακομιστής ιστού μας, θα την ονομάσουμε εφαρμογή, ώστε να είναι πιο εύκολο να καλέσετε και να εκτελέσετε. Στη συνέχεια, υπάρχουν 6 μεταβλητές που οι τρεις πρώτες θα περιέχουν τι χρώμα θα αλλάξουν δύο και οι άλλες τρεις θα περιέχουν το προηγούμενο χρώμα.

@app.route ('/', Methods = ['GET'])

Αυτή η γραμμή λέει ότι εάν κάποιος πληκτρολογήσει τη διεύθυνση IP του pi σε ένα πρόγραμμα περιήγησης ιστού, τότε θα εκτελέσει το σενάριο κάτω από αυτό, έχει επίσης μια μέθοδο GET όταν αυτό σημαίνει ότι, οποιοδήποτε κείμενο μετά από? Color = θα περάσει στον διακομιστή ιστού και θα χρησιμοποιείται για να αλλάξει το χρώμα της λωρίδας led.

def Main ():

παγκόσμιο CurrentColour

το κείμενο def Main () σημαίνει ότι θα δημιουργήσει μια συνάρτηση που ονομάζεται main και μπορεί να κληθεί από οπουδήποτε στο σενάριο. και η καθολική γραμμή σημαίνει ότι θα ενημερώσει τη μεταβλητή σε ολόκληρο το σενάριο.

εάν request.args.get ("Χρώμα"):

CurrentColour = request.args.get ("Χρώμα") εάν CurrentColour == "Λευκό": FadeTORGB (255, 255, 255) elif CurrentColour == "Κόκκινο": FadeTORGB (255, 0, 0) elif CurrentColour == "Πράσινο ": FadeTORGB (0, 255, 0) elif CurrentColour ==" DarkBlue ": FadeTORGB (0, 0, 255) elif CurrentColour ==" LightBlue ": FadeTORGB (0, 255, 255) elif CurrentColour ==" Πορτοκαλί ": FadeTORGB (255, 15, 0) elif CurrentColour == "Pink": FadeTORGB (255, 0, 192) elif CurrentColour == "Yellow": FadeTORGB (255, 157, 0) elif CurrentColour == "Purple": FadeTORGB (123, 0, 255) elif CurrentColour == "Black": FadeTORGB (0, 0, 0) return render_template ('index.html')

Αυτό το σενάριο θα πάρει οποιοδήποτε όνομα μετά τη μέθοδο GET "Color" και το αποθηκεύει. Στη συνέχεια, θα ελέγξει για αυτό το όνομα και θα καλέσει μια συνάρτηση που μπορεί να 3 τρεις άλλες λειτουργίες για να αλλάξει το κόκκινο, πράσινο και μπλε φως ταυτόχρονα

def FadeTORGB (RedNum, BlueNum, GreenNum):

start_new_thread (FadeUpRed, (RedNum,)) start_new_thread (FadeUpBlue, (BlueNum,)) start_new_thread (FadeUpGreen, (GreenNum,)))

Αυτό θα καλέσει τρεις άλλες συναρτήσεις που θα αλλάξουν την ποσότητα ισχύος που μεταδίδεται σε κάθε led με εφέ εξασθένισης.

def FadeUpRed (REDUpNum):

παγκόσμιος RedColourCode εάν RedColourCode <REDUpNum: ενώ RedColourCode REDUpNum: ενώ RedColourCode> REDUpNum: RedColourCode -= 1 pi.set_PWM_dutycycle (RedPin, RedColourCode)

def FadeUpBlue (BlueUpNum):

παγκόσμιος BlueColourCode εάν BlueColourCode <BlueUpNum: ενώ BlueColourCode BlueUpNum: ενώ BlueColourCode> BlueUpNum: BlueColourCode -= 1 pi.set_PWM_dutycycle (BluePin, BlueColourCode)

def FadeUpGreen (GreenUpNum):

global GreenColourCode if GreenColourCode <GreenUpNum: while GreenColourCode GreenUpNum: while GreenColourCode> GreenUpNum: GreenColourCode -= 1 pi.set_PWM_dutycycle (GreenPin, GreenColourCode)

αν _name_ == "_main_":

app.run (host = "0.0.0.0")

Βήμα 12: Προγραμματισμός του διακομιστή ιστοσελίδων

Τώρα που έχουμε τον διακομιστή πρέπει να σχεδιάσουμε έναν ιστότοπο.

Καθώς ο διακομιστής βρίσκεται στα πρότυπα και τους στατικούς φακέλους στο git απευθείας, αυτό το βήμα εξηγεί απλώς τον κώδικα.

Σας συνιστώ επίσης να διαβάσετε για html, css, javascript

HTML

Πρώτα πρέπει να προγραμματίσουμε html, εδώ πηγαίνει όλο το περιεχόμενο που στη συνέχεια μπορεί να διαμορφωθεί χρησιμοποιώντας css

1. Δημιουργία της κεφαλής (τίτλος, σύνδεση αρχείων,)

Λωρίδα οδήγησης Wifi

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

Κάνοντας την ιστοσελίδα σε πλήρη οθόνη στο iOS

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

Στη συνέχεια, θα προσθέσουμε αναφορές στο αρχείο css που θα κάνουμε το τελευταίο. Αυτός θα είναι ένας διαφορετικός τρόπος από τον συνηθισμένο λόγω της φιάλης είναι ο τρόπος διαχείρισης αρχείων

Στη συνέχεια, μετά από αυτό ΠΡΕΠΕΙ να κλείσετε την ετικέτα και να δημιουργήσετε μια ετικέτα σώματος

Η ετικέτα σώματος σημαίνει ότι τυχόν ετικέτες μέσα σε αυτήν θα εμφανίζονται στην ιστοσελίδα

Τώρα θα κάνουμε τα κουμπιά χρωμάτων που μπορούν να αλλάξουν τη λωρίδα led.

Θα δημιουργήσουμε ένα για κάθε χρώμα και θα το βάζουμε σε έναν πίνακα

Αυτό δημιουργεί το εξωτερικό πλαίσιο του πίνακα

αυτό θα δημιουργήσει μια σειρά για τον πίνακα

Τώρα ας δημιουργήσουμε ένα πορτοκαλί κουμπί

η ετικέτα td δημιουργεί ένα κελί, τότε η συνάρτηση "onClick" θα καλέσει μια συνάρτηση javascript που θα δημιουργήσουμε τελευταία, ενώ η συνάρτηση "κλάση" χρησιμοποιείται για να στυλ το κουμπί και το στυλ είναι μόνο για να το χρωματίσει.

Θα πρέπει απλώς να αλλάξουμε το κείμενο sendColour και το στυλ για το άλλο κουμπί, αλλά μετά από κάθε 2ο κουμπί θα κλείσουμε τη σειρά και θα δημιουργήσουμε μια νέα σειρά

Και τα λοιπά…

Στη συνέχεια, αφού βάλετε όλο το χρώμα, πρέπει να κλείσετε τον πίνακα

Javascript

Τώρα πρέπει να προσθέσουμε τη λειτουργία "SendColour" στην οποία είχαμε αναφερθεί πριν για να το κάνουμε αυτό, πρέπει πρώτα να προσθέσουμε μια ετικέτα που λέει στο πρόγραμμα περιήγησης ιστού ότι υπάρχει κάποια javascript

τότε δημιουργήστε μια συνάρτηση

συνάρτηση SendColour (ClickedColour) {

Αυτή η λειτουργία θα στείλει ένα αίτημα Ajax στο raspberry pi που θα του πει να αλλάξει στο χρώμα στο οποίο είχατε κάνει κλικ

xhttp = νέο XMLHttpRequest ();

xhttp.open ("GET", "? Color =" + ClickedColour, false); xhttp.send (); }

Τώρα πρέπει να κλείσουμε το javascript και το html

CSS

Τώρα θα σχεδιάσουμε τον ιστότοπο

πρώτα βγείτε από το φάκελο πρότυπα και μεταβείτε στον στατικό φάκελο

cd.. && cd στατικό

τώρα δημιουργήστε το αρχείο Style.css

nano Style.css

Αρχικά ας κάνουμε τον πίνακα να γεμίσει ολόκληρη την οθόνη.

. Χρώματα {

πλάτος: 100% }

. κουμπί {

επένδυση: 25px 35px; περιθώριο-ακτίνα: 4px; }

Δοκιμή του διακομιστή

για να δοκιμάσετε τον διακομιστή, μεταβείτε στο φάκελο διακομιστή ιστού

cd..

μετά εισάγετε

python Main.py

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

YOUR_PI_PI: 5000the: 5000 στο τέλος είναι σημαντικό προς το παρόν καθώς είναι η θύρα στην οποία εκτελείται ο διακομιστής ιστού.

Εάν έχετε πρόσβαση στην ιστοσελίδα και λάβετε ένα "Σφάλμα εσωτερικού διακομιστή", κοιτάξτε την κονσόλα (στόκος ή τερματικό) και θα δείτε ένα σωρό κείμενο, απλώς κοιτάξτε την τελευταία γραμμή και θα έπρεπε. πείτε τι συμβαίνει, μπορείτε να κάνετε google για να βρείτε την απάντηση, αλλά αν δείτε τα χρώματα στην οθόνη, μπορείτε να κάνετε κλικ σε ένα και να δείτε ότι η λωρίδα led πήρε αυτό το χρώμα, εάν δεν ελέγξει εάν η τροφοδοσία είναι συνδεδεμένη και ενεργοποιημένη ή ότι ο κώδικας html έχει εισαχθεί σωστά Το

Βήμα 13: Κάνοντας το να λειτουργεί με το Apache2

Τώρα που το δοκιμάσαμε πρέπει να το πούμε να μιλήσει στο apache, ώστε να μπορεί να τρέξει κατά την εκκίνηση και στη θύρα 80 (τυπική θύρα ιστού)

1. μέσα στο φάκελο WebServer δημιουργήστε ένα αρχείο wsgi

nano wifiled.wsgi

Στη συνέχεια, εισάγετε στο αρχείο

εισαγωγή sys

sys.path.insert (0, '/home/pi/Webserver/') από την κύρια εφαρμογή εισαγωγής ως εφαρμογή

στη συνέχεια, προσθέστε το χρήστη pi σε μια ομάδα που ονομάζεται www-data, αυτό θα επιτρέψει στο apache να αναζητήσει το φάκελο του διακομιστή ιστού

sudo usermod -a -G www -data pi

τότε αφαιρέστε την προεπιλεγμένη ρύθμιση παραμέτρων

sudo a2dissite 000-προεπιλογή

στη συνέχεια, δημιουργήστε ένα αρχείο στο φάκελο διαμόρφωσης Apache

sudo nano /etc/apache2/sites-available/wifiled.conf

και μπείτε

ServerName WifiLed ServerAdmin [email protected] WSGIScriptAlias//home/pi/Webserver/wifiled.wsgi Η παραγγελία επιτρέπεται, η άρνηση επιτρέπεται από όλα Απαιτείται η παραχώρηση όλων ErrorLog $ {APACHE_LOG_DIR} /error.log LogLevel προειδοποίηση CustomLog_O $/APACHElog σε συνδυασμό

τότε πείτε στο apache να διαβάσει το config εισάγοντας

sudo a2ensite wifiled.conf

Τώρα επανεκκινήστε το pi, όταν επανεκκινηθεί, εισέλθετε στο πρόγραμμα περιήγησής σας

YOUR_PI_IP

Βήμα 14: Ρύθμιση του Tasker και του Ifttt και άλλων υπηρεσιών

Πριν εγκαταστήσουμε αυτά τα προγράμματα, πρέπει να ρυθμίσετε τη μεταφορά θυρών στο δρομολογητή σας, καθώς κάθε δρομολογητής είναι διαφορετικός, μπορείτε να διαβάσετε πώς να το κάνετε εδώ

Tasker

στη συσκευή σας android ανοιχτής λήψης

στη συνέχεια, δημιουργήστε ένα νέο προφίλ που βασίζεται σε ένα συμβάν, μπορείτε να επιλέξετε οποιοδήποτε έναυσμα. Έχω επιλέξει το "Phone Ringing" και είχα ορίσει το χρώμα σε οποιονδήποτε "C: ANY", τότε θα σας ζητήσει να επιλέξετε μια εργασία, κάντε κλικ στο "New Task" και να το ονομάσετε με βάση τη δράση σας. Θα το ονομάσω "Τηλεφωνική κλήση", στη συνέχεια πατήστε add action και αναζητήστε "HTTP Head" και ορίστε τον διακομιστή: Θύρα στο your_raspberry_pi_IP, στη συνέχεια, μπορείτε είτε να ορίσετε ένα σταθερό χρώμα με "/? Color = Green" ή να δημιουργήσετε ένα αποτέλεσμα θα το κάνουμε στο επόμενο βήμα. Στη συνέχεια, κάντε κλικ πίσω και ξανά.

IFTTT

Πρώτα πήρα ifttt και δημιούργησε μια νέα μικροεφαρμογή Επιλέξτε οποιονδήποτε κανόνα ετικέτας (επέλεξα το κουμπί) και στη συνέχεια για δράση επιλέξτε το κανάλι δημιουργίας και είπε να κάνετε ένα αίτημα κατόπιν για το url πληκτρολογήστε YOUR_PUBLIC_PI/? Color = LightBlue αν δεν γνωρίζετε το κοινό σας ip απλώς πληκτρολογήστε "My Ip" στο google. Στη συνέχεια, για τη μέθοδο εισάγετε το HEAD και, στη συνέχεια, κάντε κλικ στην επιλογή "Δημιουργία ενέργειας", όταν γίνει η ενέργειά σας, εάν κάνετε ένα αίτημα στο pi σας για αλλαγή χρώματος.

Αλλες υπηρεσίες

Μπορείτε επίσης να συνδέσετε άλλες υπηρεσίες που κάνουν αίτημα HTTP HEAD ή GET.

Βήμα 15: Δημιουργία προσαρμοσμένων εφέ

Στο Main.py προσθέστε μια δήλωση εισαγωγής, κάτω από εισαγωγή os enter

χρόνο εισαγωγής

επίσης πριν δημιουργήσουμε ένα εφέ πρέπει να προσθέσουμε μια μεταβλητή ακριβώς κάτω από την προσθήκη GreenBeforeEffect

CanChangeColour = True

στη συνέχεια, αλλάξτε εάν request.args.get ("Χρώμα"):

προς το

εάν request.args.get ("Χρώμα") και CanChangeColour:

ενότητα ακριβώς κάτω από την επιστροφή render_template ('Main.html') add

@app.route ('/Effect', Methods = ['GET'])

def Effect ():

Στη συνέχεια, ορίστε τις μεταβλητές σε καθολικές

x = 0

παγκόσμιο RedColourCode παγκόσμιο BlueColourCode παγκόσμιο GreenColourCode παγκόσμιο RedBeforeEffect παγκόσμιο BlueBeforeEffect παγκόσμιο GreenBeforeEffect

τώρα ας δημιουργήσουμε το πρώτο μας εφέ

εάν request.args.get («Κλήση»):

RedBeforeEffect = RedColourCode BlueBeforeEffect = BlueColourCode GreenBeforeEffect = GreenColourCode FadeTORGB (0, 0, 0) time.sleep (2)

Αυτή η ενέργεια θα εκτελεστεί όταν το pi λάβει ένα αίτημα όπως "/? Effect = Call" και θα αποθηκεύσει το τρέχον χρώμα ώστε να μπορούμε να το καλέσουμε ξανά. Στη συνέχεια κάνουμε τη λωρίδα led μαύρη και περιμένουμε μέχρι να συμβεί.

Τώρα θα κάνουμε το led να ξεθωριάζει από μαύρο σε πράσινο και μετά σε μαύρο ξανά και θέλω να το κάνω πέντε φορές

ενώ x <= 5: FadeTORGB (0, 255, 0) x += 1 time.sleep (1) FadeTORGB (0, 0, 0) time.sleep (1) CanChangeColour = True time.sleep (2) FadeTORGB (RedBeforeEffect, BlueBeforeEffect, GreenBeforeEffect)

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

Τώρα πρέπει μόνο να δημιουργήσουμε μια απάντηση.

ΕΠΙΣΤΡΟΦΗ ""

Επίσης επανεκκινήστε το raspberry pi

sudo επανεκκίνηση