CNX Software – Embedded Systems News
Reviews, tutorials and the latest news about embedded systems, IoT, open-source hardware, SBC's, microcontrollers, processors, and more Tft Display Module
The product we are reviewing today is the “MaTouch ESP32-S3 Rotary IPS Display with Touch 2.1” ST7701″ from Makerfabs which offers an alternative to the MaTouch_ESP32-S3 4-inch Display Demo Kit that we reviewed a few months ago.
Just like the earlier model, the new kit is equipped with an ESP32-S3-WROOM-1-N16R8, featuring 16MB of flash memory and 8MB of PSRAM. This device supports both Wi-Fi and Bluetooth 5.0 wireless communication and offers connectivity options through I2C and UART ports for interfacing with external devices. The display features a round IPS panel with a resolution of 480×480 pixels, capacitive touch capability, and LVGL library support. Additionally, it includes a mechanical rotary encoder and supports press operations.
The display is packaged within a cardboard box and includes the following items:
This MaTouch ESP32-S3 Rotary IPS Display kit comes with pre-installed demo firmware. You can power the module using a 5V USB Type-C connection. The default screen displays values from the rotary encoder, the status of the push switch, and the (x, y) coordinates of the touch point. When you rotate the rotary encoder, the background color alternates between 5 colors, namely white, blue, green, red, and green.
If you press the button, the screen will be switched to the graphic modes as shown below. There are 3 examples of graphic modes and you can switch between them by touching the center of the screen. In this mode, a gauge is shown and you can rotate the rotary encoder to adjust the position of the indicator, or you can touch and drag your finger to change the value too.
I’m going to use Arduino IDE for the demonstrations. So we’ll need to install support for the board (through the board manager) and install all of the required libraries. I summarize them as follows.
In the following tests, I will be using Arduino IDE 1.8.13 to demonstrate the device through 4 examples. I’ll begin with a simple demonstration, focusing on the rotary encoder and push switch. Then, we’ll explore changing the background color by touching the screen. Next, I’ll demonstrate how to change the background bitmap. Finally, I’ll read data from an accelerometer via the I2C port to adjust the background color.
In our first example, we’ve extended the default firmware page. Here, we use the push switch to switch the background color between red, green, and blue colors. Rotating the rotary encoder allows us to adjust the intensity of the selected color, and we also take into account the rotation direction. If the encoder is rotated counterclockwise (CCW), the intensity decreases, while it increases if rotated in the opposite direction (CW).
To achieve this, we’ve used the source code from /example/fw_test and introduced several constants and variables for the above purposes.
We then modified the update_color_values() function to compare the current rotary encoder value with the previous one in order to determine the direction of the rotation. After that, we apply the constant value, defined in MY_COLOR_ADJUST_STEP, to adjust the intensity of the selected color value according to the rotation direction.
Within the main loop, we first check if the variable move_flag is set. If it is, we call the above update_color_values() function to update our color values. Then, the updated RGB color values are packed into a single uint16_t data type by using the color565 method of the Arduino_ST7701_RGBPanel class. We subsequently pass the converted value to the fillScreen method to change the background color. Once the script is compiled and uploaded, you’ll see a screen similar to what is demonstrated in the following video.
Our next test is inspired by the HSV color model where the color value for each position on the screen is determined by its (x, y) coordinates relative to the center of the screen, as shown in the following figure. For this example, we are keeping the saturation (S) and value (V) fixed at their maximum values and will only change the hue (H).
To calculate the RGB values, we first shift the origin of the coordinate system to the center of the screen. We then calculate the angle t in the above figure using the formula: t = atan2(dy, dx). With this angle, we determine the RGB color values through the following calculation where t2 represents the separation angle between each color value, which is equal to 120 degrees or (2*pi)/3 radians.
Additionally, we calculate the distance from the touch point to the center of the screen. This distance is then used to adjust the brightness of the background color.
After uploading the script, you’ll observe something similar to the video below.
Next, we will use the Light and Versatile Graphics Library (LVGL). In this test, we will use the source code from the /example/fw_test_v2 and attempt to change the background image with our custom bitmap.
So, the first step is to create a 480×480 bitmap and export it as a 32-bit PNG with the filename “1.png“. Then, we convert this PNG image to C-style data using the SquareLine Studio software. In the software, we set the bit depth to 16-bit, as shown in the figure below. After setting the output path and exporting the project, we will obtain a source file named “ui_img_1_png.c“. This is our final custom bitmap that can be used to replace the original file in the src/images folder.
As an additional option, you can also experiment with adjusting the colors of other UI elements manually within the source file ui_Screen3.c. The figure below provides an example of the modified ui_Screen3.c source file where we have made alterations to the background color, opacity, and the color of the indicator.
In our last demonstration, we will test communication with another device using the I2C protocol. For this test, we connect the MPU-6050 module to our module using the 1.25mm 4P connector as shown below.
In summary, the “MaTouch ESP32-S3 Rotary IPS Display with Touch 2.1” ST7701” is easy to use and features a vibrant color display. The manufacturer provides clear installation instructions for tool installations. I would like to express my sincere appreciation to MakerFabs for providing the device used in this review. Lastly, if you have an interest in this module, you can make a purchase through MakerFabs’ online store, where it is currently available for $44.80.
My main research areas are digital image/audio processing, digital photogrammetry, AI, IoT, and UAV. I am open to other subjects as well.
Support CNX Software! Donate via cryptocurrencies or become a Patron on Patreon
Looks good. Is there any control over the stepper motor response, like adding custom detents at a single or multiple points?
I would LOVE to see one of these with 3 inch screen and a 3 3/8 inch body so it would fit nicely in some gauge clusters!
Another great article/review, an interesting device for sure.
Can you please post the full code examples? Modified examples do not appear to be correlated with the examples from the github repository or have at least changed significantly since this article was created.
Round Lcd Display Change Ad Consent Do not sell my data