아두이노 메가 TFT LCD 실시간 데이터 그래프: DHT11 온습도 히스토리 차트

부품 및 소모품

소프트웨어

• 아두이노 웹 에디터

프로젝트 개요

개요

TFT LCD에 전문적인 데이터 그래프를 그리고 싶지만 복잡한 계산 때문에 어려우셨나요? 이 프로젝트는 모든 계산을 완료해 단 5개 변수만 수정하면 원하는 데이터를 몇 초 만에 히스토리 그래프로 표시할 수 있게 해줍니다.

기능

• 센서 데이터를 TFT LCD에 그래프로 표시
• 단 몇 초 만에 구현 가능
• 그래프 크기, 위치, 색상 100% 커스터마이징 가능
• 온도뿐 아니라 토양 수분, 조도 등 모든 센서 데이터 그래프 가능

6초 간격으로 온도를 읽어 점으로 표시하고 선으로 연결합니다. X축은 경과 시간(초), Y축은 측정값 범위입니다.

동작 흐름

1. Read Temperature: DHT11에서 온도 읽기
2. Process Data: 센서 값을 그래프 좌표로 매핑
3. Graph Data: 매핑된 값을 그래프에 표시

TFT LCD 좌표계 이해

전체 LCD를 '캔버스'라 부르며, 모든 그리기는 여기서 이루어집니다. 사각형 그리기 예:

tft.fillRect(originX, originY, sizeX, sizeY, Colour);

• originX: 화면 오른쪽부터 도형까지 거리 (도면상 'z')
• originY: 화면 위쪽부터 도형까지 거리 (도면상 'x')
• sizeX: X축 크기 (도형 길이)
• sizeY: Y축 크기 (도형 높이)

프로젝트 제작

1단계: 준비물

• 아두이노 메가
• Elegoo 2.8인치 TFT LCD
• DHT11 센서 (다른 센서로 변경 가능)
• 브레드보드, 점퍼 와이어

2단계: 회로 연결

DHT11을 아두이노 메가에 연결하면 끝. 회로도 이미지 참조.

3단계: 코드 구조 이해

코드는 3부분으로 구성:

• 그래프 초기 설정: 축, 눈금, 라벨, 제목 그리기
• 온도 읽기: chk = DHT.read11(22); temp = DHT.temperature;
• 그래프 그리기: 점을 찍고 선으로 연결, 캔버스 가득 차면 오래된 데이터부터 밀어내기(스크롤)

그래프 커스터마이징 (수정할 핵심 변수)

bool proDebug = 0;           // 디버그 모드 (시리얼 모니터 출력)
uint16_t graphColor = BLUE;  // 그래프 축/라벨 색상
uint16_t pointColor = BLACK; // 데이터 포인트 색상
uint16_t lineColor = GREEN;  // 연결선 색상
String graphName = "Time Graph"; // 그래프 제목
int graphRange = 50;         // Y축 최대값 (중요! 센서 최대값에 맞춰 설정)
int markSize = 3;            // 포인트 크기 (정사각형 한 변 길이)

graphRange가 가장 중요합니다. 온도면 50, 아날로그 입력(0~1023)이면 1024로 설정하세요. 나머지 변수는 자동 계산됩니다.

다른 센서 데이터 그래프로 표시하기

센서 읽기 부분만 수정하면 어떤 데이터든 그래프 가능. 상세 가이드 이미지 참조.

더 나아가기

• originX, originY, sizeX, sizeY 수정으로 그래프 크기/위치 변경
• 헤더 파일의 색상 코드 활용해 차트/바 색상 변경

사용 라이브러리

• Elegoo 라이브러리 (Adafruit Industries, BSD 라이선스)
• DHT 라이브러리 (Rob Tillaart, 퍼블릭 도메인)

배경

이전 프로젝트에서 1~4개 값을 바 차트로 그래프하는 템플릿을 공개했습니다. 선이 복잡하지 않은 깔끔한 히스토리 그래프 템플릿이 없어 수학을 다시 정리해 누구나 실시간으로 데이터 그래프를 그릴 수 있는 간단한 프로젝트를 공개합니다.