Arduino Live Wifi Webスコアボード:9ステップ(写真付き)

Arduino Live Wifi Webスコアボード:9ステップ(写真付き)

目次:

Anonim

このチュートリアルでは、LEDを使ったデジタルスコアボード、大きなドットマトリックスディスプレイ、8桁の数字の合計の作成方法について説明します。このデバイスは、WiFiチップを使用してインターネットに接続し、合計やライブカウントなどのステータス値と、LEDのオン/オフなどのステータスを取得します。装置は一般的なUSB電源アダプターによって動かされます。内部ではArduino Megaと互換性のあるボードを使用しています。これは容易に入手でき、経済的で、ESP 8266チップとうまく通信できます。

スコアボードは必要に応じて内部へのアクセスを可能にするために蝶番とクリップで木箱から作られます。電力使用量は最小限で、毎分WiFi接続で1年24時間365日デバイスを実行すると、1ユーロ未満の費用がかかります。

用品:

ステップ1:必要なもの

1×木製の箱(€4.50地元の店から)

1 x Arduinoメガクローン - 私は個人的にElegooボードを使っています(Amazonから€11.50)

1 xシリーズの4ドットマトリックスディスプレイ(インターネットから15ユーロ - 今は5ユーロで見たことがあるが)

1 x Sugruパケット(1.65€(Amazonの€13の8のうち1))

2 x 7セグメント8桁LEDディスプレイ(2ユーロ4ユーロ - または12ユーロ翌日配達)

1 x 220オームの抵抗器のコレクション(€0.25 - €5を要するパックの一部)。

3 x RGB LED(€0.18 - 50のパックの一部€3を支払う)

1 x ESP8266チップ(€5)

1 x 5 v <> 3.5 vレベルスイッチャー(€1.50)

1×マットブラックスプレーペンキ(€2は地元の店からできます)。

1×スモールブレッドボード

'DuPont'ケーブルとピン - (€3 - 通常はスターターパックの一部です)

ドリル、ボックスカッター、USBケーブルへのアクセス

したがって、既存の部品を再利用することは可能ですが、Aliexpressを介して注文するとさらに30ユーロ近くになりますが、コストはおよそ50ユーロです。

プロジェクトが完了するまでには4〜8時間かかります。

ステップ2:RGB LEDの準備

RGB LED(赤 - 緑 - 青の発光ダイオード)の準備はかなりの時間がかかりますが、完成すれば満足のいくものです。 RGB LEDを使用して、同じLEDを使用してさまざまな色を表示できるようにしています。実際には、これらのRGB LEDは内部に3つのLEDを含み、それぞれの光を制御することで色を混ぜることができます。

各LEDには回路内に抵抗が必要です。私のLEDには220オームの抵抗を使用していますが、問題はありませんでした。他のチュートリアルでは、異なる値を提案したり、必要なものを使用しても構いませんが、それらを含めることを忘れないでください。そうしないと、LEDが消えてしまいます。

このようなチュートリアルではこの問題を完全に網羅しているので、LEDについてはそれほど深く深く掘り下げません。

あなたがする必要があるのはあなたのRGB LEDの3本の短い脚のそれぞれに抵抗をはんだ付けすることです。私はこのような '手を助ける'デバイスを使うのが好きです。最初にワイヤを一緒に包み、それから接続をハンダ付けし、30秒ほど待つと、ワイヤが互いに強く接続されているのがわかります。結局、あなたは絶縁テープまたは熱収縮チューブで接続を覆いたくなるでしょう。

2番目の写真では、3つの抵抗器をはんだ付けし、さらにArduinoに接続するワイヤを3つ接続した後の3つのRGB LEDを見ることができます。さらに、私は共通のピンにワイヤーをはんだ付けしました。そして、それはグランドレールに戻ります。

この時点であなたはあなたのArduinoにLEDを接続してそれらが働くことをテストすることを望むでしょう。私はあなたのLEDがあなたが望むように機能していることをチェックするためにどんなRGB LEDチュートリアルにも従うことと色を通して循環することを勧めます。

私の場合は、緑色のLEDが赤色のLEDよりはるかに明るいことに気付きました。これはかなり一般的なようです。これが問題であるならば、あなたは緑色のLEDのためにより大きな値の抵抗器を考慮するかもしれません。

制御できるRGB LEDが3つあり、赤、緑、青が正しく表示されたら、次の手順に進みます。

ステップ3:LEDドットマトリックスおよび7セグメントディスプレイの準備

緑色/赤色のLEDを表示することは、true / false、on / off、yes / noなどのブール情報を表示するのに役立ちますが、スコアボードが非常に興味深いので、いくつかの数字を表示したいと思います。情報を表示するために2つの異なるコンポーネントを使用します。それらは実際に順番に配線することができる程度に関連しており、Arduinoボード上でごくわずかな数のピンを使用します。

写真に示されている8桁表示はこれに似ています - これらはArduinoスターターパックでは非常に一般的で、色はほとんど変わりますが、5本のピ​​ンで8桁すべてを設定できるMAX7219コンポーネントを使用しています。 MAX7219部品がなければ、各7セグメントディジットを設定するために膨大な数のピンと抵抗が必要になります。そしてそれは永遠にかかり、すべてのArduinoピンではないにしてもほとんどを使います。 7セグメント8桁ディスプレイのこの設計のもう1つの利点は、それらをデイジーチェーン接続できるということです。つまり、最大5つのピンで制御しながら、最大8つまで順番に並べることができます。

ドットマトリックスディスプレイは、実際には低解像度のディスプレイであるLEDのグリッドであり、どのドットを点灯させるかを選択するため、単純な形状、文字、数字を描くことができます。ここで私は一緒に接続されたこれらのドットマトリックスディスプレイのうちの4つである特別なコンポーネントを使用しています。これは私たちに情報を表示することができる32 x 8ディスプレイを与えます。これは私たちの8つのチェーンのうち4つのアイテムとして数えられるので、あなたはそれらのうちの2つを使うことができ、あるいは私の場合ではこれらの1つをいくつかの7セグメントディスプレイと混ぜることができます。このダッシュボードのために私は2つを使用しています、私のチェーン部品の総数は6にしています。それらはすべて私のArduinoボード上の5ピンから駆動されています。かなり効率的だと思います!

これらのコンポーネントを駆動し、有用な情報を表示するために必要なコードを後のステップで詳しく調べます。今のところ、コンポーネントがあなたのArduinoボードに配線されていることを確認し、そしておそらくあなたのコンポーネントが動作していることを確認するために(その多くがある)簡単なチュートリアルに従ってください。

ステップ4:私達のエンクロージャの準備

私たちのデバイスが収納されている部分を見るには、サイエンスフェアのプロジェクトではなく、まるで家電製品のように見えて見せることができます。テレビ、携帯電話、ブルーレイプレーヤーなどの最近のほとんどの機器は、その軽量性と一貫したフォームにより、プラスチック製の筐体を使用しています。私たちはより重くて脆い木材を使うつもりですが、私たちの必要性のために完全にうまくいくでしょう。

私はインターネットと無限のDIY店で完璧なプロジェクトボックスを探しました。結局、私はここスペインの「中国のバザーショップ」で完璧なプロジェクトボックスを見つけました。これらは普遍的に中国の人々によって運営されていて(それ故にその名前)、そしてほとんどすべてが中国から輸入された製品の巨大な範囲を仕入れています。彼らは便利なアイテムのための金鉱です。結局私はスコアボードのプロジェクトにぴったりのものであるような箱の膨大な範囲をストックしているものを見つけました。価格はまた€4.50で入って来、また優秀だった。

箱は合板から作られています、それはそれが構造的に強いですが、箱のカッターを使って切り込むのも簡単であることを意味します。私はジグソーパズルとのこぎりを使ってみました、しかし結局これらの箱の窓を切ることが最も簡単な箱カッターを使ってされることを発見しました。私の箱カッターセットは同じ店からたった2ユーロです。

私のプロジェクトでは、スコアボードの下部に均等に配置された3つのRGB LEDを使用することにしました。私は単純に定規を使って等間隔の点を測定し、それから電動ドリルを使って穴を開けました。私はLED用の正しいドリルピースを得るために少し実験をしなければなりませんでした、あなたは最初にそれを作成しそれからそれがぴったりと収まることを見るためにそれからLEDを押す必要があるかもしれません。 2つのクランプを使ってボックスを押さえながら、ドリルを素早く押し込みます。あなたがクランプへのアクセスを持っていないならば、それから友人はそうするかもしれません!私はこれらのような2つのクランプに投資することを強くお勧めしますが、彼らは長年かけて簡単に自分でお金を払うでしょう。

私のドリルは典型的なDIYの店から€29.99で購入されました、それはそれほど特別なことではありません、あなたは本当にこれらのプロジェクトのための基本的な電動ドリル以外に何も必要としません。私はそれが私に20年続くことを想像します、それで、また、長期的には、それは非常に安いです。

ドックスマトリックスディスプレイと7セグメント8桁のコンポーネントはあなたの箱に窓が必要になります。ここでも基本的な定規と鉛筆を使ってサイズを測り、窓が箱のどこに行くかを描きました。この段階で慎重に考えてください、あなたはあなたのディスプレイが十分に間隔を空けられていることを確認したいでしょう、あなたの箱の中に2つのウィンドウを一緒に接近させることは木材を壊すかもしれません。それ以上でなければ、私はウィンドウ間の少なくとも15mmをお勧めします。

あなたのArduinoで利用可能なピンの数に応じて、あなたはLEDのためのいくつかのより多くの窓または実際にはいくつかのより多くの穴を追加することができます。あなたがArduino Uno互換ボードを使用しているならばArduinoメガ互換ボードには利用可能なピンがたくさんあります、そしてあなたははるかに制限されるでしょう。

この時点で、どのボードを使用しているかを確認する必要があります。ボックス内の位置を確認する必要があるからです。これの理由はあなたがUSBケーブルとポートのために穴を切る必要があるということです。 USBポートを電源に使用することをお勧めします。そうすれば、新しいファームウェアをデバイスに簡単にアップロードするのに必要なときにコンピュータに接続できるようになります。バレル電源ソケットを使用することには最小限の利点しかありません。それでも、新しいファームウェアをアップロードするためにUSBポートまたは内部シリアルピンにアクセスするための何らかの方法が必要になります。したがって、UnoまたはMega互換ボードを使用する場合は、USBポート用の穴を開けてそのままにしておくことを強くお勧めします。

次の段階はあなたの箱を塗ることです。私はたった2ユーロの缶で買えた安いスプレー塗料を使いました。これはあなたにいくつかのプロジェクトを持続させるので、そしてプロジェクトあたりのコストはずっと低いです。箱を大きな段ボール箱の中に入れて外に出し、慎重に箱にスプレーし、30分ほど待ってから、乾いたように思えば裏返します。箱の残りの部分にスプレーします。 2層目の塗装をする前に、箱が乾くのを数時間待つことをお勧めします。箱が乾くのを待つのは退屈なので、おそらくプロジェクトが乾いている間にソフトウェア側で作業します。

結局あなたはあなたのコンポーネントのための正しいサイズのウィンドウとあなたのArduino互換ボードのUSBポートのための側面の小さい出口を持った非常にスマートに見える箱を持つでしょう。

ステップ5:コンポーネントの取り付け

ネジと取り付けソケット、テープと接着剤を使った多くの実験の後、私はSugruを発見しました。ドリルピースやスタンドオフ、釘などで面倒な時間を節約し、Sugruに投資することを強くお勧めします。まだそれを発見していない人のために、それはあなたがあなたの手で成形することができるのは基本的に 'ブルタック'スタイルのパテです、違いはそれが数分後に難しくなり、そして多数の表面にこだわるということです。木およびArduinoの板および部品。あなたはあなたの商品の裏側に小さなエンドウ豆の大きさの量を置き、その接続がしっかりしていて驚くほどタフになるだろう24時間で、それを木の上に強く押します。

Sugruはそれほど遠くはありませんが、安くはありませんが、ネジやスタンドオフの鍋に節約されたお金を考慮すると、実際にはかなり良い値です。

あなたのArduino互換ボードとSugruのパケットを持ってきて、あなたのボードの裏側にパテを少し広げてそれの塊を置き、そしてあなたのUSBポートが側面の穴と正しく並ぶようにボードをしっかりと押してくださいあなたの箱の

今、私はあなたがそれらが動作すると確信するまであなたのコンポーネントを定位置に固定することを勧めません。このチュートリアルはいくつかのセクションに分かれているので、スコアボードが正しく機能していることを確認した後にこのパートに戻ったと想定します。

8桁ディスプレイは、接続ワイヤのプラスチック部分にいくつかのSugruを使用して取り付けることができ、場合によってはコンポーネントとボックスウィンドウの間のすき間からいくつかのSugruを使用することもできます。それらが正しい方法でマウントされていることを確認してください。デバイスの電源が入っている間にそれらを処理しても安全です。コンポーネントを正しく配置するためにこれを行うことをお勧めします。あなたはそれが正しい方法であることを確実にするためにそれをマウントする間あなたのディスプレイを読むことができます。

このチュートリアルの後半で、ブレッドボードと他の2つのチップを使用している理由がわかります。私はブレッドボードを木材に非常によく密着する粘着性のあるバッキングと、WiFiチップを動かしすぎないように固定するためのテープを使ってマウントしました。

あなたはあなたのブレッドボードにワイヤーを固定するために熱い接着剤を使うことを望むかもしれません、私はこれをしませんでした、しかしそれがかなりうまくいくと聞きました。あなたのワイヤーがあなたのブレッドボードにとてもぴったりと収まらない場合、これは必要かもしれません。

ステップ6:ESP8266チップの使用

私達のスコアボードは私達のLEDの部品でデータを表示するためにインターネットに接続する必要があります。 Arduino MegaまたはUno互換ボードにはオンボードWiFiが含まれていないため、プロジェクトをインターネットに接続するために追加のコンポーネントを使用する必要があります。

ESP8266チップは驚くべきもので、米国では約6ドル、ヨーロッパでは10ユーロで2個と非常に良い値です。これは実際には完全なSOC(システムオンチップ)であるため、多くの点で事実上「もう1つのArduino」スタイルのコンポーネントであり、デバイスにコードをアップロードしてそれを単独で使用できます。ただしこのプロジェクトでは、ESP8266チップから中央のボードに情報を渡しながら、Arduino互換ボードと一緒に使用したいと考えています。

このタスクは、ESP8266がArduinoメガボードのように5Vではなく3.3Vで動作するという事実が原因である可能性があるよりも複雑です。これは、ESP8266から送信された信号を単にArduinoのデジタルピンに接続することができず、Arduinoの5VピンからESP8266に電力を供給することができないことを意味します。

幸いなことに、私たちのArduinoにはESP8266の電源供給に適した3.3Vのピンがあります。しかし、データピンの問題はまだ残っています。この問題を解決するには、レベルコンバータを使う必要があります。この小型チップは、電源、アース、そしていくつかの通信線を取り入れて、3.3Vまで落とされた同じ信号を出力します。これは、Arduinoボードからの信号がESP8266ボードが使用できる電圧に変換され、またその逆も同様です。

この設定には複数のワイヤと電源ピンへの複数の接続が含まれるので、私はブレッドボードを使用しました。これにより、コンバータチップをブレッドボードの分割部分にまたがってマウントし、上半分を「5v」ゾーン、下半分を「3.3v」ゾーンにすることができます。それぞれの側の電源レールは5Vか3.3Vを運びます、そして、グランドレール自体はお互いにそしてまた我々のArduinoに接続されています。

ESP8266チップとインターフェースをとるために、私はWu Pengfeiによって書かれたライブラリを使用します - それは2つのファイル、ESP8266.cppとESP8266.hです。チップへの接続とリクエストの作成が比較的簡単になります。

私のコードの説明の大部分はコード自体と並行して行われるので、このInstructableの間は詳しく説明しません。ただし、実際には、チップとのインタフェースとして1つの文字列で完全なHTTPリクエストを作成し、TCPを使用してWebサーバに接続してからリクエストを送信します。次に、応答を待ちます。これを文字列に入れてから、文字列からデータを引き抜きます。形式は既に理解されています。

私のダッシュボードは私が作成したオンラインサービスを扱っています、あなたのダッシュボードは別のソースからのデータを持ち込むでしょう。これはあなたのホームネットワーク上で実行されているローカルWebサーバー、またはインターネット上のWebサイトである可能性があります、プロセスは同じです。 490行目以降を見れば、私がどのようにしているのかがわかります。私の方法は私がインターネットで見つけた例に基づいています。

ステップ7:デバイスの配線

隣接する図は、スコアボードを配線する方法を示しています。注意してください:私は完全に再現可能なダイアログを作成しようとしませんでした、これはあなたに私がしていることの大まかな概観を与えることです。

あなたはESP8266チップへの配線がブレッドボードに接続されているレベルコンバーターを経由することを見るでしょう。

RGB LEDなので、各LEDには複数のワイヤが必要です。つまり、R(赤)、G(緑)、B(青)のワイヤが必要です。さらに、グランドレールに戻るワイヤがあります。

ありがたいことに、我々はドットマトリックスディスプレイと7セグメント数の構成要素を直列に並べることができます。つまり、必要なのは1セットのワイヤだけです。

さらに、5Vと3.3Vの電力線がブレッドボードとコンバータの両方に接続されていることがわかります。

私はブレッドボードからプロトボードのようなもっと恒久的な解決策への移行を検討していましたが、結局、この解決策はこのプロジェクトではうまくいきます。あなたが良質のブレッドボードを持っていて、そして(もっと重要なことに)良質の 'Dupont'ジャンパー線を持っているなら、あなたは長い道のりを進むことができます。

ブレッドボードやワイヤーを熱い接着剤で覆うのが好きな人もいます。乾燥したホットグルーは良い導体ではないので、回路は影響を受けないはずです。私はまだこれを試していませんが、それは確かに考慮すべきことです、さらにもっとSugruはジャンパー線を所定の位置に保持するために使用することができます。

ステップ8:ソフトウェア

スコアボードの機能にとって重要なのは、もちろんマイクロプロセッサチップ上で動作するソフトウェアです。これはESP8266チップを制御し、インターネットから更新されたデータを要求し、そしてそのデータを解釈しそしてそれを私達のLEDディスプレイに視覚的に示す必要があります。

私は私のスコアボードのための完全なソースコードを含めました、あなたはあなた自身のWiFi資格情報を(明らかに!)入力し、そしてそれを別のウェブページに向ける必要があるでしょう。これは非常に柔軟なので、私は物事のWebサーバー側についてあまり詳しく説明しません、そしてあなたはあなたの問題のために適切な解決策を作成する必要があるでしょう。

私のページは非常に単純な文字列を次の形式で返します。| $ | 1 | 1 | 0 | 51 | 36 | 2 | 2 | 1 |

私は最初に '| $ |'を探します。パターン、私はそれを見れば私は私の文字列の正しい始まりを持っていると仮定することができます。その後、その文字列を調べて、見つけたものを新しい文字列に変換し、それを整数に変換します。 '|'が見つかったとき性格、次の人物の上にいることを私は知っています。あなたは私がコードの中でこれをどのように行うかを正確に見ることができます。

次に、ダッシュボードに保持されているローカル変数を更新する必要があります。あなたが見せたいそれぞれの情報について変数が必要になるでしょう。私の場合、これは「サーバー1大丈夫」、「サーバー2大丈夫」、「cronタスク完了」、「現在のユーザー」、「現在のシステム」、「毎日のユーザー」、「毎日のシステム」です。

60秒ごとにページを再取得し、Webサーバーから返された文字列を一連の数字に変換した後、ダッシュボードを新しい数字で更新しました。

サーバーの状態、およびcronの状態については、これは単にLEDの1つの色を設定する場合です。私にとって緑は成功を意味し、赤は失敗を意味し、青は接続に問題があったことを意味します。

2つの7セグメント8桁ディスプレイは両方とも4桁セグメントに分割されています。次に、4つのデータをそれらに出力します。整数を変換する必要があるので、これは見た目よりも少し複雑です。ディスプレイの100桁、10桁、桁の実際の桁に変換します。各桁を別々に設定するので、これは必要です。あなたはコードで私がこの問題にどう取り組んだかを見ることができます。

中央のドットマトリックスディスプレイには、2秒ごとに変わる情報が表示されます。私はIMAGES 配列に格納した 'image'を表示するために4つのディスプレイのうちの1つを設定するdisplayMatrixと呼ばれる関数を持っています。この配列は、自分ではなくWebページによって生成されたものなので、興味深いものです。

LED Matrix Editorを使用することを強くお勧めします。このページでは、ドットマトリックスコンポーネントに正しく表示される8×8フォーマットの「イメージ」を簡単に作成できます。このページの使い方は非常に簡単です。リンクをクリックすると、ダッシュボードの画像がすでにロードされた状態でエディタが表示されます。ご覧のとおり、ドットをクリックしてオンまたはオフを切り替えるだけです。画像を簡単に追加したり、ドラッグアンドドロップで順序を移動したりできます。変更を加えたら、それらに戻ることができるようにページをブックマークします。

エディタの上隅に、画像の定義がコードで表示されます。これをコピーしてあなたのArduinoの「スケッチ」に貼り付けてください。 displayMatrix関数のコードを調べて、コンポーネント内の関連するLEDを設定するための値のループを確認します。

これは私のダッシュボードのコードをほとんど要約しています。さらなる説明はソースコード自体にあります。あなたが少しでも質問をするならば、コメントで彼らに尋ねてください。

ステップ9:さらなるアイデアとプロジェクトのまとめ

このチュートリアルを読んで楽しんでいただき、Arduino WiFiスコアボードを正しく作成できることを願います。私はこの特定のプロジェクトの素晴らしいところは、それが非常に多くの方法でカスタマイズできるということです。私はWebサービスからライブユーザーデータを報告する必要がありました、あなたのニーズは非常に異なる可能性があります。

私が持っていたスコアボードのためのいくつかのアイデアが含まれます:

現在の得点を表示するスポーツのスコアボード。学校のスポーツ大会に役立つ可能性があります。

同様に伝統的な通貨換算レート、そしておそらく株式市場の値を含む、ライブのBitcoin価格モニター。

さまざまな都市の気温を表示するライブの天気スコアボード。おそらく1秒間に1つの都市を表示しています。

ライブYouTubeの購読者数

本物のスポーツの得点は、Livescores.comやESPNなどのスポーツの生中継サイトから引き出されたものです。

可能性は無限大。あなたのプロジェクトで頑張ってください。以下にコメントを残してください。