1.28" Screen With ADC

Hi everyone, after learning that many simple sensors, such as temperature sensor and weight sensor, can convert the measurement results into voltage output, I want to make a thermometer and a weight scale using some sensors and ESP32 board. In addition, for easier viewing of results, I want to display the results on the screen.

So, today, I will share how did I display the voltage change on the screen.

Supplies

• MaTouch_ESP32-S3 Round SPI TFT with Touch 1.28"

The 1.28" screen have 2 standard GPIO and I2C bus, which colud be used as ADC.

• Mabee_Slide Potentiometer

When the lever moved from one side to the other, its output voltage ranges between 0 V to the VCC you applied.

• Software support: Arduino, SquareLine

Step 1: Hardware

• Connect Potentiometer to J1 of 1.28" screen.

The VCC to +3.3V

The GND to GND

The OUT to IO17

Step 2: SquareLine Design

• Create a new product

Choose the Arduino and enter in parameters. According to the features of MaTouch_ESP32-S3 Round SPI TFT with Touch 1.28", the resolution is 240*240, the shape is a circle, and the color depth is 16-bit.

• Design the screen

Add the images to assets, and then it allows you to select them and widget components to design the scenes. After, clicking the widget of the list on the Hierarchy panel, you can modify the parameters of the select widget on the Inspector panel, all is determined by your preference.

• The more you can refer to here:Basic usage of Squareline with MaTouch 1.28" - Makerfabs Wiki

Step 3: Firmware

• The "TFT_eSPI" library was created created when Squareline exports the project file, we need to modify the "Users_Setup.h" file of it, because every development board has different screen drivers IC, The ESP32-S3 1.28" use the GC9A01 as drivers IC, So define this driver.

Define GC9A01_DRIVER, and define the pixel width and height in portrait orientation for GC9A01

#define GC9A01_DRIVER
#define TFT_WIDTH  240
#define TFT_HEIGHT 240 // GC9A01 240 x 240

Then set the drive pin according to the schematic diagram

#define TFT_MOSI 13 // In some display driver board, it might be written as "SDA" and so on.
#define TFT_SCLK 14
#define TFT_CS   15  // Chip select control pin
#define TFT_DC   21  // Data Command control pin
#define TFT_RST  11  // Reset pin (could connect to Arduino RESET pin)
#define TFT_BL   45  // LED back-light

In Section 3. Define the fonts that are to be used here. We chose a variety of fonts to prevent them from being used without initializing them

#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts


// Comment out the #define below to stop the SPIFFS filing system and smooth font code being loaded
// this will save ~20kbytes of FLASH
#define SMOOTH_FONT

• The ui.ino, which also created when Squareline exports the project file, need to be modified to let arc value change with input voltage of ADC pin.

Define the TFT_BLK, touch and ADC pins.

#define TFT_BLK 45
#define TFT_RES 11


#define TFT_CS 15
#define TFT_MOSI 13
#define TFT_MISO 12
#define TFT_SCLK 14
#define TFT_DC 21


#define TOUCH_INT 40
#define TOUCH_SDA 38
#define TOUCH_SCL 39
#define TOUCH_RST 16


#define ADC_INPUT_1 17

The touch panel driver is CST816S, so it need to call the touch function of CST816S.

void my_touchpad_read(lv_indev_drv_t *indev_driver, lv_indev_data_t *data)
{
    uint16_t touchX = 0, touchY = 0;


    bool touched = false; // tft.getTouch( &touchX, &touchY, 600 );


    if (!touch.available())
    {
        data->state = LV_INDEV_STATE_REL;
    }
    else
    {
        data->state = LV_INDEV_STATE_PR;


        /*Set the coordinates*/
        touchX = touch.data.x;
        touchY = touch.data.y;


        data->point.x = touchX;
        data->point.y = touchY;


        USBSerial.print("Data x ");
        USBSerial.println(touchX);


        USBSerial.print("Data y ");
        USBSerial.println(touchY);
    }
}

initial the TFT_BLK, touch and ADC pins

pinMode(TFT_BLK, OUTPUT);
   digitalWrite(TFT_BLK, 1);
   pinMode(ADC_INPUT_1, INPUT);

   touch.begin();

Modify the landscape orientation. The default value is 3. You need to change it to 0

tft.begin();        /* TFT init */
   tft.setRotation(0); /* Landscape orientation, flipped */

Get the value of ADC, let the value of ui-Arc1/2/3 be changed with the output voltage of Mabee_Slide Potentiometer

int adc = analogRead(ADC_INPUT_1);
   long int adc_percent = adc * 100 / 4096;
   lv_arc_set_value(ui_Arc1, (int)adc_percent);
   lv_arc_set_value(ui_Arc2, (int)adc_percent);
   lv_arc_set_value(ui_Arc3, (int)adc_percent);

The raw code.

Step 4: Result

The Arc value changed when I move the lever of Mabee_Slide Potentiometer, this is a good sign, I think I will get my thermometer and my weight scale in the near future.

However, except for thermometer and weight scale, I think the 1.28 inch screen with ADC can be used for more interesting creation. So, do you have any better ideas?