จิตรกร 8x8: 6 ขั้นตอน

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

เครื่องมือง่ายๆ สำหรับสร้างกราฟิกบนโมดูล LED 8x8

ผู้ชาย - ฉันไม่ดี ไม่ แย่จริงๆ เมื่อพูดถึงการวาดไอคอน โดยเฉพาะการวาดไอคอนบนตารางขนาด 8x8 เช่น WEMOS Matrix Displays ขนาดเล็กสำหรับ WEMOS D1 ยิ่งไปกว่านั้น ฉันดูดการนับแถวและแปลงเป็นการแสดงเลขฐานสอง

ฉันเลยโกง - และสร้างสิ่งเล็กๆ ที่เรียกว่าจิตรกร 8x8

ขั้นตอนที่ 1: นั่นคืออะไร

ESP8266 โฮสต์เว็บเพจที่แสดงตารางขนาด 8x8 ของการแสดงเมทริกซ์ - คลิกจุดใดจุดหนึ่งเหล่านี้แล้วเปลี่ยนเป็นสีแดง/เปิด คลิกอีกครั้งแล้วปิด/เป็นสีดำ จอแสดงผลของคุณทำสิ่งเดียวกัน ดังนั้นคุณจึงสามารถดูงานศิลปะของคุณในแบบเรียลไทม์บนฮาร์ดแวร์จริงได้ ฉันยังคงวาดอะไรไม่ค่อยดี แต่ตอนนี้ฉันรู้ค่อนข้างเร็วเมื่อฉันดูด:)

ทางด้านขวาของกริด (บนหน้าจอของคุณ) คุณจะพบการแสดงไบนารีพร้อมคัดลอก&วางในรูปแบบของอาร์เรย์ไบต์ (เก็บไว้ในโปรแกรม) - เพียงแค่หยิบและวางลงในโค้ดของคุณ อย่าลังเลที่จะปรับชื่ออาร์เรย์ และถ้าโปรแกรมใช้ไม่ได้สำหรับคุณ: นั่นคือ 8 ไบต์ - ดังนั้นมันอาจจะไม่โอเวอร์โหลดหน่วยความจำของคุณ;)

ขั้นตอนที่ 2: คุณต้องการอะไร

นี้ได้รับการออกแบบโดยคำนึงถึง WEMOS D1 ดังนั้นคุณต้องมี D1 และ LOLIN Matrix LED shield:D1:https://www.aliexpress.com/item/32651747570.html

Matrix LED Shield:https://www.aliexpress.com/item/33046133551.html

- นี่ไม่ใช่ลิงค์พันธมิตร - นี่คือที่ที่ฉันได้รับของ หาซื้อที่ไหนก็ได้ตามสบาย

ขั้นตอนที่ 3: ซอฟต์แวร์?

ดาวน์โหลดโครงการได้ที่นี่:

โปรเจ็กต์มาในสองไฟล์ ไฟล์แรกเป็นแบบสเก็ตช์ ไฟล์ที่สองมีหน้าเว็บที่ ESP ของคุณจะส่ง

หากคุณไม่สะดวกที่จะดาวน์โหลดไฟล์ ZIP ที่ไม่รู้จัก นี่คือภาพร่างหลัก:

…และหน้าเว็บ:

หากคุณไม่ได้ใช้ ZIP: ไฟล์ทั้งสองจะอยู่ในโฟลเดอร์เดียว Webpage-Part ควรอยู่ในไฟล์ชื่อ "index_html.h" - สเก็ตช์สามารถเรียกอะไรก็ได้ ตราบใดที่ชื่อโฟลเดอร์เป็นชื่อเดียวกับของ INO ใช่ Arduino …

ขั้นตอนที่ 4: ห้องสมุด?

แน่นอน. ในการคอมไพล์ คุณต้องติดตั้งไลบรารีเหล่านี้:

ตัวจัดการ Wifi

..และไลบรารีสำหรับเมทริกซ์ LED: https://github.com/thomasfredericks/wemos_matrix_…..wich จะขอให้คุณติดตั้งไลบรารี Adafruit GFX

ไลบรารีทั้งสอง (ทั้งสาม?) สามารถรับได้ผ่าน Library Manager ตัวเก่าที่ดี

ขั้นตอนที่ 5: ดังนั้น - เราจะทำให้สิ่งนี้ทำงานได้อย่างไร

หลังจากอัปโหลดโค้ดแล้ว จอแสดงผล LED ของคุณจะแสดงแอนิเมชั่นเล็กๆ น้อยๆ โดยบอกคุณว่าต้องการเชื่อมต่อกับ Wifi ของคุณ หยิบโทรศัพท์ขึ้นมาเปิด WLAN ของคุณ - มองหา WLAN ใหม่ชื่อ

8x8จิตรกร CONFIG

- เชื่อมต่อกับ WLAN ใหม่ - โฟนของคุณควรถามว่าคุณต้องการเชื่อมต่อกับ WIFI นั้นหรือไม่ (ขออภัย โฟนเยอรมันที่นี่ - ไม่แน่ใจว่าข้อความภาษาอังกฤษพูดว่าอะไร) - แตะที่ หากไม่มีข้อความดังกล่าวปรากฏขึ้น: เปิดเบราว์เซอร์ (บนโทรศัพท์ที่เชื่อมต่อกับ WiFi ของ ESP) และตรงไปที่ "https://1.2.3.4"

จอขาว ปุ่มฟ้าใหญ่? นั่นคือตัวจัดการ Wifi

แตะ "กำหนดค่า Wifi" เลือก wifi ของคุณและพิมพ์รหัสผ่าน กดบันทึก - แอนิเมชั่นควรหยุด (เมทริกซ์กลายเป็นสีดำ); ตอนนี้ ESP เชื่อมต่อกับ wifi ของคุณแล้ว

เปิดเบราว์เซอร์ที่คุณเลือกและใช้ที่อยู่นี้:

8x8painter

- แค่นั้นแหละ: ตอนนี้คุณควรเห็นอินเทอร์เฟซหลัก - การสร้างไอคอนที่มีความสุข!!

ขั้นตอนที่ 6: หมายเหตุ

ไม่เพียงแต่ฉันดูดไอคอนรูปวาด - ฉันยังดูดความคิดเห็นอีกด้วย ปกติฉันจะใช้ชื่อตัวแปรที่สื่อความหมายได้ ดังนั้นสเก็ตช์จึงไม่ควรทำตามยาก

ใช่ ฉันชอบฟังก์ชันของฉัน วิธีที่ง่ายที่สุดในการอ่านแบบร่างคือการยุบทั้งหมดและตรวจสอบฟังก์ชันที่แยกจากกัน

ฉันทิ้งข้อความสั่ง Serial.print ไว้ในโค้ดสำหรับการดีบัก - การตรวจสอบซีเรียลคอนโซลขณะทำงานอาจเป็นความคิดที่ดี:)

หน้าเว็บถูกเก็บไว้ในสตริงยาว - นรกและการสาปแช่ง - สตริง! ฉันจะทำ … อย่างไร? ฉันมีพื้นที่สำหรับมัน ฉันไม่เปลี่ยนเลย (Globals From Hell) - ฉันเลยไม่สนใจจริงๆ ถ้าคุณทำ: ไปข้างหน้าทำให้ดีขึ้น นั่นคือความสวยงามของการเขียนโปรแกรม

หน้าเว็บทำทุกอย่างใน JavaScript - ขออภัยสำหรับสิ่งนั้น มันเป็นโซลูชันที่กะทัดรัดที่สุดที่ฉันสามารถทำได้ การสื่อสารระหว่าง ESP และเบราว์เซอร์สามารถทำได้ดีกว่าด้วย webSockets - แต่การทำ GET-Strings เป็นสิ่งที่ฉันคิดขณะเขียน - จำไว้ว่า: อย่าแตะต้องระบบที่ทำงานอยู่:)

หน้าเว็บสร้างขึ้นโดยใช้ Firefox - ขี้เกียจฉัน ฉันไม่ได้ทดสอบ chrome/edge/opera/whateverYouUse หากมีสิ่งผิดปกติ.. ลองใช้ Firefox

2020 โดย Detlef แก้ไข ซอฟต์แวร์ฟรี - สนุกกับมัน !!