ESP32 2.2インチTFT Ucglib表示テスト

　前の記事で、ESP32に2.2インチTFTを接続して、Adafruitのライブラリで表示テストを行いましたが、フォントが荒っぽくちょっと気に入りません。

　そこで、STM32で利用したUcglibを使ってみることにしました。ESP32 DevKitCとTFTの接続は、前の記事と同じです。

　まず、UcglibサイトからUcglibをダウンロードして、Arduino IDEに追加します。

　Ucglibでは、様々なスタイル大きさのフォントを使うことができます。フォントの見本は、Ucglibフォルダの中のextrasフォルダの中にあるfontsize.pdfで見ることができます。また、Ucglibの使い方は、同じフォルダ内のreference.pdfに記載されています。

　簡単なスケッチで表示テストをしました。スケッチです。

---------------------------------------------------

/*
 * ESP32 ILI9341TFT  Ucglib test
 * 2020.1.12
 * JH7UBC Keiji Hata
 */
#include <Ucglib.h>
#include <SPI.h>

 

#define __CS 5
#define __DC 17
#define __RST 16

 

Ucglib_ILI9341_18x240x320_HWSPI ucg(__DC, __CS, __RST);

 

void setup() {
  ucg.begin(UCG_FONT_MODE_TRANSPARENT);
  ucg.clearScreen();
  ucg.setRotate270();
  ucg.setFont(ucg_font_ncenB14_tr);
  ucg.setColor(255, 255, 255);
  ucg.setPrintPos(50,50);
  ucg.print("Hello World!");
  ucg.setColor(255, 0, 0);
  ucg.setPrintPos(50,75);
  ucg.print("ESP32 + ILI9341TFT");
}

 

void loop() {
}

----------------------------------------------------

なめらかなフォントで表示されました。

　Ucglibは、表示が少し遅いような気もします。Adafruitのlibとケースバイケースで使い分けていきたいと思います。

ESP32 2.2インチTFT表示テスト

　ESP32でTFTディスプレイの表示テストをします。

　マイコンで利用されるTFTディスプレイには、2.2インチ,2.4インチ,2.8インチ,3.2インチなどがあり、240×320ドットでSPIインターフェースで制御され、コントローラーにはILI9341が使われています。

　今回は、手持ちの2.2"のTFTを使います。Qiitaのこの記事などを参考にしてテストしました。

　ESP32 DevKitCとTFTの接続は次のようにします。

ESP32                       TFT

3V3   ------------------ Vcc

GND  ------------------ GND

GPIO5(VSPI SS) ------ CS

GPIO16 ---------------- RESET

GPIO17 ---------------- DC/RS

GPIO23(VSPI MOSI) -- SDA(MOSI)

GPIO18(VSPI SCK) ---- SCK

3V3 --------------------- LED

GPIO19(VSPI MISO) --- DO(MISO)  これは接続しなくとも動作します。

接続回路図です。

GitHubからAdafruit_ILI9341とAdafruit_GFXライブラリをダウンロードして、Arduino IDEライブラリに登録します。

Adafruit_ILI9341のexamplesの中のgraphicstest.inoの一部を次のように書き換えてコンパイル書き込みします。

#define TFT_RST 16
#define TFT_DC 17
#define TFT_CS 5

// Use hardware SPI (on Uno, #13, #12, #11) and the above for CS/DC
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC,TFT_RST);

　グラフィックスのデモが表示され、最後に上の画面が表示され、90°ずつ回転します。　

　「Hello World!」と簡単なグラフィックスのスケッチを作りTFTに表示してみます。

------------------------------------------

/*
 * ESP32 ILI8341を使った2.2inch TFTディスプレイ表示テスト
 * 2020.1.10
 * JH7UBC Keiji Hata
 */

 

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

#define TFT_DC 17
#define TFT_CS 5
#define TFT_RST 16

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

void setup() {
  tft.begin();
  tft.setRotation(3);
  tft.fillScreen(ILI9341_BLUE);
  tft.setCursor(50, 50);
  tft.setTextColor(ILI9341_YELLOW);
  tft.setTextSize(3);
  tft.println("Hello World!");
  tft.drawRoundRect(40,40,225,40, 5,ILI9341_WHITE);
  tft.fillCircle(100,150,50,ILI9341_RED);
  tft.fillRect(170,100,100,100,ILI9341_GREEN);
}

void loop() {
}

------------------------------------------------------

表示結果です。

 

 

　グラフィック表示は、前の記事NOKIA5110の表示に使用したのと同じAdafruit_GFX.hライブラリを使っていますので、基本的な記述の仕方は同じです。

　ただし、TFTではカラー表示ができますので、色指定は、ILI9341_WHITE,ILI9341_BLACK,ILI9341_RED,ILI9341_GREEN,ILI9341_BLUEなどと記述します。

　TFTディスプレイは、非常に色あざやかで視認性も良いです。

　まずは、うまく表示されて良かったのですが、Adafruitのフォントは荒っぽく、もう少しなめらかなフォントがほしいところです。

ESP32 NOKIA5110 サインカーブ

　グラフィックの練習として、ESP32でNOKIA5110LCDにサインカーブを描いてみます。

　スケッチです。

---------------------------------------

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

 

Adafruit_PCD8544 display = Adafruit_PCD8544(14, 13, 27, 15, 26);

 

void setup() {
  display.begin();  //initialize
  display.setContrast(50);  //set contrast
  display.clearDisplay(); //clears the screen and buffer
  display.drawLine(10, 20, 80, 20, BLACK);
  display.drawLine(10, 0, 10, 40, BLACK);
  display.setTextSize(1);
  display.setTextColor(BLACK);
  display.setCursor(0,15);
  display.print("0");
  display.setCursor(45,0);
  display.print(" Y=sinX");
  display.display();
  
  for(int i = 0; i <= 72; i++){
    float x = i * 3.141592 /36;
    int y = 20 * sin(x);
    display.drawPixel(10+i, 20-y, BLACK);
    display.display();
  }
}

 

void loop() {
}

 --------------------------------------

NOKIA5110の画面です。

ESP32 NOKIA5110LCD グラフィック表示テスト

　ESP32 DevKitCを使い、NOKIA5110LCDにグラフィックを表示するテストです。

　使用するライブラリは、Adafruit_GFX.hです。

　グラフィック関係の関数と実際の表示結果をまとめます。

----------------------------------------------------------------------------------------------

　display.drawPixel(x,y,BLACK); //座標x,yにドットを表示します。

　例：座標(10,10)にドットを表示します。

　display.drawPixel(10, 10, BLACK);

   display.display();

---------------------------------------------------------------------------------------------

　display.drawLine(x1,y1,x2,y2,BLACK); //座標(x1,y1)から(x2,y2)まで直線を描きます。

　例　座標(0,0）から(83,47)まで直線を描きます。

　display.drawLine(0, 0, 83, 47, BLACK);

   display.display();

---------------------------------------------------------------------------------------

　display.drawCircle(x,y,r,BLACK); //座標(x,y)を中心に半径rの円を描きます。

　例:座標(42,24)を中心にして、半径20の円を描きます。

　display.drawCircle(42, 24, 20, BLACK);

   display.display();

----------------------------------------------------------------------------------------

　display.fillCircle(x,y,r,BLACK); //座標(x,y)を中心に半径rの円を描き、中を塗りつぶします。 

　例：(42,24)を中心に半径20の円を描き、中を塗りつぶします。

　display.fillCircle(42, 24, 20, BLACK);
   display.display();

----------------------------------------------------------------------------------------

　display.drawRect(x,y,w,h,BLACK); //(x,y)を始点（左上）として、幅w、高さhの矩形（rectangle）を描きます。

　例：(20,10)を始点として、幅30、高さ20の矩形を描きます。

　display.drawRect(20,10,30,20,BLACK);

   display.display();

------------------------------------------------------------------------------------------------

　display.fillRect(x,y,w,h,BLACK); //(x,y)を始点として、幅w、高さhの矩形を描き、中を塗りつぶします。

　例：(20,10)を始点として、幅30、高さ20の矩形を描き、中を塗りつぶします。

　display.fillRect(20, 10, 30, 20, BLACK);

　display.display();

---------------------------------------------------------------------------------------------

　display.drawRoundRect(x,y,w,h,r,BLACK); //(x,y)を始点として、幅w、高さｈ、角の半径rの角の丸い矩形を描きます。

　例：(20,10)を始点として幅30、高さ20、角の半径５の角の丸い矩形を描きます。

　display.drawRoundRect(20, 10, 30, 20, 5,BLACK);

　display.display();

----------------------------------------------------------------------------------------------

　display.fillRoundRect(x,y,w,h,r,BLACK); //(x,y)を始点として、幅w、高さｈの角半径rの角の丸い矩形を描き、中を塗りつぶします。

　例：(20,10)を始点として幅30、高さ20、角の半径５の角の丸い矩形を描き、中を塗りつぶします。

　display.fillRoundRect(20, 10, 30, 20, 5,BLACK);

　display.display();

-----------------------------------------------------------------------------------------

　これらを組み合わせて様々なグラフィックを表示することができます。

ESP32 NOKIA5110LCD 文字表示テスト

　モノクログラフィックLCD NOKIA5110にESP32で文字（テキスト）を表示させるテストです。

　文字を表示させるスケッチの基本は、前の記事を参考にしてください。ここでは、テキスト表示関係の関数についてまとめます。

　まず、テキスト、グラフィック共通の関数

　display.begin(); //初期化します。

　display.clearDisplay();  //screenとbuffaをクリアします。

　display.display(); //buffaのデータをNOKIA5110に送り、screenに表示します。

　display.setContrast(n); //コントラスト調整、n=50程度ですが、見やすいように調整します。

　display.setRotation(n); //画面を反時計回りに回転させます。n=1で90°、n=2で180°、n=3で270°、n=0で回転なし。

　display.setRotation(1);で反時計回りに90°回転させた画面です。

----------------------------------------------------------------------------

　次にテキスト関係の関数です。

　display.setCursor(x,y); //カーソルをx,yにセットします。

　display.TextSize(n); //文字の大きさを指定します。n=1～5

　1行目TextSize(1)、2行目TextSize(2)、3行目TextrSize(3)です。

　左側TextSize(4)、右側TextSize(5)です。

　display.setTextColor(BLACK or WHITE,BLACK); //BLACKの場合、黒文字。WHITE,BLACKにすると白黒反転します。

　上の文字を反転させてみます。

　display.print(n); //ｎは文字列または数値、変数で、改行なしで表示します。

　diplay.println(n);//上記と同じですが、文字を表示後改行します。

　ただし、nが実数（浮動小数点）の場合、小数点以下2桁までしか表示しません。

  1行目は、display.println("3.141592");で表示

　2行目は、display.println(3.141592);で表示

　他にdisplay.write(n); //nはアスキーコード。でアスキーコードに対応した文字を表示することができます。