A collection of cards and other web components for the Home Assistant Lovelace UI.
Haiku provides a common-sense, intuitive UI for your smart home. Haiku is designed to present your smart home controls in a way that's easy and intuitive to navigate, progressively exposing controls for your home, for a room, for a group of devices in a room, and for the devices themselves.
This progressive granularity is customizable as are the grouping and naming of devices. This extends the philosophy behind Lovelace of separating logical grouping of devices from interface-specific grouping and naming.
For example, in a global context like calling the API or the HA states interface, more specific names are relevant (such as "Master Bedroom Ceiling Fan Light 1"). However this naming becomes cumbersome in your day-to-day interface. By nesting your entities into progressively more specific groups you can achieve the same amount of context with significantly less clutter. (e.g. Master Bedroom > Lights > Ceiling Fan Lights > Ceiling Fan Light 1).
Installation will vary slightly depending on your Home Assistant setup. The steps below will cover most installations, but if you have a scenario where these instructions don't work, feel free to open an issue and we'll either amend these instructions or provide a workaround.
First, add any components you want to use from Haiku in the
resources key of the global config. This can either be
done by editing the
ui-lovelace.yaml if you're using YAML configuration mode, or clicking the "Edit Raw Config" from
the context menu if you're using the UI editor.
Add the following
resources key (or append to the existing one):
title: Home Assistant resources: # ----- BEGIN HAIKU RESOURCES ----- - url: https://unpkg.com/@haiku-ui/haiku/dist/cards/haiku-global-config.js type: module - url: https://unpkg.com/@haiku-ui/haiku/dist/cards/haiku-room-card.js type: module # ----- END HAIKU RESOURCES -----
Again, you can edit the YAML in either an IDE of your choice or in the web editor in the UI.
To add a card using the UI editor, click the "+" button (bottom right) and then choose "Manual Card". For type, add
'custom:haiku-room-card' or whatever card you want to add (these are explained in detail below). Add a
with the name of the room, and any entities you want to include on the card (their types are automatically detected).
Alternatively, you can provide the same YAML you provide in the UI editor directly in the
resources: - url: https://unpkg.com/@haiku-ui/haiku/dist/cards/haiku-room-card.js type: module - url: https://unpkg.com/@haiku-ui/haiku/dist/cards/haiku-global-config.js type: module views: - title: Overview icon: mdi:home # ... cards: - type: "custom:haiku-global-config" - type: "custom:haiku-room-card" name: Master Bedroom entities: - group.lighting_master_bedroom - sensor.lumi_lumiweather_022cc5ba_1_1026 - sensor.lumi_lumiweather_022cc5ba_1_1029 - fan.ge_12730_fan_control_switch_level # etc
custom:haiku-global-config adds a global cog menu to the UI that allows you to select a theme and set other global settings for Haiku.
Note that this will display only as a cog menu just below the header, to the right - no card will be rendered.
custom:haiku-room-card adds a "room" card and renders tiles for each entity included in that card's config.
type: "custom:haiku-room-card" name: Master Bedroom entities: - group.lighting_master_bedroom - sensor.lumi_lumiweather_022cc5ba_1_1026 - sensor.lumi_lumiweather_022cc5ba_1_1029 - fan.ge_12730_fan_control_switch_level # etc
resources: - url: https://unpkg.com/@email@example.com/dist/cards/haiku-room-card.js type: module
resources: - url: https://unpkg.com/@haiku-ui/haiku@^0.1.0/dist/cards/haiku-room-card.js type: module
Each room card can be configured with these options:
nameis the room name displayed at the bottom of the card
entitiesis an array of entities or groups (defined in
background_imageany valid CSS value for
url(...)for a static image (you can host these externally or place them in your www folder and reference them from there).
background_image: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%)"
As mentioned above, a fully-descriptive name is more useful in a global context. If you want to customize the options for a
group or entity in Haiku, you can hold alt or option and click the tile for the entity you want to customize.
This allows you to edit the
haiku_label custom properties.
You can also edit these properties in your
fan.ge_12730_fan_control_switch_level: haiku_label: Ceiling Fan switch.example_light_switch: haiku_label: Kitchen Light Switch haiku_type: light
haiku_labelcan be any string value
haiku_typeshould be one of:
Note the steps described here only work on Linux, macOS, and Windows Subsystem for Linux.
Start by configuring your
ui-lovelace.yaml to point at itself to serve the Haiku files:
resources: - url: /local/haiku/cards/haiku-room-card.js type: module - url: /local/haiku/cards/haiku-global-config.js type: module
Then, clone this repository and start developing with a few commands:
npm install -g gulp npm ci export HA_SSH_USER=pi export HA_SSH_HOST=example.local gulp watch
watch command will watch the
src/**/* glob pattern, rebuild the package on changes, and call the
The deployment script makes some assumptions that you have key-based SSH authentication. It also assumes the destination
directory to be
You can call the
deploy.sh script with the following arguments to customize these options:
--ssh-port- the port over which SSH (rsync) traffic will occur
--ssh-user- the username used to connect to the Home Assistant server via SSH
--ssh-host- the hostname (or IP address) of the Home Assistant server
--haiku-path- the full path from which Haiku will be served by Home Assistant
This is a fun project for exploring Polymer and Lovelace -- one that satisfies my own personal needs for Home Assistant. PRs are welcome, but I can't make any guarantees as to my availability for PR reviews or bug fixes. Forking and customizing for your needs might be the quickest path.