Showing posts with label Arduino. Show all posts

Tuesday, January 20, 2026

ESP32 ILI9341 2.8 inches TFT Example

Overview

ESP32 is a SoC micro-controller with WiFi module. It's a low-cost and high speed 32-bit micro-controller suitable for most of hobby and commercial projects. It is very popular in IoT project since it's very to learn and program using various examples and libraries from many developers.

Arduino IDE is very common for most of programmers. PlatformIO plugin for Visual Studio Code is also a second option for experienced programmers. They can program this chip using its effective lower API ESP-IDF that able to access most of its hardware level layers.

Display interfacing is an interesting stuffs for electronic project especially for stand-alone device that has a built-in GUI. There are may newer and low-cost graphical displays especially the TFT display. They come with many physical sizes and screen resolutions, for instance a 128x160RGB, a 240x240RGB and a 240x320RGB etc.

Arduino TFT_eSPI Meter Example

Some popular TFT LCD controllers the ST7735(128x160RGB), the ST7785(240x320RGB) and the ILI9341(240x320RGB) etc. There are many compatible TFT controllers for these controller chips. For example the ILI9341 and the ST7785 are equivalent.

ESP32 Arduino Programming and Interfacing

Arduino is very easy to use due to its readabilities excessive libraries. There are may TFT libraries for this TFT module especially from the Adafruit industry. However I use the TFT_eSPI libraries since its support many types of display controllers with various micro-controller modules.

I use the ESP32-WROOM-32U and a 2.8" ILI9341 with the XPT2046 resistive touch module to demo the example.

I tested its Meter example using 240x320 TFT display module. Then the "meter.ino" is opened.

/*
Example animated analogue meters using a ILI9341 TFT LCD screen
Needs Font 2 (also Font 4 if using large scale label)
Make sure all the display driver and pin connections are correct by
editing the User_Setup.h file in the TFT_eSPI library folder.
#########################################################################
###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
#########################################################################
*/
#include <TFT_eSPI.h> // Hardware-specific library
#include <SPI.h>
TFT_eSPI tft = TFT_eSPI(); // Invoke custom library
#define TFT_GREY 0x5AEB
#define LOOP_PERIOD 35 // Display updates every 35 ms
float ltx = 0; // Saved x coord of bottom of needle
uint16_t osx = 120, osy = 120; // Saved x & y coords
uint32_t updateTime = 0; // time for next update
int old_analog = -999; // Value last displayed
int old_digital = -999; // Value last displayed
int value[6] = {0, 0, 0, 0, 0, 0};
int old_value[6] = { -1, -1, -1, -1, -1, -1};
int d = 0;
void setup(void) {
tft.init();
tft.setRotation(0);
Serial.begin(57600); // For debug
tft.fillScreen(TFT_BLACK);
analogMeter(); // Draw analogue meter
// Draw 6 linear meters
byte d = 40;
plotLinear("A0", 0, 160);
plotLinear("A1", 1 * d, 160);
plotLinear("A2", 2 * d, 160);
plotLinear("A3", 3 * d, 160);
plotLinear("A4", 4 * d, 160);
plotLinear("A5", 5 * d, 160);
updateTime = millis(); // Next update time
}
void loop() {
if (updateTime <= millis()) {
updateTime = millis() + LOOP_PERIOD;
d += 4; if (d >= 360) d = 0;
//value[0] = map(analogRead(A0), 0, 1023, 0, 100); // Test with value form Analogue 0
// Create a Sine wave for testing
value[0] = 50 + 50 * sin((d + 0) * 0.0174532925);
value[1] = 50 + 50 * sin((d + 60) * 0.0174532925);
value[2] = 50 + 50 * sin((d + 120) * 0.0174532925);
value[3] = 50 + 50 * sin((d + 180) * 0.0174532925);
value[4] = 50 + 50 * sin((d + 240) * 0.0174532925);
value[5] = 50 + 50 * sin((d + 300) * 0.0174532925);
//unsigned long t = millis();
plotPointer();
plotNeedle(value[0], 0);
//Serial.println(millis()-t); // Print time taken for meter update
}
}
// #########################################################################
// Draw the analogue meter on the screen
// #########################################################################
void analogMeter()
{
// Meter outline
tft.fillRect(0, 0, 239, 126, TFT_GREY);
tft.fillRect(5, 3, 230, 119, TFT_WHITE);
tft.setTextColor(TFT_BLACK); // Text colour
// Draw ticks every 5 degrees from -50 to +50 degrees (100 deg. FSD swing)
for (int i = -50; i < 51; i += 5) {
// Long scale tick length
int tl = 15;
// Coordinates of tick to draw
float sx = cos((i - 90) * 0.0174532925);
float sy = sin((i - 90) * 0.0174532925);
uint16_t x0 = sx * (100 + tl) + 120;
uint16_t y0 = sy * (100 + tl) + 140;
uint16_t x1 = sx * 100 + 120;
uint16_t y1 = sy * 100 + 140;
// Coordinates of next tick for zone fill
float sx2 = cos((i + 5 - 90) * 0.0174532925);
float sy2 = sin((i + 5 - 90) * 0.0174532925);
int x2 = sx2 * (100 + tl) + 120;
int y2 = sy2 * (100 + tl) + 140;
int x3 = sx2 * 100 + 120;
int y3 = sy2 * 100 + 140;
// Yellow zone limits
//if (i >= -50 && i < 0) {
// tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_YELLOW);
// tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_YELLOW);
//}
// Green zone limits
if (i >= 0 && i < 25) {
tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_GREEN);
tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_GREEN);
}
// Orange zone limits
if (i >= 25 && i < 50) {
tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_ORANGE);
tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_ORANGE);
}
// Short scale tick length
if (i % 25 != 0) tl = 8;
// Recalculate coords incase tick lenght changed
x0 = sx * (100 + tl) + 120;
y0 = sy * (100 + tl) + 140;
x1 = sx * 100 + 120;
y1 = sy * 100 + 140;
// Draw tick
tft.drawLine(x0, y0, x1, y1, TFT_BLACK);
// Check if labels should be drawn, with position tweaks
if (i % 25 == 0) {
// Calculate label positions
x0 = sx * (100 + tl + 10) + 120;
y0 = sy * (100 + tl + 10) + 140;
switch (i / 25) {
case -2: tft.drawCentreString("0", x0, y0 - 12, 2); break;
case -1: tft.drawCentreString("25", x0, y0 - 9, 2); break;
case 0: tft.drawCentreString("50", x0, y0 - 6, 2); break;
case 1: tft.drawCentreString("75", x0, y0 - 9, 2); break;
case 2: tft.drawCentreString("100", x0, y0 - 12, 2); break;
}
}
// Now draw the arc of the scale
sx = cos((i + 5 - 90) * 0.0174532925);
sy = sin((i + 5 - 90) * 0.0174532925);
x0 = sx * 100 + 120;
y0 = sy * 100 + 140;
// Draw scale arc, don't draw the last part
if (i < 50) tft.drawLine(x0, y0, x1, y1, TFT_BLACK);
}
tft.drawString("%RH", 5 + 230 - 40, 119 - 20, 2); // Units at bottom right
tft.drawCentreString("%RH", 120, 70, 4); // Comment out to avoid font 4
tft.drawRect(5, 3, 230, 119, TFT_BLACK); // Draw bezel line
plotNeedle(0, 0); // Put meter needle at 0
}
// #########################################################################
// Update needle position
// This function is blocking while needle moves, time depends on ms_delay
// 10ms minimises needle flicker if text is drawn within needle sweep area
// Smaller values OK if text not in sweep area, zero for instant movement but
// does not look realistic... (note: 100 increments for full scale deflection)
// #########################################################################
void plotNeedle(int value, byte ms_delay)
{
tft.setTextColor(TFT_BLACK, TFT_WHITE);
char buf[8]; dtostrf(value, 4, 0, buf);
tft.drawRightString(buf, 40, 119 - 20, 2);
if (value < -10) value = -10; // Limit value to emulate needle end stops
if (value > 110) value = 110;
// Move the needle util new value reached
while (!(value == old_analog)) {
if (old_analog < value) old_analog++;
else old_analog--;
if (ms_delay == 0) old_analog = value; // Update immediately id delay is 0
float sdeg = map(old_analog, -10, 110, -150, -30); // Map value to angle
// Calculate tip of needle coords
float sx = cos(sdeg * 0.0174532925);
float sy = sin(sdeg * 0.0174532925);
// Calculate x delta of needle start (does not start at pivot point)
float tx = tan((sdeg + 90) * 0.0174532925);
// Erase old needle image
tft.drawLine(120 + 20 * ltx - 1, 140 - 20, osx - 1, osy, TFT_WHITE);
tft.drawLine(120 + 20 * ltx, 140 - 20, osx, osy, TFT_WHITE);
tft.drawLine(120 + 20 * ltx + 1, 140 - 20, osx + 1, osy, TFT_WHITE);
// Re-plot text under needle
tft.setTextColor(TFT_BLACK);
tft.drawCentreString("%RH", 120, 70, 4); // // Comment out to avoid font 4
// Store new needle end coords for next erase
ltx = tx;
osx = sx * 98 + 120;
osy = sy * 98 + 140;
// Draw the needle in the new postion, magenta makes needle a bit bolder
// draws 3 lines to thicken needle
tft.drawLine(120 + 20 * ltx - 1, 140 - 20, osx - 1, osy, TFT_RED);
tft.drawLine(120 + 20 * ltx, 140 - 20, osx, osy, TFT_MAGENTA);
tft.drawLine(120 + 20 * ltx + 1, 140 - 20, osx + 1, osy, TFT_RED);
// Slow needle down slightly as it approaches new postion
if (abs(old_analog - value) < 10) ms_delay += ms_delay / 5;
// Wait before next update
delay(ms_delay);
}
}
// #########################################################################
// Draw a linear meter on the screen
// #########################################################################
void plotLinear(char *label, int x, int y)
{
int w = 36;
tft.drawRect(x, y, w, 155, TFT_GREY);
tft.fillRect(x + 2, y + 19, w - 3, 155 - 38, TFT_WHITE);
tft.setTextColor(TFT_CYAN, TFT_BLACK);
tft.drawCentreString(label, x + w / 2, y + 2, 2);
for (int i = 0; i < 110; i += 10)
{
tft.drawFastHLine(x + 20, y + 27 + i, 6, TFT_BLACK);
}
for (int i = 0; i < 110; i += 50)
{
tft.drawFastHLine(x + 20, y + 27 + i, 9, TFT_BLACK);
}
tft.fillTriangle(x + 3, y + 127, x + 3 + 16, y + 127, x + 3, y + 127 - 5, TFT_RED);
tft.fillTriangle(x + 3, y + 127, x + 3 + 16, y + 127, x + 3, y + 127 + 5, TFT_RED);
tft.drawCentreString("---", x + w / 2, y + 155 - 18, 2);
}
// #########################################################################
// Adjust 6 linear meter pointer positions
// #########################################################################
void plotPointer(void)
{
int dy = 187;
byte pw = 16;
tft.setTextColor(TFT_GREEN, TFT_BLACK);
// Move the 6 pointers one pixel towards new value
for (int i = 0; i < 6; i++)
{
char buf[8]; dtostrf(value[i], 4, 0, buf);
tft.drawRightString(buf, i * 40 + 36 - 5, 187 - 27 + 155 - 18, 2);
int dx = 3 + 40 * i;
if (value[i] < 0) value[i] = 0; // Limit value to emulate needle end stops
if (value[i] > 100) value[i] = 100;
while (!(value[i] == old_value[i])) {
dy = 187 + 100 - old_value[i];
if (old_value[i] > value[i])
{
tft.drawLine(dx, dy - 5, dx + pw, dy, TFT_WHITE);
old_value[i]--;
tft.drawLine(dx, dy + 6, dx + pw, dy + 1, TFT_RED);
}
else
{
tft.drawLine(dx, dy + 5, dx + pw, dy, TFT_WHITE);
old_value[i]++;
tft.drawLine(dx, dy - 6, dx + pw, dy - 1, TFT_RED);
}
}
}
}

This libraries is compiled for the ESP8266 by default. So I need to modify its its User_Setup.h library header file in the TFT_eSPI library folder as follow.

#define ILI9341_2_DRIVER // Alternative ILI9341 driver, see https://github.com/Bodmer/TFT_eSPI/issues/1172

#define TFT_INVERSION_OFF

// For NodeMCU - use pin numbers in the form PIN_Dx where Dx is the NodeMCU pin designation
#define TFT_MISO PIN_D6 // Automatically assigned with ESP8266 if not defined
#define TFT_MOSI PIN_D7 // Automatically assigned with ESP8266 if not defined
#define TFT_SCLK PIN_D5 // Automatically assigned with ESP8266 if not defined

#define TFT_CS PIN_D8 // Chip select control pin D8
#define TFT_DC PIN_D3 // Data Command control pin
#define TFT_RST PIN_D4 // Reset pin (could connect to NodeMCU RST, see next line)
//#define TFT_RST -1 // Set TFT_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V

I need to un-commend other unused definitions.Then I need to save this file.

There are many examples in the TFT_eSPI library. Here I tested some demo programs.

Tuesday, July 5, 2022

A Simple Two-Wire LCD Programming With Arduino Uno

In this example, I use PCF8574T module that designed for character LCD interfacing. We can solder this module directly with the LCD. However I put either PCF8574T module and the LCD on a single breadboard.

Running program

The connection between the Arduino Uno and the two-wire display module uses only two communication wires, and two power supply pins.

GND
+5V (VDD)
SCL connects to Arduino pin A5
SDA connects to Arduino pin A4

It need the LiquidCrystal_I2C.h file that we need to install it. The program will show a simple text display with a little delay between each characters.

//Two-Wire Library
#include <Wire.h>
#include <LiquidCrystal_I2C.h>
 
//LCD Setting
LiquidCrystal_I2C lcd(0x27,16,2);
 
void setup(){
  //Initialize the LCD
  lcd.init();
  //Turn on the back light
  lcd.backlight();
  //Blink the cursor
  lcd.blink();
 
  lcdShow("AKI Technical");
  lcd.setCursor(0,1);
  lcdShow("YouTube Channel");
}
 
void lcdShow(char *txt){
  while(*txt){
    lcd.print(*txt++);
    delay(500);
  }
}
 
void loop(){
 
}

Click here to download its source file.

We can use the ATMega32 to control a 3-Wire SPI LCD module (SN74HC595N chip).

Wednesday, March 3, 2021

Reading the temperature from DS18B20 one-wire digital thermometer

Overview Of DS18B20

DS18B20 is a digital interface temperature sensor from Maxim Integrated. It has only one wire digital data input output, with two additional supply voltage pins. The temperature conversion from this device ranges from -55 degree Celsius to +125 degree Celsius.

Digital temperature resolution is select-able between 9 to 12-bit. Within these 12-bit digital data, it consists of signed value, decimal temperature value and a 4-bit fraction numbers.

Reading the temperature from DS18B20 one-wire digital thermometer

A temperature reading from DS18B20 strobe-type.

Using only one wire digital data line, we can use multiple devices on this single wire. Each device is identified by its serial number and family code.

The conventional package and pin diagram of DS18B20

Within three pins of this device, the data DQ pin is open-drain. Hence it needed to pull up high via a resistor about 4.7 kOhm of resistance.

Typical connection to MCU

In some case, it doesn't require VDD.

Arduino Interfaces To DS18B20 With OneWire Library

Using the OneWire library developed by an author on Github, reading the device ID and temperature from this device family save a lot of time.

Installed library for OneWire

This library allow us to search for ROM. ROM identifies the devices connect on one wire bus. So we can use as much as one wire devices on a single line.

There are many function that I don't list them here. The example programs come this device could explain a lot about the overall processes.

In this example, I modified the device search and temperature reading to display their information on a SPI character LCD I made.

Schematic Diagram For This Example

Arduino code lists below.

#include <OneWire.h>
#include <ShiftedLCD.h>
#include <SPI.h>

//OneWire Object Connect To Pin 2
OneWire ds(2);

//Select pin 8 for Enable pin
LiquidCrystal lcd(8);

String dsString="";

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

lcd.begin(16,4);
lcd.clear();

}

void loop(void) {
byte i;
byte present = 0;
byte type_s;
byte data[12];
byte addr[8];
float celsius, fahrenheit;

if ( !ds.search(addr)) {
    ds.reset_search();
    delay(250);
    return;
}

if (OneWire::crc8(addr, 7) != addr[7]) {
      return;
}

// the first ROM byte indicates which chip
switch (addr[0]) {
    case 0x10:

      type_s = 1;
      dsString="DS18S20";
      break;
    case 0x28:

      dsString="DS18B20";
      type_s = 0;
      break;
    case 0x22:

      dsString="DS1820";
      type_s = 0;
      break;
    default:

      dsString="N/A";
      return;
}

lcd.setCursor(0,0);
lcd.print("Sensor: "+dsString);

ds.reset();
ds.select(addr);
ds.write(0x44, 1);        // start conversion, with parasite power on at the end

delay(1000);     // maybe 750ms is enough, maybe not
// we might do a ds.depower() here, but the reset will take care of it.

present = ds.reset();
ds.select(addr);
ds.write(0xBE);         // Read Scratchpad

// Convert the data to actual temperature
// because the result is a 16 bit signed integer, it should
// be stored to an "int16_t" type, which is always 16 bits
// even when compiled on a 32 bit processor.
int16_t raw = (data[1] << 8) | data[0];
if (type_s) {
    raw = raw << 3; // 9 bit resolution default
    if (data[7] == 0x10) {
      // "count remain" gives full 12 bit resolution
      raw = (raw & 0xFFF0) + 12 - data[6];
    }
} else {
    byte cfg = (data[4] & 0x60);
    // at lower res, the low bits are undefined, so let's zero them
    if (cfg == 0x00) raw = raw & ~7; // 9 bit resolution, 93.75 ms
    else if (cfg == 0x20) raw = raw & ~3; // 10 bit res, 187.5 ms
    else if (cfg == 0x40) raw = raw & ~1; // 11 bit res, 375 ms
    //// default is 12 bit resolution, 750 ms conversion time
}
celsius = (float)raw / 16.0;
fahrenheit = celsius * 1.8 + 32.0;

lcd.setCursor(0,1);
lcd.print("Temperature:");
lcd.setCursor(-4,2);
//lcd.print(String(celsius)+char(223)+"C" +" " + String(fahrenheit)+char(223)+"C");
lcd.print(String(celsius)+char(223)+"C");
lcd.setCursor(-4,3);
lcd.print(String(fahrenheit)+char(223)+"F");
delay(1000);
}

Arduino sketch could download here.

Learn Electronics and Embedded System Programming

Pages

728x90

Tuesday, January 20, 2026

ESP32 ILI9341 2.8 inches TFT Example

Overview

ESP32 Arduino Programming and Interfacing

Tuesday, July 5, 2022

A Simple Two-Wire LCD Programming With Arduino Uno

Wednesday, March 3, 2021

Reading the temperature from DS18B20 one-wire digital thermometer

Overview Of DS18B20

Arduino Interfaces To DS18B20 With OneWire Library

Search This Blog

Labels

Pages

About Me

Blog Archive

Popular Posts