เพื่อน ๆ ที่รักยินดีต้อนรับสู่การกวดวิชาอื่น! ในวิดีโอนี้เราจะเรียนรู้วิธีการสร้างเมนู ourown สำหรับหน้าจอ LCD Nokia 5110 ที่ได้รับความนิยม เพื่อให้โครงการของเราเป็นมิตรกับผู้ใช้และมีความสามารถมากขึ้น มาเริ่มกันเลย!

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

ตอนนี้เรามาดูวิธีการสร้างโครงการนี้

วัสดุ:

ขั้นตอนที่ 1: รับชิ้นส่วนทั้งหมด

ชิ้นส่วนที่จำเป็นในการสร้างโครงการนี้มีดังต่อไปนี้:

• Arduino Uno ▶
• หน้าจอแอลซีดี Nokia 5110 ▶
• Rotary Encoder ▶
• เขียงหั่นขนมขนาดเล็ก▶
• บางสาย▶
• ธนาคารพลังงาน▶

ค่าใช้จ่ายของโครงการต่ำมากมันน้อยกว่า $ 10 คุณสามารถค้นหาลิงก์สำหรับทุกส่วนที่ฉันใช้ในคำอธิบายของวิดีโอด้านล่าง

ขั้นตอนที่ 2: Nokia 5110 จอแสดงผล LCD

Nokia 5110 เป็นจอแสดงผลที่ฉันโปรดปรานสำหรับโครงการ Arduino

Nokia 5110 เป็นหน้าจอ LCD กราฟิกพื้นฐานซึ่งเดิมทีตั้งใจให้เป็นหน้าจอโทรศัพท์มือถือ ใช้ตัวควบคุม PCD8544 ซึ่งเป็นคอนโทรลเลอร์ / ไดรเวอร์ CMOS LCD พลังงานต่ำ ด้วยเหตุนี้จอแสดงผลนี้มีการใช้พลังงานที่น่าประทับใจ ใช้เพียง 0.4mA เมื่อเปิดใช้งาน แต่แบ็คไลท์ปิดการทำงาน มันใช้น้อยกว่า 0.06mA เมื่ออยู่ในโหมดสลีป! นั่นเป็นหนึ่งในเหตุผลที่ทำให้รายการนี้เป็นรายการโปรดของฉัน PCD8544 เชื่อมต่อกับไมโครคอนโทรลเลอร์ผ่านอินเตอร์เฟสบัสแบบอนุกรม ทำให้จอแสดงผลใช้งานง่ายมากกับ Arduino คุณจะต้องเชื่อมต่อ 8 สาย

ฉันได้เตรียมการสอนโดยละเอียดเกี่ยวกับวิธีใช้หน้าจอ LCD Nokia 5110 กับ Arduino ฉันได้แนบวิดีโอนั้นในคำแนะนำนี้แล้วมันจะให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับจอแสดงผลดังนั้นฉันขอแนะนำให้คุณดูอย่างระมัดระวัง ราคาของจอแสดงผลอยู่ที่ประมาณ $ 4

คุณสามารถรับได้ที่นี่: ▶

ขั้นตอนที่ 3: Rotary Encoder

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

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

ค่าใช้จ่ายของ rotary encoder นี้ต่ำมาก มีค่าใช้จ่ายประมาณ $ 1.5

คุณสามารถรับได้ที่นี่▶

ขั้นตอนที่ 4: การสร้างโครงการ

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

ฉันวางจอแสดงผลไว้บนเขียงหั่นขนมเล็ก ๆ เช่นนี้ ก่อนอื่นให้เชื่อมต่อจอแสดงผล พินแรกของจอแสดงผลที่รีเซ็ตไปที่พินดิจิตอล 3 ของ Arduino Uno พินที่สองไปที่พินดิจิตอล 4, พินที่สามไปที่พินดิจิตอล 5, พินที่สี่ไปยังพินดิจิตอล 11 และพินที่ห้าเป็นดิจิตอล พิน 13. เข็มถัดไปคือ Vcc เราเชื่อมต่อ Vcc กับรางบวกของเขียงหั่นขนมและรางเลื่อนบวกเข้ากับเอาท์พุท 3.3V ของ Arduino เข็มถัดไปคือแสงพื้นหลังสำหรับจอแสดงผล เนื่องจากเราต้องการควบคุมผ่านซอฟต์แวร์ที่เราเชื่อมต่อกับพินดิจิตอล 7 พินสุดท้ายคือ GND เราเชื่อมต่อ GND กับรางเชิงลบของเขียงหั่นขนมและรางลบของเขียงหั่นขนมเข้ากับ Arduino GND

ตอนนี้สิ่งที่เราต้องทำก็คือเชื่อมต่อ rotary encoder เข็มแรกคือ GND และเราเชื่อมต่อกับรางเชิงลบของเขียงหั่นขนม เข็มต่อไปคือ Vcc และเราเชื่อมต่อกับรางบวกของเขียงหั่นขนม พินถัดไปคือ SW และเราเชื่อมต่อกับ Analog Pin 2 พินถัดไปชื่อ DT และเราเชื่อมต่อกับ Analog Pin 1 สุดท้ายหมุด CLK เชื่อมต่อกับ Analog Pin 0 คุณสามารถค้นหาแผนผังของโครงการนี้ใน คำอธิบายของวิดีโอด้านล่าง

ตอนนี้เราพร้อมแล้วที่จะเปิดโครงการ อย่างที่คุณเห็นโครงการทำงานได้ดีและเมนูทำงานตามที่คาดไว้! เยี่ยมมากมาดูซอฟต์แวร์ของโครงการแล้ว

ขั้นตอนที่ 5: รหัสของโครงการ

ในโครงการนี้เราใช้ห้องสมุด 4 แห่ง เราใช้สองไลบรารีสำหรับการแสดงผลและสองรายการสำหรับ rotary encoder

1. Adafruit GFX:
2. Nokia 5110:
3. ไลบรารีตัวเข้ารหัส:
4. ไลบรารี TimerOne:

ตอนแรกเราจะดูที่ฟังก์ชั่น drawMenu ฟังก์ชั่นนี้รับผิดชอบในการวาดเมนูบนหน้าจอ ฟังก์ชั่นนี้เรียกว่าทุกๆสองสามมิลลิวินาทีดังนั้นหากมีการเปลี่ยนแปลงเมนูฟังก์ชั่นนี้จะรับผิดชอบในการอัพเดทเมนูบนหน้าจอ

int menuitem = 1;

int frame = 1; int หน้า = 1; int lastMenuItem = 1;

นอกจากนี้ยังมีตัวแปรส่วนกลางที่สำคัญมาก 3 ตัวคือหน้าตัวแปรตัวแปรชุดสูทและกรอบตัวแปร หน้าตัวแปรจะจดจำหน้าจอ UI ที่แสดงบนหน้าจอ ดังนั้นหากตัวแปรหน้าเป็น 1 เราอยู่ในหน้าจอ UI หลักและหากตัวแปรเป็น 2 เราจะอยู่ในหน้าจอ UI รองที่เราตั้งค่าให้กับตัวแปร รายการเมนูจะจดจำรายการเมนูที่เลือก ดังนั้นถ้าค่าเป็น 1 รายการเมนูแรกจะถูกเลือกดังนั้นฟังก์ชัน drawMenu จะต้องวาดรายการเมนูนี้เป็นสีดำด้วยตัวอักษรสีขาว หากรายการเมนูเป็น 2 รายการเมนูที่สองจะถูกเลือกเป็นต้น ตัวแปรเฟรมจำได้ว่าส่วนใดของเมนูที่ปรากฏบนหน้าจอ เนื่องจากเมนูที่เราสร้างมี 6 รายการและเราสามารถแสดงได้ 3 รายการต่อครั้งเราจึงจำเป็นต้องทราบว่ารายการใดบ้างที่แสดงบนหน้าจอ ตัวแปรเฟรมบอกเราตรงนี้ หากตัวแปรเฟรมมีค่าเป็น 1 เราจะแสดงรายการเมนูสามรายการแรกถ้าเป็น 2 เราจะแสดงรายการ 2,3,4 เป็นต้น

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

String menuItem1 = "ความคมชัด";

String menuItem2 = "ปริมาณ"; String menuItem3 = "ภาษา"; String menuItem4 = "ยาก"; String menuItem5 = "Light: ON"; String menuItem6 = "รีเซ็ต";

boolean backlight = true; int ตรงกันข้าม = 60; ปริมาณ int = 50;

ภาษาสตริง 3 = {"EN", "ES", "EL"}; int selectedLanguage = 0;

ความยากของสตริง 2 = {"EASY", "HARD"}; int selectedDifficulty = 0;

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

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

ขั้นตอนที่ 6: ทดสอบโครงการ

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

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