วิธีเพิ่มการแสดงผล E-Ink ในโครงการของคุณ: 12 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03

โครงการจำนวนมากเกี่ยวข้องกับการตรวจสอบข้อมูลบางประเภท เช่น ข้อมูลด้านสิ่งแวดล้อม ซึ่งมักใช้ Arduino เพื่อควบคุม ในกรณีของฉัน ฉันต้องการตรวจสอบระดับเกลือในน้ำยาปรับผ้านุ่มของฉัน คุณอาจต้องการเข้าถึงข้อมูลผ่านเครือข่ายในบ้านของคุณ แต่เช่นเดียวกัน คุณอาจต้องการแสดงข้อมูลดังกล่าวในที่ที่มีการวัด หรือคุณอาจมีจอแสดงผลที่เชื่อมต่อจากระยะไกลตลอดเวลาในตำแหน่งที่สะดวกกว่า

ขณะนี้มีจอแสดงผลหลายประเภทที่คุณสามารถใช้ได้ ทั้งหมดค่อนข้างถูก แต่มีข้อดีและข้อเสียต่างกัน:

• จอ LCD ที่เป็นตัวอักษรและตัวเลขมีราคาถูกที่สุด แต่ก็มีข้อจำกัดมากที่สุดเช่นกัน
• จอแสดงผล OLED สามารถแสดงกราฟิกได้ แต่จอราคาถูกมีขนาดเล็กมาก ภาพถ่ายที่สองแสดงหน้าจอ OLED ขนาด 128x64 พิกเซล ถัดจาก E-Ink
• จอแสดงผล E-Ink (หรือ E-Paper) ค่อนข้างใหญ่กว่าและอ่านง่ายกว่า และมีข้อได้เปรียบที่จอแสดงผลจะยังคงอยู่แม้จะปิดอยู่! แต่จะใช้เวลาหลายวินาทีในการวาดหน้าจอใหม่

จอแสดงผล E-Ink นั้นเหมาะสำหรับแอปพลิเคชันของฉัน เนื่องจากฉันสามารถตั้งโปรแกรม Arduino ให้ตื่นทุกๆ สองสามชั่วโมง อ่านหนังสือและแสดงผลก่อนกลับไปนอน จากนั้นจึงใช้เวลาหลายวินาทีในการวาดหน้าจอใหม่

ในแอปพลิเคชันดังกล่าว ปริมาณการใช้กระแสไฟเฉลี่ยสามารถจัดให้ต่ำจนแบตเตอรี่เครื่องตรวจจับควันไฟลิเธียม 9V สามารถใช้งานได้นานถึง 10 ปี! ยิ่งไปกว่านั้น จอแสดงผลบางส่วนจะแสดงสามสี ได้แก่ สีขาว สีดำ และสีแดง (หรือสีเหลือง) เหมาะอย่างยิ่งหากคุณต้องการแสดงคำเตือนหรือการแจ้งเตือนเป็นสีแดง

เสบียง

จอแสดงผล E-Ink ที่ถูกที่สุดที่ฉันพบนั้นขายโดย BuyDisplay ซึ่งมีจำหน่ายจากผู้ขายอีเบย์หลายรายเช่นกัน น่าเสียดายที่เอกสารประกอบเป็นที่ต้องการค่อนข้างมาก ดังนั้นฉันจึงตัดสินใจเขียนบทช่วยสอน - อ่านต่อ!

ขึ้นอยู่กับความต้องการและงบประมาณของคุณ คุณสามารถเลือกขนาดต่างๆ:

• 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 พิกเซล)
• 5.83"(640x480 = 307, 200 พิกเซล)
• 7.5" (880x528 = 464, 640 พิกเซล)

(ช่วงได้ขยายขึ้นตั้งแต่ครั้งสุดท้ายที่ฉันดูดังนั้นอาจขยายได้อีกเมื่อคุณอ่านข้อความนี้)

มีให้เลือก 2 สี (ดำ/ขาว) หรือ 3 สี (ดำ/แดง/ขาว หรือดำ/เหลือง/ขาว) คำแนะนำนี้อนุมานว่าคุณกำลังใช้สีแดง แต่ถ้าคุณเลือกเวอร์ชันสีเหลือง ให้อ่าน "สีเหลือง" สำหรับ "สีแดง" ตลอด

เลือกเวอร์ชัน SPI (4 สาย) ฉันใช้รุ่น 1.54 ซึ่งเป็นขนาดที่ดีมาก

ขั้นตอนที่ 1: เชื่อมต่อจอแสดงผลของคุณ

จอแสดงผลเหล่านี้มาพร้อมกับส่วนหัวของพิน 2x4 หมายเลขพินมีป้ายกำกับชัดเจน หมุด 7, 5, 3 และ 1 (จากซ้ายไปขวา) ตามแถวบนสุด และ 8, 6, 4, 2 ที่ด้านล่าง

จอแสดงผลของคุณอาจมาพร้อมกับสายแพตช์ 8 ทาง ซึ่งทำให้การเชื่อมต่อทำได้ง่าย (สายแพตช์ของฉันมีสายสีแดง 2 เส้น และสายสีน้ำตาล 2 เส้น ไม่สามารถเปลี่ยนได้!

ตารางต่อไปนี้แสดงการเชื่อมต่อ ซึ่งใช้กับ Arduino ส่วนใหญ่ (รวมถึง Uno, Pro Mini, Pro Micro และ Nano)

โมดูลหมึกอิเล็กทรอนิกส์		Arduino
เข็มหมุด	ชื่อ	เข็มหมุด	ชื่อ
1	VDD	Vcc	3.3/5V
2	VSS	Gnd	Gnd
3	ข้อมูลอนุกรมใน	11	MOSI
4	นาฬิกาอนุกรมใน	13	SCK
5	/ชิป Select	10
6	ข้อมูล/คำแนะนำ	9
7	รีเซ็ต	8
8	อุปกรณ์ไม่ว่าง	7

ขั้นตอนที่ 2: ดาวน์โหลดซอฟต์แวร์ที่ให้มา

คุณสามารถใช้ซอฟต์แวร์ที่ให้มาตามที่อธิบายไว้ในขั้นตอนนี้ หรือคุณสามารถใช้ไลบรารีที่ปรับปรุงแล้วของฉันในขั้นตอนต่อไปยกเว้นอย่างใดอย่างหนึ่ง

ค้นหาอุปกรณ์ของคุณที่ BuyDisplay.com ที่ด้านล่างของหน้า คุณจะพบไฟล์ ZIP ดาวน์โหลดไฟล์ "Arduino Library and Example for 4-wire SPI" คลิกที่นี่เพื่อดาวน์โหลดและเปิดใน Windows Explorer

Windows Explorer จะแสดงสิ่งนี้ว่ามีโฟลเดอร์ระดับบนสุดเพียงโฟลเดอร์เดียว "Libraries-Examples_ER-EPM0154-1R" (ชื่อจะแตกต่างออกไปเล็กน้อยหากคุณไม่ใช่รุ่น 1.54")

คัดลอกโฟลเดอร์ระดับบนสุดนี้ลงในโฟลเดอร์ไลบรารี Arduino ของคุณ คลิกขวาเพื่อเปลี่ยนชื่อโฟลเดอร์ และลบ "Libraries-Examples_" ออกจากชื่อ

(หากต้องการค้นหาโฟลเดอร์ไลบรารี Arduino ใน Arduino IDE ให้คลิก File… Preferences และบันทึกตำแหน่ง Sketchbook ไปที่สิ่งนี้ แล้วคุณจะพบโฟลเดอร์ "libraries" ของ Arduino ในโฟลเดอร์สเก็ตช์ของคุณ)

เปิดโฟลเดอร์นี้และเปิดโฟลเดอร์ "Libraries" ที่อยู่ภายใน ลากและวางไฟล์ทั้งหมดในโฟลเดอร์นี้ลงในโฟลเดอร์หลักขึ้นหนึ่งระดับ ("ER-EPM0154-1R") ลบโฟลเดอร์ "Libraries" (ตอนนี้ว่างเปล่า)

คุณได้ติดตั้งไฟล์และภาพร่างตัวอย่างเป็นไลบรารี Arduino แล้ว โปรดทราบว่าหากจอแสดงผลของคุณไม่ใช่รุ่น 1.54 ความแตกต่างเพียงอย่างเดียวดูเหมือนจะเป็นสองบรรทัดใน ER-ERM*-1.h ที่กำหนด WIDTH และ HEIGHT

ใน Arduino IDE ให้คลิกที่ File… ทดสอบและเลื่อนลงไปที่ ER-EPM0154-1R สำหรับร่างการสาธิต ซึ่งคุณควรจะสามารถคอมไพล์และรันได้ทันทีที่คุณเชื่อมต่อจอแสดงผลกับ Arduino

ขั้นตอนที่ 3: เรียกใช้การสาธิต

ใน Arduino IDE ให้คลิกไฟล์… ตัวอย่าง… ER-EPM0154-1R

เชื่อมต่อ Arduino กับคอมพิวเตอร์ด้วยสาย USB หรือตามปกติ

ภายใต้ เครื่องมือ ให้ตั้งค่าบอร์ด โปรเซสเซอร์ และพอร์ต

ภายใต้ Sketch คลิกอัปโหลด

จะมีความล่าช้าเล็กน้อยหลังจากการอัปโหลดเสร็จสิ้น และการหน่วงเวลาสิบครั้งจะกะพริบหลายครั้งในขณะที่วาดภาพแรก ดูในขณะที่มันผ่านการสาธิต

ขั้นตอนที่ 4: การใช้ไลบรารีที่ปรับปรุงแล้ว

คุณสามารถดาวน์โหลดไลบรารีที่ปรับปรุงแล้วของฉันจาก github ได้ที่

เอ็นบี ฉันมีความมั่นใจในระดับสูงว่าห้องสมุดของฉันจะทำงานกับจอแสดงผลทุกขนาดที่เข้ากันได้ แต่อันที่จริงฉันได้ทดสอบกับรุ่น 1.54 เท่านั้น หากคุณใช้รุ่นอื่น โปรดแจ้งให้เราทราบในความคิดเห็นในตอนท้าย ของคำแนะนำนี้ เพื่อยืนยันว่าใช้งานได้ แต่ถ้าไม่ ฉันจะทำให้ดีที่สุดเพื่อให้คุณไป

ดาวน์โหลดและบันทึกไฟล์ zip ใน Arduino IDE ให้คลิก Sketch… รวมไลบรารี… เพิ่ม. ZIP Library และเลือกไฟล์ zip ที่บันทึกไว้

ห้องสมุดของฉันมีการปรับปรุงเล็กน้อยหลายประการ:

• อนุญาตให้ใช้หมายเลขพิน Arduino ที่แตกต่างกัน (ยกเว้น MOSI)
• ห้องสมุดเดียวกันสามารถใช้ได้กับอุปกรณ์ขนาดใดก็ได้
• มีการเติมสีใหม่ที่แรเงา 50% และการเติมแบบมีจุด (ชุดพิกเซลสุ่ม)

ไลบรารีมาเป็นไฟล์บีบอัด (zip) มาตรฐานของ Arduino ดาวน์โหลดลงในโฟลเดอร์ Downloads ของคุณ (หรือตำแหน่งที่คุณต้องการ) และใน Arduino IDE ให้คลิก Sketch… รวมไลบรารี … เพิ่มไลบรารี ZIP

ใต้ตัวอย่าง คุณจะพบ E-ink_ER-EPM มีตัวอย่าง 3 ภาพ:

• ER_EPM154-1R-Test: การสาธิตที่ผู้ขายจัดเตรียมให้
• E-ink_demo: ร่างที่พัฒนาขึ้นในขั้นตอนต่อไป
• E-ink_rotate: การสาธิตการหมุนภาพ

ขั้นตอนที่ 5: การเขียนโปรแกรมด้วยตัวเอง

น่าเสียดายที่ไม่มีเอกสารประกอบกับรหัสที่ผู้ขายให้มา และโค้ดตัวอย่างก็ไม่มีความคิดเห็นเพียงพอ สิ่งนี้ทำให้ยากกว่าที่ควรจะเป็น และจุดประสงค์หลักของคำแนะนำนี้คือการทำให้ถูกต้อง

แนวคิดพื้นฐาน

เนื่องจาก Arduino มี RAM ที่จำกัด ไลบรารีจึงอนุญาตให้คุณวาดหรือเขียนในส่วนเล็กๆ ของหน้าจอในแต่ละครั้ง โดยอัปโหลดไปยังหน่วยความจำภายในของอุปกรณ์ทีละรายการ เมื่อคุณอัปโหลดส่วนทั้งหมดที่คุณต้องการแล้ว คุณต้องบอกให้แสดงสิ่งที่อยู่ในหน่วยความจำ

ส่วนของหน้าจอเหล่านี้เรียกว่าวัตถุ "ระบายสี" คุณต้องการเพียงส่วนเดียว และสำหรับแต่ละส่วนของหน้าจอ คุณจะต้องกำหนดความสูง ความกว้าง และการหมุน เมื่อเสร็จแล้ว คุณอัปโหลด กำหนดตำแหน่งบนหน้าจอที่จะโหลด และควรเป็นขาวดำหรือแดงและขาว

มุมซ้ายบนของหน้าจอมีพิกัดแนวนอน (x) และแนวตั้ง (y) (0, 0) ด้านล่างซ้ายคือ (0, 151) และมุมขวาบนคือ (151, 0)

การเริ่มต้น

เปิด te 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

เรากำหนดชื่อสำหรับพิกเซล UNCOLORED (สีขาว) และ COLORED (สีดำหรือสีแดง) (หมายเหตุถึงเพื่อนชาวยุโรปของฉัน: ใช้การสะกดแบบอเมริกันของ COLOR)

Epd epd; เส้นสร้างวัตถุอุปกรณ์กระดาษอิเล็กทรอนิกส์ที่เราจะแสดง สิ่งนี้จะต้องอยู่ที่นี่เมื่อเริ่มต้นร่างเพื่อให้สามารถกัดฟังก์ชัน setup() และ loop() ได้

หากคุณมีจอแสดงผลขนาดอื่น คุณสามารถเปลี่ยนบรรทัด EPD ได้โดย:

Epd epd(กว้าง สูง);

(ก่อนหน้านี้กำหนด WIDTH และ HEIGHT ในคำสั่ง #define)

ในทำนองเดียวกัน คุณสามารถระบุหมายเลขพินที่ไม่ใช่ค่าเริ่มต้นด้วย:

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

ภายใน setup() เราจำเป็นต้องเริ่มต้นอุปกรณ์ดังนี้:

Serial.begin(9600)

ถ้า (epd. Init() != 0) { Serial.print ("e-Paper init ล้มเหลว"); กลับ; }

(อันที่จริง epd. Init() จะไม่ส่งคืนข้อผิดพลาด แต่การปรับปรุงในอนาคตอาจตรวจพบว่าไม่มีจอแสดงผลหรือไม่ทำงาน)

ขั้นตอนที่ 6: การเขียนข้อความ

ใน E-ink_demo ให้หันความสนใจไปที่ loop() ขั้นแรก ให้ล้างการแสดงผล:

epd. ClearFrame()

(ไม่จำเป็นจริง ๆ หากคุณกำลังจะแสดงภาพของคุณเอง)

ก่อนที่เราจะสามารถวาดอะไรก็ได้ (ไม่ว่าจะเป็นข้อความหรือกราฟิก) เราจำเป็นต้องสร้างวัตถุ Paint เพื่อวาด:

ภาพถ่านที่ไม่ได้ลงนาม[1024]

เพ้นท์สี(รูปภาพ, 152, 18); // width ควรเป็นผลคูณของ 8

สงวนพื้นที่บางส่วน (1024 ไบต์) และจัดสรรให้กับวัตถุ Paint ที่คั่นด้วยบรรทัดที่สอง มีการกำหนดค่าชั่วคราวเป็น 152 พิกเซลกว้างและ 18 พิกเซลลึก เราสามารถกำหนดค่าใหม่ในภายหลังเพื่อนำกลับมาใช้ใหม่ได้ตามความจำเป็น แต่หมายเหตุ: ความกว้างจะต้องเป็น multiple เท่ากับ 8 เนื่องจากมีการจัดเก็บพิกเซล 8 พิกเซลต่อไบต์ และเราไม่สามารถแบ่งไบต์ได้ (อันที่จริงแล้วมันจะปัดเศษขึ้นหากจำเป็น แต่อาจทำให้งงได้เมื่อจอแสดงผลของคุณไม่เป็นไปตามที่ควร

ตอนนี้เราต้องล้างวัตถุสีเป็น UNCOLORED (สีขาว) จากนั้นที่ตำแหน่ง (x, y) = (22, 2) เราเขียน "e-ink Demo" โดยใช้แบบอักษรสูง 16 พิกเซลและ COLORED (เพื่อแสดงเทียบกับ พื้นหลังไม่มีสี

สีใส(ไม่มีสี)

paint. DrawStringAt(12, 2, "e-paper Demo", &Font16, COLORED); ระบายสี

โปรดทราบว่าพิกัด (22, 2) คือมุมบนซ้ายมือของอักขระตัวแรกของสตริง และมีขนาด 22 พิกเซลและลดลง 2 พิกเซลเมื่อเทียบกับมุมซ้ายบนของวัตถุระบายสี ไม่ใช่จอแสดงผลทั้งหมด. ข้อความจะดูดีที่สุดอย่างน้อยหนึ่งพิกเซลจากด้านบนของวัตถุสี

มีแบบอักษรต่อไปนี้:

Font8 - 5x8 พิกเซลFont12 - 7x12 พิกเซลFont16 - 11x16 พิกเซลFont20 - 14x20 พิกเซลFont24 - 17x24 พิกเซล

ตอนนี้เราแค่ต้องส่งวัตถุทาสี ("สี") ไปยังอุปกรณ์ ("epd"):

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

SetPartialWindowBlack เป็นวิธีการที่เรานำไปใช้กับวัตถุ epd โดยใช้รูปภาพและคุณสมบัติความกว้างและความลึกของวัตถุสี เรากำลังบอกให้เขียนภาพนี้ไปยังอุปกรณ์ที่ (x, y) = (0, 3) และเรากำลังบอกว่าพิกเซลสีต้องเป็นสีดำ

มันไม่ยากเกินไปใช่ไหม มาลองกันอีกแบบ

สีใส(COLORED);

paint. DrawStringAt(20, 2, "(สีขาวบนสี)", &Font12, UNCOLORED); epd. SetPartialWindowRed(paint. GetImage(), 0, 24, paint. GetWidth(), paint. GetHeight());

เรานำวัตถุสีเดิมมาใช้ใหม่ และมีความกว้างและความสูงเท่ากัน แต่คราวนี้ เรามาล้างเป็น COLORED แล้วเขียนสตริงที่ยังไม่ได้สีลงไป และสำหรับการเปลี่ยนแปลง เราจะทำให้พิกเซลสีเป็นสีแดง และเขียนไปที่อุปกรณ์ที่ (0, 24) ด้านล่างอันแรก

เราได้เขียนวัตถุระบายสีทั้งสองลงในหน่วยความจำของอุปกรณ์แล้ว แต่ยังไม่ได้บอกให้แสดง เราทำสิ่งนี้ด้วยข้อความต่อไปนี้:

epd. DisplayFrame();

(ในภาพสเก็ตช์ E-ink_demo เราทิ้งสิ่งนี้ไว้จนจบ หลังจากวาดอย่างอื่นแล้ว แต่คุณสามารถแทรกที่นี่ได้หากต้องการ mybe ตามด้วย delay(10000) เพื่อให้คุณมีเวลาชื่นชมผลงานของคุณ

ขั้นตอนที่ 7: การวาดเส้นและสี่เหลี่ยมผืนผ้า

มาดูวิธีการวาดเส้นและสี่เหลี่ยมกัน เราจะใช้วัตถุระบายสีเดียวกัน แต่เราต้องกำหนดค่าใหม่เป็นกว้าง 40 พิกเซลและสูง 36 พิกเซล เราจะเคลียร์มันให้เป็น UNCOLORED

สี. SetWidth(40);

สี. SetHeight(36); paint. Clear(ไม่มีสี);

เราจะวาดรูปสี่เหลี่ยม (COLORED) ที่มีมุมซ้ายบน (5, 3) และด้านล่างขวา (35, 33) สัมพันธ์กับวัตถุระบายสีตามปกติ เราจะวาดเส้นทแยงมุมเป็นเส้นตั้งแต่ (5, 3) ถึง (35, 33) และจาก (35, 3) ถึง (5, 33) สุดท้าย เราจะเขียนวัตถุสีทั้งหมด (สีแดง) ลงบนหน้าจอที่ (32, 42)

//แถวบนสุด:

// สี่เหลี่ยมผืนผ้า paint. Clear(UNCOLORED); paint. DrawRectangle(5, 3, 35, 33, COLORED;) วาดเส้น(5, 3, 35, 33, COLORED); สี. DrawLine (35, 3, 5, 33, สี); epd. SetPartialWindowRed(paint. GetImage(), 32, 42, paint. GetWidth(), paint. GetHeight());

ไลบรารี่ก็จัดเตรียมสี่เหลี่ยมผืนผ้าที่เติมไว้ด้วย แต่เดี๋ยวก่อน ฉันต้องการอันที่แรเงา ดังนั้นฉันจึงเพิ่มวิธีการใหม่ เราจะทำสี่เหลี่ยมอีกสองอัน อันหนึ่งแรเงาและอีกหนึ่งอัน แล้ววางมันไว้ทางด้านขวาของอันแรก สลับให้เป็นสีดำกับสีแดง

// Shaded Rectange paint. Clear(ไม่มีสี); paint. DrawShadedสี่เหลี่ยมผืนผ้า(5, 3, 35, 33); epd. SetPartialWindowBlack(paint. GetImage(), 72, 42, paint. GetWidth(), paint. GetHeight()); // เติมสีสี่เหลี่ยมผืนผ้าใส (ไม่มีสี); สี. DrawFilledRectangle(5, 3, 35, 33, COLORED); epd. SetPartialWindowRed(paint. GetImage(), 112, 42, paint. GetWidth(), paint. GetHeight());

ขั้นตอนที่ 8: การวาดวงกลม

วงกลมนั้นง่ายต่อการวาด แทนที่จะใช้พิกัดของสองมุม เราต้องกำหนดพิกัดของจุดศูนย์กลางและรัศมีไว้ล่วงหน้า เราจะล้างวัตถุสีแล้วใส่วงกลมที่ (20, 15) (เทียบกับวัตถุสี) และรัศมี 15 และทำซ้ำสำหรับวงกลมที่แรเงาและเต็ม

//แถวที่สอง

// วงกลมสีใส (ไม่มีสี); paint. DrawCircle(20, 18, 15, สี); epd. SetPartialWindowBlack(paint. GetImage(), 32, 78, paint. GetWidth(), paint. GetHeight()); // Shaded Circle paint. Clear(ไม่มีสี); สี. DrawShadedCircle(20, 18, 15); epd. SetPartialWindowRed(paint. GetImage(), 72, 78, paint. GetWidth(), paint. GetHeight()); //เติมสีวงกลมใส(ไม่มีสี); สี. DrawFilledCircle(20, 18, 15, COLORED); epd. SetPartialWindowBlack(paint. GetImage(), 112, 78, paint. GetWidth(), paint. GetHeight());

ขั้นตอนที่ 9: ไม่มีสีบน Bckground ที่มีสี

เรากำลังโด่งดังที่นี่! ดังนั้นในขณะที่เรากำลังดำเนินการ เรามาทำวงกลมอีก 3 วงในแถวด้านล่าง คราวนี้ UNCOLORED บนวัตถุสี COLORED เหมือนกับที่เราทำกับข้อความบรรทัดที่สอง

//แถวที่สาม

// วงกลม paint. 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()); //เติมสีวงกลมใส(COLORED); paint. DrawFilledCircle(20, 18, 15, ไม่ระบายสี); epd. SetPartialWindowRed(paint. GetImage(), 112, 114, paint. GetWidth(), paint. GetHeight());

นอกจากการเติมแรเงาแล้ว ยังมีการเติมแบบมีจุด ซึ่งให้สีพิกเซลแบบสุ่ม ดังนั้นแทนที่จะใส่วงกลมแรเงาด้านบน เราอาจใส่

สี. DrawSpeckledCircle(20, 18, 15, 25);

พารามิเตอร์สุดท้าย (25) คือความหนาแน่น นั่นคือ เปอร์เซ็นต์ของพิกเซลที่จะลงสี หากละเว้น จะถือว่า 50%

นอกจากนี้ยังมี DrawSpeckledRectangle พร้อมพารามิเตอร์เสริมที่ระบุความหนาแน่น

ขั้นตอนที่ 10: การหมุน

อะไรก็ตามที่เราวาดได้ เราสามารถหมุนได้ 90, 180 หรือ 270 องศา (เรานับการหมุนตามเข็มนาฬิกา)

เราสามารถใช้คุณสมบัติ ROTATE กับวัตถุระบายสีได้ แต่สิ่งสำคัญคือต้องเข้าใจว่าไม่ใช่วัตถุสีที่หมุน แต่ทุกสิ่งที่คุณเขียนลงไป ดังนั้นหากคุณต้องการข้อความแนวตั้ง คุณต้องกำหนดค่าวัตถุสีของคุณให้ยาวและบางในแนวตั้งแทนที่จะเป็นแนวนอน

ดังนั้น หากคุณต้องการให้ข้อความของคุณหมุนตามเข็มนาฬิกา 90 องศา เพื่อให้อ่านจากบนลงล่าง (แทนที่จะเป็นซ้ายไปขวา) มุมขวาบนของวัตถุสีจะเป็น (0, 0) สำหรับวัตถุประสงค์ของสิ่งที่คุณเขียน หรือวาดลงไป โดยให้ x mesure จากมุมนั้นลงไป และ y จากมุมนั้นไปทางซ้าย

คุณอาจสังเกตเห็นว่าเราเว้นที่ว่างไว้ทางด้านซ้ายมือของจอแสดงผล ลองเขียนข้อความที่หมุนไป 270 องศา นั่นคือ อ่านจากล่างขึ้นบน ซึ่งจะใส่ (0, 0) ที่มุมล่างซ้ายมือ

โปรดทราบว่าอย่างไรก็ตาม คุณหมุนวัตถุระบายสี การหมุนจะใช้เฉพาะเมื่อคุณวาดพิกเซลลงบนวัตถุนั้นเท่านั้น เมื่อคุณมาเขียนมันไปยังอุปกรณ์ มันยังคงเป็นพิกัดของมุมบนซ้ายมือที่คุณต้องให้กับ SetPartialWindow

สรุป ให้กำหนดค่าวัตถุระบายสีของเราให้มีความกว้าง 32 และความสูง 110 และเราจะให้คุณสมบัติ ROTATE_270 แก่มัน ไม่ใช่ว่าเราต้องทำทั้งหมดนี้ก่อนเขียนหรือวาดอะไรลงไป

สี. SetWidth(32);

สี. SetHeight(110); สี. SetRotate(ROTATE_270);

เราจะล้างข้อมูลเป็น COLORED แล้วเขียนสตริงที่ UNCOLORED ลงไป จากนั้นวางไว้ที่ (0, 42) (นั่นคือมุมบนซ้ายมือ อย่าลืมการหมุนพิกเซลในนั้น)

สีใส(COLORED); paint. DrawStringAt(8, 8, "ด้านข้าง!", &Font16, UNCOLORED); epd. SetPartialWindowBlack(paint. GetImage(), 0, 42, paint. GetWidth(), paint. GetHeight());

สุดท้าย เราต้องบอกให้อุปกรณ์แสดงพิกเซลทั้งหมดที่เราให้มา และถ้าเราไม่ต้องการที่จะเปลี่ยนสักพักหนึ่งและต้องการประหยัดพลังงานแบตเตอรี่เราสามารถทำให้มันเข้าสู่โหมดสลีปได้และทำไมไม่ให้ Arduino เข้าสู่โหมดสลีปด้วยเพื่อให้ตื่นขึ้นเมื่อถึงเวลาถ่ายและแสดงผลอื่น ๆ การวัด

epd. DisplayFrame();

epd.นอน();

ตัวอย่างภาพร่างที่สองแสดงการหมุน 90, 180 และ 270 องศา โดยตอนนี้คุณควรจะสามารถปฏิบัติตามได้ด้วยตัวเอง

ขั้นตอนที่ 11: การวาดบิตแมป

การสาธิตของผู้ขายรวมถึงการแสดงภาพบิตแมปสองสามภาพ สิ่งเหล่านี้สร้างได้ง่ายโดยใช้เครื่องมือที่สามารถดาวน์โหลดได้จาก

www.buydisplay.com/image2lcd

มาเป็นไฟล์ zip ที่มีไฟล์ติดตั้ง.exe และไฟล์ข้อความที่มีรหัสลิขสิทธิ์ ขยายจากนั้นดับเบิลคลิกที่ไฟล์.exe เพื่อติดตั้ง

เห็นได้ชัดว่ามีข้อ จำกัด ที่รุนแรงพอสมควรในสิ่งที่คุณสามารถแสดงได้เนื่องจากพิกเซล E-ink สามารถเปิดหรือปิดได้เท่านั้นและไม่สามารถแสดงระดับสีเทาได้ แต่เป็นไปได้ที่จะซ้อนทับวัตถุสีสี่เหลี่ยมบนรูปภาพ คุณอาจต้องการแสดงโลโก้ สัญลักษณ์ หรือข้อความคงที่ในแบบอักษรแฟนซี ซึ่งคุณสามารถซ้อนทับข้อความหรือกราฟิกที่เปลี่ยนแปลงได้ เช่น แผนภูมิแท่งหรือแผนภูมิวงกลม ซึ่งอาจบ่งบอกถึงระดับของเหลว

คุณสามารถสร้างภาพด้วยซอฟต์แวร์การวาดอะไรก็ได้ที่คุณคุ้นเคย หรือจะสแกนแบบร่างหรือภาพวาดก็ได้ แต่ในกรณีใด ๆ คุณจำเป็นต้องลดให้เหลือเพียง 2 ระดับเท่านั้น บันทึกเป็น.gif,-j.webp

เปิดตัว Image2Lcd. ที่ด้านล่าง คุณจะเห็นแท็บลงทะเบียน คลิกที่นี่และป้อนรหัสลงทะเบียนซึ่งมาในไฟล์ข้อความในไฟล์ zip ที่คุณดาวน์โหลด การดำเนินการนี้จะลบการซ้อนทับบนรูปภาพ

ใน Image2Lcd ให้เปิดไฟล์รูปภาพของคุณ ในบานหน้าต่างด้านซ้ายมือ ตรวจสอบให้แน่ใจว่าคุณมี

• ประเภทไฟล์เอาต์พุต: C array
• โหมดสแกน: สแกนแนวนอน
• BitsPixel: ขาวดำ
• ความกว้างและความสูงสูงสุด: ขนาดจอแสดงผลของคุณ และ
• ต้องยกเลิกการเลือกรวมข้อมูลส่วนหัว

คลิกปุ่มถัดจากความกว้างสูงสุดและความสูงเพื่อดำเนินการ ผลลัพธ์ของการประมวลผลจะปรากฏขึ้น คุณอาจต้องปรับแถบเลื่อนความสว่างและความคมชัดเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

คลิกช่องทำเครื่องหมาย Reverse color ด้านบนแถบเลื่อน Brightness ทำให้เป็นภาพเนกาทีฟ ซึ่งจำเป็นด้วยเหตุผลบางประการ จากนั้นคลิกบันทึกเพื่อบันทึกเป็น imagedata.cpp ในโฟลเดอร์ที่มีภาพสเก็ตช์ Arduino ของคุณ ครั้งต่อไปที่คุณเปิดภาพสเก็ตช์ด้วย Arduino IDE คุณควรเห็นมันเป็นแท็บใหม่

ขั้นตอนที่ 12: การแสดงบิตแมปของคุณ

ในไฟล์หลักของร่าง Arduino ของคุณ ให้ทำตาม #include บรรทัดด้านบนทันที ให้แทรก:

#include "imagedata.h"

สร้างแท็บใหม่ (คลิกลูกศรลงที่ท้ายบรรทัดแท็บ) และเรียกมันว่า imagedata.h แทรก 2 บรรทัดต่อไปนี้ในนั้น:

extern const ถ่านที่ไม่ได้ลงชื่อ IMAGE_BLACK;

extern const ถ่านที่ไม่ได้ลงชื่อ IMAGE_RED;

ในไฟล์ imagedata.cpp บรรทัดแรกจะขึ้นต้นด้วย

const ถ่านที่ไม่ได้ลงชื่อ gImage_image [2888] = {

(ตัวเลขในวงเล็บเหลี่ยมจะต่างกันหากคุณไม่ได้ใช้จอแสดงผลขนาด 1.54 นิ้ว) แทนที่ด้วย

const ถ่านที่ไม่ได้ลงชื่อ IMAGE_BLACK PROGMEM = {

นี้สำหรับภาพขาวดำ อยากได้สีแดงขาวเปลี่ยนเป็น

const ถ่านที่ไม่ได้ลงชื่อ IMAGE_RED PROGMEM = {

ก่อนบรรทัดนี้ให้แอด

#รวม

#include "imagedata.h"

ตอนนี้คุณพร้อมที่จะแสดงภาพของคุณแล้ว ในลูป () ในไฟล์หลักของคุณ ให้เพิ่ม

epd. ClearFrame();

epd. DisplayFrame (IMAGE_BLACK, NULL);

หรือถ้าเป็นภาพสีแดงที่คุณสร้างขึ้น บรรทัดที่สองควรเป็น

epd. DisplayFrame (NULL, IMAGE_RED);

ที่จริงแล้ว คุณสามารถสร้างภาพสีแดงและสีดำรวมกันได้โดยแปลงส่วนสีแดงและสีดำแยกกันด้วย Image2Lcd และแสดงทั้งสองด้วย

epd. DisplayFrame (IMAGE_BLACK, IMAGE_RED);

อย่างไรก็ตาม พิกเซลใดๆ ที่ระบุทั้งสีดำในภาพขาวดำ และสีแดงในสีแดงและสีขาว จะเป็นสีแดง

สุดท้าย คุณสามารถซ้อนภาพของคุณด้วยฟังก์ชันข้อความหรือกราฟิกที่เราได้เรียนรู้ก่อนหน้านี้ ฉันต้องการเพิ่มหมายเลขอ้างอิง Twitter ของฉัน ดังนั้นฉันจึงเพิ่ม

เพ้นท์สี(รูปภาพ, 20, 152); // width ควรเป็นผลคูณของ 8

สี. SetRotate(ROTATE_270); paint. Clear(ไม่มีสี); สี. 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();