Custom Lovelace Card - Homekit style card

[thecrane (TC)]

Great work on this card, but I must be doing something wrong. I’ve got a bunch of entities (mostly lights and input_booleans) and they’re all appearing just fine. But tapping on them does nothing. I’ve tried different browsers on PC and on mobile, reloading Lovelace, refreshing, disabling plugins - nothing!

What am I doing wrong?

  - type: "custom:homekit-card" 
    home: true
    title: "Lights"
    useBrightness: false
    enableColumns: false
    statePositionTop: true
    entities:
      - title: Automation
        entities:
          - entity: input_boolean.evening_mode
            icon: mdi:weather-sunset
          - entity: input_boolean.night_mode
            icon: mdi:weather-night
          - entity: input_boolean.manual_night_mode
            icon: mdi:car-brake-alert
          - entity: input_boolean.guest_mode
            icon: mdi:account-question
      - title: Upstairs
        tap_action:
          action: toggle 
        entities:
          - entity: light.kitchen
          - entity: light.dining_room
          - entity: light.drawing_room
          - entity: light.command_centre
          - entity: light.lounge
          - entity: light.master_bedroom
          - entity: light.master_wardrobe

[pjmaenh]

@thecrane

For the lights, I think no tap_action is required, so just remove this section from the Upstairs card:

  - title: Upstairs
    entities:
      - entity: light.kitchen
      - entity: light.dining_room
      ...

However, if you want to customize the actions, I think you need to do it for the entities themself, and not on the group entity, e.g.:

  - title: Upstairs
    entities:
      - entity: light.kitchen
        tap_action: ...

There are some examples on GitHub.
Just as an example, this is how I configured a button for my Sonos player that plays/pauses on top. Note that I call a service, and therefore I need to pass the entity_id as service data:

...
      - entity: media_player.playbar
        icon: mdi:music
        offStates: 
          - "off"
          - "unavailable"
          - "paused"
        tap_action:
          action: call-service
          service: media_player.media_play_pause
          service_data:
            entity_id: media_player.playbar
...

[EDIT]
Apparently it is not possible to override the tap_action for a light entity (unless you are defining a custom entity card). Overriding the hold_action however works without any problems.

@DBuit is this expected behaviour? Or should it be possible to override the tap_action for a light or switch entity?

[DBuit]

@dacorn i can share it but it does not work really good it is not updating all the time. i am still looking for a good one to count the amount of lights that are on.

This is mine:

- platform: template
    sensors:
      current_lights_on:
        friendly_name: All lights currently on
        unit_of_measurement: 'aan'
        entity_id: group.all_lights
        value_template: >
            {{ states.light | rejectattr('entity_id','in', ['light.discoagroup','light.the_voice_group_1','light.the_voice_group_2','light.discoagroupodd','light.discoagroupeven','light.the_voice_group_0'] ) |selectattr('state','eq','on') | list | count }}

so i countains a list with entities that should not be counted on the total because i got some weird groups from hue…

If someone now a good way to count it let me know looking for a better one

[DBuit]

@geoffrey
So it al works but you got an console error? or is stuff not working for you?
I don’t got any errors are you using hacs? and do you have latest version installed?

[DBuit]

Yes i made it so you can’t overwrite it at the moment that is maybe not the best move.
Guess i can change that so you do can overwrite the default tap_action that toggles.

[ASNNetworks]

You can do this by using template sensors that will +1 for entities that are turned on. I have that working perfectly for mediaplayers, lights and music.

Lovelace Soft UI - Simple and Clean Lovelace Configuration

@N-l1 I want to thank you again for your previous help and effort. I learned some very important stuff by studying your code. I shaped my UI more and more and allthough it is different now, it was started as your Soft UI and is still inspired by some elements (especially the context aware concept.) Here’s a preview of what I have created now, inspired by your work, Popup-cards of Custom Lovelace Card - Homekit style card and some creativity of my own. I have finedtuned a lot and …

Here is my sample code for the text:

Lovelace Soft UI - Simple and Clean Lovelace Configuration

@N-l1thanks for your help man! I really appreciate it, I succesfully added an extra entry. Also, I wrote my own line of code succesfully. I wanted the context to differ when there was one light on vs multiple. It said ‘1 lights are on’ instead of ‘1 light is on’ (but then in Dutch). So I have added three variables: one if state is 0, of if state is 1 and one if state is else. Now it all looks even more natural. I then used that code in my other cards with multiple devices/states. I’ll paste my c…

This is my sensor that will track the turned on lights (add in configuration.yaml) Change the sensor name, friendly name and entities to your own and it will work. I use this template sensor for many variations (tracking lights, media players, music etc)

  - platform: template
    sensors:
      lights_bathroom_on:
        friendly_name: Lights Bathroom
        unit_of_measurement: 'On'
        value_template: >
          {% set total = 0 %}

          {% if is_state('light.b1', 'on') %}
            {% set total = total + 1 %}
          {% endif %}
          {% if is_state('light.b2', 'on') %}
            {% set total = total + 1 %}
          {% endif %}
          {% if is_state('light.b3', 'on') %}
            {% set total = total + 1 %}
          {% endif %}
          {% if is_state('light.yeelight_lightstrip_plus', 'on') %}
            {% set total = total + 1 %}
          {% endif %}
          {% if is_state('light.b4', 'on') %}
            {% set total = total + 1 %}
          {% endif %}
          
          {{total}}        

[DBuit]

Cool thanks gonna try this!

[DBuit]

Hi everyone,

So i made a third version of the slider popup for covers.

DBuit/cover-popup-card

It works the same as the media_player except it has 1 extra config option ** sliderService** where you need to set if you want to control the normal position or the tilt position with the slider.

I first thought to make 1 pop-up that could work for most entities but configuration gets much more complicated and i can make these pretty quick

Screenshot to finish it:

[ASNNetworks]

No problem. I have created three sensors for lights. One for my living room, one for my bathroom and one that combines them for my main page (which had a navigation action to the lights page).

[ASNNetworks]

Works great, thanks! You think you can add the feature to add services to the Thermostat version as well? I opened an issue on the Github page btw, but thought maybe this will be seen faster for you here.

[Mariusthvdb (Marius)]

this is hardly a workable solution, if you have but a few more lights, or entities in other domains. Hard coding these entities is very sub-optimal.

You’d better try this:

- alias: 'State changed Light'
  trigger:
    platform: event
    event_type: state_changed
  condition:
    condition: template
    value_template: >
      {{ trigger.event.data.entity_id in state_attr('group.all_lights_only','entity_id') }}
  action:
    - service: homeassistant.update_entity
      entity_id: sensor.lights_on

and create use the sensor update utility. use which ever group you like. Or use it with the expand function:

- alias: 'State changed expand'
  trigger:
    platform: event
    event_type: state_changed
  condition:
    condition: template
    value_template: >
      {{ trigger.event.data.entity_id in (expand('group.iungo_switches_state') | map(attribute='entity_id')) }}
  action:
etc etc

use a notification if you will:

    - service: notify.notify
      data_template:
        message: >
         {{trigger.to_state.attributes.friendly_name}} changed from {{trigger.from_state.state}} to {{trigger.to_state.state}}

and some useful conditions:

    condition: template
    value_template: >
      {% set skip_list = ['automation_ran','last_automation','script_ran','last_script',
                          'count_warnings','count_errors','activate_map_sensors_actueel',
                          'timed_python_scripts','update_last_motion','call_service_event_script'] %}
      {{ trigger.event.data.entity_id.startswith('automation.') and
         trigger.event.data.entity_id.split('.')[1] not in skip_list and
         'old_state' in trigger.event.data and 'new_state' in trigger.event.data }}

skiplisted are several automations I don’t want to trigger my automation tracker ( substitute with Hue groups you don’t want to track @DBuit Custom Lovelace Card - Homekit style card ).

startswith is useful for limiting to a domain (which could also be done by using states.[domain] of course, but options are always nice. The final old and new data condition prevents extra firing when attributes change but state is still the same.
Use to your specific needs.

[ASNNetworks]

Thanks for the reply and feedback! I’m a beginner and have found my way around things by finding codes and solutions along the way and use stuff that works for my needs.

Your suggestion looks promising (and future-proof). One question: how can you separate this for different rooms though and still have it automate adding future entities? The method I use now, allows me to track turned on lights per room and combined as well.

[Mariusthvdb (Marius)]

@ASNNetworks

how can you separate this for different rooms though and still have it automate adding future entities?

well, if you want that you can’t escape some hard-coding … but, use groups for a room, and then expand that group in the automation. At least you centralize the hard-coding in your config.

[ASNNetworks]

thanks for the suggestions!

[thecrane (TC)]

Thanks pjmanenh and DBuit - I appreciate the responses.

However, I only had that toggle_action in there for the lights because they weren’t working without it and I was trying something new. I have tried the following code, but when I click on the buttons, nothing happens:

title: "Lights.HK"
icon: mdi:apple
path: lights2
panel: true
cards:
  - type: "custom:homekit-card" 
    home: true
    title: "Lights"
    useBrightness: false
    enableColumns: false
    statePositionTop: true
    entities:
      - title: Automation
        entities:
          - entity: input_boolean.evening_mode
            icon: mdi:weather-sunset
          - entity: input_boolean.night_mode
            icon: mdi:weather-night
          - entity: input_boolean.manual_night_mode
            icon: mdi:car-brake-alert
          - entity: input_boolean.guest_mode
            icon: mdi:account-question
      - title: Upstairs
        entities:
          - entity: light.kitchen
          - entity: light.dining_room
          - entity: light.drawing_room
          - entity: light.command_centre
...

All the buttons appear, and have the right state/brightness etc., but tapping or clicking on them does nothing. I must be doing something wrong, but I can’t see it!

Any help would be greatly appreciated!

[DBuit]

Hi,

That is weird it looks all good!
Any console errors maybe when you tap them?
and are the input_boolean working?

[teqqy (Christian)]

Hi,
i recently installed this card and generally it worked fine. Unfortunatly the toggle action does not work like in other cards. If i press the button, the light or switch turn on and directly off. I have the picture element card on other views, and that works fine.
Maybe its important, but i use it on an older firetv tablet 7 with chrome. Maybe there are some javascript issues?
Thanks.

[DBuit]

Hi teqqy,

How does it work on you pc and can you check in the developer console on your pc if you have any javascript errors?

And how is your configuration looking? maybe i can see something that can help

[teqqy (Christian)]

On my Desktop it works fine (Safari and Chrome on macOS 15) My config:

---
id: tablet_hallway
title: Tablet Hallway
icon: mdi:tablet
panel: true
background: 'center / cover no-repeat url("/local/lovelace/images/homekit-background.jpeg") fixed'
cards:
  - type: custom:homekit-card
    title: CASA LANI
    useBrightness: false
    useTemperature: false
    titleColor: '#FFF'
    statePositionTop: true
    home: true
    rules: |
      <li>Außen: {{states('sensor.weewx_outtemp')}} °C</li>
    entities:
      - title: Arbeitszimmer
        entities:
          - entity: light.hue_white_lamp_1
          - entity: light.az_pt_decke
          - entity: light.leseecke
          - entity: switch.cb_deko

It does not matter if i specify the toggle_action or not.

[DBuit]

At this moment you can not overwrite the tap action for lights so defining a tap_action does nothing for light entities so that wont help.

The tablet does it have chrome or the old android browser? any idea what version of the browser?