先週の名刺の仕事で私たちのWebサーバーを使ったことを疑問に思いますか？それは巨大なLEDの落書きの壁に電力を供給しています。アニメーションは、インターネットデザイナを使用してユーザー送信することができます。あなたは個々のアニメーションのオンラインフィードも見ることができます。インターネットインターフェース上では、Google App Engine上で最大スケーラビリティ、および回復力が実行されます。
今日のハウツーでは、私たちはあなた自身のネットワークドグラフィティ壁を構築することの外に全部を覆っています。
コンセプトの概要
Graffitiシーケンスは、JavaScriptアニメーションデザイナーを使用してインターネット上に設計されています。完成したシーケンスはデータベース内に保持されていると同様に検証されます。 Google Apps（Python）だけでなく、PHP / MySQLのデータベースバックエンドを作成しました。シーケンスは単純なデータフィードAPIからシンジケートされます。私たちのMINI Webサーバーはフィードからアニメーションシーケンスを取得し、SDカードにキャッシュします。最後に、シーケンスは巨大LEDマトリックス上に表示されます。
大きく、低解像度の表示
私達の落書きスクリーンは1メートルの正方形、5×5マトリックスのLEDです。数年前に生息地が提供するDAFT PUNKコーヒーテーブルの影響を受けます。 Daft Punk Tableは、DAFTパンテーブルの構築上の優れた指示を含む多くのDIYレプリカを生み出しました。時間の経過とともに、パターンは私たちの「DATS PUNK Table」の壁掛けをするなどの多数の順列にモーフィングされました。大きな、点滅の家具のさまざまな種類を提供していましたが、私たちは「DAFT PUNK Table」よりもはるかに良い用語を求めました。私たちは「大型、低解像度の表示」やLLRDを短くしました（「LARD」と発音した」）。
元のDATS PUNKテーブルはランダムに、または音楽に間に合うように点滅しました。 [Mathieu Roncheau]のレプリカテーブルは、EEPROMにアニメーションシーケンスを保存しました。私たちの最初のスタイルは、アニメーションデータをFATフォーマットされたSDカードに格納することによってさらに一歩かかりました。今、私たちはインターネット上でユーザー送信されたアニメーションシーケンスを取得できるように、デザイナーをインターネットに置きました。
オンラインインターフェース
LLRDのグラフィティアニメーションは、単純なJavaScriptシーケンスメーカーで作成されます。ユーザー送信されたアニメーションのオンラインフィードを見たり、自分で試してみてください。 Graffiti Sequence DesignerとPHP / MySQLの場合は、Google App Engineに書かれたデータバックエンドとは、Job Archiveに含まれています。
JavaScript Graffitiシーケンスデザイナーは使いやすいです。
アニメーションの各フレームに表示されているLEDを切り替えるには、ボックスをクリックします。
矢印ボタンを使用してフレーム間を移動します。
バックアップとバックツールを表示するだけでなく、テキストファイル内のシーケンスをローカルに保存するための簡単な方法があります。
「テキストフレームの追加」ビットマップフォントを使用して文字フレームを挿入します。デフォルトのフォントを嫌いな場合は、新しいものを作成するだけです。
既存のフォントをトンするには、[フォントの編集]ボタンをクリックします。
あなたの変更を加えます。
デフォルトのフォントスタイルを新しいフレームに置き換えるには、[フォントの更新]をクリックします。
フォントスタイルの配列は、エリア間のASCII文字のビットマップ、Z（ASCII文字32~90、 “！”＃$％＆ ‘（）* +、 – 。/ 0123456789：; <=>？ @abcdefghijklmnopqrstuvwxyz “）。新しいフォントスタイルを恒久的に追加するには、「font =」変数に準拠したJavaScriptコードに更新されたフォントセットを貼り付けます。バックアップボックスの「フォントフォーマット」の選択は、既存のフォントを貼り付ける準備ができている変数フォーマットのビットマップを作成します。
アニメーションが完了したら、[著者]ボックスで名前に入り、送信を押します。シーケンスコードはサーバーに送信されるだけでなく生成されます。
Internet JavaScriptベースのGraffiti Designerの上には、[Mathieu Roncheau]によるオフライン版の影響を受けます。 [Mathieu]のDelphiソースコードと実行可能ファイルはここにアーカイブされています。 JavaScriptベースのDesignerにはいくつかの追加機能があり、ブラウザベースのものであり、Unknown .exeファイルを実行する必要はありません。 Web上で実行することを意味していますが、デザイナーはあなたのコンピュータの地域コピーからも同様に機能します。
このスクリプトは、任意のタイプの任意の行列に対して機能し、DPTROWS、およびLLRDの寸法へのDPTROWSの変数を変更するだけです。
オンラインビューアは、非同期HTTP（AJAX-ISH）要求を利用して、ユーザー送信されたGraffitiアニメーションのストリーミングフィードを表示します。ページがロードするたびに新規シーケンスで始めることができるように、クッキーを設定しようとします。あなたがクッキーを有効にしないならば、それはあなたの次の訪問で0で始まるだけです。
シーケンスビットマップフォーマット
シーケンスビルダーは各列をASCIIフォーマットされたビットマップとして出力します。すべての列のビットマップはスペースによって区切られており、各フルフレームはラインフィード（NR）で終了します。このスタイルは[Mathieu Roncheau]のPCシーケンサープログラムによって定義されています、私たちは後方互換性を保つためにそれを保持しました。
ビットマップデータはフレームの左上隅にゼロになります。各列の上部セルはビット0であり、ボトムセルはビット4である。 。
値fo.Rすべての列は、LIT LEDを2進数で1として扱うことによって検出されるだけでなく、10進数に変換することによって発見されます。たとえば、上の最初の列は10000バイナリ、または10進数である。最後の列は11111バイナリ、または10進数31です。インターネットバイナリ-10進数計算機を使用して、コンバージョンを確認できます。
列ビットマップは実際の10進値のASCII等価物で表されます。数字はASCII規格に従ってエンコードされます。これは実際の値と0x30hです。また、多桁番号はプライベート文字として保持されています。例では、0x32h、0x34hとして保持されています。
サーバ側
バックエンドは、アニメーションシーケンスを受け入れ、いくつかの検証を行い、それらをデータベースに保存する単純なソフトウェアアプリケーションです。保存されたシーケンスはデータフィードAPIからアクセスできます。
バックエンド
バックエンドの2つのバージョンを作成しました。どちらもジョブアーカイブにあります。最初のものは、インターネットLLRDS上の少量の単純なPHP / MySQLバックエンドです。もう1つは、1日のリーダーに多くのハックを処理できるようにするGoogle App Engine / Pythonバージョンです。
それはあなたの好みのプラットフォームのためのバックエンドを構成するのは本当に簡単です。変更バックエンドを指すように、Graffiti Designerの送信タイプのアクション。両方のバージョンは現在backend.phpに公開しています。さて、「著者」とサーバー上の「seq」変数と同様にそれらをデータベースに保存します。
私たちのバックエンドはシステムに対する攻撃を防ぐために少し検証を実行します。私たちは段階で小切手を実装しているので、多くのリソースも浪費しません。まず、提出物の一般サイズが理由で確認するために検査されます。次に、シーケンスはプライベートフレームに分割され、それぞれがフォーム検査されます。検証に合格した場合は、データベースに保存されます。
フィードAPI
シーケンスは単純なDataFeed APIでアクセス可能です。 APIには2つの変数があります。
.
max – 送信するシーケンスの最大数。
Last – 最後のシーケンスの読み取り、新しいデータのみが送信されます。
データフィードは、文字「＃」を持つ各アニメーションシーケンスを開始し、Line FeedだけでなくID番号によって準拠しています。 ‘＃’は、クライアントを新しいシーケンスの先頭に警告する無効なビットマップ値です。クライアントは、APIの最後の変数を使用してID番号を利用して、各プルに新鮮なシーケンスを取得できます。
ハードウェア
ミニウェブサーバー
このプロジェクトのTCP対応クライアントとしてPIC24F MINI Webサーバーを利用しました。 Webサーバーの開発方法を正確に検出する前の記事を確認しました。
ダフトパンクテーブル
[Mrgalleta] DAFT PUNKテーブルレプリカの実際のテーブル部分には素晴らしい建物のチュートリアルがあります。しかし、私たちの壁掛けなどのLLRDは多くの形を取ります。
DATS PUNKテーブルレプリカスタイルのほとんどは、74HCT595（PDF）出力エキスパンダ、およびULN2803A（PDF）トランジスタアレイによって管理されています。この指示式の運転室ボードは、両方ともエッチが容易な貫通孔PCBに組み合わされます。各ドライバボードには、2つの74HTC595S、または16の出力があります。私達は私達の25のセルLLRDのための2つのドライバーボードを必要としました。
74HCT595は、SPIのようなインタフェースによって管理されるシリアル出力エキスパンダです。ラッチラインをドロップすることによって更新が開始されます。各LED（ONまたはOFF）の指定はデータラインに配置され、クロックのパルスに準拠しています。ラッチ信号がハイに戻ると、出力ピンにビットが表示されます。データカスケードは、1つ595のデータ出力端子から、次のデータ入力に。このデバイスのインタフェースを詳細には、この74xx595チュートリアルをチェックアウトしました。
74HCT595と74HC595を利用したことに注意することが重要です。 「HCT」部分は、ミニウェブサーバの動作電圧を含む多種多様な電圧で動作します.3.3ボルト。
74HCT595電流が電流を供給し、私たちは3.3ボルトの各出力から直接単一のLEDを実行する可能性があります。ほとんどのLLDはセルごとに2~8個のLEDを持ち、24ボルトとの間で動作しているので、ULN2803Aトランジスタアレイを利用して大きな負荷を切り替えます。 ULN2803Aは、それを調達するのではなく、電流を流します。電源ではなく、LEDのグランド接続を切り替えます。
私たちのLLRDはセルごとに2つのLEDを持っています.5ボルトの給電と56Ωの抵抗器で20mAで走っています。 25個の小さな回路基板をエッチングするのではなく、段ボールの周りにLEDをはんだ付けしました。
接続
ミニWebサーバーとドライバボードの間の5ケーブル接続は、LLRDを制御します。
サーバ
l l
説明
v +
vsys.
595Sの3.3Volt電源。
g
g
共有グランド接続
RA0
データイン
データ信号。
RA1
時計
クロック信号
RB15
ラッチ
ラッチ信号。
–
明らかに
LED電源装置。
ファームウェア
私たちのファームウェアは、MPLABとマイクロチップC30デモコンパイラを利用してCで書かれています。プログラミングの詳細については、紹介チュートリアルでPIC24Fを操作しています。ジョブアーカイブには、2つのファームウェアバージョンが含まれています。 SDカードからすべての* .SEQシーケンスデータを最初に読み取るだけで、2番目のバージョンはWeb接続用のマイクロチップTCP / IPスタックを追加します。 diMicrochip SDカードの詳細については、MINI Web ServerチュートリアルのTCP / IPライブラリーについてもっと確認してください。
TCPクライアントを含むすべてのグラフィック関数は、graffitigfx.cで発見できます。 TCPクライアントは、TCP / IPスタックに含まれている一般的なTCPクライアントの例に基づいています。マイクロチップの協力的マルチタスクアプローチ、およびCPU時間を残されたTCP / IPスタックで共有する小さなセグメントにコードを破った。
クライアントは定期的にデータフィードと同様に新しいシーケンスを要求します。新しいシーケンスは、SDカードの一時データに添付されるだけでなく、ID番号の場合も解析されます。検出された最後のIDは一時データファイルの非常に最後に書き込まれ、その後のDataFeed要求のURLの最後の変数に追加されます。データの最後にIDを録音して、SDカードのまったく同じセクタへの構成を防ぐためにデータを記録します。理想的には1GBのSDカード内のレベリングレベルは、最初の数十年の使用の問題を防ぐのに十分です。ネットワーク接続が利用可能であれば、ガジェットはSDカードのルートディレクトリにある* .SEQデータの種類を再生します。
パーサ機能はフレームをデコードし、それらをLLRDに送信します。パーサーはエラーに対して比較的堅牢です。バックエンド検証ルーチンを過ぎていることを過ぎるデータは、病気の効果なしにガジェットレベルで拒否されます。いくつかの破損したフレームが表示されるように処理する場合は、壁で遊ぶ他の抽象的なパターンの間ではほとんど気づかないでしょう。
1
2.
3.
#define gfx_use_tcp_client // TCPクライアントを含めます
#define gfx_tcp_only // TCPだけでなく、TEMPファイルをチェックアウトしても、SDカードの他のデータをチェックアウトしないでください。
#define gfx_clear_temp_on_reset //オプションでリセット時にTEMPデータを削除します。 Google App Engineに最適…
Graffitigfx.cの始めに3つの定義がコンパイル時に含まれる機能を管理します。 gfx_use_tcp_clientファームウェアをコンパイルするTCPクライアントが有効になっている場合は、SDカードのみのバージョンのファームウェアにこの意味をコメントします。 GFX_TCP_ONLYは、SDカードの任意のタイプの.SEQデータを無視し、Webからダウンロードされたシーケンスのみを再生します。 gfx_clear_temp_on_resetの選択は、各リセット時に一時的なシーケンスデータを削除します。これは、Googleのデータストアのように、非順次レコードIDを持つデータベースに役立ちます。将来的には、これらの定義は、SDカードの構成データによって設定されている変数に変更される可能性があります。
それをさらに服用する
私たちの単純なファームウェアは、インターネットの落書きの壁のための着実な出発点です。この仕事に取り組んでいた間、私たちはプロトタイプにそれを作らなかった追加の特徴トンを思い付きました。
起動時にIPアドレスを表示します。
データフィードURL、リフレッシュ周波数、および他の変数を設定するSDカードの構成データ。
リモート構成のためのTelnetまたはWebインターフェース。
ディスプレイに直接アクセスするためのTCPサーバ。リモートPCからアニメーションフレームを押します。
エラーと条件情報を報告するメールクライアント。
シーケンスダウンロードと同様に起動時の進行状況メッセージ。 SDカードが存在しない/完全なエラー。
Twitterフィードをスクロールします。
あなたの考え？
このプロジェクトについてチェックアウトしないで、落書きの壁にいくつかのフレームを貢献してください。
次回は、Sparkfun Electronicsからの小さな$ 20色のNokia LCDノックオフのためのイーサネットバックパックの最終的なPIC24Fプロジェクトを紹介します。