這篇文章來源于DevicePlus.com英語網站的翻譯稿。

點擊此處閱讀本文的第1部分 >

在第1部分中，我們能夠獲取KX022-1020加速度計的數值并將其顯示到TFT液晶LCD面板上。在第2部分中，我們將展示如何在讀取程序內容的同時控制TFT顯示屏！

今天的電子食譜

預計完成時間：60分鐘

所需部件：

Arduino 主體 (Arduino UNO R3)

羅姆傳感器評估套件https://www.rohm.com/web/global/sensor-shield-support

TFT 液晶面板 (sainsmart 1.8) https://www.sainsmart.com/sainsmart-1-8-spi-lcd-module-with-microsd-led-backlight-for-arduino-mega-atmel-atmega.html

※ 您可以從以下站點購買羅姆傳感器評估套件！

Chip One Stop

Mouser Electronics

通過Arduino在TFT液晶顯示屏上顯示數據

和之前一樣，我們使用SainSmart ST7735RTFT顯示屏。這是一款緊湊的LCD顯示屏，可兼容Arduino和Raspberry Pi。該顯示屏具有內置microSD卡插槽，因此除了讀取和寫入數據外，還可以存儲和加載圖像。在本教程中，我們將僅嘗試在該TFT顯示屏上顯示數值。

我們開始吧！首先，將TFT顯示屏與Arduino連接起來。

圖1 SainSmart ST7735R TFT顯示屏

圖2 TFT顯示屏的背面

TFT 引腳定義：

VCC – 供電電壓

GND – 地

SCL – 串行時鐘線

SDA – 串行數據線

RS / DC – 命令/數據選擇

RES – 控制器復位

CS – TF卡的片選信號

將Arduino連至TFT顯示屏之后，我們來運行示例程序。

將TFT顯示屏庫文件應用于Arduino

正如文章第1部分中提到的，我們需要對庫文件（ST7735R）進行一些小的修改，以便讓TFT顯示屏兼容Arduino系統。

用于Arduino的SainSmart 1.8 ST7735R TFT液晶顯示屏，搭載MicroSD卡槽和LED背光

Raspberry Pi 庫 (ST7735R V0.2)

上述URL的頁面底部有一個下載鏈接。單擊頁面上標有 “Download Link” 的鏈接，下載完整的庫、示例代碼及文檔等。下載完成后，解壓文件并重新編寫必要的文件。

請用能夠編輯文本的編輯器打開 “ST7735.h” ，然后更改下圖所示的部分。您也可以使用Arduino IDE。

更改完成后，用zip再次壓縮 “TFT 18” 目錄，然后在Arduino（或Arduino Create）Add Library中將其作為一個庫添加；或者將其放置在Arduino安裝目錄的“libraries”目錄下并加載該庫。

導入庫之后，請嘗試在示例程序中移動 “TFT 18” – “graphictest” 。

您會看到示例程序的顯示非常流暢。

示例程序 – graphictest

//Pin setting
#define sclk 4
#define mosi 5
#define cs 6
#define dc 7
#define rst 8
//Color numbering
#define BLACK       	0x0000
#define BLUE        	0x001F
#define RED         	0xF800
#define GREEN       	0x07E0
#define CYAN        	0x07FF
#define MAGENTA     	0xF81F
#define YELLOW      	0xFFE0 
#define WHITE       	0xFFFF
#include 
#include 
ST7735 tft = ST7735(cs, dc, mosi, sclk, rst); 
void fillpixelbypixel(uint16_t color) {
 for (uint8_t x=0; x < tft.width; x++) {
   for (uint8_t y=0; y < tft.height; y++) {
     tft.drawPixel(x, y, color);
   }
 }
 delay(100);
}
void setup(void) {
 Serial.begin(9600);
 Serial.print("hello!");
 tft.initR();           	// initialize a ST7735R chip
 Serial.println("init");
 tft.writecommand(ST7735_DISPON);
  
 uint16_t time = millis();
 tft.fillScreen(BLACK);
 time = millis() - time;
  
 Serial.println(time, DEC);
 delay(500);
  
 //
 tft.fillScreen(BLACK);
 testdrawtext("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing ante sed nibh tincidunt feugiat. Maecenas enim massa, fringilla sed malesuada et, malesuada sit amet turpis. Sed porttitor neque ut ante pretium vitae malesuada nunc bibendum. Nullam aliquet ultrices massa eu hendrerit. Ut sed nisi lorem. In vestibulum purus a tortor imperdiet posuere. ", WHITE);
 delay(1000);
  
 //a single pixel
 tft.drawPixel(tft.width/2, tft.height/2, GREEN);
 delay(500);
  
 // line draw test
 testlines(YELLOW);
 delay(500);	
  
 // optimized lines
 testfastlines(RED, BLUE);
 delay(500);	
 testdrawrects(GREEN);
 delay(500);
 testfillrects(YELLOW, MAGENTA);
 delay(500);
 tft.fillScreen(BLACK);
 testfillcircles(10, BLUE);
 testdrawcircles(10, WHITE);
  
 Serial.println("done");
 delay(1000);
}
void loop() {
 tft.writecommand(ST7735_INVON);
 delay(500);
 tft.writecommand(ST7735_INVOFF);
 delay(500);
}
void testlines(uint16_t color) {
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(0, 0, x, tft.height-1, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(0, 0, tft.width-1, y, color);
  }
   
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(tft.width-1, 0, x, tft.height-1, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(tft.width-1, 0, 0, y, color);
  }
   
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(0, tft.height-1, x, 0, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(0, tft.height-1, tft.width-1, y, color);
  }
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(tft.width-1, tft.height-1, x, 0, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(tft.width-1, tft.height-1, 0, y, color);
  }
   
}
void testdrawtext(char *text, uint16_t color) {
 tft.drawString(0, 0, text, color);
}
void testfastlines(uint16_t color1, uint16_t color2) {
  tft.fillScreen(BLACK);
  for (uint16_t y=0; y < tft.height; y+=5) {
    tft.drawHorizontalLine(0, y, tft.width, color1);
  }
  for (uint16_t x=0; x < tft.width; x+=5) {
    tft.drawVerticalLine(x, 0, tft.height, color2);
  }
}
void testdrawrects(uint16_t color) {
tft.fillScreen(BLACK);
for (uint16_t x=0; x < tft.width; x+=6) { tft.drawRect(tft.width/2 -x/2, tft.height/2 -x/2 , x, x, color); } } void testfillrects(uint16_t color1, uint16_t color2) { tft.fillScreen(BLACK); for (uint16_t x=tft.width-1; x > 6; x-=6) {
  tft.fillRect(tft.width/2 -x/2, tft.height/2 -x/2 , x, x, color1);
  tft.drawRect(tft.width/2 -x/2, tft.height/2 -x/2 , x, x, color2);
}
}
void testfillcircles(uint8_t radius, uint16_t color) {
 for (uint8_t x=radius; x < tft.width; x+=radius*2) {
   for (uint8_t y=radius; y < tft.height; y+=radius*2) {
     tft.fillCircle(x, y, radius, color);
   }
 } 
}
void testdrawcircles(uint8_t radius, uint16_t color) {
 for (uint8_t x=0; x < tft.width+radius; x+=radius*2) {
   for (uint8_t y=0; y < tft.height+radius; y+=radius*2) {
     tft.drawCircle(x, y, radius, color);
   }
 } 
}

該TFT顯示屏的主要功能如下所示：

tft.drawPixel(x,y,color); – 在指定位置(x,y)顯示指定顏色(color)的點。

tft.drawCircle(x, y, radius, color); – 在指定位置(x,y)用指定半徑(radius)畫一個圓。

tft.fillRect(x1,y1, x2, y2, color); – 填充指定位置1(x1, y1)至指定位置2(x2, y2)之間的矩形。

tft.drawString(x, y, text, color); – 在指定位置(x,y)用指定顏色(color)顯示文本。

tft.fillScreen(0x0000); – 用指定顏色填充整個顯示屏。

盡管還有其他功能，但是上述主要功能已經能夠滿足幾乎所有我們的顯示要求。

將加速度計的數值繪制成圖形

接下來，讓我們在TFT顯示屏上顯示加速度計的數值！基本上，就傳感器評估套件而言，我們無需更改TFT顯示屏這邊的連線。只需將KX022-1020加速度計插入傳感器開發板即可。

圖3 加速度計和TFT顯示屏

顯示加速度計數值的程序如下：

#include 
#include 
#include 
#include 
// You can use any (4 or) 5 pins
#define sclk 4
#define mosi 5
#define cs 6
#define dc 7
#define rst 8  // you can also connect this to the Arduino reset
// Color definitions
#define BLACK       	0x0000
#define BLUE        	0x001F
#define RED         	0xF800
#define GREEN       	0x07E0
#define CYAN        	0x07FF
#define MAGENTA     	0xF81F
#define YELLOW      	0xFFE0 
#define WHITE       	0xFFFF
ST7735 tft = ST7735(cs, dc, mosi, sclk, rst); 
KX022 kx022(KX022_DEVICE_ADDRESS_1E);
int _cnt = 0;
//Graph initial position
int _xc = 120;
int _yc = 130;
int _zc = 140;
void fillpixelbypixel(uint16_t color) {
for (uint8_t x=0; x < tft.width; x++) {
for (uint8_t y=0; y < tft.height; y++) {
tft.drawPixel(x, y, color);
}
}
delay(100);
}
void setup(void) {
byte rc;
Serial.begin(9600);
while (!Serial);
Wire.begin();
tft.initR(); // initialize a ST7735R chip
rc = kx022.init();
tft.fillScreen(BLACK);
 
1.DEVICE PLUS
testdrawtext("DEVICE PLUS!!", WHITE,25,50);
delay(1000);
tft.fillScreen(BLACK);
}
void loop() {
//KX022
byte rc;
float acc[3];
//2.Acquire accelerometer values
rc = kx022.get_val(acc);
if (rc == 0) {
Serial.write("KX022 (X) = ");
Serial.print(acc[0]);
Serial.println(" [g]");
Serial.write("KX022 (Y) = ");
Serial.print(acc[1]);
Serial.println(" [g]");
Serial.write("KX022 (Z) = ");
Serial.print(acc[2]);
Serial.println(" [g]");
Serial.println();
//Convert float type to char type
char xVal[10];
dtostrf(acc[0], 5, 2, xVal);
char yVal[10];
dtostrf(acc[1], 5, 2, yVal);
char zVal[10];
dtostrf(acc[2], 5, 2, zVal);
//Convert to TFT liquid crystal
//tft.fillScreen(BLACK);
tft.fillRect(0,0, 120, 60, BLACK);
testdrawtext("X:", RED, 5, 15);
testdrawtext(xVal, WHITE, 30, 15);
testdrawtext("Y:", BLUE, 5, 30);
testdrawtext(yVal, WHITE, 30, 30);
testdrawtext("Z:", GREEN, 5, 45);
testdrawtext(zVal, WHITE, 30, 45);
//3.Draw a graph
int x = int(acc[0]*100)+120;
int y = int(acc[1]*100)+130;
int z = int(acc[2]*100)+40;
tft.drawLine(_cnt-1, _xc, _cnt, x, RED);
tft.drawLine(_cnt-1, _yc, _cnt, y, BLUE);
tft.drawLine(_cnt-1, _zc, _cnt, z, GREEN);
_cnt++;
//Reset to the end of the screen
if(_cnt > 120){
_cnt = 0;
tft.fillScreen(BLACK);
}
_xc = x;
_yc = y;
_zc = z;
 
delay(10);
}
delay(10);
}
void testlines(uint16_t color) {
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(0, 0, x, tft.height-1, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(0, 0, tft.width-1, y, color);
  }
   
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(tft.width-1, 0, x, tft.height-1, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(tft.width-1, 0, 0, y, color);
  }
   
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(0, tft.height-1, x, 0, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(0, tft.height-1, tft.width-1, y, color);
  }
  tft.fillScreen(BLACK);
  for (uint16_t x=0; x < tft.width; x+=6) {
    tft.drawLine(tft.width-1, tft.height-1, x, 0, color);
  }
  for (uint16_t y=0; y < tft.height; y+=6) {
    tft.drawLine(tft.width-1, tft.height-1, 0, y, color);
  }
}
void testdrawtext(char *text, uint16_t color,int x,int y) {
 tft.drawString(x, y, text, color);
}
void testfastlines(uint16_t color1, uint16_t color2) {
  tft.fillScreen(BLACK);
  for (uint16_t y=0; y < tft.height; y+=5) {
    tft.drawHorizontalLine(0, y, tft.width, color1);
  }
  for (uint16_t x=0; x < tft.width; x+=5) {
    tft.drawVerticalLine(x, 0, tft.height, color2);
  }
}
void testdrawrects(uint16_t color) {
tft.fillScreen(BLACK);
for (uint16_t x=0; x < tft.width; x+=6) { tft.drawRect(tft.width/2 -x/2, tft.height/2 -x/2 , x, x, color); } } void testfillrects(uint16_t color1, uint16_t color2) { tft.fillScreen(BLACK); for (uint16_t x=tft.width-1; x > 6; x-=6) {
  tft.fillRect(tft.width/2 -x/2, tft.height/2 -x/2 , x, x, color1);
  tft.drawRect(tft.width/2 -x/2, tft.height/2 -x/2 , x, x, color2);
}
}
void testfillcircles(uint8_t radius, uint16_t color) {
 for (uint8_t x=radius; x < tft.width; x+=radius*2) {
   for (uint8_t y=radius; y < tft.height; y+=radius*2) {
     tft.fillCircle(x, y, radius, color);
   }
 } 
}
void testdrawcircles(uint8_t radius, uint16_t color) {
 for (uint8_t x=0; x < tft.width+radius; x+=radius*2) {
   for (uint8_t y=0; y < tft.height+radius; y+=radius*2) {
     tft.drawCircle(x, y, radius, color);
   }
 } 
}

運行上述程序后，顯示屏會將加速度計的數值用圖形顯示出來。

該程序流程摘要如下：

啟動時顯示 “DEVICE PLUS !!” 字符

獲取加速度計的數值并將其轉換為整數

根據數值顯示圖形和文本

每一幀我們給x軸加1，以便從左到右繪制圖形。

當畫面到達120px顯示屏的邊緣時，程序會用drawrect清除圖形。屏幕上方的數字以相同的方式通過drawrect進行每幀更新。

至此，利用TFT液晶顯示屏顯示加速度計的數值并繪制相關圖形的教程就結束了！我們還可以考慮開發更多的附帶項目。比如，我們可以將此TFT顯示屏與Arduino Pro Mini組合在一起，制作具有小型游戲功能的手表等；還可以利用傳感器評估套件中的不同傳感器來制作數據記錄器。

點擊此處閱讀本文的第1部分 >

DevicePlus 編輯團隊

設備升級版適用于所有熱愛電子和機電一體化的人。

審核編輯黃宇