Visualizing data when working with the Arduino is something we all have had to do using third party/ self-developed software in the past. It was thus, it is really interesting when the Arduino team decided to change that recently. Today, we are going to take a look at their solution, called, the Serial Plotter, a new tool that comes with the latest version of the Arduino IDE.

The serial plotter provides a medium through which we can see a plot of the data being printed to the Arduino’s serial port in real time. Before the inclusion of this feature in the Arduino IDE, developers/makers usually have to write additional code using other tools and programming languages like Python or more popularly Processing to get a plot of the Arduino’s Data. This at times makes debugging difficult due to the extra work and time it requires especially in waveform based applications where viewing the data on the serial monitor will not be sufficient.

The serial plotter basically takes values coming from the preset serial port and plots them on a x-y axis graph. The Y-axis represents the values from the serial port and automatically adjusts itself as the value increases or decrease. The X-axis can be said to represent an instance of time. Each point on the x-axis represents the execution of a println statement within the Arduino code. In plainer terms, each time a println command is executed, a new point/data (value of Y corresponding to that particular println statement) is recorded on the graph. The limitation of the serial plotter in this version of Arduino IDE is the fact that it only supports a total of 500 data samples, after which the plotter may need to be restarted. This may make the plotter, unsuitable for certain applications, but I believe this will change with upcoming versions of the IDE.

The serial plotter can be invoked after uploading code to the Arduino board, by clicking on tools -> serial plotter from the drop-down menu or by pressing CTRL + SHIFT + L which is the keyboard shortcut for the same.

To demonstrate the use of serial plotter in today’s tutorial, we will build two examples.

For the first example, we will use the Serial Plotter to plot the data from a photoresistor. This will give us the ability to examine how the data changes with the luminous intensity without trying to make sense of the numbers being printed over the serial monitor.

For the second example, we will be using a DHT22 temperature and humidity sensor. The goal of this example will be to show how to plot the data from multiple sensors using the Arduino serial plotter.

Required Components

The following components are required to build the two examples for this tutorial:

1. Arduino Uno
2. DHT22 sensor
3. Photoresistors
4. Jumper wires
5. Wires
6. Resistor
7. Small Breadboard

These components, as usual, can be purchased via the links attached to each of them.

Schematics

If you have been a follower of our tutorial series on this website, you should be very familiar with the schematics for this project. For simplicity, we will use one schematic for each example.

For the first example which involves plotting of photoresistor’s data, the circuit is essentially a voltage divider connected to an analog pin on the Arduino. The divider is made up of the photoresistor on one part and an ordinary resistor on the other part. Connect the components as shown in the schematics below.

For the second example, the circuit comprises of the DHT22 temperature and humidity sensor connected to the Arduino as shown in the schematics below.

The pin connections between the Arduino and the DHT are further described below.

DHT22 – Arduino

VCC - 5V
GND - GND
Data - D4

Code

The code for the two examples that we will work with are quite simple. You would have, at one point or the other, seen them on this website as we have lots of weather station based tutorials. However, the important thing in both codes is the println() function. The Serial.println() Arduino function prints data to the serial port as human-readable ASCII text followed by a carriage return character (ASCII 13, or ‘\r’) and a newline character (ASCII 10, or ‘\n’). This command takes the same form as Serial.print() statement with the only difference being the newline character which is not associated with the serial.print(). As mentioned during the introduction, everytime the serial.println() command is issued, data is recorded on the serial plotter thus making it very important to this tutorial.

With that said, let’s take a look at the code for the examples starting with the first one.

Code for Plotting the Photoresistor’s Data

To do a brief explanation of how the code for this example works, we start by indicating the pin of the Arduino to which the output of the divider is connected.

//Written by Nick Koumaris
// info@educ8s.tv

int LDRpin = 0;
int analogValue =0;

Next, is the void setup() function, where we initialize the serial port, setting the communication baud rate to 9600.

void setup() {
  Serial.begin(9600);
}

Last but not least, we write the void loop() function. Under this function, we use the analogRead() function to obtain data from the voltage divider pin after which the data is sent to the serial port using the serial.println() command.

void loop() {
  analogValue = analogRead(LDRpin);
  Serial.println(analogValue);
  delay(50);

}

The complete code is shown below.

//Written by Nick Koumaris
// info@educ8s.tv
int LDRpin = 0;
int analogValue =0;

void setup() {
  Serial.begin(9600);
}

void loop() {
  analogValue = analogRead(LDRpin);
  Serial.println(analogValue);
  delay(50);

}

Code to Plot Data from the DHT22 Sensor

The main reason for this example as mentioned earlier is to demonstrate how to plot multiple data representing multiple variables using the serial plotter.

For this example, we will be obtaining and plotting the ambient temperature and humidity from the DHT22 at the same time. To briefly explain the code, we start by including the DHT.h header to utilize the functions in the DHT library.

//Written by Nick Koumaris
// info@educ8s.tv

#include "DHT.h"

Next, we specify the pin of the Arduino to which the signal pin of the DHT sensor is connected and specify the type/model of the DHT being used.

#define DHTPIN 4  
#define DHTTYPE DHT22

We also initialize (set to zero) the variables that will hold the temperature and humidity data from the sensor. After this, we create an instance of the DHT library specify the pin of the Arduino to which the signal pin is connected and the type of DHT we are using.

float temperature = 0.0;
float humidity = 0.0;
DHT dht(DHTPIN, DHTTYPE);

Next, we write the void setup() function. We start this function by initializing the serial port, setting its baud rate to 9600 after which we initialize the DHT sensor.

void setup() {
 Serial.begin(9600);
 dht.begin();
 delay(100);
}

The void loop() function, as usual, is where most of the work is done. We start by using the dht.readTemperature() and dht.readHumidity functions to obtain the temperature and humidity value from the sensor. After which we proceed to print them out in a way that the serial plotter understands the difference between the variables. This is the done by printing an empty space between the variables (after the first value, before the second value). Without this empty space between the data, the plotter will see the next println statement as an update to the previous one.

void loop() {

temperature = dht.readTemperature();
humidity = dht.readHumidity();

delay(500);
Serial.print(temperature);
Serial.print(" ");
Serial.println(humidity);

}

The complete code for this example is shown below.

//Written by Nick Koumaris
// info@educ8s.tv
#include "DHT.h"
#define DHTPIN 4  
#define DHTTYPE DHT22 

float temperature = 0.0;
float humidity = 0.0;
DHT dht(DHTPIN, DHTTYPE);

void setup() {
 Serial.begin(9600);
 dht.begin();
 delay(100);
}

void loop() {

temperature = dht.readTemperature();
humidity = dht.readHumidity();

delay(500);
Serial.print(temperature);
Serial.print(" ");
Serial.println(humidity);

}

Demo

This project is quite simple and I expect no complications to arise, but in case things get funny, do ensure your connections are as described in the schematics. For each example, after double checking your connections, upload the corresponding code to the Arduino board and open the serial monitor. You should see the data being plotted after a while as shown in the images below.

 

 

That’s it for this tutorial guys, thanks for reading. If you have any questions or discover new tricks with the recent versions of Arduino IDE that you will like to share, don’t forget to drop comments.

Till next time!

The video version of this tutorial is available on youtube.

Displays are one of the best ways to provide feedback to users of a particular device or project and often the bigger the display, the better. For today’s tutorial, we will look on how to use the relatively big, low cost, ILI9481 based, 3.5″ Color TFT display with Arduino.

This 3.5″ color TFT display as mentioned above, is based on the ILI9481 TFT display driver. The module offers a resolution of 480×320 pixels and comes with an SD card slot through which an SD card loaded with graphics and UI can be attached to the display. The module is also pre-soldered with pins for easy mount (like a shield) on either of the Arduino Mega and Uno, which is nice since there are not many big TFT displays that work with the Arduino Uno.

To show how the display works and how to use it with Arduino based projects, we will run simple demos to display graphics and texts on the display.

Required Components

The following components are required to replicate this tutorial:

1. 3.5″ Color TFT
2. Cheap Uno
3. Arduino Mega
4. Powerbank

The module is compatible with either of the Arduino Uno or the Arduino Mega, so feel free to choose between them or test with both. As usual, these components can be bought via the links attached to them.

The power bank included in the component list is for those who want to test the projects when not connected to a PC.

Schematics

One of the good things about this module is the ease with which it can be connected to either of the Arduino Mega or Uno. For this tutorial, we will use the Arduino Uno, since the module comes as a shield with pins soldered to match the Uno’s pinout. All we need to do is snap it onto the top of the Arduino Uno as shown in the image below, thus no wiring required.

 

This ease of using the module mentioned above is, however, one of the few downsides of the display. If we do not use the attached SD card slot, we will be left with 6 digital and one analog pin as the module use the majority of the Arduino pins. When we use the SD card part of the display, we will be left with just 2 digital and one analog pin which at times limits the kind of project in which we can use this display. This is one of the reasons while the compatibility of this display with the Arduino Mega is such a good news, as the “Mega” offers more digital and analog pins to work with, so when you need extra pins, and size is not an issue, use the Mega.

With the module connected, we can now move to the code.

Code

To easily write code to use this display, we will use the GFX and TFT LCD libraries from “Adafruit” which can be downloaded here. With the library installed we can easily navigate through the examples that come with it and upload them to our setup to see the display in action. By studying these examples, one could easily learn how to use this display. However, I have compiled some of the most important functions for the display of text and graphics into an Arduino sketch for the sake of this tutorial. The complete sketch is attached in a zip file under the download section of this tutorial.

As usual, we will do a quick run through of the code and we start by including the libraries which we will use for the project, in this case, the Adafruit GFX and TFT LCD libraries.

//Written by Nick Koumaris
//info@educ8s.tv
#include <Adafruit_GFX.h>    
#include <Adafruit_TFTLCD.h>

Next, we declare the pins of the Arduino to which our LCD is connected, and create variables for fonts and colors using matching hex values.

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

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

Next, we create an object of the TFTLCD library with the pins of the Arduino to which the LCD is connected as arguments.

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

With this done, the Void Setup() function is next. We start the function by issuing a tft.reset() command to reset the LCD to default configurations. Next, we specify the type of the LCD we are using via the LCD.begin function and set the rotation of the TFT as desired. We proceed to fill the screen with different colors and display different kind of text using diverse color (via the tft.SetTextColor() function) and font size (via the tft.setTextSize() function).

void setup() {

  tft.reset();
  tft.begin(0x9481);
  tft.setRotation(1);
  tft.fillScreen(RED);
  tft.fillScreen(GREEN);
  tft.fillScreen(BLUE);
  tft.fillScreen(BLACK);
  delay(1000);
  tft.setCursor(80,100);
  tft.setTextColor(WHITE);
  tft.setTextSize(4);
  tft.print("Hello");

  tft.setCursor(220,100);
  tft.setTextColor(RED);
  tft.setTextSize(4);
  tft.print("YouTUBE!");

  tft.fillRect(80,200, 321, 60, RED);

  tft.setCursor(135,215);
  tft.setTextColor(WHITE);
  tft.setTextSize(4);
  tft.print("Subscribe");

  tft.drawRect(0,0,480,320,WHITE);
  delay(1000);

Next is the void loop() function. Here we basically create a UI to display the youtube subscribe button, using some of the same functions we used under the void setup() function.

void loop() 
{
  tft.fillRect(80,200,321,60,BLACK);
  delay(1000);
  tft.fillRect(80,200,321,60,RED);
  tft.setCursor(135,215);
  tft.setTextColor(WHITE);
  tft.setTextSize(4);
  tft.print("Subscribe");
  delay(1000);
}

The Adafruit library helps reduce the amount of work one needs to do while developing the code for this display, leaving the quality of the user interface to the limitations of the creativity and imagination of the person writing the code.
The complete code for this example is shown below.

//Written by Nick Koumaris
//info@educ8s.tv

#include <Adafruit_GFX.h>    
#include <Adafruit_TFTLCD.h> 

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

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

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

void setup() {

  tft.reset();
  tft.begin(0x9481);
  tft.setRotation(1);
  tft.fillScreen(RED);
  tft.fillScreen(GREEN);
  tft.fillScreen(BLUE);
  tft.fillScreen(BLACK);
  delay(1000);
  tft.setCursor(80,100);
  tft.setTextColor(WHITE);
  tft.setTextSize(4);
  tft.print("Hello");

  tft.setCursor(220,100);
  tft.setTextColor(RED);
  tft.setTextSize(4);
  tft.print("YouTUBE!");

  tft.fillRect(80,200, 321, 60, RED);

  tft.setCursor(135,215);
  tft.setTextColor(WHITE);
  tft.setTextSize(4);
  tft.print("Subscribe");

  tft.drawRect(0,0,480,320,WHITE);
  delay(1000);
}

void loop() 
{
  tft.fillRect(80,200,321,60,BLACK);
  delay(1000);
  tft.fillRect(80,200,321,60,RED);
  tft.setCursor(135,215);
  tft.setTextColor(WHITE);
  tft.setTextSize(4);
  tft.print("Subscribe");
  delay(1000);
}

Demo

Copy the code above, and after installing the libraries, upload to your setup. You should see the display come up as shown in the image below.

That’s it for this tutorial guys, thanks for reading. If you made some cool projects based on this or you just want to ask questions about this tutorial, feel free to reach out via the comment section below.

Till next time!

The video version of this tutorial is available on youtube.