ESP32-S3 Touchscreen UI with DS18B20 & Relay Using SquareLine Studio

Last Updated on August 6, 2025 by Engr. Shahzada Fahad

Introduction:

ESP32-S3 Touchscreen UI with DS18B20 & Relay Using SquareLine Studio- This is my third article on the MaTouch ESP32-S3 AMOLED with a 1.8” FT3168 touch display.

Personally, I like this because it comes with a GPIO Connector Ribbon Cable; this flat ribbon cable breaks out the GPIO pins, making it incredibly easy to connect sensors, modules, or any custom circuits. It’s a great feature that opens up a lot of options for prototyping.

We can use this in bikes and cars for monitoring various sensors, and not just that; it can also be used to start and stop the engine, and control doors, AC, lights, and more.

You can also use it for home automation. The possibilities are endless; it’s hard to list them all!

To demonstrate what I mean, I am going to build a temperature monitoring system using the DS18B20 waterproof one-wire digital temperature sensor. Of course, I won’t overcomplicate it, so that you can easily build it yourself. We will display the temperature both on a label and on an arc.

If you want to create a more complex GUI, I highly recommend reading my 2^nd article “Video also available on my YouTube Channel “Electronic Clinic”, because in that article and video I showed how to create an analog watch using custom images.

You can design your complete UI in Adobe Photoshop or Figma, export it as images, and then use those images in SquareLine Studio as part of your UI.

Anyway, on Screen 2, I have also added a switch that lets me turn an LED ON or OFF. Instead of an LED, you could use a relay to control higher AC or DC loads.

Note: I highly recommend to download the complete Template folder from my Patreon page. Because there are so many other files, libraries, example codes, etc.

 So, without any further delay let’s get started!!!

Check out our latest article on the BLE Call System for Motorcycles using ESP32-S3 and touch display — a smart, hands-free solution designed for safer rides!

Amazon Links:

MaTouch ESP32-S3 AMOLED

Other Tools and Components:

ESP32 WiFi + Bluetooth Module (Recommended)

Arduino Nano USB C type (Recommended)

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!

Before we start the interfacing, make sure to download this Pinout diagram; it will save you a lot of time and confusion later.

Circuit Diagram:

Connect the voltage and ground wires of the DS18b20 to the VBUS and Ground pins on the GPIO Connector Ribbon Cable. Connect the Data wire; which is usually the yellow wire to the GPIO16.

Connect the Cathode leg of the 2.5V LED to the GPIO21. Connect the Anode Leg to the VBUS pin through a 330-ohm resistor.

Template Code:

So guys, here is my template folder. I start every project using this template folder. Inside it, I have also created a folder specifically for SquareLine Studio project files, and I have made a separate “ui files” folder to save the generated UI files. These are not empty folders.

If I open the “SquareLine Studio project files” folder, you can see I have already saved a project in it.

In a moment, when we import this project into SquareLine Studio, you will understand it better. Basically, this is a template project, which I use as my starting point.

In Part 2, I used the same template project to build digital and analog watches. You all should definitely watch Part 2, because after watching it, you will also learn how to create custom fonts, and how to animate images.

Likewise, in the “ui files” folder, you can see there are many files. These are the files that we previously generated in SquareLine Studio. Whenever we generate new UI files, we copy and paste them alongside the Arduino .ino file. as you can see in the right-side image.

You can see there are many files along with the Arduino .ino file, these files are pasted here from the ui files folder. If you open the Arduino .ino file “lvgl_template.ino” all the .c and .h files will be automatically loaded.

Complete Template Code:

Anyway, this is our main template code, and we will be modifying this code to display the temperature and control the LED. So let’s quickly go ahead and import the template project into SquareLine Studio.

SquareLine Studio Project:

In part1, I have explained three different methods on how to start a new SquareLine studio project including how to import a project as well. You can go ahead and read that article or watch that video. Let me quickly share the steps with you.

1. While SquareLine Studio is open, click on the IMPORT PROJECT.
2. Navigate to my lvgl_template folder, and inside that folder, go to the SquareLine Studio project files folder.
3. Select the SquareLine_Project file and click the Open button.

So this is our basic template project, and we are going to modify it to design our custom UI.

Before starting the design, we need to set the folder paths; one for the SquareLine Studio project files, and another for the UI files. So let’s go ahead and do that. I have already explained all of this in detail in Part 1 and Part 2.

Simply go to the File Menu and then to Project settings.

Under the FILE EXPORT you can see “Project Export Root” and UI Files Export Path.

We have already created folders for the SquareLine studio project files and for the ui files folder, so simply go ahead and select those folders. Write lvgl.h in the LVGL Include Path and don’t forget to check the “Flat export (export all files to one folder). Finally, you can click on the APPLY CHANGES button.

Once the project settings are done, we can begin the design process. First, let’s delete that label electronic clinic on the screen1.

Next, we need to add another screen where we will control a load using a switch. On Screen 1, we will display the temperature. So let’s quickly add Screen 2.

First of all, we will add screen change events, so we can switch between the two screens. For that;

• Select Screen1 and then on the inspector tab scroll down and click on “Add Event.”
• Set the Trigger Type to “Gesture Left.”
• Set the Action Type to “Change Screen.”
• Click the “Add” button.
• Select Screen2.

Now select Screen2 and follow the same steps. This time, choose “Gesture Right” as the trigger and set Screen1 as the target.

Now, select screen1 and from the widgets tab on the left side, select Arc to add it to the Screen1.

Then on the Inspector Tab go the the Flags and uncheck the “Clikable” box.

Next, we need to set the minimum and maximum values for the temperature sensor. I am entering these values based on the sensor’s datasheet.

Then, let’s go to the arc’s styling section and change the color and width. You can spend more time here to make it look exactly how you want.

But I will keep it simple for now, just to save time.

I think it looks good enough.

Now, let’s also add a label to display the temperature in numbers. If you have seen my previous videos, you already know exactly how to add labels.

Our label is now ready. That’s all the work we needed to do on Screen1.

Now let’s move on to Screen 2.

Select Screen 2, and from the widgets tab, select a Switch.

We can tweak the styling of this switch as well, but it already looks nice; so let’s not waste any time on that.

What I want is: when I turn this switch ON or OFF, it should call a function to control the LED; either turning it ON or OFF.

To do that, while the switch is selected, scroll down and click the ADD EVENT button.

• Set the Trigger type to Released.
• Set the Action type to CALL FUNCTION.
• Click the ADD button.
• Check the Box.
• And write the Function name. I named it Load1Fun.

Both the screens are ready.

Next, you need to save the project; after this, go to the Export menu and click on Export UI Files.

Now, navigate to the UI Files folder, copy all the exported files, and paste them into the same folder where your main Arduino .ino file is located. Then go ahead and open the Arduino main .ino file. It will automatically load all the files.

On Screen 2, we have only added a switch; that’s why you are only seeing the switch here.

Now, if you go to the ui_events.h file, you can check the functions. you should see the Load1Fun function assigned to the switch in SquareLine Studio.

In the same way, you can explore the other files too; doing so will really help deepen your understanding of how everything works behind the scenes.

Complete Code:

Code Explanation:

I have also added this header file for the DS18B20 one-wire waterproof digital temperature sensor.

namespace pin:

Contains pin assignments.

one_wire_bus = 16 sets GPIO16 for the Dallas 1-Wire temperature sensor.

namespace sensor:

Stores sensor-related data.

MyTemp holds the latest temperature reading as a float.

Initializes the OneWire communication protocol on GPIO16. This is required to communicate with 1-Wire devices like the DS18B20 temperature sensor.

Creates a DallasTemperature object and links it to the oneWire bus. This allows higher-level functions like reading temperature from the sensor easily.

Set GPIO 21 as output for controlling the load, in my case LED

Ensure it starts OFF.

These lines handle the automatic temperature reading and syncing the state of a UI switch with a physical GPIO pin.

This line creates an LVGL timer that calls the TemperatureTimerCallback function every 1000 milliseconds (1 second) to read the temperature from the sensor and update the display.

This line registers an event callback Load1Fun to the UI switch ui_SwitchLoad so that whenever the switch state is changed by the user, the function is triggered; typically to control a connected load like a relay or LED.

These lines check the current state of GPIO21 (e.g., connected to a physical load). If GPIO21 is HIGH, the switch on the screen is updated to the checked (on) state. If it’s LOW, the switch is visually cleared (unchecked). This ensures the GUI reflects the actual hardware state during setup or sync.

The TemperatureTimerCallback function is triggered every second by an LVGL timer. It initiates a temperature reading from the Dallas temperature sensor by calling requestTemperatures() and then retrieves the temperature using getTempCByIndex(0). The value is stored in sensor::MyTemp. If the sensor is disconnected, the function skips updating the display. Otherwise, it formats the temperature into a string and updates a label (ui_lblTemperature) with the new temperature reading. Additionally, the temperature is set as the value of a UI arc (ui_Arc1), providing a graphical representation of the current temperature. This function ensures the user interface is refreshed with accurate, real-time temperature data.

The Load1Fun function acts as an event callback for a UI switch (ui_SwitchLoad). It checks whether the switch is in the checked (ON) state using lv_obj_has_state. If it is ON, it sets GPIO21 to LOW, and if it is OFF, it sets GPIO21 to HIGH; assuming an active-low configuration where LOW turns the load ON. This provides control over an external device like a relay or LED directly from the touchscreen interface. A message indicating the load status is also printed to the Serial Monitor for debugging or logging purposes.

Now, let’s go ahead and upload this program.

Practical Demonstration:

When I run the project, I see the temperature being displayed clearly both as a label and visually on the arc gauge.

During the UI design in SquareLine Studio, I made sure to uncheck the “clickable” flag for the arc, so now when I touch or swipe on the arc, it doesn’t rotate or respond; this is exactly what I wanted since the arc is just for displaying the temperature, not for interaction.

When I swipe over to screen2, there’s a switch that I can toggle to control a load. Right now, it’s turning an LED connected to GPIO21 on and off.

The switch works perfectly; when I turn it on, the LED lights up, and when I turn it off, the LED goes out.

Of course, instead of the LED, I could also connect a relay module to GPIO21 and use it to control an AC or DC load like a fan, lamp, or any other load. The whole interface feels responsive and functional.

So, that’s all for now.

Support me on Patreon for more videos and articles.

Watch Video Tutorial: