TFT 그래프:실시간 기록 그래프

코드의 이 부분은 그래프의 윤곽을 그리고 x 및 y축 선을 그리고 마크도 그리고 y축에 값으로 레이블을 지정합니다.

chk =DHT.read11(22); 온도 =(DHT.온도); 

이 짧은 코드 줄은 DHT 11 센서에서 온도를 읽은 다음 변수에 저장합니다.

if(blockPos <8) { // 시간 출력 tft.setCursor((mark[valuePos] - 5), (originY + 16)); tft.setTextColor(그래프 색상, 흰색); tft.setTextSize(1); tft.println(시간 블록[값 위치]); // 값 매핑 locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // 점 그리기 tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // 이전 지점에 연결 시도 if(valuePos !=0) { tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor); } 블록포스++; } else { // 그래프의 캔버스 지우기 tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE); // 값 매핑 - 현재 포인트 locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // 점 그리기 - 현재 점 tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // 모든 점 그리기 for(int i =0; i <8; i++) { tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor); } // 모든 선을 그립니다. for(int i =0; i <7; i++) { tft.drawLine(mark[blockPos - (i + 1)], locationBlock[valuePos - i], mark[blockPos - (i + 2)], locationBlock[valuePos - (i + 1)], lineColor); } // 시간 레이블 변경 for(int i =0; i <=8; i++) { tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16)); tft.setTextColor(그래프 색상, 흰색); tft.setTextSize(1); tft.println(timeBlock[valuePos - i]); } } 값포스++; 

코드의 이 긴 부분은 해당 값에서 그래프의 점을 그린 다음 선을 통해 연결합니다. 코드는 그래프의 캔버스가 채워져 있는지 확인하고 채워지면 그래프의 첫 번째 값을 배출하기 시작합니다. 새 값을 삽입할 공간을 허용하도록 나머지를 위로 이동합니다. 아직 공간이 남아 있는 경우 장치는 간격을 두고 값을 계속 추가합니다.

그래프 맞춤설정

이 그래프의 재미있는 점은 100% 편집이 가능하여 사용자가 그래프의 크기, 위치 및 색상을 편집할 수 있으며 유연성 덕분에 그래프에 모든 데이터를 표시할 수도 있다는 것입니다. 주의해야 하는 모든 변수가 있습니다.

bool proDebug =0; uint16_t 그래프 색상 =파란색; uint16_t pointColor =검은색; uint16_t lineColor =녹색; 문자열 graphName ="시간 그래프"; 정수 그래프 범위 =50; 정수 표시 크기 =3; 

그리고 그게 전부입니다. 걱정해야 할 전부입니다. 나머지 변수는 Arduino에 의해 자동으로 계산됩니다.

변경 가치

방의 온도를 그래프로 표시하는 것도 좋지만 그래프에 센서 데이터를 표시할 수 있다면 더욱 좋습니다. 몇 줄의 코드를 편집하여 토양 수분에서 빛까지 모든 데이터를 그래프로 나타낼 수 있습니다. 강함. 다음은 이를 수행하는 방법입니다.

가는 중 더

프로젝트를 더 실험하고, originX, originY, sizeX 및 sizeY 상수를 편집하여 그래프에 다른 크기와 화면 위치를 제공할 수 있습니다. 메인 스케치에 헤더 파일이 첨부되어 있으며, 일부 색상의 색상 코드가 포함되어 있습니다. 차트와 막대의 색상을 변경해 보십시오. 이제 맞춤 그래프가 준비되었습니다.

라이브러리

배경

최근에 막대 차트에 1, 2, 3 또는 4 값을 그래프로 표시하는 프로젝트를 게시했습니다. 그래프 작성을 위한 다른 템플릿을 게시하기로 결정했습니다. 혼란을 줄 정도로 선이 곳곳에 없는 막대 차트용 템플릿은 없습니다. 그래서 저는 다시 계산을 하고 모든 사람이 자신의 데이터를 기록 그래프에 실시간으로 그래프로 표시할 수 있는 간단한 프로젝트를 게시하기로 결정했습니다.

코드

TFTH역사 그래프