아두이노 UNO TFT LCD 디지털 게이지(gauge) 디자인

아두이노로 차량용 대시보드를 제작하면서 제작한 디지털 게이지의 디자인 코드입니다.

아두이노 UNO와 3.5인치 TFT LCD쉴드 조합인데요.

디자인된 게이지는 디지털 숫자와 바 그래프를 그려주고, 값의 범위는 디자인적으로 변경이 가능합니다.

 

3.5인치 TFT LCD 디지털 게이지

 

이 

코드블록은 그래프를 그려주는 함수가 분리되어 있어서 추가로 더 그린다면 함수를 추가하면 원하는 개수만큼 그릴수 있습니다.

 

현 그래프 사이즈로는 최대 4개까지는 그릴 수 있습니다.

 

// 디지털 게이지

#include <Adafruit_GFX.h>    // Core graphics library
#include <MCUFRIEND_kbv.h>   // Hardware-specific library
MCUFRIEND_kbv tft;

#include <FreeDefaultFonts.h>
#include <Fonts/FreeSans9pt7b.h>
#include <Fonts/FreeSans18pt7b.h>

#define BLACK   0x0000

// 데이터 처리 변수
int value1, value2;  // 표시값
uint16_t bpx, bpy, g_step, i, j, bar;  // 게이지 그리는 변수값들
uint16_t color_cyan = 0x07FF, color_white = 0xFFFF, color_yellow = 0xFFE0, color_green = 0x07E0, color_grey = 0x4208, color_red = 0xF800; // 컬러값

void setup(void)
{
  uint16_t ID = tft.readID();
  if (ID == 0xD3) ID = 0x9481;
  tft.begin(ID);
  tft.setRotation(1);
  tft.fillScreen(BLACK);
}

void loop(void)
{
  value1 = random(10000);
  value2 = random(1000);

  gauge1();
  gauge2();

  delay(1000);
}

void gauge1()
{
  bpy = 100; // 바 상단 y점을 기준점으로 설정
  g_step = map(value1, 0, 10000, 0, 320);
  bar = 1;   // 꽉채운 bar

  for (i=0; i<=320 ; i+=bar)
  {
    if (i<=g_step)
    {
      if (value1 <= 9000)
        tft.drawLine(135+i, bpy, 135+i, bpy+35, color_cyan);
      else
        tft.drawLine(135+i, bpy, 135+i, bpy+35, color_red);    
    }
    else
      tft.drawLine(135+i, bpy, 135+i, bpy+35, color_grey);
  }

  for (i=135; i<=135+320; i=i+(320/10))
    tft.drawLine(i, bpy-10, i, bpy-5, color_green);

  print_Title(20, bpy-7, "TITLE1");
  print_Val(20, bpy+35, 124, String(value1));
  print_Lab(133, bpy-20, "0         20         40         60        80        100");
  print_Unit(90, bpy-15, "unit");
}

void gauge2()
{
  bpy = 200; // 바 상단 y점을 기준점으로 설정
  g_step = map(value2, 0, 1000, 0, 320);
  bar = 5;   // 꽉채운 bar

  for (i=0; i<=320 ; i+=bar)
  {
    if (i<=g_step)
    {
      if (value2 <= 900)
        tft.drawLine(135+i, bpy, 135+i, bpy+35, color_cyan);
      else
        tft.drawLine(135+i, bpy, 135+i, bpy+35, color_red);    
    }
    else
      tft.drawLine(135+i, bpy, 135+i, bpy+35, color_grey);
  }

  for (i=135; i<=135+320; i=i+(320/10))
    tft.drawLine(i, bpy-10, i, bpy-5, color_green);

  print_Title(20, bpy-7, "TITLE2");
  print_Val(20, bpy+35, 124, String(value2));
  print_Lab(133, bpy-20, "0         20         40         60        80        100");
  print_Unit(90, bpy-15, "unit");
}

void print_Title(int x, int y, const char *msg)
{
  tft.setTextColor(color_white);
  tft.setFont(&FreeSans9pt7b);
  tft.setCursor(x, y);
  tft.print(msg);
}

// 값출력, 값형태가 다양하기 때문에 string으로 처리
void print_Val(int x, int y, int z, String value)  // x위치, y위치, 박스의 가로폭, 값
{
  tft.fillRect(x-15, y-30, z, 38, BLACK);
  tft.setTextColor(color_yellow); 
  tft.setFont(&FreeSans18pt7b);
  tft.setCursor(x, y);
  tft.print(value);
}

void print_Lab(int x, int y, const char *msg)  // 숫자값 표시
{
  tft.setTextColor(color_green);
  tft.setFont(NULL);
  tft.setCursor(x, y);
  tft.print(msg);
}

void print_Unit(int x, int y, const char *msg)  // 단위표시
{
  tft.setTextColor(color_white);
  tft.setFont(NULL);
  tft.setCursor(x, y);
  tft.print(msg);
}

 

코드는 크게 어려운 부분은 없습니다.

색깔, 위치 등은 취향에 맞춰 변경이 가능합니다.