Πώς να προσθέσετε μια οθόνη μελάνης στο έργο σας: 12 βήματα (με εικόνες)

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

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

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

• Μια αλφαριθμητική οθόνη LCD είναι η φθηνότερη αλλά και η πιο περιορισμένη.
• Μια οθόνη OLED μπορεί να εμφανίσει γραφικά, αλλά τα φθηνά είναι πολύ μικρά. Η δεύτερη φωτογραφία δείχνει μια οθόνη OLED 128x64 pixel δίπλα σε μια μελάνη E-Ink.
• Η οθόνη E-Ink (ή E-Paper) είναι κάπως μεγαλύτερη και ως εκ τούτου ευκολότερη στην ανάγνωση και έχει το πλεονέκτημα ότι η οθόνη διατηρείται ακόμη και όταν είναι απενεργοποιημένη! Αλλά χρειάζονται αρκετά δευτερόλεπτα για να επανασχεδιάσετε την οθόνη.

Η οθόνη E-Ink φαινόταν ιδανική για την εφαρμογή μου, καθώς μπορούσα να προγραμματίσω το Arduino να ξυπνάει μόνο κάθε λίγες ώρες, να διαβάζει και να το εμφανίζει πριν κοιμηθώ. Τότε δεν έχει καμία συνέπεια να χρειαστούν αρκετά δευτερόλεπτα για να ξανασχεδιάσει την οθόνη.

Σε μια τέτοια εφαρμογή, η μέση κατανάλωση ρεύματος μπορεί να είναι τόσο χαμηλή ώστε μια μπαταρία ανιχνευτή καπνού λιθίου 9V να μπορεί να διαρκέσει για 10 χρόνια! Επιπλέον, μερικές από αυτές τις οθόνες θα εμφανίζουν τρία χρώματα: λευκό, μαύρο και κόκκινο (ή κίτρινο). Ιδανικό εάν θέλετε να εμφανίσετε μια προειδοποίηση ή ειδοποίηση με κόκκινο χρώμα.

Προμήθειες

Οι φθηνότερες οθόνες E-Ink που βρήκα πωλούνται από το BuyDisplay, επίσης διαθέσιμο από πολλούς πωλητές eBay. Δυστυχώς, η τεκμηρίωση αφήνει πολλά για να είναι επιθυμητή, έτσι ανέλαβα να γράψω ένα σεμινάριο - διαβάστε παρακάτω!

Ανάλογα με τις απαιτήσεις σας και τον προϋπολογισμό σας, έχετε την επιλογή διαφόρων μεγεθών:

• 1.54 "(152x152 = 23, 104 εικονοστοιχεία)
• 2,13 "(212x104 = 22, 048 εικονοστοιχεία)
• 2,6 "(296x152 = 44, 992 εικονοστοιχεία)
• 2,7 "(176x264 = 46, 464 εικονοστοιχεία)
• 2,9 "(296x128 = 37, 888 εικονοστοιχεία)
• 4,2 "(400x300 = 120, 000 pixel)
• 5,83 "(640x480 = 307, 200 εικονοστοιχεία)
• 7,5 "(880x528 = 464, 640 εικονοστοιχεία)

(Η γκάμα έχει διευρυνθεί από την προηγούμενη φορά που κοίταξα, οπότε μπορεί να έχει διευρυνθεί περαιτέρω μέχρι να το διαβάσετε.)

Διατίθενται είτε σε 2 χρώματα (μαύρο/άσπρο) είτε σε 3 χρώματα (μαύρο/κόκκινο/άσπρο ή μαύρο/κίτρινο/λευκό). Αυτό το Instructable υποθέτει ότι χρησιμοποιείτε το κόκκινο, αλλά εάν έχετε επιλέξει την κίτρινη έκδοση, απλώς διαβάστε "κίτρινο" για "κόκκινο" καθ 'όλη τη διάρκεια.

Επιλέξτε μια έκδοση SPI (4σύρματα). Χρησιμοποίησα το μοντέλο 1.54 , το οποίο είναι πολύ ωραίο μέγεθος.

Βήμα 1: Σύνδεση της οθόνης σας

Αυτές οι οθόνες διαθέτουν κεφαλίδα 2x4 ακίδων. Οι αριθμοί καρφιτσών είναι σαφώς επισημασμένοι, οι ακίδες 7, 5, 3 και 1 (από αριστερά προς τα δεξιά) κατά μήκος της επάνω σειράς και 8, 6, 4, 2 κατά μήκος της κάτω.

Η οθόνη σας μπορεί να συνοδεύεται από ένα καλώδιο επιδιόρθωσης 8 κατευθύνσεων, το οποίο διευκολύνει τη σύνδεση. (Το καλώδιο μπαλωμάτων μου έχει 2 κόκκινα καλώδια και 2 καφέ. Δεν είναι εναλλάξιμα!

Ο παρακάτω πίνακας δίνει τις συνδέσεις, οι οποίες ισχύουν για τους περισσότερους τύπους Arduino (συμπεριλαμβανομένων των Uno, Pro Mini, Pro Micro και Nano).

Μονάδα E-ink		Arduino
Καρφίτσα	Ονομα	Καρφίτσα	Ονομα
1	VDD	Vcc	3,3/5V
2	VSS	Gnd	Gnd
3	Σειριακά δεδομένα σε	11	MOSI
4	Σειριακό ρολόι μέσα	13	SCK
5	/Επιλογή τσιπ	10
6	Δεδομένα/Instr	9
7	Επαναφορά	8
8	Η συσκευή είναι απασχολημένη	7

Βήμα 2: Κατεβάστε το παρεχόμενο λογισμικό

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

Βρείτε τη συσκευή σας στο BuyDisplay.com. Στο κάτω μέρος της σελίδας θα βρείτε ένα αρχείο λήψης ZIP "Βιβλιοθήκη Arduino και Παράδειγμα για 4σύρματη SPI". Κάντε κλικ σε αυτό για λήψη και άνοιγμα στην Εξερεύνηση των Windows.

Η Εξερεύνηση των Windows θα το δείξει ότι περιέχει έναν μοναδικό φάκελο ανώτατου επιπέδου "Libraries-Examples_ER-EPM0154-1R". (Το όνομα θα είναι ελαφρώς διαφορετικό εάν το δικό σας δεν είναι το μοντέλο 1,54 ".)

Αντιγράψτε αυτόν τον φάκελο ανώτατου επιπέδου στο φάκελο βιβλιοθηκών Arduino. Κάντε δεξί κλικ για να μετονομάσετε το φάκελο και διαγράψτε "Βιβλιοθήκες-Παραδείγματα_" από το όνομα.

(Για να βρείτε το φάκελο βιβλιοθηκών Arduino, στο Arduino IDE, κάντε κλικ στο Αρχείο… Προτιμήσεις και σημειώστε την τοποθεσία του Sketchbook. Μεταβείτε σε αυτό και θα βρείτε τον φάκελο Arduino "βιβλιοθήκες" ανάμεσα στους φακέλους σκίτσων σας.)

Ανοίξτε αυτόν το φάκελο και ανοίξτε το φάκελο "Βιβλιοθήκες" μέσα σε αυτόν. Σύρετε και αποθέστε όλα τα αρχεία σε αυτόν τον φάκελο στον γονικό φάκελο κατά ένα επίπεδο ("ER-EPM0154-1R"). Διαγράψτε το (τώρα κενό) φάκελο "Βιβλιοθήκες".

Έχετε εγκαταστήσει τώρα τα αρχεία και το σκίτσο των εξετάσεων ως βιβλιοθήκη Arduino. Σημειώστε ότι εάν η οθόνη σας δεν είναι η 1,54 , η μόνη διαφορά φαίνεται να είναι δύο γραμμές στο ER-ERM*-1.h που ορίζουν ΠΛΑΤΟΣ και ΥIGHΟΣ.

Στο Arduino IDE, κάντε κλικ στο Αρχείο… Εξετάζει και μετακινηθείτε προς τα κάτω στο ER-EPM0154-1R για το σκίτσο επίδειξης, το οποίο θα πρέπει να μπορείτε να μεταγλωττίσετε και να εκτελέσετε μόλις συνδέσετε την οθόνη σας στο Arduino.

Βήμα 3: Εκτέλεση της επίδειξης

Στο Arduino IDE, κάντε κλικ στο Αρχείο… Παραδείγματα… ER-EPM0154-1R.

Συνδέστε το Arduino στον υπολογιστή σας με ένα καλώδιο USB, ή όπως συνήθως το κάνετε.

Στην περιοχή Εργαλεία, ορίστε τον πίνακα, τον επεξεργαστή και τη θύρα.

Στην περιοχή Σκίτσο, κάντε κλικ στο στοιχείο Μεταφόρτωση.

Θα υπάρξει μια μικρή καθυστέρηση μετά την ολοκλήρωση της μεταφόρτωσης και δέκα η καθυστέρηση θα αναβοσβήνει αρκετές φορές καθώς ζωγραφίζει την πρώτη εικόνα. Παρακολουθήστε όσο περνάει το demo.

Βήμα 4: Χρήση της βελτιωμένης βιβλιοθήκης

Μπορείτε να κατεβάσετε τη βελτιωμένη βιβλιοθήκη μου από το github στη διεύθυνση

N. B. Έχω υψηλό βαθμό εμπιστοσύνης ότι η βιβλιοθήκη μου θα λειτουργήσει με οποιοδήποτε μέγεθος συμβατή με οθόνη, αλλά στην πραγματικότητα την έχω δοκιμάσει μόνο με το μοντέλο 1.54 . Εάν χρησιμοποιείτε διαφορετικό, ενημερώστε με στα σχόλια στο τέλος αυτού του Instructable, για να επιβεβαιώσω ότι λειτουργεί. Αλλά αν δεν το κάνει, θα κάνω ό, τι μπορώ για να σας προχωρήσω.

Κατεβάστε και αποθηκεύστε το αρχείο zip. Στο Arduino IDE, κάντε κλικ στο Sketch… Include Library… Add. ZIP Library και επιλέξτε το αποθηκευμένο αρχείο zip.

Η βιβλιοθήκη μου περιέχει αρκετές μικρές βελτιώσεις:

• Επιτρέπει τη χρήση διαφορετικών αριθμών καρφιών Arduino (εκτός από το MOSI).
• Η ίδια βιβλιοθήκη μπορεί να χρησιμοποιηθεί για συσκευές μεγέθους.
• Παρέχεται ένα νέο 50% σκιασμένο γέμισμα και ένα στίγμα γεμίσματος (σετ τυχαίων εικονοστοιχείων).

Η βιβλιοθήκη έρχεται ως ένα τυπικό συμπιεσμένο (zip) αρχείο Arduino. Κατεβάστε το στο φάκελο "Λήψεις" (ή όπου προτιμάτε) και στο Arduino IDE, κάντε κλικ στην επιλογή Σκίτσο … Συμπερίληψη βιβλιοθήκης … Προσθήκη βιβλιοθήκης ταχυδρομείου.

Στην ενότητα Παραδείγματα, θα βρείτε τώρα το E-ink_ER-EPM. Υπάρχουν 3 παραδείγματα σκίτσων:

• ER_EPM154-1R-Test: Η αρχική επίδειξη που παρέχεται από τον προμηθευτή
• E-ink_demo: Το σκίτσο αναπτύχθηκε στα επόμενα βήματα
• E-ink_rotate: Επίδειξη περιστροφής εικόνας.

Βήμα 5: Προγραμματίστε το μόνοι σας

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

ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ

Δεδομένου ότι ένα Arduino είναι περιορισμένο στον αριθμό της διαθέσιμης μνήμης RAM, η βιβλιοθήκη σάς επιτρέπει να σχεδιάζετε ή να γράφετε σε μικρά τμήματα της οθόνης κάθε φορά, ανεβάζοντάς τα μεμονωμένα στην ενδιάμεση μνήμη της συσκευής. Μόλις ανεβάσετε όλες τις μερίδες που χρειάζεστε, του λέτε να εμφανίζει ό, τι έχει στη μνήμη.

Αυτά τα τμήματα της οθόνης είναι γνωστά ως αντικείμενα "Βαφή". Χρειάζεστε μόνο ένα και για κάθε τμήμα της οθόνης ορίζετε το ύψος, το πλάτος και την περιστροφή της. Όταν ολοκληρωθεί, το ανεβάζετε, ορίζοντας τη θέση στην οποία θα φορτωθεί η οθόνη και αν πρέπει να είναι ασπρόμαυρη ή ερυθρόλευκη.

Η επάνω αριστερή γωνία της οθόνης έχει οριζόντιες (x) και κάθετες (y) συντεταγμένες (0, 0), κάτω αριστερά είναι (0, 151) και πάνω δεξιά είναι (151, 0).

Αρχικοποίηση

Ανοίξτε το σκίτσο του E-ink_demo στο Arduino IDE και ακολουθήστε το καθώς περιγράφω τον τρόπο χρήσης της βιβλιοθήκης.

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

#include <SPI.h #include "ER-ERM0154-1.h" #include "imagedata.h" #include "epdpaint.h" #define COLORED 0 #define UNCOLORED 1 Epd epd;

Οι γραμμές #Include τραβούν τις απαιτούμενες βιβλιοθήκες. Το SPI.h είναι μια τυπική βιβλιοθήκη Arduino, αλλά οι άλλες αποτελούν μέρος της βιβλιοθήκης e-ink.

Ορίζουμε ονόματα για ΑΧΡΩΜΑ (λευκά) εικονοστοιχεία και ΧΡΩΜΑ (μαύρα ή κόκκινα). (Σημείωση στους συναδέλφους μου Ευρωπαίους: χρησιμοποιείται η αμερικανική ορθογραφία του COLOR.)

Το Epd epd? Η γραμμή δημιουργεί το αντικείμενο της ηλεκτρονικής συσκευής χαρτιού, στο οποίο θα εμφανιστούμε. Αυτό πρέπει να είναι εδώ στην αρχή του σκίτσου για να είναι διαθέσιμο για τις λειτουργίες εγκατάστασης () και βρόχου ().

Εάν έχετε οθόνη διαφορετικού μεγέθους, μπορείτε να αντικαταστήσετε τη γραμμή EPD με:

Epd epd (ΠΛΑΤΟΣ, ΥIGHΟΣ);

(έχοντας ορίσει προηγουμένως ΠΛΑΤΟΣ και ΥIGHΟΣ σε δηλώσεις #ορισμού.)

Με τον ίδιο τρόπο μπορείτε να καθορίσετε μη προεπιλεγμένους αριθμούς pin με:

Epd epd (WIDTH, HEIGHT, BUSY_PIN, RESET_PIN, DC_PIN, CS_PIN);

Στο setup () πρέπει να προετοιμάσουμε τη συσκευή ως εξής:

Serial.begin (9600)

if (epd. Init ()! = 0) {Serial.print ("το e-Paper init απέτυχε"); ΕΠΙΣΤΡΟΦΗ; }

(Στην πραγματικότητα, το epd. Init () δεν επιστρέφει ποτέ σφάλμα, αλλά μια μελλοντική βελτίωση μπορεί να εντοπίσει την απουσία μιας οθόνης ή μιας μη λειτουργικής.)

Βήμα 6: Σύνταξη κειμένου

Στο E-ink_demo, στρέψτε την προσοχή σας στον βρόχο (). Αρχικά, ας καθαρίσουμε την οθόνη:

epd. ClearFrame ()

(Αυτό δεν είναι πραγματικά απαραίτητο εάν πρόκειται να εμφανίσετε τη δική σας εικόνα.)

Πριν μπορέσουμε να σχεδιάσουμε οτιδήποτε (είτε κείμενο είτε γραφικά) πρέπει να δημιουργήσουμε ένα αντικείμενο Paint για να σχεδιάσουμε:

ανυπόγραφη κάρτα [1024]

Χρώμα βαφής (εικόνα, 152, 18). // το πλάτος πρέπει να είναι το πολλαπλάσιο του 8

Αυτό διατηρεί λίγο χώρο (1024 byte) και το εκχωρεί στο αντικείμενο Paint, που καθορίζεται από τη δεύτερη γραμμή. Αυτό έχει προσωρινά διαμορφωθεί ως 152 εικονοστοιχεία πλάτος και 18 εικονοστοιχεία βάθος. Μπορούμε να το επαναδιαμορφώσουμε αργότερα για επαναχρησιμοποίηση, όπως είναι απαραίτητο, αλλά σημειώστε: το πλάτος πρέπει να είναι πολλαπλό 8, αφού αποθηκεύονται 8 pixel ανά byte και δεν μπορούμε να χωρίσουμε byte. (Στην πραγματικότητα θα το στρογγυλοποιήσει εάν είναι απαραίτητο, αλλά μπορεί στη συνέχεια να είναι προβληματικό όταν η οθόνη σας δεν φαίνεται όπως θα έπρεπε.

Τώρα πρέπει να καθαρίσουμε το αντικείμενο βαφής σε ΧΡΩΜΑΤΙΣΜΕΝΟ (λευκό), στη συνέχεια στη θέση (x, y) = (22, 2) γράφουμε "demo e-ink" χρησιμοποιώντας μια γραμματοσειρά ύψους 16 εικονοστοιχείων και ΧΡΩΜΑΤΙΣΜΕΝΟ (για εμφάνιση σε σχέση με το ΧΩΡΙΣΤΕΡΟ φόντο.

βαφή. Clear (ΧΩΡΙΣ)

paint. DrawStringAt (12, 2, "e-paper Demo", & Font16, COLORED);

Σημειώστε ότι οι συντεταγμένες (22, 2) είναι η επάνω αριστερή γωνία του πρώτου χαρακτήρα της συμβολοσειράς και είναι 22 pixel in και 2 pixels κάτω σε σχέση με την επάνω αριστερή γωνία του αντικειμένου βαφής, όχι ολόκληρη η οθόνη Το Το κείμενο φαίνεται καλύτερα τουλάχιστον ένα εικονοστοιχείο κάτω από την κορυφή του αντικειμένου βαφής.

Οι ακόλουθες γραμματοσειρές είναι διαθέσιμες:

Γραμματοσειρά 8 - 5x8 εικονοστοιχεία Γραμματοσειρά 12 - 7x12 εικονοστοιχεία Γραμματοσειρά 16 - 11x16 εικονοστοιχεία Γραμματοσειρά 20 - 14x20 εικονοστοιχεία Γραμματοσειρά 24 - 17x24 εικονοστοιχεία

Τώρα πρέπει απλώς να στείλουμε το αντικείμενο βαφής ("paint") στη συσκευή ("epd"):

epd. SetPartialWindowBlack (paint. GetImage (), 0, 3, paint. GetWidth (), paint. GetHeight ());

Το SetPartialWindowBlack είναι μια μέθοδος που εφαρμόζουμε στο αντικείμενο epd, χρησιμοποιώντας την εικόνα και τις ιδιότητες πλάτους και βάθους του αντικειμένου βαφής. Του λέμε να γράψει αυτήν την εικόνα στη συσκευή στο (x, y) = (0, 3). Και λέμε ότι τα έγχρωμα εικονοστοιχεία πρέπει να είναι μαύρα.

Δεν ήταν πολύ δύσκολο, έτσι δεν είναι; Ας δοκιμάσουμε ένα άλλο.

βαφή. Clear (COLORED);

paint. DrawStringAt (20, 2, "(Λευκό στο χρώμα)", & Font12, ΧΩΡΙΣ) epd. SetPartialWindowRed (paint. GetImage (), 0, 24, paint. GetWidth (), paint. GetHeight ());

Επαναχρησιμοποιούμε το ίδιο αντικείμενο βαφής, και το ίδιο πλάτος και ύψος, αλλά αυτή τη φορά, ας το καθαρίσουμε στο ΧΡΩΜΑ και γράφουμε μια ΧΡΩΜΑΤΙΚΗ συμβολοσειρά. Και για αλλαγή, θα κάνουμε τα ΧΡΩΜΑΤΑ εικονοστοιχεία κόκκινα και θα τα γράψουμε στη συσκευή στο (0, 24), ακριβώς κάτω από το πρώτο.

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

epd. DisplayFrame ();

(Στο σκίτσο E-ink_demo το αφήνουμε στην πραγματικότητα μέχρι το τέλος, αφού σχεδιάσουμε μερικά ακόμη πράγματα, αλλά μπορείτε να το τοποθετήσετε εδώ αν θέλετε, mybe ακολουθείται από καθυστέρηση (10000). Για να σας δώσει χρόνο να θαυμάσετε το χειροποίητο έργο σας.

Βήμα 7: Σχεδιάζοντας γραμμές και ορθογώνια

Ας δούμε πώς να σχεδιάζουμε γραμμές και ορθογώνια. Θα χρησιμοποιήσουμε το ίδιο αντικείμενο βαφής, αλλά πρέπει να το επαναδιαμορφώσουμε σε πλάτος 40 pixels και ύψος 36 pixel. Θα το ξεκαθαρίσουμε στο ΧΡΩΜΑ.

paint. SetWidth (40);

χρώμα. SetHeight (36); βαφή. Clear (ΧΩΡΙΣ)

Θα σχεδιάσουμε ένα (ΧΡΩΜΑ) ορθογώνιο με επάνω αριστερή γωνία (5, 3) και κάτω δεξιά (35, 33), σε σχέση με το αντικείμενο βαφής, ως συνήθως. Θα σχεδιάσουμε επίσης τις διαγώνιές του ως γραμμές από (5, 3) έως (35, 33) και από (35, 3) έως (5, 33). Τέλος, θα γράψουμε ολόκληρο το αντικείμενο βαφής (κόκκινο) στην οθόνη στη διεύθυνση (32, 42).

// ΚΟΡΥΦΗ ΣΕΙΡΑ:

// Rectange paint. Clear (ΧΡΩΜΑΤΙΣΜΕΝΟ) paint. DrawRectangle (5, 3, 35, 33, COLORED;) paint. DrawLine (5, 3, 35, 33, COLORED); paint. DrawLine (35, 3, 5, 33, ΧΡΩΜΑ) epd. SetPartialWindowRed (paint. GetImage (), 32, 42, paint. GetWidth (), paint. GetHeight ());

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

// Shaded Rectange paint. Clear (ΧΡΩΜΑΤΙΣΜΕΝΟ) paint. DrawShadedRectangle (5, 3, 35, 33); epd. SetPartialWindowBlack (paint. GetImage (), 72, 42, paint. GetWidth (), paint. GetHeight ()); // Γεμισμένο ορθογώνιο χρώμα. Clear (ΧΡΩΜΑΤΙΣΜΕΝΟ) paint. DrawFilledRectangle (5, 3, 35, 33, ΧΡΩΜΑΤΙΣΜΕΝΟ) epd. SetPartialWindowRed (paint. GetImage (), 112, 42, paint. GetWidth (), paint. GetHeight ());

Βήμα 8: Σχεδίαση κύκλων

Οι κύκλοι είναι εξίσου εύκολο να σχεδιαστούν. Αντί για τις συντεταγμένες δύο γωνιών, πρέπει να υπερισχύσουμε τις συντεταγμένες του κέντρου και της ακτίνας. Θα καθαρίσουμε το αντικείμενο βαφής και μετά θα βάλουμε έναν κύκλο στα (20, 15) (σε σχέση με το αντικείμενο βαφής) και την ακτίνα 15. Και θα επαναλάβουμε για έναν σκιασμένο και γεμάτο κύκλο.

//ΔΕΥΤΕΡΗ ΣΕΙΡΑ

// Κύκλος βαφής. Clear (ΧΡΩΜΑΤΙΣΜΕΝΟ) paint. DrawCircle (20, 18, 15, ΧΡΩΜΑ) epd. SetPartialWindowBlack (paint. GetImage (), 32, 78, paint. GetWidth (), paint. GetHeight ()); // Shaded Circle paint. Clear (ΧΡΩΜΑΤΙΣΜΕΝΟ) paint. DrawShadedCircle (20, 18, 15). epd. SetPartialWindowRed (paint. GetImage (), 72, 78, paint. GetWidth (), paint. GetHeight ()); // Γεμισμένη βαφή κύκλου. Clear (ΧΡΩΜΑΤΙΣΜΕΝΟ) paint. DrawFilledCircle (20, 18, 15, ΧΡΩΜΑ) epd. SetPartialWindowBlack (paint. GetImage (), 112, 78, paint. GetWidth (), paint. GetHeight ());

Βήμα 9: ΧΩΡΙΣΜΕΝΟ σε ΧΡΩΜΑ ΧΡΩΜΑ

Τα πάμε περίφημα εδώ! Έτσι, ενώ είμαστε σε ρολό, ας κάνουμε 3 ακόμη κύκλους σε μια σειρά παρακάτω, αυτή τη φορά ΧΡΩΜΑΤΙΣΜΕΝΟ σε ένα χρωματιστό αντικείμενο βαφής, όπως κάναμε με τη δεύτερη γραμμή κειμένου.

// ΤΡΙΤΗ ΣΕΙΡΑ

// Κύκλος βαφής. Clear (COLORED); paint. DrawCircle (20, 18, 15, ΧΡΩΜΑΤΙΣΜΕΝΟ) epd. SetPartialWindowRed (paint. GetImage (), 32, 114, paint. GetWidth (), paint. GetHeight ()); // Shaded Circle paint. Clear (COLORED) paint. DrawShadedCircle (20, 18, 15); epd. SetPartialWindowBlack (paint. GetImage (), 72, 114, paint. GetWidth (), paint. GetHeight ()); // Γεμισμένη βαφή κύκλου. Clear (COLORED); paint. DrawFilledCircle (20, 18, 15, ΧΡΩΜΑΤΙΣΜΕΝΟ) epd. SetPartialWindowRed (paint. GetImage (), 112, 114, paint. GetWidth (), paint. GetHeight ());

Εκτός από το σκιασμένο γέμισμα, υπάρχει επίσης ένα στίγμα γεμίσματος, το οποίο χρωματίζει τυχαία εικονοστοιχεία. Έτσι, αντί για τον σκιασμένο κύκλο από πάνω θα μπορούσαμε να βάλουμε

paint. DrawSpeckledCircle (20, 18, 15, 25).

Η τελική παράμετρος (25) είναι η πυκνότητα, δηλαδή το ποσοστό των εικονοστοιχείων που πρόκειται να χρωματιστούν. Εάν παραλειφθεί, το 50% θεωρείται.

Υπάρχει επίσης ένα DrawSpeckledRectangle, με μια προαιρετική επιπλέον παράμετρο που καθορίζει την πυκνότητα.

Βήμα 10: Περιστροφή

Οτιδήποτε μπορούμε να σχεδιάσουμε, μπορούμε να το περιστρέψουμε κατά 90, 180 ή 270 μοίρες. (Μετράμε τις περιστροφές δεξιόστροφα.)

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

Έτσι, εάν θέλετε το κείμενό σας να περιστρέφεται δεξιόστροφα κατά 90 μοίρες, έτσι ώστε να διαβάζεται από πάνω προς τα κάτω (αντί για αριστερά προς τα δεξιά), η επάνω δεξιά γωνία του αντικειμένου βαφής θα είναι (0, 0) για τους σκοπούς ό, τι γράφετε ή σύρετε σε αυτό, με x μετρημένο από τη γωνία προς τα κάτω και y από τη γωνία προς τα αριστερά.

Μάλλον παρατηρήσατε ότι αφήσαμε ένα κενό στην αριστερή πλευρά της οθόνης. Ας γράψουμε λοιπόν κάποιο κείμενο εκεί περιστρεφόμενο κατά 270 μοίρες, δηλαδή ανάγνωση από κάτω προς τα πάνω. Αυτό θα βάλει (0, 0) στην κάτω αριστερή γωνία.

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

Για να επαναλάβουμε, ας διαμορφώσουμε το αντικείμενο βαφής μας να έχει πλάτος 32 και ύψος 110, και θα του δώσουμε μια ιδιότητα ROTATE_270. Όχι ότι πρέπει να τα κάνουμε όλα αυτά πριν γράψουμε ή σχεδιάσουμε κάτι σε αυτό.

paint. SetWidth (32);

χρώμα. SetHeight (110); paint. SetRotate (ROTATE_270);

Θα το καθαρίσουμε στο ΧΡΩΜΑ και θα γράψουμε μια ΧΡΩΜΑΤΙΚΗ συμβολοσειρά σε αυτήν και, στη συνέχεια, τοποθετήστε τη στο (0, 42). (Αυτή είναι η επάνω αριστερή γωνία, θυμηθείτε. Ξεχάστε οποιαδήποτε περιστροφή των εικονοστοιχείων σε αυτήν.)

βαφή. Clear (COLORED); paint. DrawStringAt (8, 8, "Sideways!", & Font16, ΧΩΡΙΣ) epd. SetPartialWindowBlack (paint. GetImage (), 0, 42, paint. GetWidth (), paint. GetHeight ());

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

epd. DisplayFrame ();

epd. Sleep ();

Ένα δεύτερο παράδειγμα σκίτσου δείχνει περιστροφή κατά 90, 180 και 270 μοίρες. Μέχρι τώρα θα πρέπει να μπορείτε να το ακολουθήσετε μόνοι σας.

Βήμα 11: Σχεδίαση Bitmaps

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

www.buydisplay.com/image2lcd

Έρχεται ως αρχείο zip που περιέχει αρχείο εγκατάστασης.exe και αρχείο κειμένου που περιέχει κλειδί άδειας χρήσης. Αναπτύξτε το και κάντε διπλό κλικ στο αρχείο.exe για να το εγκαταστήσετε.

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

Μπορείτε να δημιουργήσετε την εικόνα σας με οποιοδήποτε λογισμικό σχεδίασης γνωρίζετε ή μπορείτε να σαρώσετε σε ένα σκίτσο ή σχέδιο, αλλά σε κάθε περίπτωση πρέπει να μπορείτε να τη μειώσετε σε μόλις 2 επίπεδα. Αποθηκεύστε το ως.gif,-j.webp

Εκκινήστε το Image2Lcd. Στο κάτω μέρος, θα δείτε μια καρτέλα Εγγραφή. Κάντε κλικ σε αυτό και εισαγάγετε τον κωδικό εγγραφής που ήρθε σε αρχείο κειμένου στο αρχείο zip που κατεβάσατε. Αυτό θα αφαιρέσει μια επικάλυψη στην εικόνα.

Στο Image2Lcd, ανοίξτε το αρχείο εικόνας. Στο αριστερό παράθυρο, βεβαιωθείτε ότι έχετε

• Τύπος αρχείου εξόδου: πίνακας C
• Λειτουργία σάρωσης: Οριζόντια σάρωση
• BitsPixel: Μονόχρωμο
• Μέγιστο πλάτος και ύψος: το μέγεθος της οθόνης σας και
• Η συμπερίληψη δεδομένων κεφαλίδας πρέπει να είναι μη επιλεγμένη.

Κάντε κλικ στο κουμπί δίπλα στο Μέγιστο πλάτος και ύψος για επεξεργασία. Θα εμφανιστεί το αποτέλεσμα της επεξεργασίας. Mayσως χρειαστεί να προσαρμόσετε τα ρυθμιστικά Brightness and Contrast για να έχετε τα καλύτερα αποτελέσματα.

Κάντε κλικ στο πλαίσιο ελέγχου Αντίστροφο χρώμα πάνω από το ρυθμιστικό Φωτεινότητα, καθιστώντας την αρνητική εικόνα, η οποία για κάποιο λόγο είναι απαραίτητη και, στη συνέχεια, κάντε κλικ στην επιλογή Αποθήκευση για να την αποθηκεύσετε ως imagedata.cpp στο φάκελο που περιέχει το σκίτσο σας Arduino. Την επόμενη φορά που θα ανοίξετε το σκίτσο με το Arduino IDE θα πρέπει να το δείτε ως νέα καρτέλα.

Βήμα 12: Εμφάνιση του Bitmap σας

Στο κύριο αρχείο του σκίτσου Arduino, αμέσως μετά τις γραμμές #συμπεριλάβετε στο επάνω μέρος, εισαγάγετε:

#include "imagedata.h"

Δημιουργήστε μια νέα καρτέλα (κάντε κλικ στο κάτω βέλος στο τέλος της γραμμής καρτελών) και ονομάστε την imagedata.h. Εισάγετε τις ακόλουθες 2 γραμμές σε αυτό:

extern const unsigned char IMAGE_BLACK ;

extern const unsigned char IMAGE_RED ;

Στο αρχείο imagedata.cpp, η πρώτη γραμμή θα ξεκινήσει με

const unsigned char gImage_image [2888] = {

(Ο αριθμός σε αγκύλες θα είναι διαφορετικός εάν δεν χρησιμοποιείτε την οθόνη 1.54 .) Αντικαταστήστε το με το

const unsigned char IMAGE_BLACK PROGMEM = {

Αυτό ισχύει για ασπρόμαυρη εικόνα. Αν το θέλετε κόκκινο και άσπρο, αλλάξτε το σε

const unsigned char IMAGE_RED PROGMEM = {

Λίγο πριν από αυτήν τη γραμμή, προσθέστε

#περιλαμβάνω

#include "imagedata.h"

Είστε τώρα έτοιμοι να εμφανίσετε την εικόνα σας. Σε βρόχο () στο κύριο αρχείο σας, προσθέστε

epd. ClearFrame ();

epd. DisplayFrame (IMAGE_BLACK, NULL);

Or, αν ήταν μια κόκκινη εικόνα που είχατε δημιουργήσει, η δεύτερη γραμμή θα έπρεπε να είναι

epd. DisplayFrame (NULL, IMAGE_RED);

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

epd. DisplayFrame (IMAGE_BLACK, IMAGE_RED);

Ωστόσο, τυχόν εικονοστοιχεία που καθορίζονται τόσο ως μαύρο στην ασπρόμαυρη εικόνα όσο και κόκκινο στην ερυθρόλευκη, θα βγουν κόκκινα.

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

Χρώμα βαφής (εικόνα, 20, 152). // το πλάτος πρέπει να είναι το πολλαπλάσιο του 8

paint. SetRotate (ROTATE_270); βαφή. Clear (ΧΩΡΙΣ) paint. DrawStringAt (20, 2, "@pleriche", & Font16, COLORED); epd. SetPartialWindowRed (paint. GetImage (), 0, 0, paint. GetWidth (), paint. GetHeight ()); epd. SetPartialWindowRed (paint. GetImage (), 0, 0, paint. GetWidth (), paint. GetHeight ()); epd. DisplayFrame ();