Humidifier card

The humidifier card is the sibling of the thermostat card, for humidity. The ring shows the target humidity, and you drag it, or use the minus and plus buttons, to change it. The big number in the middle is the target, with the current humidity and what the device is doing, like Humidifying, around it. The menu button in the corner opens the more-info dialog.

The dial takes the color of what the device does, like blue while it humidifies. When the device is off, the dial is gray.

Use the humidifier card when the humidity is the main thing in a section, like in a bedroom or a basement. When it's one of many things in a room, a tile card with the target humidity feature takes one row instead of five.

With show_current_as_primary: true, the big number is the current humidity, and the target moves to the smaller line.

The humidifier card takes features below the dial. The dial has no button to turn the device on or off, so when you add the card in the dashboard editor, it comes with the toggle feature. The modes feature is the other good fit.

• Keep the name short, or leave it out when the section already says which room it is.
• Add the toggle feature. Without it, turning the device off takes a trip to the more-info dialog.

• entity (string, required): the entity to show. Only entities of the humidifier domain work.
• name (string): the name to show. Defaults to the name of the entity.
• show_current_as_primary (boolean): shows the current humidity as the big number, and the target below it. Defaults to false.
• theme (string): a theme to apply to this card only.
• features (list): the features to show below the dial, each with a type.

type: humidifier
entity: humidifier.bedroom_humidifier
features:
  - type: humidifier-toggle
  - type: humidifier-modes
    style: "icons"

The card lives in src/panels/lovelace/cards/hui-humidifier-card.ts, and the element is <hui-humidifier-card>. Like the thermostat card, it reuses the control of the more-info dialog, <ha-state-control-humidifier-humidity>, which is built on the <ha-control-circular-slider>.

The features render with <hui-card-features>. In the sections view, the card takes 12 columns and 5 rows, and can shrink to 6 columns and 2 rows. Features add rows on top of that.

Source