グラフィック・ディスプレイを使う (5) ライン、円、図形

　前回のセンサBME280の温度、湿度、気圧の表示をコンパクトに整理しました。

//bme280 Written by Limor Fried & Kevin Townsend for Adafruit Industries.
//ST77* Written by Limor Fried/Ladyada for Adafruit Industries.

#include <SPI.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
#include <Adafruit_GFX.h> // Core graphics library
#include <Adafruit_ST7789.h> // Hardware-specific library for ST7789

#include <Fonts/FreeMonoBold12pt7b.h>
#define BME_CS 7
#define TFT_CS 10
#define TFT_RST 9 // Or set to -1 and connect to Arduino RESET pin
#define TFT_DC 8

#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0 
#define WHITE 0xFFFF
#define PINK 0xF81F
#define ORANGE 0xFBE0 

Adafruit_BME280 bme(BME_CS); // hardware SPI
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);

void setup() {
    Serial.begin(9600);
    // while(!Serial); // time to get serial running
    Serial.println("Start BME280");
    Serial.print("Hello! ST77xx TFT Test");

    unsigned status;
    status = bme.begin(); 
    if (!status) {
        Serial.println("Could not find a valid BME280 sensor, check wiring, address, sensor ID!");
        while (1);
    }
    tft.init(240, 320); // Init ST7789 320x240
    Serial.println("Initialized TFT");
    tft.fillScreen(ST77XX_BLACK);
    Serial.println();
}

void loop() { 
    printValues();
    printValuesToLCD();
    delay(5000);
}

void printValuesToLCD() {
    int xp = 10; int yp = 40;
    tft.fillScreen(ST77XX_BLACK);
    tft.setTextColor(ORANGE);
    tft.setTextWrap(false);

    tft.setCursor(xp, yp+0);
    tft.setFont(&FreeMonoBold12pt7b);
    tft.setRotation(0);

    tft.print("Temperature ");
    tft.setCursor(xp+128, yp+30);
    tft.print(String(bme.readTemperature(),1));
    tft.print("*C");

    tft.setCursor(xp,yp+70);
    tft.print("Pressure ");
    tft.print(String((bme.readPressure() / 100.0F),0));
    tft.print("hPa");

    tft.setCursor(xp, yp+110);
    tft.print("Humidity ");
    tft.print(String(bme.readHumidity(),0));
    tft.print("%");
}

void printValues() {
    Serial.print("Temperature ");
    Serial.print(bme.readTemperature(),1);
    Serial.println("*C");

    Serial.print("Pressure ");
    Serial.print((bme.readPressure() / 100.0F),0);
    Serial.println("hPa");

    Serial.print("Humidity ");
    Serial.print(bme.readHumidity(),0);
    Serial.println("%");
    Serial.println();
}

●四角

　四角は、次の2種類の関数が用意されています。

drawRect(x0, y0, width, height, color);　x0,y0は描画の始点
fillRect(x0, y0, width, height, color);

　drawRect()で枠を緑色で描きました。

void printValuesToLCD() {
    int xp = 10; int yp = 40;
    int x0 = 1; int y0 = 5; 

    tft.fillScreen(ST77XX_BLACK);
    tft.setTextColor(ORANGE);
    tft.setTextWrap(false);

    tft.setCursor(xp, yp+0);
    tft.setFont(&FreeMonoBold12pt7b);
    tft.setRotation(0);
    tft.drawRect(x0, y0, 238, 170, GREEN);

    tft.print("Temperature ");
    tft.setCursor(xp+128, yp+30);
    tft.print(String(bme.readTemperature(),1));
    tft.print("*C");

    tft.setCursor(xp,yp+70);
    tft.print("Pressure ");
    tft.print(String((bme.readPressure() / 100.0F),0));
    tft.print("hPa");

    tft.setCursor(xp, yp+110);
    tft.print("Humidity ");
    tft.print(String(bme.readHumidity(),0));
    tft.print("%");
}

　実行例です。

●線

drawLine(x0, y0, x1,  y1,  color);　x0,y0が始点、x1,y1が終点

　

　実際に赤色で2本描きました。

tft.drawLine(x0, y0, x0+120, y0-15, RED);tft.drawLine(x0+120, y0-15, x0+238, y0, RED);

　白色で太い塗りつぶしの線を描きました。

tft.fillRect(x0, 171, 238, 20, WHITE);

●円

drawCircle(x0, y0, r, color);　x0,y0が中心点、rは半径
fillCircle(ux0, y0, r, color);

　塗りつぶしの円を二つ、塗りつぶしの線を1本描き、温度計ぽくしました。

tft.fillRect(x0+40, y0+187, 170, 23, WHITE);
tft.fillCircle(x0+24, y0+198, 20, WHITE);tft.fillCircle(210, y0+198, 11, WHITE);

温度計の中の赤い部分を描きました。目盛りはふっていませんが、温度に従って伸びちぢみします。

tft.fillCircle(x0+24, y0+198, 16, RED);

tft.print("Temperature ");
tft.setCursor(xp+128, yp+30);
tft.print(String(bme.readTemperature(),1));
tft.print("*C");
tft.fillRect(x0+38, y0+190, (int)(50.0 + 2.0*bme.readTemperature()), 17, RED);

　全体のスケッチです。

//bme280 Written by Limor Fried & Kevin Townsend for Adafruit Industries.
//ST77* Written by Limor Fried/Ladyada for Adafruit Industries

#include <SPI.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
#include <Adafruit_GFX.h> // Core graphics library
#include <Adafruit_ST7789.h> // Hardware-specific library for ST7789
#include <Fonts/FreeMonoBold12pt7b.h>

#define BME_CS 7
#define TFT_CS 10
#define TFT_RST 9 // Or set to -1 and connect to Arduino RESET pin
#define TFT_DC 8

#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0 
#define WHITE 0xFFFF
#define PINK 0xF81F
#define ORANGE 0xFBE0 

Adafruit_BME280 bme(BME_CS); // hardware SPI
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);

void setup() {
    Serial.begin(9600);
    // while(!Serial); // time to get serial running
    Serial.println("Start BME280");
    Serial.print("Hello! ST77xx TFT Test");

    unsigned status;
    status = bme.begin(); 
    if (!status) {
        Serial.println("Could not find a valid BME280 sensor, check wiring, address, sensor ID!");
        while (1);
    }
    tft.init(240, 320); // Init ST7789 320x240
    Serial.println("Initialized TFT");
    tft.fillScreen(ST77XX_BLACK);
    Serial.println();
}

void loop() { 
    printValues();
    printValuesToLCD();
    delay(5000);
}

void printValuesToLCD() {
    int xp = 10; int yp = 50;
    int x0 = 1; int y0 = 18; 

    tft.fillScreen(ST77XX_BLACK);
    tft.setTextColor(ORANGE);
    tft.setTextWrap(false);
    tft.setCursor(xp, yp+0);
    tft.setFont(&FreeMonoBold12pt7b);
    tft.setRotation(0);
    tft.drawRect(x0, y0, 238, 170, GREEN);
    tft.drawLine(x0, y0, x0+120, y0-15, RED);tft.drawLine(x0+120, y0-15, x0+238, y0, RED);
    tft.fillRect(x0, 171, 238, 20, WHITE);

    tft.fillRect(x0+40, y0+187, 170, 23, WHITE);
    tft.fillCircle(x0+24, y0+198, 20, WHITE);tft.fillCircle(210, y0+198, 11, WHITE);
    tft.fillCircle(x0+24, y0+198, 16, RED);

    tft.print("Temperature ");
    tft.setCursor(xp+128, yp+30);
    tft.print(String(bme.readTemperature(),1));
    tft.print("*C");
    tft.fillRect(x0+38, y0+190, (int)(50.0 + 2.0*bme.readTemperature()), 17, RED);

    tft.setCursor(xp,yp+70);
    tft.print("Pressure ");
    tft.print(String((bme.readPressure() / 100.0F),0));
    tft.print("hPa");

    tft.setCursor(xp, yp+110);
    tft.print("Humidity ");
    tft.print(String(bme.readHumidity(),0));
    tft.print("%");
}

void printValues() {
    Serial.print("Temperature ");
    Serial.print(bme.readTemperature(),1); 
    Serial.println("*C");

    Serial.print("Pressure ");
    Serial.print((bme.readPressure() / 100.0F),0);
    Serial.println("hPa");

    Serial.print("Humidity ");
    Serial.print(bme.readHumidity(),0);
    Serial.println("%");
    Serial.println();
}

（※）setup()内でwhile(!Serial); をコメントアウトしています。シリアルモニタのレスポンスが悪いモデルでは有用なのですが、逆に、シリアルモニタをオープンしていないと、プログラムがそこで止まってしまいます。LEDに表示するのが本来の目的なので、コメントアウトしました。

前へ

グラフィック・ディスプレイを使う (4) テキストとフォント

次へ

ESP32活用① ESP32とブラウザでお話しする（6）リング・バッファを作る