node.jsを使用したドットマトリックスLEDディスプレイに画像を表示する-jsチュートリアル-php.cn

node.jsを使用したドットマトリックスLEDディスプレイに画像を表示する

キーテイクアウト

Freetronics DMDライブラリは、ドットマトリックスLEDディスプレイにライン、シェイプ、テキストを描画するために使用されます。このライブラリは、Freetronics Githubリポジトリからダウンロードし、/arduino/libraries/folderにコピーできます。
node.jsコードは、シリアルポートを介してArduinoにメッセージを送信するために使用されます。 SerialPortとPNG-JSの2つのNPMモジュールが必要です。シリアルポートモジュールを使用すると、シリアルポートを介してメッセージを送信でき、PNG-JSはPNG画像で読み取ります。
ドットマトリックスLEDディスプレイは、さまざまな方法で拡張およびカスタマイズできます。たとえば、APIに接続してそれを通過する画像を表示したり、時間の時間、インターネットに接続されたデバイスの状態、天気などに応じて異なる画像を表示できます。
ドットマトリックスLEDディスプレイは楽しいです。どの開発者が空白のライトのキャンバスを好まないでしょうか？最近、node.jsを使用してFreetronicsから32 x 16ドットマトリックスディスプレイをペアにし、白黒のPNG画像を表示するようにしました。この記事では、すべてがどのように機能するかを説明します。
ドットマトリックスLEDディスプレイ（DOT Matrix DisplayまたはDMDとまったく知られている）は、LEDライトのグリッドを備えたディスプレイで、テキストと形状を表示するためにオン /オフにできます。それらのいくつかは複数の色を持っていますが、他の色は単一の色です。このデモで使用するものは1色しかないため、白黒画像に限定されています。注意することが重要です - LEDディスプレイはLCDディスプレイとはまったく異なります。 LCDは派手な光クリスタルを使用し、VCR、クロック、計算機などのディスプレイに使用されます。数週間前に、node.jsを使用してArduino LCDにWeb APIを表示する記事を書きました。 2つを比較したい場合は、それを見てください。

この特定のデモでは、Freetronics DMDライブラリに依存しているため、Freetronics 32×16ドットマトリックスディスプレイが必要です。

デモコード

コードをつかみ、自分で試してみたい場合は、Githubでここで見つけることができます。

フリートロニクスDMDライブラリ

LEDドットマトリックスディスプレイへの線、形状、テキストの描画はすべて、Freetronics DMDライブラリを介して行われます。それを使用するには、次の手順を完了します

githubリポジトリからDMDライブラリをダウンロードします
Timeroneライブラリをダウンロードして、/Arduino/ライブラリ/フォルダーにも配置します。例えばMACユーザー、/users/username/documents/arduino/libraries/timerone-r11。

DMDに要素を表示するための機能のほとんどは、Arduinoスケッチコード内で発生します。スケッチコードは、シリアルポートを介したメッセージに目を光らせ、それらのメッセージに基づいて表示される表示を変更します。

スケッチは、含まれるものと定数から始まります。 SoftwareSerial.hを含めて、シリアルポートにアクセスし、DMDの幅と高さを定義できるようにします（当社の場合は32×16）。 Buflengthは、私たちが持っているライトの数を保存します。これは、Arduinoを送信したいメッセージの最大サイズです。私たちの場合、それは32に512の16を掛けます。

次に、Freetronics DMDに固有のインクルードがあります。これらはすべて、以前にArduinoライブラリフォルダーにコピーしたファイルから利用できるようにする必要があります。

次に、2つの定数displays_acrossとdisplays_downがあります。これらは、一緒に結合したLEDディスプレイの数を定義するために使用されます。私はあなたが私と同じ状況にあり、1つのディスプレイを持っていると仮定します。したがって、これらは両方とも1つに等しくなります。次に、それをDMDライブラリに渡して、DMD DMD（）を使用して実行します。

<span><span>#include <SoftwareSerial.h></span>
</span>  <span><span>#define SCREEN_WIDTH <span>32</span></span>
</span>  <span><span>#define SCREEN_HEIGHT <span>16</span></span>
</span>  <span><span>#define BUFLENGTH <span>512</span></span></span>

ログイン後にコピー

次のコードはDMDサンプルに含まれています。これは、DMDライブラリを取得して、設定されたインターバルでディスプレイを更新する関数です。その間隔をもう少し下に定義します。

<span><span>#include <SPI.h></span>
</span>  <span><span>#include <DMD.h></span>
</span>  <span><span>#include <TimerOne.h></span></span>

ログイン後にコピー

次に、最後の2つの変数を定義します。これら2つは、シリアルポートを介してメッセージを受信することに関連しています。まず、BUF [buflength]は、LEDがオンとオフにする必要があるシリアルポートメッセージのバッファーを保存します。第二に、bufcountは、このバッファ内のバイトの数を保存するために使用されます。

<span><span>#define DISPLAYS_ACROSS <span>1</span></span>
</span>  <span><span>#define DISPLAYS_DOWN <span>1</span></span>
</span>  DMD <span>dmd(DISPLAYS_ACROSS, DISPLAYS_DOWN);</span>

ログイン後にコピー

setup（）関数は、定数と定義されたライブラリを使用してプロセス全体を開始します。シリアルポートメッセージのポート57600でリッスンすることから始まります。

次に、以前に含めたタイマーローンライブラリを使用してタイマーを初期化します。 4ミリ秒からカウントダウンするように指示します。 Freetronicsの例では、ディスプレイのちらつきを避けるために、これを5ミリ秒以上に設定しないことをお勧めします。

<span>void ScanDMD() { 
</span>    dmd<span>.scanDisplayBySPI();
</span>  <span>}</span>

ログイン後にコピー

次に、タイマーが期限切れになったときにscandmd（）関数を実行するように設定します。これにより、ディスプレイが再表示されます。

最後に、setup（）関数では、dmd.clearscreen（）関数にtrueを渡すことにより、ディスプレイ上のすべてのピクセルをクリアします。この関数にfalseを渡すと、すべてのピクセルがオンになります！

<span>char buf[BUFLENGTH];
</span>  <span>int bufCount;</span>

ログイン後にコピー

<span><span>#include <SoftwareSerial.h></span>
</span>  <span><span>#define SCREEN_WIDTH <span>32</span></span>
</span>  <span><span>#define SCREEN_HEIGHT <span>16</span></span>
</span>  <span><span>#define BUFLENGTH <span>512</span></span></span>

ログイン後にコピー

Arduinoのループ（）関数では、シリアルポート上のメッセージに注意してください。シリアルポートから読み取りできるバイトの数を確認します。利用可能なバイトがある場合、メッセージがストリーミングされているメッセージがあり、SerialParse（）関数を実行します。

serialParse（）内で、bufcountを-1に設定してカウント値をリセットします。次に、serial.readbytesuntil（）を使用して、その配列（buflength）の512要素を読み取ります。 N文字がある場合、配列の読み取りも停止します。ここでの主な目的は、LEDライトグリッドの長さにシリアルメッセージを保持することです。

<span><span>#include <SPI.h></span>
</span>  <span><span>#include <DMD.h></span>
</span>  <span><span>#include <TimerOne.h></span></span>

ログイン後にコピー

バッファにメッセージがある場合は、parsebuffer（）に送信します。これは、画面に解析して表示されます。

parsebuffer（）関数内で、画面をクリアすることから、新しい図面で明るくすることから始めます。次に、読んでいる配列のどの位置を追跡するために、iの整数を作成します。

<span><span>#define DISPLAYS_ACROSS <span>1</span></span>
</span>  <span><span>#define DISPLAYS_DOWN <span>1</span></span>
</span>  DMD <span>dmd(DISPLAYS_ACROSS, DISPLAYS_DOWN);</span>

ログイン後にコピー

次に、バッファ内の各文字を左から右へxを繰り返し、xループを介してscreen_widthまで、y yを介して上から下にscreen_heightまで下に繰り返します。これにより、DMDの2次元表示に1つの次元配列が表示されます。各文字について、「1」かどうかを確認します。もしそうなら、xとyのディスプレイにあるLEDを利用します。それは黒い私たちの画像の部分に使用されます。「1」でない場合は、次の位置などに続きます。最終的に、画像全体を引き出します

Arduinoがどのように機能するかをカバーしています。LEDが添付された状態でArduinoでそのコードを実行すると、何も表示されません。ドットマトリックスディスプレイに何かを表示するには、シリアルポートを介してメッセージを送信するにはノードコードが必要です。

ノードコード

<span>void ScanDMD() { 
</span>    dmd<span>.scanDisplayBySPI();
</span>  <span>}</span>

ログイン後にコピー

JavaScriptは、2つの重要なNPMモジュールを必要とすることから始まります。 SerialPortは、シリアルポートを介してArduinoにメッセージを送信できるものとPNG-JSがPNG画像で読まれるものです。

次に、シリアルポートメッセージングを設定します。変数シリアルポート内にシリアルポートオブジェクトを設定します。これには、Arduinoが接続されているポートと、シリアルポートメッセージをリッスンするボーレートを設定します。

<span>char buf[BUFLENGTH];
</span>  <span>int bufCount;</span>

ログイン後にコピー

Arduinoがどのポートに接続されているのかわからない場合（たとえば、 '/dev/tty.usbmodem1431'を持っています）、それをPCに接続し、Arduino IDEを開き、[ツール]> [ポートに移動して、どちらを確認してください選択されています。

ボーレートは個人的な好みになる可能性があります。使用しているボーレートについて本当に心配していない場合は、例に既に入手したものに固執してください。次に、SerialMessageと呼ばれる文字列変数を初期化します。これにより、シリアルポートを介して送信するゼロの完全な文字列を保存します。

<span><span>#include <SoftwareSerial.h></span>
</span>  <span><span>#define SCREEN_WIDTH <span>32</span></span>
</span>  <span><span>#define SCREEN_HEIGHT <span>16</span></span>
</span>  <span><span>#define BUFLENGTH <span>512</span></span></span>

ログイン後にコピー

SerialPortオブジェクトには、「オープン」のイベントリスナーがあり、定義されたシリアルポートが開いており、JavaScriptからアクセスできるときに応答します。この場合、Console.logを実行して、すべてがシリアルポートメッセージングに適していることを確認できます。

<span><span>#include <SPI.h></span>
</span>  <span><span>#include <DMD.h></span>
</span>  <span><span>#include <TimerOne.h></span></span>

ログイン後にコピー

シリアルポートがメッセージの準備が整っていることがわかったら、PNG画像ファイルで読み取るためにpng.decode（）関数を実行します。デモでは、shotepointlogo-withsmile.pngと呼ばれるノードファイルと同じフォルダー内にpng画像があるため、そのファイル名を渡します。次に、データ変数を介してPNGファイルのデータを提供するコールバック関数があります。

png.decode（）関数から返されたデータは、0から255の値の配列になります。各ピクセルを繰り返し、それぞれの4つのアイテムのシリーズ（赤、緑、青、アルファ）を繰り返します。価値。デモでアルファ値を使用することはありません。黒と白の画像だけを扱っているため、理論的には必要に応じてできます。サンプルアレイはそうに見えます：

<span><span>#define DISPLAYS_ACROSS <span>1</span></span>
</span>  <span><span>#define DISPLAYS_DOWN <span>1</span></span>
</span>  DMD <span>dmd(DISPLAYS_ACROSS, DISPLAYS_DOWN);</span>

ログイン後にコピー

上記の配列は、255,255,255,255の1つの白いピクセルと0,0,0,255の1つの黒いピクセルを表します。これは、画像全体を表現するまで、すべてのピクセルで何度も続きます。コールバック関数内で、SerialMessageを空白の文字列にリセットし、4つのセットのデータ配列を介して繰り返し始めます。各ピクセルのそれぞれの値に一致するように、赤、緑、青のローカル変数を設定しました。

<span>void ScanDMD() { 
</span>    dmd<span>.scanDisplayBySPI();
</span>  <span>}</span>

ログイン後にコピー

完全に黒でも白でもないグレースケールの価値に対処できるようにするために、輝度チェックもあります。以下の関数は、ピクセルの色がどのように暗くまたは明るいかを決定します。

その値が150を超える場合、それはかなり明るい色であると仮定し、0（白）に設定します。それ以外の場合は、1に設定して黒くします。どちらかの値をSerialMessage文字列に追加します

すべてのピクセルを通過し、ゼロまたはそれを表現するためにゼロまたはゼロのいずれかを割り当てたら、SerialPort.write（）を使用してシリアルポートにそのメッセージを送信します。画像を読み、反復するこのプロセス全体は、実際にディスプレイを受信する準備が整うまでにかかる時間よりも速いようです。。

<span>char buf[BUFLENGTH];
</span>  <span>int bufCount;</span>

ログイン後にコピー

デモを実行してください

<span>void setup() {
</span>    Serial<span>.begin(57600);</span>

ログイン後にコピー

スケッチをアップロードする場合は、ディスプレイをArduinoに接続し、node serialdmd.jsを介してノードサーバーコードを実行します（NPMを最初にインストールすることを忘れないでください）。 > node.jsを使用したドットマトリックスLEDディスプレイに画像を表示する

結論

これを拡張できる方法はたくさんあります。これはノードサーバーなので、APIに接続して、それを通過する画像を表示できます。時間の時間、自宅のインターネット接続されたデバイスの状態、天気、またはその他のものに応じて、別の画像を表示することができます！

このアイデアを本当にきちんとしたものに拡張した場合は、コメントでお知らせするか、Twitterで私と連絡してください（@thatpatrickguy）、見たい！node.jsを使用したドットマトリックスLEDディスプレイに画像を表示することに関するよくある質問（FAQ）

ドットマトリックスLEDディスプレイに画像を表示する際のnode.jsの役割は何ですか？

node.jsは、ドットマトリックスLEDディスプレイに画像を表示する上で重要な役割を果たします。これは、ChromeのV8 JavaScriptエンジンに基づいて構築されたJavaScriptランタイムであり、サーバーサイドおよびネットワークアプリケーションの開発に使用されます。 DOT Matrix LEDディスプレイのコンテキストでは、node.jsを使用してディスプレイを制御し、表示する画像を操作します。 LEDディスプレイにデータを送信できるサーバーの作成を可能にし、画像、テキスト、またはその他のデータタイプの表示を可能にします。

ドットマトリックスLEDディスプレイをコンピューターに接続するには、通常、ArduinoやRaspberry Piなどのマイクロコントローラーを使用します。マイクロコントローラーは、コンピューターとLEDディスプレイの間の仲介者として機能します。その後、node.jsを使用してコンピューターからマイクロコントローラーにデータを送信して、LEDディスプレイにデータを送信できます。？

はい、他のプログラミング言語を使用して、ドットマトリックスLEDディスプレイを制御できます。この記事では、使いやすさと汎用性によりnode.jsの使用に焦点を当てていますが、Python、C、Javaなどの他の言語も使用できます。プログラミング言語の選択は、あなたの快適さレベルとプロジェクトの特定の要件に大きく依存します。

ドットマトリックスLEDディスプレイを使用することの利点は何ですか？。それらは非常に用途が広く、テキスト、数字、画像を表示できます。また、エネルギー効率が高く、耐久性があり、長い寿命があります。さらに、広告ボードから情報ディスプレイまで、さまざまなアプリケーションに適した明るさと視認性を提供します。 DOT Matrix LEDディスプレイの画像には、画像をディスプレイが理解できる形式に変換することが含まれます。これには通常、画像をバイナリ形式に変換し、各ピクセルが0（オフ）または1（オン）で表されます。その後、node.jsを使用して、このバイナリデータをLEDディスプレイに送信できます。

大規模なアプリケーションにDOT Matrix LEDディスプレイを使用できますか？

はい、DOTマトリックスLEDディスプレイは大規模アプリケーションに適しています。それらを組み合わせて、より大きなディスプレイを作成し、デジタルビルボード、パブリック情報ディスプレイ、大規模な広告などのアプリケーションに最適です。 >ドットマトリックスLEDディスプレイの寿命は、使用されるLEDの品質と表示が使用される条件によって異なります。ただし、LEDディスプレイは一般的に長寿で知られており、数万時間の使用を続けることができます。 DOT Matrix LEDディスプレイには、ディスプレイとマイクロコントローラー間の接続を確認し、正しいデータがディスプレイに送信されていることを確認し、電源をチェックすることができます。 node.jsを使用している場合は、デバッグツールを使用してコードの問題を特定するのに役立つこともできます。ディスプレイは屋外で使用できます。ただし、ディスプレイが要素から適切に保護されていることを確認することが重要です。これには、耐候性のケーシングを使用したり、シェルターの場所にディスプレイを設置したりすることができます。