Întrebându-se ce am făcut cu serverul nostru web pe o carte de cărți de vizită de săptămâna trecută? Se aprinde un zid gigant de graffiti. Animațiile pot fi trimise utilizator care utilizează designerul de pe Internet. Puteți viziona o feed online de animații individuale, de asemenea. Interfața de pe Internet rulează pe motorul Google App pentru scalabilitate maximă, precum și rezistența.

În ziua de azi, vom acoperi toate INS, precum și outs de a construi propriul zid de graffiti în rețea.

Conceptul de ansamblu

Secvențele Graffiti sunt proiectate pe Internet cu designerul de animație JavaScript. Secvențele finalizate sunt validate, precum și păstrate într-o bază de date; Am făcut backnds de baze de date pentru PHP / MySQL, precum și Google Apps (Python). Secvențele sunt sindicalizate dintr-un api simplu de date. Serverul nostru Mini Web recuperează secvențele de animație din feed, precum și la le-a lăsat pe un card SD. În cele din urmă, secvențele sunt afișate pe o matrice cu LED-uri gigantice.

Afișaje mari, rezoluții reduse
Ecranul nostru Graffiti este un pătrat de 1 metru, 5 × 5 matrice de LED-uri. Este influențată de masa de cafea Punk Daft oferită de Habitat acum câțiva ani. Tabelul Punk Daft a dat naștere multor replici DIY, incluzând acest excelent instructiv pe construirea unui tabel Punk Daft. De-a lungul timpului, modelul sa transformat într-o serie de permutări, cum ar fi Hanging-ul nostru “Daft Punk”. Cu condiția ca varietatea de mobilier big, clipind, am căutat un termen mult mai bun decât “tabelul Punk Daft”. Am venit cu “Afișare mare, cu rezoluție redusă” sau LLRD pentru scurt (pronunțat “LARD”).

Masa originală a punkului Daft a aprins aleatoriu sau în timp pentru muzică. [Mathieu Roncheau] Masa Replica a păstrat secvențele de animație într-un EEPROM. Primul nostru stil a făcut acest lucru un pas mai departe prin stocarea datelor de animație pe o cartelă SD formatată de grăsime. Acum, am pus designerul pe Internet pentru a ne asigura că putem aduce secvențe de animație trimise pe utilizator pe Internet.

Interfață online
Graffiti Animații pentru LLRD sunt produse cu un simplu producător de secvențe JavaScript. Urmăriți o feed online de animații trimise de utilizator sau încercați-vă singur. Designerul de secvențe Graffiti, precum și baculele de date scrise, pentru PHP / MySQL, precum și motorul Google App, sunt incluse în arhiva de locuri de muncă.

Designerul de secvențe Graffiti JavaScript este simplu de utilizat:

Faceți clic pe casetele pentru a comuta LED-urile afișate în fiecare cadru al animației.

Utilizați butoanele săgeată pentru a naviga între cadre.

Backupul, precum și aducerea uneltelor din spate oferă o metodă simplă pentru a salva secvența la nivel local într-un fișier text.

“Adăugați cadre de text” Introduceți cadre de caractere care utilizează un font bitmaped. Dacă nu vă placeți fontul implicit, produceți unul nou:

Faceți clic pe butonul “Editați fontul” pentru a tunde fontul existent.

Faceți modificările.

Faceți clic pe “Actualizați fontul” pentru a înlocui stilul de fonturi implicit cu noile cadre.

Matricea de stil Font este o masă de căutare a bitmaps pentru caracterele ASCII între zonă, precum și Z (caractere ASCII 32 la 90, “# # $% & ‘* +, -. / 0123456789: <=>? @ABCDEFGHIJKLMNOPQRSTUVWXYZ “). Pentru a adăuga permanent un nou stil de font, lipiți doar Fontset actualizat în codul JavaScript care respectă variabila “Font =”. Alegerea “Format Font” din caseta de rezervă va produce bitmap-uri formatate variabile care sunt pregătite pentru a lipi peste fontul existent.

Când ați terminat o animație, intrați în numele dvs. în caseta de autor, precum și apăsați Trimiteți. Codul de secvență va fi produs, precum și trimis la server.

Designerul Graffiti din Internet JavaScript este influențat de o versiune offline de către [Mathieu Roncheau]. [Codul sursei Delphi de la Mathieu], precum și executabilul sunt arhivate aici. Designerul nostru bazat pe JavaScript are câteva caracteristici suplimentare, se bazează pe browser, precum și nu are nevoie să rulați un fișier necunoscut .exe. Chiar dacă este menit să ruleze pe web, designerul va funcționa, de asemenea, dintr-o copie regională de pe computer.

Scriptul va funcționa pentru orice tip de matrice arbitrară, doar modificarea dpwps-urilor, precum și variabilele DPTCOLS la dimensiunile LRRD.

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.

Partea de server
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:

http://graffiti-me.appspot.com/feed.php?max=1&last=0

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
Descriere

V+
Vsys
3.3volt supply for the 595s.

GND
GND
Shared ground connection.

RA0
Data in
Data signal.

RA1
Ceas
Clock signal.

RB15
Zăvor
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 mai multe despre cardul Microchip SD, precum și bibliotecile TCP / IP din tutorialul nostru Mini Web Server.

Toate funcțiile grafice, inclusiv clientul TCP, pot fi descoperite în GRAFFITIGFX.C. Clientul TCP se bazează pe exemplul client generic TCP care este inclus în stack-ul TCP / IP. Am respectat abordarea multitasking de cooperare Microcip, precum și am rupt codul nostru în segmente mici care împărtășesc timpul CPU cu restul stack-ului TCP / IP.

Clientul se leagă în mod regulat cu datele, precum și la cererile de noi secvențe. Secvențele noi sunt analizate pentru numerele de identificare, precum și anexate la date temporare de pe cardul SD. Ultimul ID detectat este scris la capătul extrem al fișierului de date temporare, precum și la ultima variabilă a URL-ului la cererile de date ulterioare. Înregistrăm ID-ul la sfârșitul datelor pentru a împiedica compunerea repetată în același sector pe cardul SD. În mod ideal, levelarea în interiorul unei cartele SD de 1GB este adecvată pentru a preveni problemele pentru primele câteva decenii de utilizare. Dacă nu este disponibilă o conexiune la rețea, gadgetul joacă orice tip de date * .seq în directorul rădăcină al cardului SD.

O funcție parser decodează cadre, precum și le trimite la LLRD. Parserul este relativ robust la erori. Datele slabe care o fac din trecut de rutina de validare a backendului vor fi respinse la nivelul gadget fără efect bolnav. Dacă câteva cadre corupte se manipulează pentru a fi afișate, abia se observă printre celelalte modele abstracte care se joacă pe perete.

1.
2.
3.
#define gfx_use_tcp_client // include client TCP
#Define gfx_tcp_only // Doar TCP, precum și fișierul temp, nu verificați alte date pe cardul SD.
#define gfx_clear_temp_on_reset // Ștergeți opțional datele temporale de pe Resetare. Mare pentru motorul Google App …

Trei definește la începutul graffitigfx.c Gestionați ce caracteristici sunt incluse la compilarea timpului. Gfx_use_tcp_client compilează firmware-ul cu clientul TCP activat, comentează acest sens pentru o versiune numai pentru cardul SD a firmware-ului. Gfx_tcp_only ignoră orice tip de date .seq de pe cardul SD, precum și doar joacă secvențe descărcate de pe web. Alegerea GFX_CLEAR_TEMP_ON_RESET va șterge datele secvenței temporare pe fiecare resetare; Acest lucru este util pentru bazele de date care au ID-uri de înregistrare non-secvențiale, cum ar fi Datastore Google. În viitor, aceste definiții pot fi modificate la variabilele stabilite de un date de configurare de pe cardul SD.

Luând-o mai departe
Firmware-ul nostru simplu este un punct de plecare constant pentru un perete de graffiti de pe Internet. În timp ce lucrăm la acest loc de muncă, am venit cu o tonă de caracteristici suplimentare care nu au făcut-o în prototip.

Afișați adresa IP la pornire.

Un date de configurare pe cardul SD care stabilește adresa URL de date, frecvența de reîmprospătare, precum și alte variabile.

O interfață Telnet sau Web pentru configurația de la distanță.

Un server TCP pentru accesul direct la afișaj; Împingeți cadrele de animație dintr-un PC la distanță.

Un client de poștă electronică care raportează erori, precum și informații de condiție.

Mesaje de progres în timpul pornirii, precum și descărcări de secvențe. Cardul SD nu este prezent / erori complete.

Derolarea fluxurilor de twitter.

Gândurile voastre?

Nu doar verificați despre acest proiect, să contribuiți la unele cadre la peretele graffiti.

Data viitoare vom introduce proiectul final PIC24F, un rucsac Ethernet pentru micul knock-off de 20 $ Nokia LCD de la Sparkfun Electronics.