HOW-TO: NETWORKED GRAFFITI wall

Wondering what we did with our web server on a business card job from last week? It’s powering a giant LED graffiti wall. Animations can be user-submitted utilizing the on the internet designer. You can watch a online feed of individual animations as well. The on the internet interface runs on the Google app Engine for maximum scalability as well as resilience.

In today’s How-to we cover all the ins as well as outs of building your own networked graffiti wall.

Concept overview

Graffiti sequences are designed on the internet with the JavaScript animation designer. completed sequences are validated as well as kept in a database; we made database backends for PHP/MYSQL as well as Google apps (Python). Sequences are syndicated from a simple datafeed API. Our mini web server retrieves animation sequences from the feed, as well as caches them on an SD card. Finally, the sequences are displayed on a giant LED matrix.

Large, low resolution displays
Our graffiti screen is a 1 meter square, 5×5 matrix of LEDs. It’s influenced by the Daft Punk coffee table offered by habitat a few years ago. The Daft Punk table spawned many diy replicas, including this excellent Instructable on building a Daft Punk table. Over time, the pattern morphed into a number of permutations, such as our “Daft Punk table” wall-hanging. provided the variety of big, blinking furniture, we sought a much better term than “Daft Punk table”. We came up with “large, low resolution display” or LLRD for short (pronounced ‘lard’).

The original Daft Punk table flashed randomly, or in time to music. [Mathieu Roncheau]’s replica table kept animation sequences in an EEPROM. Our very first style took this a step further by storing the animation data on a FAT formatted SD card. Now, we’ve put the designer on the internet to ensure that we can fetch user-submitted animation sequences over the internet.

Online interface
Graffiti animations for the LLRD are produced with a simple JavaScript sequence maker. watch a online feed of user-submitted animations, or try it yourself. The graffiti sequence designer as well as data backends written, for PHP/MYSQL as well as Google app Engine, are included in the job archive.

The JavaScript graffiti sequence designer is simple to use:

Click the boxes to toggle the LEDs shown in each frame of your animation.

Use the arrow buttons to navigate between frames.

The backup as well as bring back tools provide an simple method to save your sequence locally in a text file.

“Add text frames” inserts character frames utilizing a bitmaped font. If you dislike the default font, just produce a new one:

Click the ‘edit font’ button to tons the existing font.

Make your modifications.

Click ‘update font’ to replace the default font style with the new frames.

The font style array is a lookup table of bitmaps for the ASCII characters between area as well as Z (ASCII characters 32 to 90, ” !”#$%&'()*+,-./0123456789:;<=>? @אבגדהוזחטיכלמנסעפצקרשת”). To add a new font style permanently, just paste the updated fontset in the JavaScript code complying with the ‘font=’ variable. The “font format” choice in the backup box will produce variable formatted bitmaps that are prepared to paste over the existing font.

When you’ve completed an animation, go into your name in the author box as well as press submit. The sequence code will be produced as well as sent to the server.

The on the internet JavaScript-based graffiti designer is influenced by an offline version by [Mathieu Roncheau]. [Mathieu]’s Delphi source code as well as executable are archived here. Our JavaScript-based designer has a few additional features, is browser-based, as well as it doesn’t need you to run an unknown .exe file. even though it’s meant to run on the web, the designer will likewise work from a regional copy on your computer.

The script will work for any type of arbitrary matrix, just modification the dptRows as well as dptCols variables to the dimensions of your LLRD.

The online viewer utilizes asynchronous HTTP (AJAX-ish) requests to show a streaming feed of user-submitted graffiti animations. It will try to set a cookie to ensure that it can begin with fresh sequences each time the page loads. If you don’t enable the cookie, it ‘ll just begin over at 0 on your next visit.

Sequence bitmap format
The sequence builder outputs each column as an ASCII formatted bitmap. The bitmap for every column is separated by a space, as well as each full frame is terminated with a line feed (nr). This style was defined by [Mathieu Roncheau]’s PC sequencer program, we kept it to preserve backwards compatibility.

Bitmap data is zeroed on the upper left hand corner of the frame. The top cells of each column are bit 0, as well as the bottom cells are bit 4. It seems more rational to comply with basic mathematical notation as well as utilize the bottom left cell as the origin, however we didn’t style the specification.

The value foR כל עמודה מתגלה על ידי טיפול LED LED כמו 1 במספר בינארי, כמו גם המרת עשרוני. לדוגמה, העמודה הראשונה שלעיל היא 10000 בינארי, או 1 עשרוני. הטור האחרון הוא 11111 בינארי, או עשרוני 31. אתה יכול לאשר את ההמרות שלנו באמצעות מחשבון אינטרנט בינארי-עשרוני.

שים לב שהבתמטיות של עמודות מיוצגות על ידי שווי ASCII של ערכים עשרוניים בפועל. ספרות מספריות מקודדות לפי תקן ASCII, המהווה את הערך בפועל בתוספת 0x30h. יתר על כן, מספרים רב-ספריים נשמרים כתווים פרטיים; 24 בדוגמה נשמרת כמו 0x32h, 0x34h.

בצד השרת
Backend הוא פיסת פשוט של יישום תוכנה שמקבל רצפים אנימציה, עושה כמה אימות, כמו גם חוסך אותם למסד נתונים. רצפים נשמרו נגישים מממשק ה- API של DataFeed.

Backend
חיברנו שתי גרסאות של backend; שניהם נמצאים בארכיון העבודה. הראשון הוא פשוט php / mysql backend עבור נפח נמוך באינטרנט LLRDs, השני הוא מנוע Google App / Python גרסה כי אמור להיות מסוגל להתמודד עם הרבה גרזן יום הקוראים.

זה באמת פשוט כדי לחבר backend עבור הרציף המועדף שלך. שינוי פעולת סוג המעצב של גרפיטי כדי להצביע על backend שלך; שתי הגרסאות מפרסמות כעת ל- backend.php. עכשיו, לתפוס את ‘מחבר’, כמו גם ‘seq’ משתנים בשרת שלך, כמו גם לשמור אותם למסד נתונים.

Backend שלנו מבצע קצת אימות כדי למנוע התקפות על המערכת. אנו מיושמים בדיקות בשלבים ולכן הם לא לבזבז כמו גם משאבים רבים. ראשית, הגודל הכללי של הגשת נבדק כדי לוודא שלה בתוך סיבה. לאחר מכן, רצף מחולק למסגרות פרטיות, כמו גם כל אחד נבדק עבור טופס. אם הוא עובר אימות, הוא נשמר במסד הנתונים.

ממשק ה- API
רצפים נגישים עם API פשוט datafeed. ל- API יש שני משתנים:

.

מקסימום – המספר המרבי של רצפים לשליחה.

אחרון – רצף האחרון קרא, רק נתונים חדשים נשלחים.

DataFeed מתחיל כל רצף אנימציה עם הדמות ‘#’, נענה על ידי מספר תעודת זהות כמו גם להאכיל קו. ‘#’ הוא ערך מפת סיביות לא חוקי המפעיל לקוחות לתחילת רצף חדש. לקוחות יכולים לנצל את מספר הזיהוי עם המשתנה האחרון של ה- API כדי לקבל רצפים טריים על כל משיכה.

חוּמרָה
מיני שרת אינטרנט

השתמשנו ב- PIC24F MINI שרת האינטרנט כמו לקוח מופעל TCP לפרויקט זה. בדק את המאמרים הקודמים שלנו כדי לגלות בדיוק כיצד לפתח את שרת האינטרנט.

טבלה פאנק
[MRGALLETA] יש מדריך בנייה פנטסטי עבור החלק השולחן בפועל של דפט פאנק שולחן העתק. LLRD יכול לקחת צורות רבות, אם כי, כגון הקיר שלנו תלוי.

רוב הסגנונות הפאנק DAft PAST סטייליקה מנוהלים על ידי Expander פלט 74HCT595 (PDF), כמו גם מערך טרנזיסטור ULN2803A (PDF). לוח הנהג זה להפריע משלב הן לתוך קל ל-etch, דרך חור PCB. לכל לוח נהג יש שני 74ht595s, או 16 יציאות; היינו צריכים שני לוחות הנהג עבור 25 התא שלנו LLRD.

74HCT595 הוא פלט טורי expander כי מנוהל על ידי ממשק דמוי SPI. עדכון יזום על ידי הפלת קו הבריח. ציין של כל LED (או כבוי) הוא לשים על קו הנתונים, עמד על ידי דופק של השעון. סיביות לשים על סיכות הפלט כאשר אות הבריח חוזר גבוה. Data Cascades מ PIN של פלט הנתונים של אחד 595, כדי קלט נתונים של הבא. בדק את זה 74xx595 הדרכה עבור מבט מפורט על interfacing התקן זה.

חשוב לציין כי ניצל את 74HCT595, כמו גם לא 74hc595. חלק “HCT” עובד על פני מגוון רחב של מתח, כולל מתח ההפעלה של שרת האינטרנט מיני: 3.3Volts.

74HCT595 מקורות זרם, כלומר סביר להניח שאנחנו יכולים להפעיל הוביל אחד ישירות מכל פלט ב 3.3volts. מאז רוב Llrds יש 2-8 נוריות לכל תא, הפעלת בין 5 וכן 24Volts, אנו מנצלים מערך טרנזיסטור ULN2803A כדי לעבור את העומס גדול יותר. ה- ULN2803A כיורים הזרם, ולא המקור אותו; הוא מעביר את הקשר הקרקע של נוריות, ולא את הכוח.

LLRD שלנו יש שני נוריות לכל תא, פועל ב 20mA עם 5 וולט אספקה, כמו גם 56ohm נגד. אנו מולחים את LEDs סביב חתיכת קרטון, ולא תחריט 25 לוחות מעגלים קטנים.

חיבורים

חיבור 5 כבל בין שרת האינטרנט מיני וכן לוחות מנהל ההתקן שולטים ב- LLRD.

שרת
Lld.
תיאור

V +.
Vsys.
אספקת 3.3Volt עבור 595s.

ה – GND
ה – GND
חיבור קרקע משותף.

RA0
נתונים ב
אות נתונים.

Ra1
שָׁעוֹן
אות השעון.

RB15.
בְּרִיחַ
אות.

–
וולט
ספק כוח LED.

– קושחה
הקושחה שלנו נכתבת c ניצול mplab, כמו גם מהדר הדגמה C30 microchip. גלה יותר על תכנות, כמו גם עובד עם PIC24F במדריך ההיכרות שלנו. שתי גרסאות קושחה כלולות בארכיון העבודה. הראשון מאוד קורא את כל * נתונים רצף. נתונים של כרטיס SD, הגרסה השנייה מוסיף את microchip TCP / IP מחסנית עבור קישוריות אינטרנט. דאיscover more about the Microchip SD card as well as TCP/IP libraries in our mini web server tutorial.

All graphics functions, including the TCP client, can be discovered in graffitigfx.c. The TCP client is based on the generic TCP client example that’s included with the TCP/IP stack. We complied with Microchip’s cooperative multitasking approach as well as broke our code into little segments that share CPU time with the rest of the TCP/IP stack.

The client regularly links to the datafeed as well as requests new sequences. new sequences are parsed for ID numbers, as well as appended to a temporary data on the SD card. The last ID detected is written to the extremely end of the temporary data file, as well as is appended to the last variable of the URL on subsequent datafeed requests. We record the ID at the end of the data to prevent repeated composes to the exact same sector on the SD card. ideally wear leveling inside a 1GB SD card is adequate to prevent issues for the very first few decades of use. If no network connection is available, the gadget plays any type of *.seq data in the root directory of the SD card.

A parser function decodes frames as well as sends them to the LLRD. The parser is relatively robust to errors. poor data that makes it past the backend validation routine will be rejected at the gadget level without sick effect. If a few corrupt frames do handle to display, it’ll barely be noticed amongst the other abstract patterns playing on the wall.

1
2
3
#define GFX_USE_TCP_CLIENT //include the TCP client
#define GFX_TCP_ONLY //only do TCP as well as checked out temp file, don’t checked out other data on the SD card.
#define GFX_CLEAR_TEMP_ON_RESET //optionally delete the temp data on reset. great for Google app Engine…

Three defines at the beginning of graffitigfx.c manage which features are included at compile time. GFX_USE_TCP_CLIENT compiles the firmware with the TCP client enabled, comment this meaning for a SD card only version of the firmware. GFX_TCP_ONLY ignores any type of .seq data on the SD card, as well as only plays sequences downloaded from the web. The GFX_CLEAR_TEMP_ON_RESET choice will delete the temporary sequence data on each reset; this is useful for databases that have non-sequential record IDs, like Google’s datastore. In the future, these definitions might be altered to variables that are set by a configuration data on the SD card.

Taking it further
Our simple firmware is a steady starting point for an on the internet graffiti wall. While we were working on this job we came up with a ton of extra features that didn’t make it into the prototype.

Display IP address on startup.

A configuration data on the SD card that sets the datafeed url, refresh frequency, as well as other variables.

A telnet or web interface for remote configuration.

A TCP server for direct gain access to to the display; push animation frames from a remote PC.

A mail client that reports errors as well as condition information.

Progress messages during startup as well as sequence downloads. SD card not present/full errors.

Scrolling Twitter feeds.

המחשבות שלך?

Don’t just checked out about this project, contribute some frames to the graffiti wall.

Next time we’ll introduce our final PIC24F project, an ethernet backpack for the small $20 color Nokia LCD knock-off from SparkFun Electronics.