Washing Machine card in Home Assistant (new version)

Summary

This tutorial video guides viewers on creating a washing machine card for Home Assistant, enhancing user interaction with their smart home. It introduces a robust method using Button Card, accommodating various washing machine sensors for real-time updates on washing programs and remaining time. The video covers customizing the card layout with a grid system, adding a dynamic bar to visualize time left, and creating a conditional display for when the machine is off. It also touches on integrating a remote start feature that activates during periods of cheap electricity, providing a comprehensive guide for a personalized smart home setup.

Takeaways

• 😀 This video tutorial demonstrates how to create a washing machine card in Home Assistant using the button card.
• 😀 The tutorial requires a washing machine integrated with Home Assistant, with sensors providing information about remaining washing time and current washing program.
• 😀 If your washing machine lacks these sensors, you'll need to adapt the tutorial to your setup.
• 😀 The tutorial starts by adding a button card to the dashboard and including the washing machine as an entity.
• 😀 Various elements such as name, custom fields (program, Stat 1, Stat 2, and Stat 3) are added to the card.
• 😀 Custom fields Stat 2 and Stat 3 display the remaining and initial washing times, respectively.
• 😀 The layout of the card is styled using a grid with two columns and four rows, positioning the icon, program, name, remaining time, bar, and other stats.
• 😀 A moving bar visualizing the time left is created using HTML and CSS, converting time attributes into a percentage.
• 😀 Conditional rules are added to display a message when the washing machine is off, hiding certain elements and simplifying the grid.
• 😀 The card is styled with a gradient color when the washing machine is on, and a remote start feature is added to wait for the next period of cheap electricity using a hack integration called nordpol.

Q & A

What is the main focus of this video?

The video focuses on creating a washing machine card in Home Assistant using the button card.

What are the prerequisites for following this tutorial?

You need a washing machine integrated with Home Assistant, preferably with sensors that provide information about the remaining washing time and the current washing program.

What is the first step in creating the washing machine card?

The first step is to add a button card to the Home Assistant dashboard and then add the washing machine as an entity.

What custom fields are added to the card, and what do they represent?

The custom fields added are program, Stat one, Stat two, and Stat three. Stat one is a static text element, while Stat two and Stat three represent the remaining time and the initial time of the washing process.

How are the attributes of the washing machine entity added to the custom fields?

Attributes are added to the custom fields using simple Java code, referencing the attributes of the entity added at the top.

What is the purpose of the moving bar in the card, and how is it created?

The moving bar visualizes the time left for the washing process. It is created by converting the initial and remaining time attributes into a percentage number, then using HTML and CSS to style the bar based on these values.

How is the layout of the card organized?

The layout is organized using a grid with two columns and four rows, positioning elements like the icon, program, name, remaining time, bar, and other custom fields within this grid.

What styling adjustments are made to the card for better appearance?

The card's elements are styled using CSS rules to adjust font sizes, weights, justify-self properties, and grid cell sizes. Negative margins and paddings are also adjusted for a cleaner look.

How is the card adapted for when the washing machine is off?

When the washing machine is off, conditional rules are applied to display a message instead of the full card. Elements can be hidden using 'display: none', and the grid is simplified for this state.

What additional feature is shown at the end of the video?

The video shows how to add a remote start function that waits for the next period of cheap electricity, using a confirmation popup and automation triggered by a sensor.