Jak: Networked Graffiti Wall
zastanawiając się, co zrobiliśmy z naszym serwerem internetowym na pracy wizytówki z zeszłego tygodnia? Zasila gigantyczną ścianę Graffiti LED. Animacje mogą być przesyłane przez użytkownika z wykorzystaniem projektanta Internet. Możesz oglądać również kanał internetowy indywidualnych animacji. Internetowy interfejs działa w silniku Google App dla maksymalnej skalowalności, a także odporności.
W dzisiejszym sposobie obejmujemy wszystkie ins, a także outs budowania własnej powierzchni Graffiti w sieci.
Przegląd koncepcji
Sekwencje graffiti są zaprojektowane w Internecie z projektantem animaci JavaScript. Ukończone sekwencje są zatwierdzone, a także przechowywane w bazie danych; Robiliśmy branżę bazy danych dla PHP / MySQL, a także Aplikacje Google (Python). Sekwencje są syndykowane z prostego API DataFeed. Nasz serwer MINI Web serwer pobiera sekwencje animacji z paszy, a także buforuje je na karcie SD. Wreszcie sekwencje są wyświetlane na olbrzymiej matrycy LED.
Duża, niska rozdzielczość
Nasz ekran graffiti jest kwadratowy 1 metrowy, 5 × 5 macierzy diod LED. Jest pod wpływem stolika kawy Punk Daft Oferowany przez siedlisko kilka lat temu. Tabela Punk Daft zrodziła wiele replik DIY, w tym tego doskonałego instruowania na budowaniu tabeli punka płyty. Z biegiem czasu wzór przekształcił się w szereg permutacji, takich jak nasz obwieszenie ściany “Daft Punk tabeli”. Zapewniono różnorodność dużych, migających mebli, szukaliśmy znacznie lepszego terminu niż “Daft Punk Table”. Wymyśliliśmy “dużą, niską rozdzielczość” lub LLRD na krótki (wymawiany “laska”).
Oryginalny tabelę punkową wtaft błysnął losowo lub na czas do muzyki. Tabela repliki [Mathieu Roncheau] utrzymywała sekwencje animacji w EEPROM. Nasz pierwszy styl wziął ten krok dalej, przechowując dane animacji na tłuszczowej sformatowanej karcie SD. Teraz umieściliśmy projektant w Internecie, aby zapewnić, że możemy pobrać sekwencje animacji przesłanych przez użytkownika przez Internet.
Interfejs online.
Animacje graffiti dla LLRD są produkowane za pomocą prostego ekspresu sekwencji JavaScript. Obejrzyj kanał internetowy animacji przesłanych przez użytkownika lub spróbuj sam siebie. Projektant sekwencji graffiti, a także zapakowuje dane, dla PHP / MySQL, a także silnik App Google, są zawarte w archiwum pracy.
Projektant sekwencji graffiti JavaScript jest prosty w użyciu:
Kliknij pola, aby przełączyć diody LED pokazane w każdej ramce animacji.
Użyj przycisków strzałek, aby poruszać się między ramkami.
Kopia zapasowa, a także przynieść narzędzia Zapewnić prostą metodę zapisania sekwencji lokalnie w pliku tekstowym.
“Dodaj ramki tekstowe” Wkładki Ramki znaków wykorzystująca czcionkę bitmapowaną. Jeśli nie lubisz domyślnej czcionki, wystarczy produkować nowy:
Kliknij przycisk “Edytuj czcionkę”, aby ton istniejącej czcionki.
Wprowadź swoje modyfikacje.
Kliknij “Zaktualizuj czcionkę”, aby wymienić domyślny styl czcionki z nowymi ramkami.
Array stylu czcionki jest tabelą wyszukiwania bitmap dla znaków ASCII między obszarami, a także Z (znaki ASCII 32 do 90, “!” # $% & ‘() * +, -. / 0123456789 :; <= / 0123456789 :; <=>? @ABCDEFGHIJKLMNOPQRSTU VWXYZ”). Aby dodać nowy styl czcionki na stałe, wystarczy wkleić zaktualizowany fontset w kodzie javascript zgodny z zmienną “font =”. Wybór “Format czcionki” w polu kopii zapasowej spowoduje, że zmienne sformatowane bitmapy, które są gotowe do wklejania istniejącej czcionki.
Po zakończeniu animacji przejdź do swojego imienia w polu Autor, a także naciśnij przycisk Prześlij. Kod sekwencji zostanie wyprodukowany, a także wysłany na serwer.
W Internecie Designer Graffiti oparty na Javascript ma wpływ wersję offline przez [Mathieu Roncheau]. [Mathieu] Kod źródłowy Delphi, jak również wykonywalny jest archiwizowany tutaj. Nasz projektant oparty na JavaScript ma kilka dodatkowych funkcji, jest oparte na przeglądarce, a także nie musi uruchomić nieznanego pliku .exe. 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.
Przeglądarka online wykorzystuje asynchroniczne żądania HTTP (AJAX-ISH), aby pokazać kanał strumieniowy o przesłanych przez użytkownika animacji graffiti. Spróbuje ustawić plik cookie, aby zapewnić, że może rozpocząć się ze świeżymi sekwencjami za każdym razem, gdy obciążenia strony. Jeśli nie włączyć pliku cookie, po prostu zacznie się od 0 na następnej wizycie.
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.
Po stronie serwera
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.
Sprzęt komputerowy
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.
Znajomości
A 5 cable connection between the mini web server as well as the driver boards controls the LLRD.
serwer
LLRD
Opis
V+
Vsys
3.3volt supply for the 595s.
Gnd.
Gnd.
Shared ground connection.
RA0
Data in
Data signal.
RA1
Zegar
Clock signal.
RB15
Zatrzask
Latch signal.
–
Vled
LED power supply.
Oprogramowanie
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.
Twoje myśli?
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.