Custom Lovelace Card - Homekit style card

I already posted it 3 posts or something above.

Whoops, missed that. Sorry and thanks!

Hi there.
Do you cater for Alarm Panel arming and disarming with the homekit-card and light-popup-card?

Hi , still haveing issue with the card , no templates and the card doesn’t show yellow… someone know where should i check, i just took the main example and changed entities , no templates…

thanks

resources:
  - type: module
    url: /hacsfiles/lovelace-auto-entities/auto-entities.js

  - type: js
    url: /hacsfiles/bar-card/bar-card.js

  - type: module
    url: /hacsfiles/lovelace-battery-entity/battery-entity.js

  - type: module
    url: /hacsfiles/button-card/button-card.js

  - type: module
    url: /hacsfiles/lovelace-card-mod/card-mod.js

  - type: module
    url: /hacsfiles/custom-header/custom-header.js

  - url: /hacsfiles/decluttering-card/decluttering-card.js
    type: module

  - type: module
    url: /hacsfiles/flex-table-card/flex-table-card.js

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

  - type: module
    url: /hacsfiles/lovelace-layout-card/layout-card.js

  - url: /hacsfiles/light-entity-card/light-entity-card.js
    type: module

  - url: /hacsfiles/light-popup-card/light-popup-card.js
    type: module

  - type: module
    url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js

  - url: /hacsfiles/mini-media-player/mini-media-player-bundle.js
    type: module

  - type: module
    url: /hacsfiles/rgb-light-card/card.js

  - type: module
    url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js

  - url: /hacsfiles/slider-entity-row/slider-entity-row.js
    type: module

  - type: module
    url: /hacsfiles/upcoming-media-card/upcoming-media-card.js

  - type: module
    url: /hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js

  - type: module
    url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js

  - type: module
    url: /hacsfiles/weather-card/weather-card-bundle.js

  - Type: module
    url: /hacsfiles/swipe-card/swipe-card.js

  - type: module
    url: /hacsfiles/switch-popup-card/switch-popup-card.js


views:
  - title: "Example"
    path: "example"
    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: "example"
        useBrightness: false
        useTemperature: false
        titleColor: "#FFF"
        enableColumns: true
        statePositionTop: true
        rows:
          - row: 1
            columns:
              - column: 1
                tileOnRow: 4
                entities:
                  - title: Lichtstrip
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                    entities:
                      - entity: light.light1
                        name: Lichtstrip
                        icon: mdi:led-strip-variant
                        popupExtend:
                          actions:
                            - service: scene.turn_on
                              service_data:
                                entity_id: scene.ontspannen
                              color: "#FDCA64"
                              name: ontspannen
                            - service: scene.turn_on
                              service_data:
                                entity_id: scene.helder
                              color: "#FFE7C0"
                              name: helder
                            - service: scene.turn_on
                              service_data:
                                entity_id: scene.concentreren
                              color: "#BBEEF3"
                              name: concentreren
                            - service: scene.turn_on
                              service_data:
                                entity_id: scene.energie
                              color: "#8BCBDD"
                              name: energie
                      - entity: light.light2
                        name: Zithoek
                        icon: mdi:floor-lamp
                      - entity: light.light3
                        name: Eettafel
                        icon: mdi:ceiling-light

Hello, everyone,
I’m having some trouble getting the “custom:switch-popup-card” to work with my lock. I always get the following error. I just can’t get any further around here… :thinking:

                      - entity: lock.haustur
                        popup:
                          type: custom:switch-popup-card
                          noActiveState: '-'
                          entity_value_path: state
                          entities:
                            - lock.haustur
                          buttons:
                            - icon: "mdi:lock-open"
                              value: "unlocked"
                              name: "Open"
                              color: "#FFF"
                              icon_color: "rgba(255,255,255,1)"
                              service: lock.unlock
                              service_data:
                              entity_id: lock.haustur
                            - icon: "mdi:lock"
                              value: "locked"
                              name: "Dicht"
                              color: "#FFF"
                              icon_color: "rgba(255,255,255,1)"
                              service: lock.lock
                              service_data:
                              entity_id: lock.haustur

Is it possible to add custom svg as icon of the tile like this:

Try to change the following line under popup

entities:
  - lock.haustur

to this one:

entity: lock.haustur

still not working, same error… I have tried the following variants now.

                        popup:
                          type: custom:switch-popup-card
                          noActiveState: '-'
                          entity_value_path: state
                          entity: lock.haustur
                          buttons:

and

                        popup:
                          type: custom:switch-popup-card
                          noActiveState: '-'
                          entity_value_path: state
                          entities:
                            - entity: lock.haustur

Hi,

You van try image and offImage option check readme: https://github.com/DBuit/Homekit-panel-card

Not sure if IT works for svg’s in hml IMG tag

Hi,
Van you share more of you config with the homekit card config?

What do you mean with html tag? Can you share an example with html tag?

Sure. Here ist the complete card. I think I fixed the error but now I have a blank screen. I think the “buttons” are not loading.

                  - title: Haus
                    entities:
                      - entity: lock.haustur
                        popup:
                          type: custom:switch-popup-card
                          noActiveState: '-'
                          entity_value_path: state
                          entities:
                            - entity: lock.haustur
                          buttons:
                            - icon: "mdi:lock-open"
                              value: "unlocked"
                              name: "öffnen"
                              color: "#FFF"
                              icon_color: "rgba(255,255,255,1)"
                              service: lock.unlock
                              service_data:
                              entity_id: lock.haustur
                            - icon: "mdi:lock"
                              value: "locked"
                              name: "schließen"
                              color: "#FFF"
                              icon_color: "rgba(255,255,255,1)"
                              service: lock.lock
                              service_data:
                              entity_id: lock.haustur

Just looked again on the example code and tried it on my installation with my Nuki Lock.

This one is working for me:

                      - entity: lock.dahoam
                        popup:
                          type: 'custom:switch-popup-card'
                          noActiveState: '-'
                          entity_value_path: state
                          entities:
                            - lock.dahoam
                          buttons:
                            - icon: 'mdi:lock-open'
                              value: unlocked
                              name: Open
                              color: '#FFF'
                              icon_color: 'rgba(255,255,255,1)'
                              service: lock.unlock
                              service_data: null
                              entity_id: this
                            - icon: 'mdi:lock'
                              value: locked
                              name: Dicht
                              color: '#FFF'
                              icon_color: 'rgba(255,255,255,1)'
                              service: lock.lock
                              service_data: null
                              entity_id: this
                        icon: 'mdi:door'
                        name: Haustür
                        offIcon: 'mdi:door-open'
                        offState:
                          - unlocked

and i also had that issue with the blank screen, but in chrome dev tools i saw that the card couldn’t be loaded. Seems that HACS had issues to add the module to the Lovelace ressources, had to reinstall it

Ahhh found the problem. The solution is to add “null” in the service_data line. Your code worked 1:1 to me now. Thank You!

                              service_data: null

Hi, did groups functionality get added as I’m struggling to make this work?

Is it possible to remove all this wasted space normally used for text at the bottom of the radar map card? every card with a camera or a photo has nearly half its space being whitespace and makes the row nearly twice as big as needed:

Hey @DBuit Did you manage to find out if it’s possible to add wider/higher tiles, why the hold action in my example is not working and if we can align tiles more (see example i am replying on)?

Please let me know if I can help you with explaining better,
Thanks for your great work

Hi @DBuit, I created a media tile. I would like to be able to change the image and use the entity_picture attribute image. Is this possible?

When putting the light card in a popup on a swipe card, it works flawlessly on my mobile device. However, in chrome on the desktop, I loose ability to move the slider …
Anyone experenced the same issue ?

Nice design of the popup. Could you please share your config?