Code
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

Published March 6, 2020

How to Create a Data Displaying System with a TFT Screen

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

BeginnerFull instructions provided12 minutes10,466

How to Create a Data Displaying System with a TFT Screen

Things used in this project

Hardware components

Arduino Mega 2560

TFT Screen

Photo resistor

Thermistor

Smoke detector

Jumper wires (generic)

Resistor 10k ohm

Breadboard (generic)

Software apps and online services

Arduino IDE

Story

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;

Graduations : 1 s, 2 s, 4 s, 8 s.

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

MisterBotBreak

48 projects • 152 followers

I love electronics and cats :D !

How to Create a Data Displaying System with a TFT Screen

Things used in this project

Hardware components

Software apps and online services

Story

Code

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

Credits

MisterBotBreak

Comments

Embed the widget on your own site

How to Create a Data Displaying System with a TFT Screen

How to Create a Data Displaying System with a TFT Screen

Things used in this project

Hardware components

Software apps and online services

Story

Code

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

Credits

MisterBotBreak

Comments

Related channels and tags