Egg Incubator with M5Dial: How to Create a Nice UI

The UI is the first doorway to any project, it’s what users notice first. In this post, I’ll share how I create a UI for HMI projects.

Step 1: Finding References

For this project, I’m using the M5Dial, a round display with a rotary encoder and a push button for user interaction. To get inspiration for a round UI, I searched for design ideas on Pinterest.

Step 2: Planning the UI/UX using Figma

Once I had the inspiration, I used Figma to create the UI and its elements. Using basic tools, I planned and drafted a rough layout of the design. Figma supports Google Fonts, and a good font plays a key role in a UI. It also offers features like background removal, image generation, and access to a great collection of icons in the community. For this project, I created unique icons using ChatGPT. Once everything looked good, I exported the icons and downloaded the font from Google Fonts.

Step 3: Design the UI in EEZ Studio

In EEZ Studio, select the LVGL template, choose the version (for this, I chose LVGL 9), and create the project. Then, set the screen width and height 240x240 px for the M5Dial. In the Settings page (01), you’ll also need to configure the width, height, circular display option, color theme, build options, and more.

Next, import the generated icons and downloaded fonts into the Assets Palette (02). From the Components Palette (03), I added a roller widget for the selected menu item and a container to hold the egg icons (05).

In the Widgets Palette (05), select the widgets and style their properties in the Properties Panel (04). For the container, I chose a flex layout with a row flex flow, so the icons arrange themselves automatically. This setup also helps later in coding to focus on the selected egg and update the roller text.

For the icon, I styled two states: default and focused. While coding, I switch the selected icon’s state to focused, giving clear visual feedback to highlight the selected item.

For the incubator screen, I used two LVGL arcs to display humidity and temperature, and two more to set the ideal values. To match the look from the reference image, I adjusted the arc’s start and end angles. In LVGL, an arc angle of 0 is positioned at 3 o’clock.

To create a unique arc, I styled its parts, simple and straightforward. Only need to adjust three elements: Main, Indicator, and Knob.

For the heater and humidifier icons, I styled two states: default and checked. Based on the logic, the icons will display their state-on or off-by toggling the checked state.

I used different font weights and sizes to create hierarchy in the labels.Once everything looks good, build the UI.

Step 4: UI and Board setup

Once the build is finished, copy the generated UI folder into project’s lib folder. For this project, I used a sample PlatformIO configuration for the M5Dial that I found online.

In main.cpp, include the UI header file at the top:

#include "ui.h"

This gives your code access to all the UI elements and functions generated by EEZ Studio.

Inside the setup() function, after initializing your display and LVGL, call:

ui_init();

This function sets up all the widgets, layouts, and styles you created in EEZ Studio.

Thank you

You can find the code on my GitHub. If you’d like to see my UI-related videos, you can check out my YouTube channel.