Geçen hafta bir kartvizit işinde web sunucumuzda ne yaptığımızı merak ediyor musunuz? Dev bir LED grafiti duvarına güç veriyor. Animasyonlar, Internet Tasarımcısı’nda kullanılarak kullanıcı tarafından gönderilebilir. Bireysel animasyonların çevrimiçi beslemesini de izleyebilirsiniz. İnternette internet arayüzü, Google App motorunda maksimum ölçeklenebilirlik ve esneklik için çalışır.
Bugünün Nasıl Yapılırken, kendi ağınızın grafiti duvarını oluşturmanın yanı sıra tüm içeriği de kapsıyoruz.
Kavrama Genel Bakış
Grafiti sekansları, internette JavaScript animasyon tasarımcısı ile tasarlanmıştır. Tamamlanan diziler, bir veritabanında tutulmasının yanı sıra doğrulanır; PHP / MySQL ve Google Apps (Python) için veritabanı arka uçları yaptık. Diziler basit bir verifeed API’den eşittir. Mini Web Sunucumuz, beslemeden animasyon dizilerini alır ve ayrıca bir SD kartta önbelleğe alır. Son olarak, diziler dev bir LED matris üzerinde görüntülenir.
Büyük, düşük çözünürlüklü ekranlar
Grafiti ekranımız 1 metre kare, 5 × 5 LED matrisidir. Birkaç yıl önce Habitat tarafından sunulan DAFT PUNK Sehpa masasından etkilenir. Daft Punk Tablosu, bir daft punk masa inşa etme konusundaki mükemmel talimat verilmesi de dahil olmak üzere birçok DIY kopyası geçirdi. Zamanla, “Daft Punk Tablosu” duvara asılı gibi bir dizi permütasyona girdi. Büyük, yanıp sönen mobilyaların çeşitliliği sağladı, “Daft Punk Tablosu” den daha iyi bir terim istedik. Kısa için “büyük, düşük çözünürlüklü ekran” veya LLRD ile geldik (telaffuz ‘lard’).
Orijinal daft punk tablosu rastgele ya da zamanında müziğe kadar parladı. [Mathieu Roncheau] ‘nin çoğaltma tablosu bir EEPROM’da animasyon dizilerini tuttu. İlk stilimiz, animasyon verilerini yağ biçimlendirilmiş bir SD kartına kaydettirerek bu bir adım daha da aldı. Şimdi, İnternet üzerinden kullanıcı tarafından sunulan animasyon dizilerini alabilmemiz için tasarımcıyı internete koyduk.
Çevrimiçi arayüz
LLRD için grafiti animasyonları basit bir javascript dizisi üreticisi ile üretilir. Kullanıcı sunulan animasyonların çevrimiçi beslemesini izleyin ya da kendiniz deneyin. Grafiti Sırası Tasarımcısı yanı sıra, PHP / MySQL’in yanı sıra Google App Engine’in yanı sıra, Google App Engine, iş arşivine dahil edilmiştir.
JavaScript Graffiti Sırası Tasarımcısı kullanımı kolaydır:
Animasyonunuzun her çerçevesinde gösterilen LED’leri değiştirmek için kutulara tıklayın.
Çerçeveler arasında gezinmek için ok düğmelerini kullanın.
Yedekleme, geri alımları geri getirmenin yanı sıra, sıralamayı yerel olarak bir metin dosyasında kaydetmek için basit bir yöntem sağlar.
“Metin Çerçeveleri Ekle”, bitmaped bir yazı tipi kullanan karakter kareleri ekler. Varsayılan yazı tipini beğenmezseniz, sadece yeni bir tane üretin:
Mevcut yazı tipini tonlamak için ‘Yazı Tipi Düzenle’ düğmesini tıklayın.
Değişikliklerinizi yapın.
Varsayılan yazı tipi stilini yeni çerçevelerle değiştirmek için ‘Yazı Tipini Güncelle’yi tıklayın.
Yazı Tipi Stili Dizi, ASCII karakterleri için ASCII karakterleri için Z (ASCII karakterleri 32 ila 90, “!” # $% & ‘() * +, -. / 0123456789 :; <=>? @Abcdefghijklmnopqrstuvwxyz “). Kalıcı olarak yeni bir yazı tipi stili eklemek için, güncellenmiş Fontset’i ‘font =’ değişkenine uyarak JavaScript kodunda yapıştırın. Yedekleme kutusundaki “Yazı Tipi Formatı” seçimi, mevcut font üzerinden yapıştırmak için hazırlanmış değişken biçimlendirilmiş bitmapler üretecektir.
Bir animasyonu tamamladığınızda, yazar kutusundaki adınıza girin. Sıra kodu, sunucuya gönderildiği gibi üretilecektir.
İnternette JavaScript tabanlı grafiti tasarımcısı [Mathieu Roncheau] tarafından çevrimdışı bir sürümden etkilenir. [Mathieu] ‘nin Delphi kaynak kodu ve yürütülebilir yanı sıra burada arşivlendi. JavaScript tabanlı tasarımcımızın birkaç ek özelliğe sahip, tarayıcı tabanlıdır ve bilinmeyen bir .exe dosyasını çalıştırmanıza gerek yoktur. Web’de çalışması gerektiğinde, tasarımcı aynı şekilde bilgisayarınızdaki bölgesel bir kopyadan çalışacaktır.
Komut dosyası herhangi bir keyfi matris için çalışacaktır, sadece DPTrow’ları ve DPTCOLS değişkenlerini LLRD’nizin boyutlarına değiştirin.
Çevrimiçi görüntüleyici, kullanıcı tarafından sunulan grafiti animasyonlarının bir akış beslemesini göstermek için asenkron HTTP (AJAX-ISH) isteklerini kullanır. Sayfa her yüklendiğinde taze dizilerle başlayabileceğinden emin olmak için bir çerez ayarlamaya çalışacaktır. Çerezi etkinleştirmezseniz, bir sonraki ziyaretinizde 0’da başlayacağım.
Sıra bitmap formatı
Sıra oluşturucu her sütunu bir ASCII formatlanmış bitmap olarak çıkarır. Her sütun için bitmap bir boşlukla ayrılır ve her bir tam kare, bir çizgi besleme (NR) ile sonlandırılır. Bu stil [Mathieu Roncheau] ‘ın PC Sıralayıcı programı tarafından tanımlandı, geriye doğru uyumluluğu korumak için tuttuk.
Bitmap verileri, çerçevenin sol üst köşesinde sıfırlanır. Her sütunun üst hücreleri bit 0, yanı sıra alt hücreler bit 4’dir. .
Değeri for Her sütun, yanan LED’lerin bir ikili sayıda 1 olarak 1 olarak, ondalık basamağa dönüştürülmesiyle keşfedilir. Örneğin, yukarıdaki ilk sütun 10000 ikilis veya 1 ondalık olmasıdır. Son sütun 11111 ikili veya ondalık 31’dir. İnternet İkili-Ondalık hesaplayıcısının kullanıldığı dönüşümlerimizi onaylayabilirsiniz.
Sütun bitmaplerinin, asıl ondalık değerlerin ASCII eşdeğerleri ile temsil edildiğini unutmayın. Sayısal basamaklar, asi değeri artı 0x30h olan ASCII standardına göre kodlanır. Ayrıca, çok basamaklı sayılar özel karakterler olarak tutulur; 24 Örnekte 0x32H, 0x34h olarak tutulur.
Sunucu tarafı
Arka başlama, animasyon dizilerini kabul eden basit bir yazılım uygulamasıdır, bazı doğrulama yapar ve bunları bir veritabanına kaydeder. Tutulan dizilerin DataFeed API’sinden erişilebilir.
Artırmak
Arka uçun iki versiyonunu oluşturduk; Her ikisi de iş arşivinde. Birincisi, İnternet LLRD’lerinde düşük hacimli için basit bir PHP / MySQL arka uç, diğeri, günde bir sürü hack kullanabilmeleri gereken bir Google App Engine / Python versiyonudur.
Tercih ettiğiniz platform için bir arka uç oluşturmak gerçekten basittir. Modifikasyon Graffiti tasarımcının, arka tarafınıza işaret etmek için tip eylemini sunar; Halen her iki versiyon şu anda Backend.php için yayınlandı. Şimdi, ‘Yazar’ı’ SEQ ‘ın yanı sıra’ SEQ ‘değişkenlerini yanı sıra bir veritabanına kaydedin.
Boşluğumuz, sistemdeki saldırıları önlemek için biraz doğrulama yapar. Aşamalarda kontroller uyguladık, böylece birçok kaynak olarak israf etmiyorlar. İlk olarak, gönderimin genel boyutu, sebebi içinde olduğundan emin olmak için denetlenir. Daha sonra, sıra, her biri form için kontrol edildiğinin yanı sıra özel çerçevelere ayrılır. Doğrulamayı geçerse, veritabanına kaydedilir.
API besleme
Dizilerin basit bir verifeed API ile erişilebilir. API’nin iki değişken var:
Max – Gönderilecek maksimum sekans sayısı.
Son – Son sekans okuma, sadece daha yeni veriler gönderilir.
DataFeed, her bir animasyon dizisini ‘#’ karakterine göre başlar, bir kimlik numarasının yanı sıra satır beslemesi ile uyumludur. ‘#’, Müşterileri yeni bir dizinin başlangıcına uyaran geçersiz bir bitmap değeridir. Müşteriler, her bir çekmede taze diziler almak için API’nin son değişkeniyle kimlik numarasını kullanabilirler.
Donanım
Mini web sunucusu
Bu proje için PIC24F mini web sunucumuzu TCP özellikli bir istemci olarak kullandık. Web sunucusunun tam olarak nasıl geliştirileceğini keşfetmek için önceki makalelerimizi kontrol ettim.
Daft punk masa
[Mrgalleta], bir daft punk masa çoğaltmanın gerçek tablo kısmı için fantastik bir yapı öğreticisine sahiptir. Bir LLRD, duvar asılı gibi, olsa da birçok form alabilir.
Daft Punk Table Çoğaltma Stillerinin çoğu, 74HCT595 (PDF) çıkış genişletici ve ULN2803A (PDF) transistör dizisi ile yönetilir. Bu talebin içindeki sürücü kartı, hem kolay bir etch, deliğin içindeki bir PCB’ye birleştirir. Her sürücü kartının iki 74HTC595’ine veya 16 çıkışa sahiptir; 25 hücre LLRD için iki sürücü panosuna ihtiyacımız vardı.
74HCT595, SPI benzeri bir arayüz tarafından yönetilen seri çıkış genişleticisidir. Mandal çizgisini düşürerek bir güncelleme başlatılır. Her bir LED’in belirtilmesi (Açık veya Kapalı), bir saatin nabzına uyulduğu veri hattına yerleştirilir. Mandal sinyali yüksek döndüğünde bitler çıkış pimlerine yerleştirilir. Veri, bir (595) veri çıkış piminden, diğerinin veri girişine kadar basamaklar. Bu cihazı arayüzlenmeye ayrıntılı bir görünüm için bu 74xx595 eğitimini kontrol ettim.
74HCT595’i ve 74HC595’in olmadığını not etmek önemlidir. “HCT” kısmı, mini web sunucusunun çalışma voltajı da dahil olmak üzere çok çeşitli voltajlar üzerinde çalışır: 3.3Volts.
74HCT595 kaynakları akımı, yani büyük olasılıkla 3.3Volts’daki her çıkıştan doğrudan tek bir LED’i çalıştırabiliriz. Çoğu LLRD’lerin hücre başına 2-8 LED’ine sahip olduğundan, 5 ile 24volt arasında çalışan, daha büyük yükü değiştirmek için ULN2803A transistör dizisini kullanırız. ULN2803A, tedarik etmek yerine akımı batıyor; Güç yerine, LED’lerin toprak bağlantısını değiştirir.
LLRD’miz, 5 voltluk bir tedarik ve 56OHM direnci ile 20mA’da çalışan, hücre başına iki LED’tir. LED’leri, 25 küçük devre kartlarından ziyade bir parça karton etrafında lehimize ettik.
Bağlantılar
Mini Web Sunucusu ile sürücü kartları arasında 5 kablo bağlantısı LLRD’yi kontrol eder.
Sunucu
Ltrd
Tanım
V +
Vsys
595’ler için 3.3Volt tedariki.
Gnd
Gnd
Paylaşılan Zemin Bağlantısı.
RA0
Data in
Data signal.
RA1
Saat
Clock signal.
RB15
Latch
Latch signal.
–
Vled
LED power supply.
Firma yazılımı
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.
Senin düşüncelerin?
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.