3.1 KiB
title, sidebar_label
| title | sidebar_label |
|---|---|
| Experimental UI | Introduction |
Starting with Home Assistant 0.72, we're experimenting with a way of defining your user interface. The aproach is fundamentally different from the current approach.
The current approach will look at your groups and entities and will sort them on the fly. With our experimental UI, it is purely based on configuration that is provided by the user, defined in <config>/experimental-ui.yaml.
Trying it out
Create <config>/experimental-ui.yaml:
title: My Awesome Home
views:
# The name of a view will be used as tab title.
# Might be used for other things in the future.
- name: Example
# Each view can have a different theme applied.
theme: dark-mode
# The cards to show on this view.
cards:
# The entities card will take a list of entities and show their state.
- type: entities
# Title of the entities card
title: Example
# The entities here will be shown in the same order as specified.
entities:
- input_boolean.switch_ac_kitchen
- input_boolean.switch_ac_livingroom
- input_boolean.switch_tv
# The filter card will filter available entities for certain criteria
# and render it as type 'entities'.
- type: entity-filter
# Filter criteria. They are all optional.
filter:
domain: input_boolean
state: 'on'
# This config will be passed to the card rendering the filter results
card_config:
title: Input booleans that are on
# Use the HTML imports to load custom UI to render cards.
# Custom UI needs to be custom element that takes in `config` and `hass`
- type: 'custom:my-custom-ui'
# Any value here is made available to your element via the `config` property.
some: value
# Specify a tab_icon if you want the view tab to be an icon.
- tab_icon: mdi:home-assistant
# Name of the view. Will be used as the tooltip for tab icon
name: Second view
cards:
- type: entities
title: Lots of Kitchen AC
entities:
# It is totally possible to render duplicates.
- input_boolean.switch_ac_kitchen
- input_boolean.switch_ac_kitchen
- input_boolean.switch_ac_kitchen
- input_boolean.switch_ac_kitchen
- input_boolean.switch_ac_kitchen
- input_boolean.switch_ac_kitchen
Add to your configuration.yaml:
input_boolean:
switch_ac_kitchen:
name: AC kitchen
switch_ac_livingroom:
name: AC living room
switch_tv:
name: TV
Now restart Home Assistant, navigate to <YOUR HASS URL>/experimental-ui. When you make changes to experimental-ui.yaml, you don't have to restart Home Assistant or refresh the page. Just hit the refresh button at the top of the UI.
Current limitations
This is the very very early version aimed at gathering feedback. Discussion and suggestions are welcome in the ui-schema repository.
Change log
Home Assistant 0.72
- Initial release supporting title, defining views with a name, tab icon, theme and cards. Supported cards are entities, entity-filter and custom.