描述

概述

每個人都從連接到他們的微控制器的傳感器讀取數據并使用數字顯示它，但是您是否曾經想以一種新的方式顯示它們？圖形是解決方案。圖的想法很好，但是有一個問題；它涉及用大量計算破壞你的頭腦。在 TFT LCD 上創建圖形特別困難。

該項目將使您熟悉圖形的概念，并且您將能夠創建自己的條形圖并對其進行個性化。所有的硬計算都會為您完成，您所要做的就是編輯 5 個變量，然后您就有了圖表。

功能性

該項目旨在使繪圖變得有趣和通用，讓您能夠在幾秒鐘內繪制數據，圖表完全靈活，可以個性化以使其成為您的，用戶可以編輯圖表的顏色、標題、顯示的數據和別的。該項目允許您在同一個圖表上繪制 1 到 4 個值，這是圖表的多功能性。

?

?

?

1 / 9 ?一根標有標簽

?

該項目具有三個功能，第一個顯示專業介紹，如果您愿意，可以排除。

?

專業介紹

?

第二個函數將繪制圖形，它還將標記 x 和 y 軸。

?

第二個功能

?

最后一個函數將讀取所選傳感器的值，映射這些值，然后在圖表上繪制塊/條。

?

繪圖塊

?

下圖說明了該項目的功能概述。

?

功能概述

?

該設備不斷讀取傳感器并在圖表上實時顯示數據，因此用戶可以輕松地實時監控他/她的房子和他/她的辦公室的溫度。這是代碼概述的圖像。

?

代碼概述

?

• Read Sensors將讀取連接到 Arduino Mega 的傳感器的值。

• Process Data將自動將傳感器值映射到圖形的大小。

• Graph Data將在圖表上顯示映射值。

要想繼續這個項目，你所需要知道的只是對 TFT LCD 上的東西如何定位有一個廣泛的了解，這將在下面解釋。

我將整個 LCD 稱為畫布，這是繪制所有內容的地方，所有 TFT LCD 庫的工作方式都非常相似，因此此代碼中的函數也應該與其他庫一起使用。下面是在 TFT LCD 上繪制的四邊形（矩形）的草圖。

?

形狀草圖

?

在這個草圖中，繪制了一個矩形，每個點都被標記，用于繪制矩形的代碼行是這樣的，

tft.fillRect(originX, originY,  sizeX, sizeY, Colour);

• originX在上圖中用'z'表示，這是從屏幕右側到形狀的距離。

• originY在草圖上用“x”表示，這是從屏幕頂部到形狀的距離。

• sizeX是形狀在 x 軸上的大小，這是形狀的長度。

• sizeY是形狀在 y 軸上的大小，這是形狀的高度。

好處

運營該項目的用戶將受益于：

• 在 TFT LCD 上繪制條形圖

• 在幾秒鐘內完成

建設項目

第1 步：所需設備

我使用兩個電位器設計了這個例子，盡管一個可以使用任何傳感器來繪制圖形。這是材料清單。

• 1、阿杜諾兆

• 1、Elegoo 2.8' TFT LCD

• 1、面包板

• 2、電位器

• 跳線

?

所有組件

?

第2步：連接電路

下面的示意圖顯示了電路的接線方式，只需卡在 TFT LCD 上并連接電位器。

?

原理圖

?

第 3 步：確認代碼

代碼主要分為三個部分：

• 設置圖表

• 讀取傳感器值

• 繪制圖形

下面對這些部分進行說明。

• 設置圖表_

// draw title
 tft.setCursor(10, 10);
 tft.setTextColor(BLUE);
 tft.setTextSize(4);
 tft.println(graphName);
 // draw outline
 tft.drawLine(originX, originY, (originX + sizeX), originY, graphColor);
 tft.drawLine(originX, originY, originX, (originY - sizeY), graphColor);
 // draw lables
 for(int i = 0; i < numberOfMarks; i++)
 {
   tft.drawLine(mark[i], originY, mark[i], minorSizeY, graphColor);
 }
 // draw lable names
 for(int i = 0; i < numberOfMarks; i += 2)
 {
   tft.setCursor((mark[i] + 6), (originY + 10));
   tft.setTextColor(graphColor);
   tft.setTextSize(2);
   tft.println(graphBlock[i / 2]);
 }
 // draw numbers
 for(int i = 0; i < 6; i++)
 {
   tft.drawLine(originX, (originY - number[i]), minorSizeX, (originY - number[i]), graphColor);
 }

這部分代碼將使用給定的參數以及自動計算的參數繪制圖形的每個特征，繪制圖形的標題，然后標記輪廓，然后標記 x 和 y 軸。

• 讀取傳感器值

// get the values of the sensors
 valueBlock[0] = analogRead(A14);
 valueBlock[1] = analogRead(A15);
 if(proDebug)
 {
   Serial.println(valueBlock[0]);
   Serial.println(valueBlock[1]);
   Serial.println("");
 }
 // map the sensor values to the graph size
 for(int i = 0; i < numberOfBlocks; i++)
 {
   posBlock[i] = map(valueBlock[i], 0, graphRange, originY, (originY - sizeY));
 }

此代碼將讀取連接到引腳 A14 和 A15 的傳感器，然后將根據圖形的大小映射結果。

• 繪制圖形

// draw the blocks - draw only if value differs
 for(int i = 0; i < numberOfBlocks; i++)
 {
   if(posBlock[i] > (prevPosBlock[i] + 2) || posBlock[i] < (prevPosBlock[i] - 2))
   {
     prevPosBlock[i] = posBlock[i];
     tft.fillRect((mark[i * 2] + 1), (originY - sizeY), (boxSize - 1), sizeY, WHITE);
     delay(10);
     tft.fillRect((mark[i * 2] + 1), posBlock[i], (boxSize - 1), (originY - posBlock[i]), blockColor);
   }
 }

代碼的最后一部分將繪制圖表的塊/條，整個部分和其他部分一樣靈活，可以適應用戶的喜好，在下一部分中學習設置它們。

個性化圖表

有一個顯示兩個電位器值的圖表很好，但我相信每個人都想在圖表上顯示他們自己的值，從溫度到太陽輻射，使用 1 塊或 4 塊，這就像編輯一樣簡單一個變量。閑置變量是您必須編輯的所有內容。

bool proDebug = 0;       
bool displayValues = true;
uint16_t graphColor = BLUE;
uint16_t blockColor = GREEN;
String graphName = "Bar Chart";
String graphBlock[] = {"Pot1", "Pot2"};
int graphRange = 1024;
int numberOfBlocks = 2;

• proDebug啟用打印到串口監視器，其默認位置為 0（關閉），打開時（1/true），設備需要打開串口監視器，然后將值打印到串口監視器，非常適合故障排除。

• displayValues調節是否應為每個條顯示值，打開時，每個傳感器的值顯示在每個塊的底部，默認為 true。

• graphColor設置圖表的顏色，x 和 y 軸上的線條和數字將以所選顏色顯示。

• blockColour設置圖表的塊/條顯示的顏色。

• graphName設置圖表的名稱，它以藍色顯示在圖表的頂部。

• graphBlocks保存圖表上每個塊/條的名稱。

• graphRange是傳感器可以輸出的最高數字，此數字對于繪圖至關重要，必須正確設置，如果要顯示原始模擬引腳的值，如電位器，請將其設置為 1024，模擬引腳的最大值. 如果您使用的是輸出手勢值的傳感器，例如溫度傳感器，則可以將該值設置為 50 之類的高數字。（請注意，該圖表尚未使用負數進行測試）

• numberOfBlocks表示圖表中需要的塊數，確保該數等于字符串中的元素數graphBlock[]。

所有其他值都是自動計算的，這樣您就可以減少擔心代碼的時間，而有更多時間享受圖表。

增加價值

請按照以下指南深入了解如何添加或減去塊并編輯塊顯示的值。

?

?

1 / 7 ?打開項目

?

走得更遠_

您可以進一步試驗該項目，嘗試編輯 originX、originY、sizeX 和 sizeY 常量，以使您的圖形在屏幕上具有不同的大小和位置。主草圖附有一個頭文件，它包含一些顏色的顏色代碼，嘗試更改圖表和條形的顏色。就是這樣，您的個性化圖表已準備就緒。

圖書館

• Elegoo 庫 - 版權所有 (c) 2012 Adafruit Industries 在BSD 許可下。

背景

我在網上瀏覽了一些靈感，發現沒有在 TFT LCD 上繪圖的項目，反正我正在使用的那個也沒有。所以我開始從頭開始構建一個，然后決定我應該給它一個界面，允許整個圖表通過只編輯少量變量來適應任意數量的傳感器，所以我忙于數學并得到了這個項目完成。這樣一來，如果想要繪制其他數據圖表，就不必一遍又一遍地重寫代碼（節省 iCloud 空間）。

?