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:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ”). 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 every column is discovered by treating lit LEDs as 1 in a binary number, as well as converting to decimal. For example, the very first column above is 10000 binary, or 1 decimal. The last column is 11111 binary, or decimal 31. You can confirm our conversions utilizing an on the internet binary-decimal calculator.
Note that the column bitmaps are represented by ASCII equivalents of the actual decimal values. Numeric digits are encoded according to the ASCII standard, which is the actual value plus 0x30h. Further, multi-digit numbers are kept as private characters; 24 in the example is kept as 0x32h,0x34h.
Server side
The backend is a simple piece of software application that accepts animation sequences, does some validation, as well as saves them to a database. kept sequences are accessible from the datafeed API.
Backend
We composed two versions of the backend; both are in the job archive. The very first is a simple PHP/MYSQL backend for low volume on the internet LLRDs, the other is a Google app Engine/Python version that should be able to handle a lot of Hack a Day readers.
It’s truly simple to compose a backend for your preferred platform. modification the graffiti designer’s submit type action to point at your backend; both versions currently publish to backend.php. Now, catch the ‘author’ as well as ‘seq’ variables on your server as well as save them to a database.
Our backend performs a bit of validation to prevent attacks on the system. We implemented checks in phases so they don’t squander as well many resources. First, the general size of the submission is inspected to make sure its within reason. Next, the sequence is split into private frames as well as each is inspected for form. If it passes validation, it’s saved to the database.
Feed API
Sequences are accessible with a simple datafeed API. The API has two variables:
max – the maximum number of sequences to send.
last – the last sequence read, only newer data is sent.
The datafeed begins each animation sequence with the character ‘#’, complied with by an ID number as well as line feed. ‘#’ is an invalid bitmap value that alerts clients to the beginning of a new sequence. clients can utilize the ID number with last variable of the API to get fresh sequences on each pull.
Hardware
Mini web server
We utilized our PIC24F mini web server as a TCP enabled client for this project. checked out our previous articles to discover exactly how to develop the web server.
Daft punk table
[mrgalleta] has a fantastic building tutorial for the actual table part of a Daft Punk table replica. An LLRD can take many forms, though, such as our wall-hanging.
Most of Daft Punk table replica styles are managed by a 74HCT595 (pdf) output expander as well as ULN2803A (pdf) transistor array. The driver board from this Instructable combines both into an easy-to-etch, through-hole PCB. Each driver board has two 74HTC595s, or 16 outputs; we needed two driver boards for our 25 cell LLRD.
The 74HCT595 is a serial output expander that’s managed by an SPI-like interface. An update is initiated by dropping the latch line. The specify of each LED (on or off) is put on the data line, complied with by a pulse of the clock. bits are put on the output pins when the latch signal returns to high. data cascades from the data-output pin of one 595, to the data-input of the next. checked out this 74xx595 tutorial for a detailed look at interfacing this device.
It’s important to note that we utilized the 74HCT595, as well as not the 74HC595. The “HCT” part works over a wide variety of voltages, including the operating voltage of the mini web server: 3.3volts.
The 74HCT595 sources current, meaning we might most likely run a single LED directly from each output at 3.3volts. since most LLRDs have 2-8 LEDs per cell, operating between 5 as well as 24volts, we utilize a ULN2803A transistor array to switch the larger load. The ULN2803A sinks current, rather than sourcing it; it switches the ground connection of the LEDs, rather than the power.
Our LLRD has two LEDs per cell, running at 20mA with a 5 volt supply as well as 56ohm resistor. We soldered the LEDs around a piece of cardboard, rather than etching 25 small circuit boards.
Connections
A 5 cable connection between the mini web server as well as the driver boards controls the LLRD.
Server
LLRD
Description
V+
Vsys
3.3volt supply for the 595s.
GND
GND
Shared ground connection.
RA0
Data in
Data signal.
RA1
Clock
Clock signal.
RB15
Latch
Latch signal.
—
Vled
LED power supply.
Firmware
Our firmware is written in C utilizing MPLAB as well as the Microchip C30 demo compiler. discover more about programming as well as working with the PIC24F in our introductory tutorial. two firmware versions are included in the job archive. The very first just reads all *.seq sequence data from the SD card, the second version adds the Microchip TCP/IP stack for Web connectivity. discover 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.
Your thoughts?
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.