homekit-card

Homekit style Home Assistant card

This card is best used with panel: true so the card fills up the whole page. The purpose of this card is to fill a page with tiles in homekit style. You can add entities and define multiple rows with your own title to create your homekit style page.

It is possible that an entity is not standard and is not shown as you expected. An example of this is weather entity, for this I have therefore added a separate tile to the card so that it is displayed in the correct way. If you have an entity that is not displayed properly, create an issue.

You can also adjust the pop-up that opens when you hold down a tile. You can have the pop-up open another lovelace card so that you can show other info in the popup, you can also just use the standard. For lights I have developed a separate card that also has the style of homekit, which you can use well in combination with this card. You can find this card here: https://github.com/DBuit/hass-custom-light-popup-card

Do you have ideas for a custom pop-up create an issue then I can see if I can help with this :)

Configuration

Installation instructions

HACS installation: Go to the hacs store and use the repo url https://github.com/DBuit/Homekit-panel-card and add this as a custom repository under settings.

Add the following to your ui-lovelace.yaml:

resources:
  url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js
  type: module

Manual installation: Copy the .js file from the dist directory to your www directory and add the following to your ui-lovelace.yaml file:

resources:
  url: /local/homekit-panel-card.js
  type: module

Wanna use the popup functionality?

The popups use browser mod to display any lovelace card in a popup. To use the popups install browser mod: https://github.com/thomasloven/hass-browser_mod And also install card-mod so the custom styles can be applied to the popups: https://github.com/thomasloven/lovelace-card-mod

Configure the card in your lovelace-ui.yaml

I will break up the configuration of the card to a few levels. 1. First some global stuff you can configure 2. The rows with tiles that can be configured 3. A specific tile/entity that can be configured

1. Global configuration

First use the custom card and set the panel: true so that it fills up the whole screen.

views:
  - title: "Home"
    icon: mdi:home-outline
    path: "home"
    panel: true
    cards:
      - type: "custom:homekit-card"

in the card we can define some global configuration below you can find these options:

Css variables and default values

Example config:

- type: "custom:homekit-card"
  style: |
    :host {
      --tile-background: rgba(255, 255, 255, 0.8);
      --tile-border-radius: 12px;
      --tile-width: 100px;
      --tile-height: 100px;
      --tile-on-background: rgba(255, 255, 255, 1);

      --tile-name-text-color: rgba(0, 0, 0, 0.4);
      --tile-on-name-text-color: rgba(0, 0, 0, 1);

      --tile-state-text-color: rgba(0, 0, 0, 0.4);
      --tile-on-state-text-color: rgba(0, 0, 0, 1);

      --tile-state-changed-text-color: rgb(134, 134, 134);
      --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);

      --tile-value-text-color: rgba(255, 0, 0, 1);


      --tile-icon-color: rgba(0, 0, 0, 0.3);
      --tile-on-icon-color: #f7d959;


      --tile-width-mobile: 90px;
      --tile-height-mobile: 90px;

      --min-header-height: 150px;

      --tile-icon-size: 30px;

      --tile-image-radius: 100%

      --slider-width: 120px;
      --slider-height: 120px;
    }

2. Configure Rows and Tiles

At this point our configuration looks like this for example:

views:
  - title: "Home"
    icon: mdi:home-outline
    path: "home"
    panel: true
    cards:
      - type: "custom:homekit-card"
        home: true
        rules: |
          {% if "Vandaag" in states('sensor.blink_gft') %} <li>Vandaag groenebak aan de straat</li> {% endif %}
          {% if "Vandaag" in states('sensor.blink_papier') %} <li>Vandaag oudpapier aan de straat</li> {% endif %}
          {% if "Vandaag" in states('sensor.blink_pmd') %} <li>Vandaag plastic aan de straat</li> {% endif %}
          {% if "Vandaag" in states('sensor.blink_restafval') %} <li>Vandaag grijzebak aan de straat</li> {% endif %}
          {% if states('sensor.current_lights_on') | float > 0 %} <li>{{states('sensor.current_lights_on')}} lampen aan</li> {% endif %}
          {% if states('sensor.current_media_players_on') | float > 0 %} <li>{{states('sensor.current_media_players_on')}} speakers aan</li> {% endif %}
        title: "Demo"
        useBrightness: false
        titleColor: "#FFF"
        enableColumns: true
        statePositionTop: true

Now we want to create rows and tiles to display our entities. In my example I enabled the enableColumns but I will first show the configuration if enableColumns: false.

We start with entities:, every item in the entities is a row with tiles, and every row can have it's own title. So below statePositionTop: true in our example we add the following:

        entities:
          - title: Row 1
            entities:

As you can see we started with entities inside the entities we defined 1 item with a title rows and an empty list of more entities. These entities are the tiles we want to display in the row. let's add these tiles! You can also get haptic feedback for iOS user, this can be enabled globally or on each row by adding haptic.

        entities:
          - title: Row 1
            haptic: success
            entities:
              - entity: light.zithoek
              - entity: binary_sensor.wasmachine_status
              - entity: media_player.keuken
          - title: Row 2
            entities: 

As you can see we can set a list with entities and each one will be one tile. and then we can start a new row by adding a new - title with entities.

In the above example we only set the entity: for a tile that is enough to let it work but we can do more to customize this.