Project tutorial
How to Create a Data Displaying System Using a TFT Screen

How to Create a Data Displaying System Using a TFT Screen

This project will show you how to make a data displaying system using a TFT screen.

  • 2,742 views
  • 1 comment
  • 9 respects

Components and supplies

Apps and online services

About this project

Code

#include <Elegoo_GFX.h>
#include <Elegoo_TFTLCD.h>

#define LCD_CS A3
#define LCD_CD A2
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4

#define GREY 0x8410
#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF

Elegoo_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

int incrementation = 24;

int scale1 = 1;
int scale2 = 2;
int scale4 = 4;
int scale8 = 8;

void setup(void) {

tft.reset();
tft.begin(0x9341);
tft.fillScreen(BLACK);
tft.setRotation(1);
tft.fillRect(20,15,3,145,WHITE);
tft.fillRect(20,160,272,3,WHITE);

tft.setCursor(30,190);
tft.setTextColor(CYAN);
tft.setTextSize(1);
tft.println("Light values");

tft.setCursor(125,190);
tft.setTextColor(GREEN);
tft.setTextSize(1);
tft.println("Heat values");

tft.setCursor(212,190);
tft.setTextColor(RED);
tft.setTextSize(1);
tft.println("Smoke values");

tft.drawLine(33,160,33,166,WHITE);
tft.drawLine(43,160,43,166,WHITE);
tft.drawLine(53,160,53,166,WHITE);
tft.drawLine(63,160,63,166,WHITE);
tft.drawLine(73,160,73,166,WHITE);
tft.drawLine(83,160,83,166,WHITE);
tft.drawLine(93,160,93,166,WHITE);
tft.drawLine(103,160,103,166,WHITE);
tft.drawLine(113,160,113,166,WHITE);
tft.drawLine(123,160,123,166,WHITE);
tft.drawLine(133,160,133,166,WHITE);
tft.drawLine(143,160,143,166,WHITE);
tft.drawLine(153,160,153,166,WHITE);
tft.drawLine(163,160,163,166,WHITE);
tft.drawLine(173,160,173,166,WHITE);
tft.drawLine(183,160,183,166,WHITE);
tft.drawLine(193,160,193,166,WHITE);
tft.drawLine(203,160,203,166,WHITE);
tft.drawLine(213,160,213,166,WHITE);
tft.drawLine(223,160,223,166,WHITE);
tft.drawLine(233,160,233,166,WHITE);
tft.drawLine(243,160,243,166,WHITE);
tft.drawLine(253,160,253,166,WHITE);
tft.drawLine(263,160,263,166,WHITE);
tft.drawLine(273,160,273,166,WHITE);
tft.drawLine(283,160,283,166,WHITE);
tft.drawLine(17,87,20,87,WHITE);
tft.drawLine(17,15,20,15,WHITE);

tft.setCursor(3,3);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println("Analog Values (max : 1024) ");

tft.setCursor(188,171);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println("Time (in seconds)");

tft.setCursor(10,164);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println("0");

tft.setCursor(31,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale1);

tft.setCursor(41,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale2);

tft.setCursor(61,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale4);

tft.setCursor(101,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale8);

}
void loop(void) {

unsigned long start = micros();

int vala = analogRead(A15);
int valab = map(vala,0,1024,159,15);
tft.fillCircle(incrementation,valab,1,CYAN);

int valb = analogRead(A14);
int valbb = map(valb,0,1024,159,15);
tft.fillCircle(incrementation,valbb,1,RED);

int valc = analogRead(A13);
int valcb = map(valc,0,1024,159,15);
tft.fillCircle(incrementation,valcb,1,GREEN);

incrementation++;

delay(100);

if(scale1==27){
tft.fillRect(3,120,16,60,BLACK);
}
if(incrementation>282){
tft.fillRect(10,166,100,12,BLACK);
scale1 = scale1+26;
scale2 = scale2+26;
scale4 = scale4+26;
scale8 = scale8+26;
tft.setCursor(26,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale1);
tft.setCursor(41,170);
if(scale2>10){
tft.setCursor(39,170);
}
if(scale2<100){
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale2);
}
tft.setCursor(61,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale4);
tft.setCursor(101,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale8);
tft.fillRect(23,14,269,146,BLACK);

incrementation = 24;
}
return micros() - start;
}

_________________________________________________________________

These functions are explained on my last project :

#include <Elegoo_GFX.h>
#include <Elegoo_TFTLCD.h>

#define LCD_CS A3
#define LCD_CD A2
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4

#define GREY 0x8410
#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF

Elegoo_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);


tft.reset();
tft.begin(0x9341);
tft.fillScreen(BLACK);
tft.setRotation(1);

This function create a variable nammed "incrementation" :

int incrementation = 24;

Why 24 ? Because 24 is the y coordinate of the axis "values" ( + 1 ) so the graphic can start a pixel after the axis :

tft.fillRect(20,15,3,145,WHITE); //20+3=23 so the incrementation starts a pixel after

Then scales are created :

int scale1 = 1;
int scale2 = 2;
int scale4 = 4;
int scale8 = 8;

X axis and Y axis :

tft.fillRect(20,15,3,145,WHITE);
tft.fillRect(20,160,272,3,WHITE);

These functions write Light/Heat/Smoke values in different colors :

tft.setCursor(30,190);
tft.setTextColor(CYAN);
tft.setTextSize(1);
tft.println("Light values");

tft.setCursor(125,190);
tft.setTextColor(GREEN);
tft.setTextSize(1);
tft.println("Heat values");

tft.setCursor(212,190);
tft.setTextColor(RED);
tft.setTextSize(1);
tft.println("Smoke values");

The code draws graduations :

tft.drawLine(33,160,33,166,WHITE);
tft.drawLine(43,160,43,166,WHITE);
tft.drawLine(53,160,53,166,WHITE);
tft.drawLine(63,160,63,166,WHITE);
tft.drawLine(73,160,73,166,WHITE);
tft.drawLine(83,160,83,166,WHITE);
tft.drawLine(93,160,93,166,WHITE);
tft.drawLine(103,160,103,166,WHITE);
tft.drawLine(113,160,113,166,WHITE);
tft.drawLine(123,160,123,166,WHITE);
tft.drawLine(133,160,133,166,WHITE);
tft.drawLine(143,160,143,166,WHITE);
tft.drawLine(153,160,153,166,WHITE);
tft.drawLine(163,160,163,166,WHITE);
tft.drawLine(173,160,173,166,WHITE);
tft.drawLine(183,160,183,166,WHITE);
tft.drawLine(193,160,193,166,WHITE);
tft.drawLine(203,160,203,166,WHITE);
tft.drawLine(213,160,213,166,WHITE);
tft.drawLine(223,160,223,166,WHITE);
tft.drawLine(233,160,233,166,WHITE);
tft.drawLine(243,160,243,166,WHITE);
tft.drawLine(253,160,253,166,WHITE);
tft.drawLine(263,160,263,166,WHITE);
tft.drawLine(273,160,273,166,WHITE);
tft.drawLine(283,160,283,166,WHITE);
tft.drawLine(17,87,20,87,WHITE);
tft.drawLine(17,15,20,15,WHITE);

It draws "Analog Values ( max : 1024 )" near the Y Axis and "Time ( in seconds )" near the X Axis :

tft.setCursor(3,3);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println("Analog Values (max : 1024) ");

tft.setCursor(188,171);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println("Time (in seconds)");

It draws a zero :

tft.setCursor(10,164);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println("0");

It draws scales ( 1s, 2s, 4s, 8s ) along the X Axis :

tft.setCursor(31,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale1);

tft.setCursor(41,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale2);

tft.setCursor(61,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale4);

tft.setCursor(101,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale8);

Progressively scales will increase ( explained below ).

In the void loop, the code reads analog values. These values are converted into a pixel number ( between 15 ( = 1024 ) and 159 ( = 0 ) ) that represent the progress on the Y axis. The progress of crosses on the X Axis is defined by the incrementation.

int vala = analogRead(A15);
int valab = map(vala,0,1024,159,15);
tft.fillCircle(incrementation,valab,1,CYAN);

int valb = analogRead(A14);
int valbb = map(valb,0,1024,159,15);
tft.fillCircle(incrementation,valbb,1,RED);

int valc = analogRead(A13);
int valcb = map(valc,0,1024,159,15);
tft.fillCircle(incrementation,valcb,1,GREEN);

incrementation++;
delay(100);

This function delete the zero if the scale is increasing :

if(scale1==27){
tft.fillRect(3,120,16,60,BLACK);
}

The last part of the code reset the graph : when the incrementation is higher than 282 :

if(incrementation>282){

//It deletes old scales to write new ones

tft.fillRect(10,166,100,12,BLACK);

//It calculates new scales

scale1 = scale1+26;
scale2 = scale2+26;
scale4 = scale4+26;
scale8 = scale8+26;

//And it writes them :

tft.setCursor(26,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale1);

tft.setCursor(41,170);
if(scale2>10){
tft.setCursor(39,170);
}
if(scale2<100){
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale2);
}

tft.setCursor(61,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale4);

tft.setCursor(101,170);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.println(scale8);

//It deletes the old graph

tft.fillRect(23,14,269,146,BLACK);

//It resets the incrementation to 24

incrementation = 24;
}
return micros() - start;
}

Basic functions ( such as tft.draw…, tft.fill..., etc ) and librairies used in this project are given in my previous project : How to Use a TFT Screen

Connections

Comments

Similar projects you might like

Displaying An Image On A LCD TFT Screen With Arduino UNO!

Project tutorial by CreaTechWeb

  • 6,619 views
  • 5 comments
  • 9 respects

TFT Graphing: Live History Graphs

Project tutorial by Andrei Florian

  • 19,274 views
  • 20 comments
  • 65 respects

8bit Number Display

Project tutorial by Alireza Karkon

  • 1,386 views
  • 0 comments
  • 7 respects

Light Sequence Creator

Project tutorial by Reid Paulhus

  • 12,498 views
  • 3 comments
  • 27 respects

TFT Graphing: Bar Charts

Project tutorial by Andrei Florian

  • 4,386 views
  • 2 comments
  • 24 respects

Rotary scanner using Arduino MEGA2560 and TFT

Project tutorial by Rafa Juárez

  • 3,906 views
  • 0 comments
  • 5 respects
Add projectSign up / Login