Usage

Using this “theme” is not difficult, but you need to know a few basics, so your design can make its best impression. It is depending on two things, namely using a theme and make extensive use of the template function from the custom_component button-card made by RomRaider. The design system consists of graphical buttons, that are changed depending on their use.

Table of content

• Changing templates
• List of templates
• Tap actions
• Color scheme
• Icons

Chips

At the top of each page we find the chips, which allow to quickly visualize important information.

Title

Titles are used to separate the different sections. Kind of a divider…

Vertical buttons

For using the cards as a button.

Cards

Cards are the main part of this design and are widely used in very different designs and functions. With these cards you can set up nearly every entity in HA, showing from “state-only” over a “full blown” information graphic with various values to “controlling” your covers and climate entities.

Anatomy of cards

1. Dot: Visible when the device is unavailable. Also used on the entity person
2. Icon: Icon that represents the device
3. Primary line: Main information
4. Secondary line: Secondary information
5. Optional part: Possibility to display buttons to launch actions related to the device. Or display a graph to view the history of a sensor or you let your fantasy take the ride…

In the list above #5 enhances the normal cards with a “second line”, that is used to display other information like a graph or the controls for your covers. For this readme the cards are divided into three groups:

• 1-line cards: These are cards for sensor or binary_sensors like light or power outlets.
• 2-line cards: These are cards with a second line for informations or controls, eg. your cover controls.
• Custom cards: These are special cards, that you can install, only if needed. These cards are mostly developed and contributed to the repository. Eg. an aircondition-card that shows the state of your aircondition and buttons to control it.

Changing templates

There are cases, actually a lot of them, where you want to change or extend existing template code. Doing this inside the code from the repository isn’t a good idea, as the next update would overwrite your changes.
But don’t worry, we have taken care of that and you can very easily extend our code with your own.

Take a look at this page: Changing a template

List of templates to use in “view”-files

The following list is just an overview, you can find the extended list with example code, picture and description here.

Tap actions

One of the great features of button-card is, that you can set an action. These actions can be set on every card you configure, despite the cards that already have buttons. You have three possibilities to choose from:

• tap_action
• hold_action
• double_tap_action

Each of these “events” can be configured to use a specific action. These actions are:

xxx_action:
  action: more-info # to show the more-info popup  
  entity: your_entity # show more-info popup for this entity
      

xxx_action:
  action: toggle # toggles the entity of the card
      

xxx_action:
  action: call-service # to call a service from HA  
  service: service.service_arg  # the service
  service_data: # additional data, eg. an entity_id
      

xxx_action:
  action: none # explicitly set to do nothing
      

xxx_action:
  action: navigate  
  navigation_path: /ui-lovelace/home # the path to navigate to
      

xxx_action:
  action: url  
  url_path: https://homeassistant.io
      

Color scheme

Icons

For the chips, this “theme” uses the standard unicode emojis. The main reason is, they are multi-color whereas the mdi-icons that HomeAssistant uses are one color only.

These emojis are only used on the chips, all other cards or buttons use the standard mdi-icons!

Overview over standard unicode emojis:

• https://emojipedia.org or
• https://github.com/ikatyang/emoji-cheat-sheet

Overview Home Assistant mdi-icons:

• https://materialdesignicons.com/

Using emojis is easy:

• Go to one of the Github pages above
• Select the emoji you want and copy it (“CTRL + C” or right-click “copy” / at emojipedia.org you already find a “copy” button)
• Go to your view and paste the icon

There are a lot of emojis on these pages, so we suggest you use the built-in search at emojipedia or the browser integrated search by pressing “CTRL + F” and type in your query like “heart”.

Table of contents

• Template list (use)
• Custom-cards list
• First page
• Changing template
• Examples