Smart Home Button 👉 A Circular HMI for Home Assistant🏠

Introduction

In this project, you will build a compact Home Assistant control dial that can:

• Connect to your local Wi-Fi network
• Communicate with Home Assistant
• Use the M5Stack Dial rotary input as a physical control interface
• Display device or control status on the round screen
• Trigger smart home actions such as lights, scenes, or other Home Assistant entities
• Sit on a desk using a custom 3D-printed enclosure and stand

The goal is not to replace the Home Assistant dashboard, but to create a fast, tactile interface for the actions you use most often.

For example, the dial can be used as:

• A desk light dimmer
• A scene selector
• A smart room controller
• A media volume knob
• A quick automation trigger
• A small status display for Home Assistant entities

GitHub Repository:https://github.com/Jasionf/M5STACK-Dial-HomeAssistant

Why M5Stack Dial?

The M5Stack Dial is an interesting device for smart home interfaces because it already integrates several useful hardware features in one compact module:

• ESP32-based controller with Wi-Fi
• Round color display
• Rotary encoder
• Touch interaction
• Built-in button-style interaction through the dial
• USB-C programming and power
• Small size for desktop or wall-mounted applications

For Home Assistant projects, physical controls are especially useful because they make smart devices feel more direct and reliable. Instead of relying only on voice assistants or dashboards, a rotary controller gives immediate feedback and can be used by anyone in the room.

Materials Preparation

A Physical Control Knob for Home Assistant

1.Waiting for the connection HomeAssistant server

⚠️This is a loading screen. Once you have configured your Home Assistant server, please ensure that the SSID and password are entered correctly. During startup, the device will search for and establish a connection; once the connection is successful, it will proceed to the main page.

2.In Home Assistant, go to Settings > Devices & Services to open the integration management page.

3.Find the online device in the Discovered area, click CONFIGURE, and follow the prompts to complete the addition.

Note: After the device has been added, this setting must be configured from the device list. As shown in the image, click the gear icon next to the device, enable “Allow the device to perform Home Assistant actions, ” and then click “Submit” to save the change.

4. Once the connection is successful, you will be taken to the main interface.

The weather dashboard displays time, date, temperature, humidity, air quality, pressure, and wind speed in a compact layout. It demonstrates how multiple sensor values can be organized clearly on a small circular screen.

5. Interactive features of the menu bar page

The home screen provides the main navigation entry for the smart home controller. From here, the user can return to the main dashboard and switch between different functions using the touchscreen and rotary dial.

6. Introduction to the menu bar page

This section introduces the main function pages of the M5Dial smart home controller. The interface is designed around the circular screen and rotary dial, making each function easy to read and control within a compact desktop device.

• Air Conditioner Control : This screen shows the air conditioner control interface. The large central temperature value makes the current setpoint easy to read at a glance. The surrounding circular indicators and quick-access icons provide visual feedback for temperature, humidity, fan mode, and power status.
• Refrigerator Reminder : This screen demonstrates a refrigerator reminder feature. It can be used to track food, drinks, expiration dates, or household supplies. In this example, the device displays a “Milk” reminder with start and end dates, helping users know when an item is about to expire or needs attention.
• Lighting Control : The lighting control screen allows the user to adjust brightness directly from the M5Dial. The circular progress bar visually represents the current brightness level, while the bottom icons can be used for different light modes, scenes, or quick controls.
• Music Player : The music player UI demonstrates how the device can be used as a media controller. Album artwork, track information, volume level, and playback controls are arranged inside the circular display to match the physical shape of the M5Dial.
• Timer : The timer page turns the device into a simple kitchen or desktop timer. The large digital time display is easy to read from a distance, and the hour, minute, second, and reset buttons make it practical for daily use.

3D Appearance Design

• To make the M5Stack Dial look and feel more like a finished smart home product, I designed a custom 3D-printed enclosure and desktop stan
• The goal of this design was not only to protect the device, but also to improve the daily user experience: better viewing angle, easier rotation, cleaner wiring, and more stable desktop placement.
• The enclosure uses a modular structure. It includes a transparent cover panel, an internal LED light strip, a rear cover panel, magnetic positive and negative contacts, a battery pack area, and a backplate retaining clip.
• The magnetic contact design makes the rear cover easier to align and attach, while the retaining clip helps keep the back structure stable.
• The LED light strip can also be used as an ambient lighting element, making the device more expressive when placed on a desk.
• The printed enclosure wraps around the M5Stack Dial and gives it a square product-like body.

• A detachable desktop stand allows the device to sit at a comfortable viewing angle, so the round screen is easier to read and the rotary dial is more natural to use.
• This 3D-printed design turns the project from a development-board demo into a small smart home product that can live permanently on a desk.

Multi-color display

I look forward to seeing you create even more colors and a wider variety of shapes.

Video

Conclusion

This project turns Home Assistant into something more direct, more physical, and more fun to use. 🏠✨

With the M5Stack Dial, smart home control is no longer limited to phones, dashboards, or voice commands. You can simply place this little controller on your desk, rotate the dial, tap the screen, and trigger the actions you use every day. 🎛️

From lights and scenes to music, climate control, reminders, and timers, the M5Stack Dial becomes a small but powerful smart home companion. The round screen gives clear visual feedback, while the custom 3D-printed enclosure makes it feel like a finished product instead of just a prototype. 🛠️

For me, the most exciting part is customization. You can change the UI, redesign the shell, add more Home Assistant entities, or create your own control logic for different rooms and lifestyles.

Small device, big control.

Smart home, but more personal. 🚀