TFTグラフ：ライブ履歴グラフ

コードのこの部分は、グラフのアウトラインを描画し、x軸とy軸の線を描画し、マークも描画し、y軸に値のラベルを付けます。

• 読む 温度

  chk =DHT.read11（22）; temp =（DHT.temperature）;  

この短いコード行は、DHT 11センサーから温度を読み取り、それを変数に格納します。

• 描画 グラフ

  if（blockPos <8）{//時刻を出力tft.setCursor（（mark [valuePos] -5）、（originY + 16））; tft.setTextColor（graphColor、WHITE）; tft.setTextSize（1）; tft.println（timeBlock [valuePos]）; //値をマップしますlocationBlock [valuePos] =map（temp、0、graphRange、originY、（originY --sizeY））; //ポイントを描画しますtft.fillRect（（mark [valuePos] -1）、（locationBlock [valuePos] -1）、markSize、markSize、pointColor）; //前のポイントに接続してみますif（valuePos！=0）{tft.drawLine（mark [valuePos]、locationBlock [valuePos]、mark [（valuePos-1）]、locationBlock [（valuePos-1）]、lineColor）; } blockPos ++; } else {//グラフのキャンバスをクリアしますtft.fillRect（（ori​​ginX + 2）、（originY --sizeY）、sizeX、sizeY、WHITE）; //値をマップします-現在のポイントlocationBlock [valuePos] =map（temp、0、graphRange、originY、（originY-sizeY））; //ポイントを描画します-現在のポイントtft.fillRect（（mark [7]）、（locationBlock [valuePos] -1）、markSize、markSize、pointColor）; //すべてのポイントを描画しますfor（int i =0; i <8; i ++）{tft.fillRect（（mark [（blockPos-（i + 1））]-1）、（locationBlock [（valuePos --i）]- 1）、markSize、markSize、pointColor）; } //すべての線を描画するfor（int i =0; i <7; i ++）{tft.drawLine（mark [blockPos-（i + 1）]、locationBlock [valuePos --i]、mark [blockPos-（i + 2）]、locationBlock [valuePos-（i + 1）]、lineColor）; } //時間ラベルを変更するfor（int i =0; i <=8; i ++）{tft.setCursor（（mark [（blockPos --i）]-5）、（originY + 16））; tft.setTextColor（graphColor、WHITE）; tft.setTextSize（1）; tft.println（timeBlock [valuePos --i]）; }} valuePos ++;  

コードのこの長い部分は、グラフのポイントをそれらの値で描画し、線で結合します。コードは、グラフのキャンバスがいっぱいになっているかどうかをチェックし、いっぱいになっている場合は、グラフの最初の値の排出を開始します新しい値を挿入するためのスペースを確保するために他の値を上に移動します。まだスペースが残っている場合、デバイスは間隔を置いて値を追加し続けます。

グラフのパーソナライズ

このグラフの面白いところは、100％編集可能であるため、ユーザーはグラフのサイズ、場所、色を編集でき、柔軟性のおかげでグラフに任意のデータを表示することもできます。気にする必要のある変数はすべてあります。

  bool proDebug =0; uint16_tgraphColor =BLUE; uint16_t pointColor =BLACK; uint16_t lineColor =GREEN;文字列graphName ="時間グラフ"; intgraphRange =50; int markSize =3;  

• proDebug はプロジェクトに組み込まれているデバッグユーティリティです。デフォルトでは0に設定されています。1/ trueに設定すると、現在の温度がシリアルモニターに出力されます。これはデバッグユーティリティです。有効にすると、シリアルモニターはコードを実行するには、開いている必要があります。

• graphColor グラフの色を設定し、x線とy線、およびそれらのラベルをこの色に設定します。

• pointColour グラフ上の値を示すポイントの色を表します。

• lineColour グラフ上の点を結ぶ線の色を選択した色に設定します。

• graphRange はグラフのバックボーンです。正しく設定されていることが非常に重要であることに注意してください。これはグラフ化できる最大値を表します。温度センサーを使用しています。値が50ºCを超えるとは思わないので、値を50に設定すると、Rawアナログ入力をグラフ化する場合は、graphRangeを1024に設定できます。これは、アナログピンが表示できる最大値です。

• markSize グラフ上のセンサーの値を示すポイントのサイズを表し、値は正方形の長さを表します。

そして、それだけです。心配する必要があるのはそれだけです。残りの変数は、Arduinoによって自動的に計算されます。

変更 価値

部屋の温度をグラフ化するのは良いことですが、グラフにセンサーデータを表示できればさらに良いです。また、数行のコードを編集するだけで、土壌水分から光までのデータをグラフ化できます。強度。これを行うためのガイドです。

行く さらに

プロジェクトをさらに実験して、originX、originY、sizeX、sizeYの定数を編集して、グラフに画面上の異なるサイズと位置を与えることができます。メインスケッチに添付されたヘッダーファイルがあり、いくつかの色のカラーコードが含まれています。チャートとバーの色を変更してみてください。これで、パーソナライズされたグラフの準備が整いました。

ライブラリ

• Elegoo Libraries-Copyright（c）2012 Adafruit Industries under the BSDLicense。

• DHT-著者RobTillaartこのライブラリはパブリックドメインです

背景

最近、棒グラフで1、2、3、または4の値をグラフ化するプロジェクトを公開しました。グラフ用の別のテンプレートを公開することにしました。混乱を招く恐れのある線がいたるところにない棒グラフのテンプレートはないので、もう一度計算を行い、誰もが履歴グラフにデータをグラフ化できる簡単なプロジェクトを公開することにしました。