Five new and popular Home Assistant Lovelace custom cards
Disclosure: This post contains affiliate links. If you click through and make a purchase, I will earn a commission, at no additional cost to you. Read my full disclosure here.
I have previously written about the most popular custom cards for the Home Assistant Lovelace dashboard. While the cards featured in that article still occupy the top spots in terms of stars on GitHub, a new crop of cards are quickly gaining traction and users. In this article, I will introduce you to five new custom cards rising in popularity for the already beautiful Home Assistant Lovelace Dashboard.
You might have heard of one or the other custom cards mentioned in this article. That is because I am considering every card that was released in the past year or so. I have also made sure that all cards are under active development and do not have any critical bugs. All mentioned cards can and should be installed using the Home Assistant Community Store.
The Vacuum Card does exactly what it says on the tin: it is a card developed specifically for robot vacuum cleaners. This Home Assistant Lovelace custom card provides you with information on the device's current state and allows you to execute commands, without the need to place any extra buttons. Because I don't own a robot vacuum, I have to go by the information provided in the GitHub repository, but considering it currently has 381 stars, it appears to have hit a cord in the community.
Baked in to the card itself is support for just about every popular robot vacuum, including those from Roborock, Xiaomi, iRobot, and Ecovacs Robotics. If you wonder whether yours is supported, a full list of compatible models can be found in the repository. As the Vacuum Card relies on basic robot vacuum functions such as pause, start, stop, and return_to_base, most robot vacuums that can be integrated with Home Assistant should be able to be configured to use this card. You can even change the image displayed in the card with a PNG or SVG file of your own to match your exact model. To liven things up, there is also an animation you can enable or alternatively, you can select the compact card, where the image will be completely hidden. There is also the possibility of displaying a map, if available.
The Vacuum Card when the robot vacuum is cleaning (source: GitHub)
The Vacuum Card when the robot vacuum is docking (source: GitHub)
The Vacuum Card when the robot vacuum is docking (source: GitHub)
The Vacuum Card for Home Assistant can display different information, depending on the status of the robot vacuum. For example, when the robot vacuum is docked you might want to display information on the filter and brushes, and when it is vacuum is cleaning a room or zone you can display the cleaning area and cleaning time. Several icons are displayed towards the bottom of the card. When clicked, these will execute a predefined command. For example, you could set scripts for zoned cleaning to be run. These shortcuts are practical when the need for a manual zoned cleaning arises.
Battery State Card: Know when to charge
The Battery State Card for the Home Assistant Lovelace dashboard is the spiritual successor to the Lovelace Battery Entity card, which appears to be stale but, unfortunately, hasn't been archived on GitHub. The Battery State Card is one of the most customizable custom cards I have set up in my time using Home Assistant. Possibly, my favourite part of the Battery State Card is the ability to have it collapse. That way, I can keep my Lovelace dashboard looking clean, while still having the opportunity to view all battery states in one card.
The Battery State Card in its collapsed state
The Battery State Card in its expanded state
This card can't just be used to display the battery states of your wireless home automation devices, but any sensor reading available. The list can automatically be sorted, and it supports colour gradients for the dynamic icons.
In the example above, the list is limited to three entries in its collapsed few, it is sorted to display devices with the lowest battery percentage at the top, and it uses dynamically coloured icons. You can display secondary information (text, attribute name or state property name) and configure a charging indication.
If you are tired of manually adding devices to the Battery State Card in your Home Assistant Lovelace dashboard, you can set up filters to automatically add devices. For example, you could have any entity that includes the string battery_level or battery added to the card.
ApexCharts Card: Fancy graphs for your Home Assistant Dashboard
For me and many other Home Assistant community members, the ApexCharts Card has replaced the still popular Lovelace Mini Graph Card. This custom card uses the ApexCharts.js library and gives the user the option to customize just about every aspect of the chart. You might have even unknowingly come across graphs built using this open-source library used on websites, as it is very popular. Using the ApexCharts Card you can create radial bar, pie, donut, line, and scatter charts.
A line chart created using the ApexCharts Card
A radial bar chart created using the ApexCharts Card
What sets the ApexCharts Card apart from the Lovelace Mini Graph Card are its available graphs and customizability. With the newer option, you are no longer limited to just line and bar graphs. You might be asking yourself why one would use charts in the Home Assistant Lovelace dashboard. We all want a beautiful dashboard with cards displaying useful, and sometimes not so useful, data, right? For example, you could integrate your Unraid NAS and display all hard drives using a single radial bar chart.
Scheduler Card: Sometimes timed automations rule
The final two Home Assistant custom cards, I am presenting in this article, are more complex than the previous three presented so far. The Scheduler card relies on the Scheduler custom component. For you, that means you will need to install the custom component using HACS before you try the Scheduler Card. The Scheduler custom component is the brains of the operation, and it controls your existing devices based on time.
The Scheduler Card gives the Scheduler custom component an easy-to-use interface. You can easily configure lights to turn off or on, covers to go up or down, switches to toggle, and climate adjustments using this card. The actions can be set to occur on a daily or weekly basis. There is also the option of executing the action only on weekdays, or you can completely customize the schedule.
Alarmo: Integrating the manual alarm control panel
Alarmo is an integration for the manual alarm control panel domain in Home Assistant. While the custom card is part of Alarmo, it is only one third of the full package. A custom component and a separate panel make up for the rest.
The Alarmo custom component controls the states of the alarm panel entities in Home Assistant, while the Alarmo panel is a GUI for configuring the settings of the alarm. The Alarmo custom card for the Home Assistant Lovelace dashboard allows you to arm or disarm the alarm. The custom card itself, is probably the least interesting part of the Alarmo package, with its functionality boiling down to an option to arm or disarm the alarm. Alarmo is, in fact, also compatible with the official Alarm Panel card.
