【貂蝉がプログラミングを学ぶ】Arduinoハンズオン(153) --- 2.4インチTFT LCDタッチスクリーンモジュール6

37 個のセンサーとアクチュエーターに関する言及はインターネット上で広く広まっていますが、実際には、Arduino と互換性のあるセンサーモジュールは 37 個以上あるはずです。手持ちのセンサーとアクチュエーターのモジュールがいくつかあるという事実を考慮して、学習とコミュニケーションの目的で、真の知識を実践する（やらなければならない）というコンセプトに従って、一連の実験を試してみるつもりです。 1つは、成功（プログラムが完了する）かどうかに関係なく、他の人にインスピレーションを与えることを期待して、小さな進歩や解決できない問題などを記録します。

[Arduino] 168種類のセンサーモジュールシリーズ実験(データコード+シミュレーションプログラミング+グラフィックスプログラミング)
実験153: 2.4インチTFT LCDタッチスクリーンカラースクリーンモジュールはUNO R3 Mega2560開発ボードに直接接続可能

ここに画像の説明を挿入
前述の実験では、最初はライブラリを使用せず、いくつかの一般的なドライバーライブラリを使用してみました。また、海外の Web サイトにある関連ドライバーライブラリも多数試しました。

比較的安定した Adafruit GFX ライブラリと MCUFRIEND KBV ライブラリを組み合わせて使用することをお勧めします。

ここに画像の説明を挿入

MCUFRIEND KBV を解凍し、MCUFRIEND_kbv.CPP を開きます。MCUFRIEND ライブラリでサポートされているドライバーのリストを表示できます。

ここに画像の説明を挿入
必要になる可能性のあるその他の関連ドライバーライブラリ。これらのライブラリは現在必須ではありませんが、追加することができます。

#include "TouchScreen.h" // 当想使用触摸屏时

#include "bitmap_mono.h" // 想显示库中的位图图像时

#include "bitmap_RGB.h" // 想显示库中的位图图像时

#include "Fonts/FreeSans9pt7b.h" // 想要其他字体时

#include "Fonts/FreeSans12pt7b.h" // 想要其他字体时

#include "Fonts/FreeSerif12pt7b.h" // 想要其他字体时

#include "FreeDefaultFonts.h" // 想要其他字体时

#include "SPI.h" // 使用 sd 卡显示位图图像

#include "SD.h" // 使用 sd 卡显示位图图像

関連する基本コマンドの一覧

1. クラスとオブジェクト

//(int CS=A3, int RS=A2, int WR=A1, int RD=A0, int RST=A4)MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);

この行は、MCUFRIEND_kbv クラスから TFT と呼ばれるオブジェクトを作成し、LCD と Arduino 間の SPI 通信を提供します。

2. LCD ディスプレイを実行します。

uint16_t ID = tft.readID(); tft.begin(ID);

tft.readID 関数は、ディスプレイから ID を読み取り、それを ID 変数に入れます。次に、tft.begin 関数が ID を取得し、LCD が動作する準備が整います。

3. ディスプレイ解像度

tft.width(); //int16_t width(void);tft.height(); //int16_t height(void);

これら 2 つの機能により、ディスプレイの解像度を知ることができます。これらをコードに追加し、出力を uint16_t 変数に入れるだけです。次に、シリアルポート Serial.println(); から読み取ります。まず setup() に Serial.begin(9600); を追加します。

4. 画面の色

tft.fillScreen(t); //fillScreen(uint16_t t);

fillScreen 関数は、画面の色をカラフルに変更します。t は、UTFT カラーコードを含む 16 ビット変数である必要があります。

#define BLACK 0x0000
#define NAVY 0x000F
#define DARKGREEN 0x03E0
#define DARKCYAN 0x03EF
#define MAROON 0x7800
#define PURPLE 0x780F
#define OLIVE 0x7BE0
#define LIGHTGREY 0xC618
#define DARKGREY 0x7BEF
#define BLUE 0x001F
#define GREEN 0x07E0
#define CYAN 0x07FF
#define RED 0xF800
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define ORANGE 0xFD20
#define GREENYELLOW 0xAFE5
#define PINK 0xF81F

これらの行をコードの先頭に追加し、関数内で色の名前を使用できます。

5. ピクセルを塗りつぶす

tft.drawPixel(x,y,t); //drawPixel(int16_t x, int16_t y, uint16_t t)tft.readPixel(x,y); //uint16_t readPixel(int16_t x, int16_t y)

drawPixel 関数は、位置 x および y のピクセルを t カラーで塗りつぶします。

readPixel 関数は、x および y 位置のピクセルの色を読み取ります。

6. 線を引く

<p><font size="4">tft.drawFastVLine(x,y,h,t); //drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t t)</font></p><p><font size="4">tft.drawFastHLine(x,y,w,t); //drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t t)</font></p><p><font size="4">tft.drawLine(xi,yi,xj,yj,t); //drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t t)</font></p>

drawFastVLine 関数は、x、y 位置から開始し、長さは h ピクセル、色は t の垂直線を描画します。

drawFastHLine 関数は、x および y 位置から開始して、長さが w ピクセル、色が t の水平線を描画します。

drawLine 関数は、xi から開始し、位置 xj および yj で yi で終了する線を色 t で描画します。

<p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawFastVLine(x+a, y, h, t);}  </font></p><p><font size="4">
</font></p><p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawFastHLine(x, y+a, w, t);}  </font></p><p><font size="4">
</font></p><p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawLine(xi+a, yi, xj+a, yj, t);} </font></p><p><font size="4">
</font></p><p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawLine(xi, yi+a, xj, yj+a, t);} </font></p>

これら 3 つのコードブロックは、前のコードと同様に、幅 5 ピクセルの線を描画します。

7. 長方形を描く

<p><font size="4">tft.fillRect(x,y,w,h,t); //fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)</font></p><p><font size="4">tft.drawRect(x,y,w,h,t); //drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)</font></p><p><font size="4">tft.fillRoundRect(x,y,w,h,r,t); //fillRoundRect (int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)</font></p><p><font size="4">tft.drawRoundRect(x,y,w,h,r,t); //drawRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)</font></p>

fillRect 関数は、x および y 位置に塗りつぶされた四角形を描画します。w は幅、h は高さ、t は長方形の色です。

drawRect 関数は、位置 x および y に、幅 w、高さ h、色 t の長方形を描画します。

fillRoundRect 関数は、x 位置と y 位置、w 幅、h 高さ、t 色で半径 r の角丸の塗りつぶされた長方形を描画します。

drawRoundRect 関数は、x および y 位置で半径 r、幅 w、高さ h、および色を指定した角丸長方形を描画します。

8. 円を描く

tft.drawCircle(x,y,r,t); //drawCircle(int16_t x, int16_t y, int16_t r, uint16_t t)tft.fillCircle(x,y,r,t); //fillCircle(int16_t x, int16_t y, int16_t r, uint16_t t)

drawCircle 関数は、x および y 位置に半径 r、色 t の円を描画します。

fillCircle 関数は、x および y 位置に半径 r、色 t で塗りつぶされた円を描画します。

for (int p = 0; p < 4000; p++) {
    
      j = 120 * (sin(PI * p / 2000));  i = 120 * (cos(PI * p / 2000));  j2 = 60 * (sin(PI * p / 2000));  i2 = 60 * (cos(PI * p / 2000));  tft.drawLine(i2 + 160, j2 + 160, i + 160, j + 160, col[n]);}

このコードを使用すると、円弧を描くことができます。「for」を0～4000に変更します。

9. 三角形を描く

tft.drawTriangle(x1,y1,x2,y2,x3,y3,t); //drawTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, uint16_t t)tft.fillTriangle(x1,y1,x2,y2,x3,y3,t); //fillTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, uint16_t t)

drawTriangle 関数は、3 つの角の位置 x、y、z と t の色で三角形を描画します。

fillTriangle 関数は、3 つの角の位置 x、y、z と色を指定して塗りつぶされた三角形を描画します。

10. 表示テキスト

tft.setCursor(x,y); //setCursor(int16_t x, int16_t y)

このコードは、カーソル位置を x と y に設定します。

tft.setTextColor(t); //setTextColor(uint16_t t)tft.setTextColor(t,b); //setTextColor(uint16_t t, uint16_t b)

最初の行はテキストの色を設定します。次の行では、テキストとその背景の色を設定します。

tft.setTextSize(s); //setTextSize(uint8_t s)

このコードはテキストのサイズを s に設定します。s は 1 ～ 5 の数値です。

tft.write(c); //write(uint8_t c)

このコードは文字を表示します。

<font size="4"><font color="#000000">tft.println("www.Electropeak.com");tft.print("www.Electropeak.com");</font></font>

最初の関数は文字列を表示し、カーソルを次の行に移動します。

2 番目の関数は文字列を表示するだけです。

showmsgXY(x,y,sz,&FreeSans9pt7b,"www.Electropeak.com"); //void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg){  int16_t x1, y1;  uint16_t wid, ht;  tft.setFont(f);  tft.setCursor(x, y);  tft.setTextColor(0x0000);  tft.setTextSize(sz);  tft.print(msg);}

この機能はテキストのフォントを変更します。この関数とフォントライブラリを追加する必要があります。

for (int j = 0; j < 20; j++) {
    
      tft.setCursor(145, 290);  int color = tft.color565(r -= 12, g -= 12, b -= 12);  tft.setTextColor(color);  tft.print("www.Electropeak.com");  delay(30);}

この機能はテキストをフェードアウトします。これをコードに追加する必要があります。

11. 画面を回転する

tft.setRotation(r); //setRotation(uint8_t r)

このコードは画面を回転させます。0=0、1=90、2=180、3=270。

12. 画面の色を反転する

tft.invertDisplay(i); //invertDisplay(boolean i)

このコードは RGB コードを与え、UTFT カラーコードを取得します。

13. 画面をスクロールする

Scrolling the Screen

このコードは画面をスクロールします。Maxroll はスクロールする最大の高さです。

14. 再起動

tft.reset();

このコードは画面をリセットします。

15. モノクロ画像を表示する

static const uint8_t name[] PROGMEM = {
    
      //Add image code here.}tft.drawBitmap(x, y, name, sx, sy, 0x0000);

まず、画像を 16 進コードに変換する必要があります。以下のリンクからソフトウェアをダウンロードしてください。ソフトウェアの設定を変更したくない場合は、画像の色を反転し、画像を水平にミラーリングし、反時計回りに 90 度回転する必要があります。次に、それをソフトウェアに追加して変換します。エクスポートされたファイルを開き、16 進コードを Arduino IDE にコピーします。x と y は画像の位置です。sx と sy は画像のサイズです。画像の色は最後の入力で変更できます。

必要なファイルとダウンロード:
ここに画像の説明を挿入

RGBカラー画像表示

ここに画像の説明を挿入

まず、画像をコードに変換する必要があります。このリンクを使用して画像を変換します。

http://www.rinkydinkelectronics.com/t_imageconverter565.php

画像をアップロードし、UTFT ライブラリが処理できるように変換されたファイルをダウンロードします。次に、16 進コードを Arduino IDE にコピーします。x と y は画像の位置です。sx と sy は画像のサイズです。

いくつかのドライバーライブラリの使用例

1. 文字列と、色が順番に変化する 8 つの塗りつぶされた円。静的な点の周りに円を描くには、sin(); 関数と cos(); 関数を使用できます。PI 番号を定義する必要があります。色を変更するには、color565(); 関数を使用し、RGB コードを置き換えます。

プロジェクト 15: 順番に色が変わる文字列と 8 つの塗りつぶされた円

実験的なオープンソースコード

/*

 【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）

 实验一百五十六：2.4寸TFT液晶触摸屏 彩屏模块 TFT-LCD 高清真彩显示屏

 项目十五：一个字符串和 8 个按顺序改变颜色的实心圆圈

 模块直插，引脚用法如下：

 LCD_CS LCD_CD LCD_WR LCD_RD LCD_RST SD_SS SD_DI SD_DO SD_SCK

 Arduino Uno A3 A2 A1 A0 A4 10 11 12 13

 LCD_D0 LCD_D1 LCD_D2 LCD_D3 LCD_D4 LCD_D5 LCD_D6 LCD_D7

 Arduino Uno 8 9 2 3 4 5 6 7

*/

#include "Adafruit_GFX.h"

#include "MCUFRIEND_kbv.h"

MCUFRIEND_kbv tft;

#include "Fonts/FreeSans9pt7b.h"

#include "Fonts/FreeSans12pt7b.h"

#include "Fonts/FreeSerif12pt7b.h"

#include "FreeDefaultFonts.h"

#define PI 3.1415926535897932384626433832795

int col[8];

void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg) {
    
    

 int16_t x1, y1;

 uint16_t wid, ht;

 tft.setFont(f);

 tft.setCursor(x, y);

 tft.setTextColor(0x0000);

 tft.setTextSize(sz);

 tft.print(msg);

}

void setup() {
    
    

 tft.reset();

 Serial.begin(9600);

 uint16_t ID = tft.readID();

 tft.begin(ID);

 tft.setRotation(1);

 tft.invertDisplay(true);

 tft.fillScreen(0xffff);

 showmsgXY(90, 200, 2, &FreeSans9pt7b, "Loading......");

 col[0] = tft.color565(155, 0, 50);

 col[1] = tft.color565(170, 30, 80);

 col[2] = tft.color565(195, 60, 110);

 col[3] = tft.color565(215, 90, 140);

 col[4] = tft.color565(230, 120, 170);

 col[5] = tft.color565(250, 150, 200);

 col[6] = tft.color565(255, 180, 220);

 col[7] = tft.color565(255, 210, 240);

}

void loop() {
    
    

 for (int i = 8; i > 0; i--) {
    
    

  tft.fillCircle(180 + 40 * (cos(-i * PI / 4)), 100 + 40 * (sin(-i * PI / 4)), 10, col[0]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 1)*PI / 4)), 100 + 40 * (sin(-(i + 1)*PI / 4)), 10, col[1]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 2)*PI / 4)), 100 + 40 * (sin(-(i + 2)*PI / 4)), 10, col[2]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 3)*PI / 4)), 100 + 40 * (sin(-(i + 3)*PI / 4)), 10, col[3]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 4)*PI / 4)), 100 + 40 * (sin(-(i + 4)*PI / 4)), 10, col[4]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 5)*PI / 4)), 100 + 40 * (sin(-(i + 5)*PI / 4)), 10, col[5]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 6)*PI / 4)), 100 + 40 * (sin(-(i + 6)*PI / 4)), 10, col[6]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 7)*PI / 4)), 100 + 40 * (sin(-(i + 7)*PI / 4)), 10, col[7]); delay(15);

 }

}