Graphing With Arduino on TFT LCD Color Display : Part I

Abhishek Ghosh

By Abhishek Ghosh August 3, 2018 11:35 pm Updated on August 3, 2018

Graphing With Arduino on TFT LCD Color Display : Part I

Normally we show example of real-time reading things like DHT11 on monochrome LCD displays. We can graph that information. Graphing With Arduino on TFT LCD Color Display Probably a Needed Matter to Many Users. Graphing Can Become Difficult On Display With Less Known Drivers. Previously we have talked around MCUFRIEND TFT LCD Calculator. That one had problem with working codes. There are worse displays which are sold. Worse in the sense – most of the Arduino users need some easy working library which works with most common matters. This guide discuss some of the basic matters for the displays which use Elegoo Libraries (Adafruit Industries) and MCUFRIEND TFT LCD. The logic will be same for all similar displays but some tweaks needed for the others to make graph in proper orientation.

Code For Graphing With Arduino on TFT LCD Color Display

Default libraries and examples do shows some graphing as example. As for example, for MCUFRIEND TFT LCD :

https://github.com/prenticedavid/MCUFRIEND_kbv/blob/master/examples/GLUE_Demo_320x240/GLUE_Demo_320x240.ino

1	https://github.com/prenticedavid/MCUFRIEND_kbv/blob/master/examples/GLUE_Demo_320x240/GLUE_Demo_320x240.ino

sin, cos, tan and moving sin wave had this code :

...
// Draw sin-, cos- and tan-lines  
  myGLCD.setColor(0,255,255);
  myGLCD.print("Sin", 5, 15);
  for (int i=1; i<318; i++)
  {
    myGLCD.drawPixel(i,119+(sin(((i*1.13)*3.14)/180)*95));
  }
  myGLCD.setColor(255,0,0);
  myGLCD.print("Cos", 5, 27);
  for (int i=1; i<318; i++)
  {
    myGLCD.drawPixel(i,119+(cos(((i*1.13)*3.14)/180)*95));
  }
  myGLCD.setColor(255,255,0);
  myGLCD.print("Tan", 5, 39);
  for (int i=1; i<318; i++)
  {
    myGLCD.drawPixel(i,119+(tan(((i*1.13)*3.14)/180)));
  }
  delay(2000);
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,15,318,224);
  myGLCD.setColor(0, 0, 255);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.drawLine(159, 15, 159, 224);
  myGLCD.drawLine(1, 119, 318, 119);
// Draw a moving sinewave
  x=1;
  for (int i=1; i<(318*20); i++) 
  {
    x++;
    if (x==319)
      x=1;
    if (i>319)
    {
      if ((x==159)||(buf[x-1]==119))
        myGLCD.setColor(0,0,255);
      else
        myGLCD.setColor(0,0,0);
      myGLCD.drawPixel(x,buf[x-1]);
    }
    myGLCD.setColor(0,255,255);
    y=119+(sin(((i*1.1)*3.14)/180)*(90-(i / 100)));
    myGLCD.drawPixel(x,y);
    buf[x-1]=y;
  }
delay(2000);
  myGLCD.setColor(0,0,0);
  myGLCD.fillRect(1,15,318,224);
...

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

...

// Draw sin-, cos- and tan-lines

myGLCD.setColor(0,255,255);

myGLCD.print("Sin", 5, 15);

for (int i=1; i<318; i++)

{

myGLCD.drawPixel(i,119+(sin(((i*1.13)*3.14)/180)*95));

}

myGLCD.setColor(255,0,0);

myGLCD.print("Cos", 5, 27);

for (int i=1; i<318; i++)

{

myGLCD.drawPixel(i,119+(cos(((i*1.13)*3.14)/180)*95));

}

myGLCD.setColor(255,255,0);

myGLCD.print("Tan", 5, 39);

for (int i=1; i<318; i++)

{

myGLCD.drawPixel(i,119+(tan(((i*1.13)*3.14)/180)));

}

delay(2000);

myGLCD.setColor(0,0,0);

myGLCD.fillRect(1,15,318,224);

myGLCD.setColor(0, 0, 255);

myGLCD.setBackColor(0, 0, 0);

myGLCD.drawLine(159, 15, 159, 224);

myGLCD.drawLine(1, 119, 318, 119);

// Draw a moving sinewave

x=1;

for (int i=1; i<(318*20); i++)

{

x++;

if (x==319)

x=1;

if (i>319)

{

if ((x==159)||(buf[x-1]==119))

myGLCD.setColor(0,0,255);

else

myGLCD.setColor(0,0,0);

myGLCD.drawPixel(x,buf[x-1]);

}

myGLCD.setColor(0,255,255);

y=119+(sin(((i*1.1)*3.14)/180)*(90-(i / 100)));

myGLCD.drawPixel(x,y);

buf[x-1]=y;

}

delay(2000);

myGLCD.setColor(0,0,0);

myGLCD.fillRect(1,15,318,224);

...

There are 3 main matters in the coding part – setting up graphing, reading value like temperature from DHT11 sensor, draw the graph. Unfortunately for practical purpose, you need to use board like Arduino Mega. Connecting DH11 with Arduino UNO is difficult as it occupies the whole board covering all pins. We are not always using the card reader but essentially it is difficult use the unused pins on Arduino UNO with such shield display.

I tested this one set of code and hardware and it works :

https://create.arduino.cc/projecthub/LightPro/tft-graphing-live-history-graphs-744f3b?ref=platform&ref_id=424_trending___&offset=3

1	https://create.arduino.cc/projecthub/LightPro/tft-graphing-live-history-graphs-744f3b?ref=platform&ref_id=424_trending___&offset=3

I liked the way the matter is illustrated :

Graphing With Arduino on TFT LCD Color Display

Basically I purchased one Elegoo 2.8′ TFT LCD and was searching for graphing for some other reason. You can directly open this link to use in Arduino Web Editor. To use the same code on other boards, you need to modify some parts like :

...
#include <Elegoo_GFX.h>    // Core graphics library
#include <Elegoo_TFTLCD.h> // Hardware-specific library
#include "Universum_TFTColours.h" // Universum library for colours
#include <dht.h>

#define LCD_CS A3 // Chip Select goes to Analog 3
#define LCD_CD A2 // Command/Data goes to Analog 2
#define LCD_WR A1 // LCD Write goes to Analog 1
#define LCD_RD A0 // LCD Read goes to Analog 0
#define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

...

#include <Elegoo_GFX.h> // Core graphics library

#include <Elegoo_TFTLCD.h> // Hardware-specific library

#include "Universum_TFTColours.h" // Universum library for colours

#include <dht.h>

#define LCD_CS A3 // Chip Select goes to Analog 3

#define LCD_CD A2 // Command/Data goes to Analog 2

#define LCD_WR A1 // LCD Write goes to Analog 1

#define LCD_RD A0 // LCD Read goes to Analog 0

#define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin

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

...

And of course you need to check the whole code for library specific phrases.

In next article, we will see how we can graph values read by LDR on MCUFRIEND display. That is hopefully will be simple. Although with my model of MCUFRIEND TFT LCD, it not going to be easy to make it properly oriented.

Tagged With mcufriend color , arduino tft graph , elegoo button command , elegoo tft command code , Universum_TFTColours h , elegoo tft display , x/y graphing on arduino , arduino elegoo tft , arduino elegoo display , adafruit tft lcd graph

Graphing With Arduino on TFT LCD Color Display : Part I

Code For Graphing With Arduino on TFT LCD Color Display

This Article Has Been Shared 145 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Take The Conversation Further ...

Code For Graphing With Arduino on TFT LCD Color Display

This Article Has Been Shared 145 Times!

About Abhishek Ghosh

Here’s what we’ve got for you which might like :

Articles Related to Graphing With Arduino on TFT LCD Color Display : Part I

Take The Conversation Further ...