วิธีการ: ผนังเครือข่ายกราฟฟิตี

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

ในวันนี้วิธีการที่เราครอบคลุมทุกอย่างรวมถึงการสร้างผนังกราฟฟิตีเครือข่ายของคุณเอง

ภาพรวมแนวคิด

ลำดับกราฟฟิตีได้รับการออกแบบบนอินเทอร์เน็ตด้วย JavaScript Animation Designer ลำดับที่เสร็จสมบูรณ์มีการตรวจสอบความถูกต้องเช่นเดียวกับการเก็บไว้ในฐานข้อมูล เราทำการแบ็กเอนด์ฐานข้อมูลสำหรับ PHP / MySQL เช่นเดียวกับ Google Apps (Python) ลำดับถูกเผยแพร่จาก Datafeed API ที่เรียบง่าย มินิเว็บเซิร์ฟเวอร์ของเราดึงลำดับภาพเคลื่อนไหวจากฟีดรวมถึงแคชบนการ์ด SD ในที่สุดลำดับจะปรากฏบนเมทริกซ์ LED ยักษ์

จอแสดงผลขนาดใหญ่ความละเอียดต่ำ
หน้าจอกราฟฟิตีของเราเป็น 1 เมตร, เมทริกซ์ 5 × 5 ของไฟ LED มันได้รับอิทธิพลจากโต๊ะกาแฟเด็ลพังก์ที่นำเสนอโดยที่อยู่อาศัยเมื่อไม่กี่ปีที่ผ่านมา โต๊ะพังก์ Daft วางไข่แบบจำลอง DIY จำนวนมากรวมถึงการแนะนำที่ยอดเยี่ยมในการสร้างตารางพังค์ Daft เมื่อเวลาผ่านไปรูปแบบนั้นเปลี่ยนเป็นจำนวนของการเรียงสับเปลี่ยนเช่น “Daft Punk Table” แขวนผนังของเรา ให้ความหลากหลายของเฟอร์นิเจอร์ขนาดใหญ่กะพริบที่เราแสวงหาคำศัพท์ที่ดีกว่า “Daft Punk Table” เราขึ้นมาด้วย “จอแสดงผลขนาดใหญ่ความละเอียดต่ำ” หรือ LLRD สำหรับสั้น (ออกเสียง ‘ถ้อยคำ’)

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

อินเทอร์เฟซออนไลน์
ภาพเคลื่อนไหวกราฟฟิตีสำหรับ LLRD ผลิตด้วยเครื่องช้ำ JavaScript อย่างง่าย ดูฟีดออนไลน์ของแอนิเมชั่นที่ส่งผู้ใช้หรือลองด้วยตัวคุณเอง ผู้ออกแบบลำดับกราฟฟิตีรวมถึงการสนับสนุนข้อมูลสำหรับ PHP / MySQL รวมถึง Google App Engine รวมอยู่ในงานเก็บถาวรงาน

การออกแบบลำดับกราฟฟิตี JavaScript นั้นใช้งานง่าย:

คลิกที่กล่องเพื่อสลับไฟ LED ที่แสดงในแต่ละเฟรมของแอนิเมชั่นของคุณ

ใช้ปุ่มลูกศรเพื่อนำทางระหว่างเฟรม

การสำรองข้อมูลรวมถึงการนำเครื่องมือย้อนกลับเป็นวิธีการง่ายๆในการบันทึกลำดับของคุณในไฟล์ข้อความ

“เพิ่มกรอบข้อความ” แทรกอักขระเฟรมที่ใช้ฟอนต์บิตแมป หากคุณไม่ชอบฟอนต์เริ่มต้นเพียงผลิตใหม่:

คลิกปุ่ม ‘แก้ไขฟอนต์’ เพื่อเป็นตัวอักษรที่มีอยู่

ทำให้การแก้ไขของคุณ

คลิก ‘อัปเดตฟอนต์’ เพื่อแทนที่สไตล์ฟอนต์เริ่มต้นด้วยเฟรมใหม่

อาร์เรย์สไตล์ตัวอักษรเป็นตารางการค้นหาของบิตแมปสำหรับอักขระ ASCII ระหว่างพื้นที่เช่นเดียวกับ Z (อักขระ ASCII 32 ถึง 90 “” # $% & ‘() * +, -. / 0123456789:; <=> /; @abcdefghijklmnopqrstuvwxyz “) ในการเพิ่มรูปแบบตัวอักษรใหม่อย่างถาวรเพียงวาง Fontset ที่อัปเดตในโค้ด JavaScript ที่สอดคล้องกับตัวแปร ‘font =’ ตัวเลือก “รูปแบบตัวอักษร” ในกล่องสำรองข้อมูลจะสร้างบิตแมปที่ฟอร์แมตแบบตัวแปรที่เตรียมไว้เพื่อวางบนฟอนต์ที่มีอยู่

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

ผู้ออกแบบกราฟฟิตีที่ใช้อินเทอร์เน็ตบนอินเทอร์เน็ตได้รับอิทธิพลจากรุ่นออฟไลน์โดย [Mathieu Roncheau] [Mathieu] ซอร์สโค้ด Delphi รวมถึงการเรียกใช้งานได้ที่เก็บไว้ที่นี่ นักออกแบบที่ใช้ JavaScript ของเรามีคุณสมบัติเพิ่มเติมบางอย่างคือเบราว์เซอร์ที่ใช้และไม่ต้องการให้คุณเรียกใช้ไฟล์. exe ที่ไม่รู้จัก แม้ว่ามันจะมีวัตถุประสงค์เพื่อทำงานบนเว็บ แต่นักออกแบบจะทำงานจากสำเนาภูมิภาคบนคอมพิวเตอร์ของคุณเช่นเดียวกัน

สคริปต์จะทำงานให้กับเมทริกซ์โดยพลการใด ๆ เพียงแค่ปรับเปลี่ยน dptrows รวมถึงตัวแปร DPTCOL เป็นมิติของ LLRD ของคุณ

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

รูปแบบบิตแมปลำดับ
ตัวสร้างลำดับส่งออกแต่ละคอลัมน์เป็นบิตแมปที่ฟอร์แมต ASCII บิตแมปสำหรับทุกคอลัมน์ถูกคั่นด้วยพื้นที่รวมถึงแต่ละเฟรมเต็มจะถูกยกเลิกด้วยฟีดบรรทัด (NR) สไตล์นี้ถูกกำหนดโดยโปรแกรมซีเควนเซอร์พีซีของ [Mathieu Roncheau] เราเก็บไว้เพื่อรักษาความเข้ากันได้ย้อนหลัง

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

ค่าสำหรับR ทุกคอลัมน์ถูกค้นพบโดยการรักษาไฟ LED ที่มีไฟเป็น 1 ในเลขฐานสองรวมถึงการแปลงเป็นทศนิยม ตัวอย่างเช่นคอลัมน์แรกที่สูงที่สุดคือ 10,000 ไบนารีหรือทศนิยม 1 ครั้ง คอลัมน์สุดท้ายคือ 11111 ไบนารีหรือทศนิยม 31 คุณสามารถยืนยันการแปลงของเราโดยใช้เครื่องคิดเลขอินเทอร์เน็ตไบนารีทศนิยม

โปรดทราบว่าบิตแมปคอลัมน์จะถูกแสดงโดย ASCII เทียบเท่ากับค่าทศนิยมที่แท้จริง ตัวเลขตัวเลขถูกเข้ารหัสตามมาตรฐาน ASCII ซึ่งเป็นค่าจริงบวก 0x30H นอกจากนี้ตัวเลขหลายหลักจะถูกเก็บไว้เป็นอักขระส่วนตัว 24 ในตัวอย่างถูกเก็บไว้เป็น 0x32H, 0x34h

ฝั่งเซิร์ฟเวอร์
แบ็กเอนด์เป็นแอปพลิเคชั่นซอฟต์แวร์ชิ้นง่าย ๆ ที่ยอมรับลำดับภาพเคลื่อนไหวการตรวจสอบบางอย่างรวมถึงบันทึกเหล่านั้นไปยังฐานข้อมูล สามารถเข้าถึงลำดับที่เก็บไว้ได้จาก DataFeed API

แบ็กเอนด์
เราแต่งแบ็กเอนด์สองรุ่น ทั้งสองอยู่ในงานเก็บถาวร ที่แรกคือแบ็กเอนด์ PHP / MySQL ที่เรียบง่ายสำหรับปริมาณน้อยบนอินเทอร์เน็ต LLRDS อื่น ๆ เป็นรุ่น Google App / Python ที่น่าจะสามารถจัดการกับผู้อ่านวันละจำนวนมาก

ง่ายต่อการเขียนแบ็กเอนด์สำหรับแพลตฟอร์มที่คุณต้องการอย่างแท้จริง การปรับเปลี่ยนการดำเนินการประเภทการออกแบบของ Graffiti Designer เพื่อจุดที่แบ็กเอนด์ของคุณ ทั้งสองรุ่นในปัจจุบันเผยแพร่ไปที่ backend.php ตอนนี้จับตัวแปร ‘ผู้แต่ง’ รวมถึง ‘SEQ’ บนเซิร์ฟเวอร์ของคุณรวมถึงบันทึกลงในฐานข้อมูล

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

ฟีด API
ลำดับสามารถเข้าถึงได้ด้วย Datafeed API ง่าย ๆ API มีสองตัวแปร:

แม็กซ์ – จำนวนลำดับสูงสุดที่จะส่ง

สุดท้าย – ลำดับสุดท้ายอ่านข้อมูลที่ใหม่กว่าจะถูกส่ง

DataFeed เริ่มต้นแต่ละลำดับภาพเคลื่อนไหวด้วยตัวละคร ‘#’ ปฏิบัติตามด้วยหมายเลข ID เช่นเดียวกับฟีดบรรทัด ‘#’ เป็นค่าบิตแมปที่ไม่ถูกต้องที่แจ้งเตือนไคลเอ็นต์ไปยังจุดเริ่มต้นของลำดับใหม่ ลูกค้าสามารถใช้หมายเลข ID ที่มีตัวแปรล่าสุดของ API เพื่อรับลำดับสดในการดึงแต่ละครั้ง

ฮาร์ดแวร์
เว็บเซิร์ฟเวอร์ขนาดเล็ก

เราใช้ Web Server PIC24F Mini ของเราเป็นไคลเอนต์ที่เปิดใช้งาน TCP สำหรับโครงการนี้ ตรวจสอบบทความก่อนหน้าของเราเพื่อค้นหาวิธีการพัฒนาเว็บเซิร์ฟเวอร์

โต๊ะพังก์ Daft
[MRGALLETA] มีการสอนอาคารที่ยอดเยี่ยมสำหรับส่วนตารางที่แท้จริงของ Daft Punk Table Replica LLRD สามารถใช้หลายรูปแบบเช่นเดียวกับแขวนผนังของเรา

สไตล์การจำลอง Daft Punk Punk ส่วนใหญ่ได้รับการจัดการโดย Expander เอาต์พุต 74HCT595 (PDF) เช่นเดียวกับอาร์เรย์ทรานซิสเตอร์ ULN2803A (PDF) คณะกรรมการควบคุมจากคำแนะนำนี้ผสมผสานกันทั้งในเชิงพาณิชย์ที่ใช้งานง่าย กระดานคนขับแต่ละตัวมีสอง 74HTC595S หรือ 16 เอาต์พุต; เราต้องการบอร์ดไดรเวอร์สองตัวสำหรับเซลล์ LLR 25 ของเรา

74HCT595 เป็น Expander เอาต์พุตแบบอนุกรมที่จัดการโดยอินเทอร์เฟซที่เหมือน SPI การอัปเดตเริ่มต้นโดยการวางสายสลัก สิ่งที่ระบุของ LED แต่ละ LED (เปิดหรือปิด) จะถูกวางบนสายข้อมูลให้ปฏิบัติตามด้วยชีพจรของนาฬิกา บิตถูกวางบนหมุดเอาต์พุตเมื่อสัญญาณสลักกลับสู่ระดับสูง ข้อมูล cascades จาก PIN-PIN ของข้อมูลหนึ่ง 595 ไปยังอินพุตข้อมูลของถัดไป ตรวจสอบการสอน 74xx595 นี้เพื่อดูรายละเอียดการเชื่อมต่ออุปกรณ์นี้

สิ่งสำคัญคือต้องทราบว่าเราใช้ประโยชน์จาก 74HCT595 เช่นเดียวกับ 74HC595 ส่วน “HCT” ทำงานผ่านแรงดันไฟฟ้าที่หลากหลายรวมถึงแรงดันไฟฟ้าในการทำงานของ Mini Web Server: 3.3Volts

74HCT595 แหล่งที่มาปัจจุบันหมายความว่าเราอาจเรียกใช้ LED เพียงครั้งเดียวโดยตรงจากแต่ละเอาต์พุตที่ 3.3volts เนื่องจาก LLRD ส่วนใหญ่มี LED 2-8 LED ต่อเซลล์ทำงานระหว่าง 5 รวมถึง 24VOLTS เราใช้อาร์เรย์ทรานซิสเตอร์ ULN2803A เพื่อสลับภาระที่ใหญ่ขึ้น ULN2803A จมในปัจจุบันแทนที่จะจัดหามัน; มันสลับการเชื่อมต่อภาคพื้นดินของไฟ LED แทนที่จะเป็นพลังงาน

LLRD ของเรามีไฟ LED สองดวงต่อเซลล์ทำงานที่ 20mA ด้วยอุปทาน 5 โวลต์เช่นเดียวกับตัวต้านทาน 56ohm เราบัดกรีไฟ LED รอบ ๆ ชิ้นส่วนของกระดาษแข็งแทนที่จะแกะสลักแผงวงจรขนาดเล็ก 25 แผ่น

การเชื่อมต่อ

การเชื่อมต่อสายเคเบิล 5 ครั้งระหว่างเว็บเซิร์ฟเวอร์ขนาดเล็กรวมถึงบอร์ดไดรเวอร์ควบคุม LLRD

เซิร์ฟเวอร์
llrd
คำอธิบาย

v +
vsys
3.3Volt จัดหาสำหรับ 595s

gnd
gnd
การเชื่อมต่อภาคพื้นดินที่ใช้ร่วมกัน

ra0
ข้อมูลใน
สัญญาณข้อมูล

ra1
นาฬิกา
สัญญาณนาฬิกา

RB15
สลัก
สลักสัญญาณ

–
ที่ทำองุ่น
แหล่งจ่ายไฟ LED

เฟิร์มแวร์
เฟิร์มแวร์ของเราเขียนใน C โดยใช้ mplab เช่นเดียวกับคอมไพเลอร์ Microchip C30 Demo ค้นพบเพิ่มเติมเกี่ยวกับการเขียนโปรแกรมรวมถึงการทำงานกับ PIC24F ในการกวดวิชาเบื้องต้นของเรา สองรุ่นของเฟิร์มแวร์รวมอยู่ในงานเก็บถาวรงาน ครั้งแรกที่เพิ่งอ่านข้อมูลลำดับ * .seq ทั้งหมดจากการ์ด SD เวอร์ชันที่สองจะเพิ่มสแต็ค Microchip TCP / IP สำหรับการเชื่อมต่อเว็บ diScover เพิ่มเติมเกี่ยวกับ Microchip SD Card รวมถึงไลบรารี TCP / IP ในการสอนเว็บมินิเว็บของเรา

ฟังก์ชั่นกราฟิกทั้งหมดรวมถึงไคลเอนต์ TCP สามารถค้นพบได้ใน Graffitigfx.c ไคลเอ็นต์ TCP ขึ้นอยู่กับตัวอย่างของไคลเอ็นต์ TCP ทั่วไปที่มาพร้อมกับสแต็ก TCP / IP เราปฏิบัติตามแนวทางการทำงานหลายอย่างร่วมมือของ Microchip เช่นเดียวกับรหัสของเราเป็นส่วนเล็ก ๆ ที่แบ่งปันเวลา CPU กับสแต็ก TCP / IP ที่เหลือ

ลูกค้าเชื่อมโยงไปยัง DataFeed เป็นประจำเช่นเดียวกับการร้องขอลำดับใหม่ ลำดับใหม่จะถูกแยกวิเคราะห์หมายเลข ID รวมถึงต่อท้ายข้อมูลชั่วคราวบนการ์ด SD ID ล่าสุดที่ตรวจพบจะถูกเขียนไปยังจุดสิ้นสุดของไฟล์ข้อมูลชั่วคราวเช่นเดียวกับการต่อท้ายตัวแปรสุดท้ายของ URL ในคำขอ DataFeed ที่ตามมา เราบันทึก ID ที่ส่วนท้ายของข้อมูลเพื่อป้องกันการเกิดขึ้นซ้ำ ๆ กับเซกเตอร์ที่แน่นอนในการ์ด SD การสึกหรอในอุดมคติในการปรับระดับภายในการ์ด SD 1GB นั้นเพียงพอที่จะป้องกันไม่กี่ทศวรรษแรกของการใช้งาน หากไม่มีการเชื่อมต่อเครือข่าย Gadget จะเล่นข้อมูล * .seq ใด ๆ ในไดเรกทอรีรากของการ์ด SD

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

1
2
3
#define gfx_use_tcp_client // รวมไคลเอนต์ TCP
#define gfx_tcp_only // ทำ TCP เท่านั้นรวมถึงการตรวจสอบไฟล์อุณหภูมิไม่ได้ตรวจสอบข้อมูลอื่น ๆ บนการ์ด SD
#define gfx_clear_temp_on_reset // เป็นทางเลือกลบข้อมูลอุณหภูมิในการรีเซ็ต เหมาะสำหรับเครื่องยนต์ของ Google App …

สามนิยามที่จุดเริ่มต้นของ Graffitigfx.c จัดการคุณสมบัติที่รวมอยู่ในเวลารวบรวม GFX_USE_TCP_Client รวบรวมเฟิร์มแวร์ที่เปิดใช้งานไคลเอ็นต์ TCP แสดงความคิดเห็นนี้สำหรับการ์ด SD เท่านั้นของเฟิร์มแวร์เท่านั้น gfx_tcp_only จะละเว้นข้อมูล. ueq ใด ๆ บนการ์ด SD รวมถึงเฉพาะลำดับการเล่นที่ดาวน์โหลดจากเว็บ ตัวเลือก GFX_CLEAR_TEMP_ON_RESET จะลบข้อมูลลำดับชั่วคราวในการรีเซ็ตแต่ละครั้ง สิ่งนี้มีประโยชน์สำหรับฐานข้อมูลที่มี ID บันทึกแบบต่อเนื่องเช่น Datastore ของ Google ในอนาคตคำจำกัดความเหล่านี้อาจมีการเปลี่ยนแปลงเป็นตัวแปรที่กำหนดโดยข้อมูลการกำหนดค่าบนการ์ด SD

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

แสดงที่อยู่ IP ในการเริ่มต้น

ข้อมูลการกำหนดค่าบนการ์ด SD ที่ตั้งค่า DataFeed URL รีเฟรชความถี่รวมถึงตัวแปรอื่น ๆ

อินเตอร์เฟส Telnet หรือเว็บสำหรับการกำหนดค่าระยะไกล

เซิร์ฟเวอร์ TCP สำหรับการเข้าถึงการแสดงต่อไปยังจอแสดงผลโดยตรง กดเฟรมภาพเคลื่อนไหวจากพีซีระยะไกล

ไคลเอนต์เมลที่รายงานข้อผิดพลาดรวมถึงข้อมูลเงื่อนไข

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

เลื่อนฟีด Twitter

ความคิดของคุณ?

อย่าเพิ่งเช็คเอาท์เกี่ยวกับโครงการนี้มีส่วนร่วมในผนังกราฟฟิตี

ครั้งต่อไปเราจะแนะนำโครงการ PIC24F ขั้นสุดท้ายของเรากระเป๋าเป้สะพายหลังอีเธอร์เน็ตสำหรับ Nokia LCD สีขนาดเล็กของ Nokia Knock-off จาก SparkFun Electronics