ESP32 Timer Switch Relay with Touch Display & Encoder | MaTouch 1.28 Review

Last Updated on September 26, 2025 by Engr. Shahzada Fahad

Description:

Build a powerful ESP32 Timer Switch Relay using the MaTouch 1.28 board. This tutorial shows you how to control 8 channels with a touch display and rotary encoder. Learn to create a custom UI with SquareLine Studio and LVGL for your next home automation project.

With this development board, you can manage everything just through the display. Using the encoder, you can easily select any load you want… and with a single switch, turn it ON or OFF.

But that’s not all. If you want any load to turn ON or OFF at a specific time, you can do that too.

The addition of the encoder is simply brilliant. With it, you can not only select loads, but also adjust values, scroll through menu items, and much more. There are endless possibilities with this setup.

Introduction:

Another great product from Makerfabs; the MaTouch 1.28” Toolset Timer Switch Relay.

The moment I saw this board, I was really impressed, and instantly a lot of project ideas started popping into my head.

You have probably already noticed; it’s made up of two parts. The top part is completely detachable, and that’s exactly what makes this board special.

All the essential components are already on this board, which means I can easily use it in other projects too; like for sensor monitoring, or even as a remote controller. In fact, I can use it in any project where I’d normally use an ESP32.

I have got some really fun projects planned with this board, so make sure to subscribe if you don’t want to miss this amazing series of videos and articles!

This is the Matouch 1.28” capacitive touch display with a built-in encoder and pushbutton.

Normally, you can control everything through the on-screen switches in the UI. But let’s say you are using it on a bike, or in any situation where you are wearing gloves. In that case, turning a switch ON/OFF through touch becomes difficult. That’s where the physical button feature really shines.

The same goes for the encoder.

With gloves on, controlling sliders or adjusting values on a touchscreen isn’t practical. But with the encoder, you can easily scroll through options or fine-tune values, no matter the situation.

I have prepared some simple examples for you, so you will get a clear idea of how to design the UI for this display, and how to integrate both the encoder and button in your projects. Trust me, once you see this in action, you will realize how powerful and versatile this little display really is.

On the bottom side, you will find the most versatile part of this board; my favorite; the ESP32-S3 WiFi + Bluetooth module.

Alongside it, there’s a vibration motor, USB-C port for uploading and debugging, a battery holder for the RTC, boot and reset buttons, and plenty of headers for connecting relays, sensors, and other breakout boards.

The only thing missing here is proper pin labeling, which would have made prototyping much easier. But since this is an open-source project, you do get the schematic and PCB design files, so you can always check and confirm every connection yourself.

This is an 8-channel relay board with optocoupler isolation. This means safety first; your low-voltage controller is completely protected from the high-voltage side.

This board has its own regulated power supply, so with just a simple 12V DC adaptor, you can safely power both the relay board and your controller board. No messy wiring, no complicated setups; just plug it in and take control.        

This Timer Switch comes preloaded with Makerfabs own firmware interface. So let’s first power it up and check out how it looks with the company firmware.

Now, don’t get confused by the interface you see here. Because in this article, I will also be sharing some basic examples that will give you a complete idea of how to design your own interface in Squareline Studio, and how to use both the encoder and the push button.

Anyway, here you can easily set the time using the encoder along with the on-screen buttons.

And once you have set the time, just press the Set button; boom! It takes you straight to another screen.

First, we used the encoder to set the time, and now we can use the same encoder to select which relay we want to control. After that, we can use this switch to turn the selected relay ON or OFF.

When we turn the relay ON or OFF, the indicator LED on the relay board also turns ON or OFF; giving us a clear visual confirmation.

So far, this was the manual way of controlling all eight relays. But if you want to automatically control all eight relays, or just specific ones, here’s how: first, select the relay you want, and then press the Timer Switch button.

You can set the exact time for the relay to turn ON; and the exact time for it to turn OFF.

Let me quickly demonstrate this for you. I’m going to control Relay 4 automatically.

And there you go; amazing! The relay just turned ON.

Now this is the future of home automation; and the best part is, now everyone can enjoy futuristic home automation because this board is quite affordable.

And then it turned off automatically.

It supports a maximum of 5 groups of timers, which means you can set up to 5 different timings for each relay. For example, if you want to control a room heater at different times of the day, you can schedule it; let’s say from 6 AM to 8 AM, then again from 1 PM to 2 PM, and later from 5 PM to 7 PM, and so on.

This feature is really handy if you want to turn one or multiple loads on and off at different times automatically.

So, if your only goal is to control loads, then this board is ready to use straight out of the box.

But if you want to add your own custom features, redesign its UI, control it via a Bluetooth app or through the Blynk application, or even use it as a portable receiver or transmitter, then make sure you keep reading this article. Because we will be using some features right now, and some we will cover in the upcoming videos and articles.

First, you need to go to Makerfabs official GitHub repository and download the complete zip folder. Because in that folder, you will find everything related to this board.

Now, if you look at the company’s firmware code, any beginner might get scared just by seeing it. That’s why before diving into company’s firmware code, you should start with the simple examples that I have created for you.

About the Arduino IDE and ESP32:

Before we start, let me quickly share my software setup. Right now, I am using the

• Arduino IDE version 2.3.4
• ESP32 board package version 2.0.11
• LVGL version 8.3.11 and
• ESP32Time library version 2.0.6

All of my recent touch display projects have been done with the same versions, and they have worked smoothly. So, if you want to follow along without running into errors, I recommend using the same setup.

I have created a simple template folder for you. Inside this folder, you will find two more folders.

One is for saving the Squareline Studio project files, and the other; UI Files folder; is where we will store the UI files generated by Squareline Studio.

I have already explained this setup in my previous projects.

Now, let’s move on.

Importing SquareLine Studio Project:

Open Squareline Studio, click on IMPORT PROJECT, and browse to the SquareLine Studio projects folder. Select the project file, then click the Open button.

Next, go to the File menu and open Project Settings.

• Set the Shape to Circle.
• For the Project Export Root, click on Browse and select the same Squareline Studio projects folder.
• For the UI Files Export Path, choose the UI Files folder.
• For the LVGL Include Path, simply type: lvgl.h.
• Make sure to check the option Flat export (exports all files to one folder).

Finally, click the APPLY CHANGES button, and you are all set!

Everything I just explained, I have already covered all of this step by step in my SquareLine Studio–based projects. So, if you want to understand things from the very basics, you should definitely check out my “Getting Started” articles on SquareLine Studio and LVGL.

For testing, I have only added these two screens.

Before building a complicated UI, you should always start with a simple one. This makes troubleshooting much easier. Once everything is working perfectly, then you can move on to your actual design.

After creating a basic UI, the very first step is to save the project.

Next, go to the Export menu and click Export UI Files.

Now, open the UI files folder, copy all the files, and paste them into your Arduino project folder where the main .ino file is located. Finally, go ahead and open the arduino main .ino file. All the UI files will be automatically loaded. I am going to share the main code, but if you need the complete template folder; you can download it from my Patreon page. And let me tell you, I have slightly modified this code to make it easier for you.

Uploading the program into ESP32S3:

Uploading the Program:

To upload the program, here is what you need to do:

First, go to the Tools menu > Board > ESP32, and select ESP32S3 Dev Module.

Go back to the Tools Menu > Port, and choose the correct communication port.

Again to the tools menu > Flash Size, and select 16MB.

Again go to the Tools menu > Partition Scheme and select 16M Flash

And one last time, go to Tools Menu > PSRAM, and select OPI PSRAM.

Once these settings are done, you can simply click the Upload button.

These same settings will be required for all the example programs we will test.

Practical Demonstration:

As you can see, our template project is completely ready.

On Screen 1, we have a button, and on Screen 2, we have a switch.

From now on, whenever I create new projects, I will simply modify this template instead of starting from scratch.

Now, let’s move forward and design a simple UI to control the relays.

Controlling Relays:

After modifying the previous template, I have put together this simple UI.

For a step-by-step walkthrough, you can read my SquareLine Studio getting-started articles. I have attached events to both switches: when I tap Switch 1, it calls relay1onoff() as you can see at the right bottom corner, and when I tap Switch 2, it calls relay2onoff(). Clean and straightforward.

Controlling Relays Code:

You will find all the pin definitions inside the pin_config.h file.

As you can see, Relay 1 and Relay 2 are connected to GPIO 10 and GPIO 6 of the ESP32-S3.

Any functions you create in SquareLine Studio will appear in the ui_events.h file.

I have used the same functions in the main .ino file to control the relays.

You can follow the same approach to control additional relays as well.

In my previous projects, I have also demonstrated how to control and monitor devices at intermediate and advanced levels. Anyway, I have already uploaded this program; now let’s see it in action.

Practical Demonstration:

I have placed one switch on Screen1 and another on Screen2. In the same way, you can add multiple screens and use separate switches on each one; or, if you prefer, you can place multiple switches on a single screen. In fact, you can even control all relays from just one button on a single screen. I will explain this in detail in the final example.

Watch the video tutorial; to see everything in action. You will be able to hear the relays clicking sound and you will also see the onboard indicator LEDs go ON and OFF as I turn ON and turn OFF the switches.

Next, let’s move on to the encoder and display its value directly on the screen.

Reading the Encoder:

I have once again modified the template project, and this time on Screen1, I will be displaying the Date and Time. I have already written several articles on digital and analog watches, so for the basics you can check those out; because repeating the same things again and again can get a bit boring. On Screen2, we will be display the encoder value.

If you need the complete project folder, it’s available on my Patreon page.

ESPS32-S3 Encoder programming:

Practical demonstration:

On Screen1, you can clearly see the exact date and time. In the programming, I have defined variables for this, so you can easily set any custom date and time you like.

And the best part is; you only need to do this once. Since the board already has an RTC with a battery, the date and time won’t reset even if you cut the power. If you want to update the date and time at runtime, I have already written quite a detailed article on this as well.

Now, when I swipe my finger to the left, it takes me to Screen2 where I can monitor the encoder value.

As I rotate the encoder clockwise, the value increments, and when I rotate it counter-clockwise, the value decrements.

Controlling Relays using Encoder and a Button:

To make the design look a little more attractive, I have used this background image, which I designed in Photoshop.

This is just to show you how easily you can improve your UI with a simple background image. As you can see, I am still using the same labels; only now it looks more professional.

Controlling relays using Encoder and a button Program:

In the code, I have already made all the necessary changes. Once you read through it, you will understand the idea.

If you want complete project source codes and resources, you can download them from my Patreon page.

Practical Demonstration:

Even though I am not a graphics designer, just adding this simple background makes the display come alive. If you have good graphics designing skills, you can create even more amazing backgrounds; and yes, you can even animate them. I have already demonstrated this in my analog watch tutorials.

So, let’s go to Screen 2.

By default, you will see Relay1 OFF, because right now it’s OFF. If it were ON, you would see Relay1 ON.

The controller not only reads the relay status, but it also remembers the state.

Let’s go ahead and turn it ON.

Now, the status has changed from OFF to ON.

Next, I check all the relays, and it worked exceptionally well. I was also able to check the status of each and every relay. There was no confusion at all.

6 more projects are coming up next, so don’t forget to subscribe.

So, that’s all for now.

Watch Video Tutorial: