TFT繪圖條形圖開源分享

描述

概述

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

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

功能性

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

?

?

?

1 / 9 ?一根標(biāo)有標(biāo)簽

?

該項(xiàng)目具有三個(gè)功能，第一個(gè)顯示專業(yè)介紹，如果您愿意，可以排除。

?

專業(yè)介紹

?

第二個(gè)函數(shù)將繪制圖形，它還將標(biāo)記 x 和 y 軸。

?

第二個(gè)功能

?

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

?

繪圖塊

?

下圖說明了該項(xiàng)目的功能概述。

?

功能概述

?

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

?

代碼概述

?

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

• Process Data將自動(dòng)將傳感器值映射到圖形的大小。

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

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

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

?

形狀草圖

?

在這個(gè)草圖中，繪制了一個(gè)矩形，每個(gè)點(diǎn)都被標(biāo)記，用于繪制矩形的代碼行是這樣的，

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

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

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

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

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

好處

運(yùn)營該項(xiàng)目的用戶將受益于：

• 在 TFT LCD 上繪制條形圖

• 在幾秒鐘內(nèi)完成

建設(shè)項(xiàng)目

第1 步：所需設(shè)備

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

• 1、阿杜諾兆

• 1、Elegoo 2.8' TFT LCD

• 1、面包板

• 2、電位器

• 跳線

?

所有組件

?

第2步：連接電路

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

?

原理圖

?

第 3 步：確認(rèn)代碼

代碼主要分為三個(gè)部分：

• 設(shè)置圖表

• 讀取傳感器值

• 繪制圖形

下面對這些部分進(jìn)行說明。

• 設(shè)置圖表_

// 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);
 }

這部分代碼將使用給定的參數(shù)以及自動(dòng)計(jì)算的參數(shù)繪制圖形的每個(gè)特征，繪制圖形的標(biāo)題，然后標(biāo)記輪廓，然后標(biāo)記 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 的傳感器，然后將根據(jù)圖形的大小映射結(jié)果。

• 繪制圖形

// 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);
   }
 }

代碼的最后一部分將繪制圖表的塊/條，整個(gè)部分和其他部分一樣靈活，可以適應(yīng)用戶的喜好，在下一部分中學(xué)習(xí)設(shè)置它們。

個(gè)性化圖表

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

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啟用打印到串口監(jiān)視器，其默認(rèn)位置為 0（關(guān)閉），打開時(shí)（1/true），設(shè)備需要打開串口監(jiān)視器，然后將值打印到串口監(jiān)視器，非常適合故障排除。

• displayValues調(diào)節(jié)是否應(yīng)為每個(gè)條顯示值，打開時(shí)，每個(gè)傳感器的值顯示在每個(gè)塊的底部，默認(rèn)為 true。

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

• blockColour設(shè)置圖表的塊/條顯示的顏色。

• graphName設(shè)置圖表的名稱，它以藍(lán)色顯示在圖表的頂部。

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

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

• numberOfBlocks表示圖表中需要的塊數(shù)，確保該數(shù)等于字符串中的元素?cái)?shù)graphBlock[]。

所有其他值都是自動(dòng)計(jì)算的，這樣您就可以減少擔(dān)心代碼的時(shí)間，而有更多時(shí)間享受圖表。

增加價(jià)值

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

?

?

1 / 7 ?打開項(xiàng)目

?

走得更遠(yuǎn)_

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

圖書館

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

背景

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

?