In the world of DIY electronics, finding the right components for your projects is key to bringing your creative ideas to life. Today, I'll be checking out the CrowPanel ESP32 1.28" round display, a unique piece of hardware from Elecrow that stands out due to its compact design and versatile features. This display is packed with functionality that makes it an exciting component for various DIY projects.
Through this article, I aim to explore what this display has to offer and how it can fit into different projects, how to interact with it and how to get started by making a gauge meter, connected to home Assistant via MQTT that will display the measured temperature and humidity from one of my other sensors.
Overview of the CrowPanel ESP32 Display
The CrowPanel ESP32 1.28” circular display is an intriguing tool for any DIY electronics enthusiast. Its standout feature is its completely round IPS display, equipped with capacitive touch functionality. Behind this compelling screen is the heart of the device: the ESP32 microcontroller, which powers the entire operation. This makes it suitable for a variety of projects without requiring separate driving boards or power systems.
Aside from the display itself, this gadget has an array of features neatly packed on its reverse side. There's a USB-C connector, enabling straightforward programming of the ESP32, and a battery management circuit with a connector for attaching a battery. This means you can create standalone projects without worrying about complex wiring setups. It also includes a real-time clock with its own battery backup for keeping time accurately, rotary encoder, a small buzzer, a vibration motor for haptic feedback, and standard boot and reset buttons.
In terms of form, accommodating the device into a project might necessitate some planning. The display is round, but the PCB extends slightly beyond the display edge, which needs to be taken into account when planning an enclosure or mounting it within a particular design.
Initial Impressions and Uses
Upon getting my hands on the CrowPanel ESP32 round display, my initial impressions were quite positive.
When powered on, it greeted me with a neat animation, pre-loaded by Elecrow, and immediately transitioned into a functional watch face. This demonstrates its potential right out of the box as an excellent component for wearable projects or smart gadgets.
These default settings clearly suggest its primary use case for custom smartwatches or wearable devices. By simply adding a wrist strap and enclosure, you could have a functional smartwatch, making it seem quite accessible even for beginners who want to dive into electronic wearables.
Beyond wearables, I could see this being utilized in other project areas. For instance, it could be used in a smart home setup, serving as an information gauge to display real-time data like temperature, humidity, or energy consumption. Enhanced by touch interaction, users could easily switch between different displays, making it practical for applications where real-time feedback is essential. The array of features it offers could be a great starting point for integrating more complex UI-based projects or even fitness and personal health trackers.
The display is particularly well-suited for integration into smart home systems, such as ones with Home Assistant. Its compact size and built-in WiFi make it an ideal candidate for use as a remote display or control panel, showing real-time data like temperature or humidity from your home’s environment. Using MQTT, it can communicate seamlessly with Home Assistant to both receive and send updates, giving you the ability to not just display information but also interact with your smart home devices.
Connecting and Programming the Display
To get started with the CrowPanel ESP32 round display, the first task is to connect it using the USB-C connector. This allows direct access to the ESP32 chip, enabling you to program it through the development environment of your choice. Popular options include the Arduino IDE or PlatformIO. Once connected, the device can be powered via USB, or you can connect a battery if you plan to make it portable.
For programming, you'll need to set up the environment with the necessary board definitions and libraries. These were provided by Elecrow, so you should ensure you have compatible versions for a smooth experience, especially since the most current configurations might not always be supported.
I initially had all of my board definitions and libraries updated to their latest version and I had troubles compiling and running the examples. With the help of Elecrow, I set my ESP32 board definitions to 2.0.10, LovyanGFX library to 1.1.5 and LVGL library to 8.3.0-dev, which compiled nicely and everything was working.
Using available resources and example codes, you can develop applications that fully utilize the display's touch features, integrate with other smart home systems, and provide a foundation for more complex projects.
Lack of IO pins
One notable limitation of the CrowPanel display is the absence of exposed Input/Output (IO) pins directly accessible to users. This constraint means that adding external sensors or expanding the device's capabilities is more challenging. The display is equipped with built-in components, but users cannot easily connect additional hardware such as temperature or humidity sensors.
For projects requiring extra sensors or peripherals, users need to consider alternative solutions. One possibility is using wireless protocols like MQTT to receive data from other devices or sensors within a smart home setup. This approach allows you to use the display as an output device while employing other microcontrollers, with available IO pins, for sensor data acquisition.
In scenarios where direct physical connections are necessary, this limitation could influence the choice of projects or require more complex workarounds. It's an important factor to keep in mind, especially if your project relies heavily on connecting multiple external components.
Case Study: Home Assistant Integration
Integrating the CrowPanel ESP32 display with Home Assistant offers a practical example of how this device can be utilized in smart home environments. This case study demonstrates how to use the display to show real-time data, such as temperature and humidity, collected from a remote sensor set up within the Home Assistant ecosystem. The communication between the display and Home Assistant is enabled using MQTT, a lightweight messaging protocol ideal for IoT devices.
To start, a DHT sensor is connected to an ESP-based device running ESPHome, configured to measure and report temperature and humidity data. In the ESPHome configuration, set up the MQTT broker, typically the same as the Home Assistant IP, and specify the topics for the temperature and humidity readings. This will allow the data to be sent and updated at regular intervals, typically every 60 seconds, to the Home Assistant MQTT broker, making it available for any connected device, including the CrowPanel display. The configuration code is available below:
mqtt:
broker: '192.168.2.209'
username: !secret mqtt_username
password: !secret mqtt_password
topic_prefix: home/living_room_sensor
sensor:
- platform: dht
pin: D0
temperature:
name: "Living Room Temperature"
state_topic: "home/living_room_sensor/temperature"
humidity:
name: "Living Room Humidity"
state_topic: "home/living_room_sensor/humidity"
update_interval: 60s
On the ESP32 display side, initialize the MQTT client in the Arduino code. Ensure it connects to the WiFi, broker, and subscribes to the temperature and humidity topics. When the device receives MQTT messages on these topics, it updates the graphical user interface using libraries like lvgl to represent these values visually. The main parts of the Arduino code from my example are available below:
void onMqttConnect(bool sessionPresent) {
Serial.println("Connected to MQTT.");
Serial.print("Session present: ");
Serial.println(sessionPresent);
uint16_t packetIdSub = mqttClient.subscribe(MQTT_PUB_Vibration_Motor_C, 2);
Serial.print("Subscribing at QoS 2, packetId: ");
Serial.println(packetIdSub);
packetIdSub = mqttClient.subscribe(temperature_topic, 2);
Serial.print("Subscribing at QoS 2, packetId: ");
Serial.println(packetIdSub);
packetIdSub = mqttClient.subscribe(humidity_topic, 2);
Serial.print("Subscribing at QoS 2, packetId: ");
Serial.println(packetIdSub);
}
...
void onMqttMessage(char* topic, char* payload, AsyncMqttClientMessageProperties properties, size_t len, size_t index, size_t total)
{
Serial.println("Publish received.");
Serial.print("Topic: ");
Serial.println(topic);
// Convert payload to a null-terminated string for easier processing
char message[len + 1];
strncpy(message, payload, len);
message[len] = '\0';
// Check for temperature topic
if (strcmp(topic, "home/living_room_sensor/temperature") == 0) {
current_temperature = atof(message); // Convert message to float
Serial.print("Temperature: ");
Serial.println(current_temperature);
set_meter_value(current_temperature);
}
// Check for humidity topic
if (strcmp(topic, "home/living_room_sensor/humidity") == 0) {
current_humidity = atof(message); // Convert message to float
Serial.print("Humidity: ");
Serial.println(current_humidity);
}
update_data_label();
for (int i = 0; i < len; i++) {
Serial.print((char) payload[i]);
}
Serial.println("");
if (strncmp(payload, "ON", 2) == 0) {
mqttClient.publish(MQTT_PUB_Vibration_Motor_S, 0, true, "ON");
set_pin_io(0, true);
}
if (strncmp(payload, "OFF", 3) == 0) {
mqttClient.publish(MQTT_PUB_Vibration_Motor_S, 0, true, "OFF");
set_pin_io(0, false);
}
}
...
void lv_example_meter_1(void)
{
meter = lv_meter_create(lv_scr_act());
lv_obj_center(meter);
lv_obj_set_size(meter, 240, 240);
/*Add a scale first*/
lv_meter_scale_t * scale = lv_meter_add_scale(meter);
lv_meter_set_scale_ticks(meter, scale, 41, 2, 10, lv_palette_main(LV_PALETTE_GREY));
lv_meter_set_scale_major_ticks(meter, scale, 5, 4, 15, lv_color_black(), 10);
lv_meter_set_scale_range(meter, scale, -20, 60, 270, 135);
lv_meter_indicator_t * indic;
/*Add a blue arc for cold temperatures*/
indic = lv_meter_add_arc(meter, scale, 3, lv_palette_main(LV_PALETTE_BLUE), 0);
lv_meter_set_indicator_start_value(meter, indic, -20);
lv_meter_set_indicator_end_value(meter, indic, 0);
/*Make the tick lines blue for cold temperatures*/
indic = lv_meter_add_scale_lines(meter, scale, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_BLUE), false, 0);
lv_meter_set_indicator_start_value(meter, indic, -20);
lv_meter_set_indicator_end_value(meter, indic, 0);
/*Add a blue arc for cold temperatures*/
indic = lv_meter_add_arc(meter, scale, 3, lv_palette_main(LV_PALETTE_GREEN), 0);
lv_meter_set_indicator_start_value(meter, indic, 10);
lv_meter_set_indicator_end_value(meter, indic, 30);
/*Make the tick lines blue for cold temperatures*/
indic = lv_meter_add_scale_lines(meter, scale, lv_palette_main(LV_PALETTE_GREEN), lv_palette_main(LV_PALETTE_GREEN), false, 0);
lv_meter_set_indicator_start_value(meter, indic, 10);
lv_meter_set_indicator_end_value(meter, indic, 30);
/*Add a red arc for hot temperatures*/
indic = lv_meter_add_arc(meter, scale, 3, lv_palette_main(LV_PALETTE_RED), 0);
lv_meter_set_indicator_start_value(meter, indic, 40);
lv_meter_set_indicator_end_value(meter, indic, 60);
/*Make the tick lines red for hot temperatures*/
indic = lv_meter_add_scale_lines(meter, scale, lv_palette_main(LV_PALETTE_RED), lv_palette_main(LV_PALETTE_RED), false, 0);
lv_meter_set_indicator_start_value(meter, indic, 40);
lv_meter_set_indicator_end_value(meter, indic, 60);
/*Add a needle line indicator*/
needle_line = lv_meter_add_needle_line(meter, scale, 4, lv_color_black(), -10);
/*Create an animation to set the value*/
// lv_anim_t a;
// lv_anim_init(&a);
// lv_anim_set_exec_cb(&a, set_value);
// lv_anim_set_var(&a, needle_line );
// lv_anim_set_values(&a, -20, 60);
// lv_anim_set_time(&a, 2000);
// lv_anim_set_repeat_delay(&a, 100);
// lv_anim_set_playback_time(&a, 500);
// lv_anim_set_playback_delay(&a, 100);
// lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
// lv_anim_start(&a);
// Create a container for the circular background
lv_obj_t *circle_container = lv_obj_create(lv_scr_act());
lv_obj_center(circle_container);
lv_obj_set_size(circle_container, 120, 120); // Set size to form a circle
lv_obj_set_style_radius(circle_container, LV_RADIUS_CIRCLE, 0);
lv_obj_set_style_bg_color(circle_container, lv_color_black(), 0);
lv_obj_set_style_bg_opa(circle_container, LV_OPA_COVER, 0);
// Create the label for temperature and humidity information
data_label = lv_label_create(circle_container); // Attach label to the container
lv_label_set_text(data_label, "0.0°C\n0.0%");
lv_obj_center(data_label); // Center the label within the circular container
static lv_style_t label_style;
lv_style_init(&label_style);
lv_style_set_text_color(&label_style, lv_color_white());
lv_style_set_text_font(&label_style, &lv_font_montserrat_24); // Increase font size for bigger text
lv_style_set_text_align(&label_style, LV_TEXT_ALIGN_CENTER); // Center the text horizontally
lv_obj_add_style(data_label, &label_style, 0);
// Create an image object for the logo
lv_obj_t *img_logo = lv_img_create(lv_scr_act());
lv_img_set_src(img_logo, &logo); // Set the image source to your image descriptor
// Align the logo image at the bottom center of the screen
lv_obj_align(img_logo, LV_ALIGN_BOTTOM_MID, 0, -5); // Adjust the offsets as necessary
}
The full code can be found on the project GitHub repository.
In conclusion, while the lack of physical IO pins might limit direct hardware integration, leveraging network-based methods like MQTT circumvents this limitation effectively. This case study illustrates how the CrowPanel ESP32 display can be a powerful tool in a smart home environment, utilizing network connectivity to expand its role beyond a simple display to an integral part of the home's smart infrastructure.
Exploring LVGL Graphics Library
The lvgl (Light and Versatile Graphics Library) is a powerful tool for crafting detailed and interactive graphical interfaces on devices like the CrowPanel ESP32 display. By using lvgl, you can create visually appealing and functionally rich UI elements like gauges, meters, buttons, and more. This makes it an excellent choice for projects where visual display quality and touchscreen responses are key priorities.
Setting up lvgl involves installing the library within your development environment and initializing it in your project's code. The library offers a wide array of widgets and layout management features that you can use to organize your display elements effectively. With its robust styling capabilities, lvgl allows you to customize every aspect of the UI, from colors and fonts to interactive behaviors, giving your projects a polished and professional look.
The lvgl's extensive documentation and examples provide a solid starting point for exploring its capabilities. While it requires some learning, especially in understanding its object-oriented structure for managing display elements, the library is highly versatile. It supports advanced features like animations, transitions, and dynamic screen updates, enabling you to create rich and engaging user interfaces suitable for various applications, from simple data displays to complex smart home controls.
Conclusion
In conclusion, the CrowPanel ESP32 display presents a compelling opportunity for hobbyists and developers looking to expand their DIY projects. With its integrated features, such as the ESP32 microcontroller, capacitive touch IPS display, and wireless connectivity, it opens up a range of possibilities for creating custom interfaces for wearables and smart home devices. Despite some limitations, like the absence of external IO pins, workarounds such as utilizing MQTT enable seamless integration with broader systems, including Home Assistant.
Throughout this exploration, we've delved into its initial capabilities, how it can be programmed, and the potential for creative applications using the lvgl graphics library. These tools and libraries empower developers to bring interactive and visually appealing projects to fruition. The display's versatility makes it adaptable to a diverse range of environments and use cases, offering a platform for innovative solutions.
Whether you're looking to develop a smartwatch, a home information center, or a data visualization tool, the CrowPanel ESP32 display offers a practical starting point. Its compact design and built-in capabilities bring ideas to life, creating projects that blend technology and user interaction seamlessly. Moving forward, the display could find its place in various inventive applications, ready to contribute to the expanding landscape of IoT and smart technology projects.
If this was interesting for you, feel free to subscribe to my YouTube channel or check out some of the other project and tutorials.
Resources
Other tools and materials for your DIY projects:
- ESP32 Development board - https://s.click.aliexpress.com/e/_oFvmLVL
- Soldering Station Kit - https://s.click.aliexpress.com/e/_omLqr6H
- Bench Power Supply - https://s.click.aliexpress.com/e/_opWjUgd
- Arduino Starter Kit - https://s.click.aliexpress.com/e/_on85t8t
- Multimeter - https://s.click.aliexpress.com/e/_onmvarF
- Sensors Starter Pack - https://s.click.aliexpress.com/e/_oCmO3kt
