Custom Lovelace Card - Homekit style card

@Heine_Madsen found the problem.

In you current configuration you should set enableColumns to false than i works for me.
Or if you do wanna use columns you should edit your config to this:

  - 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
        rows:
          - row: 1
            columns:
              - column: 1
                tileOnRow: 4
                entities:
                  - title: Title!
                    entities:
                      - entity: light.kontor

Folder paths are case sensitive
homekit-panel-card is not Homekit-panel-card :wink:

Here you go:
https://pastebin.com/rh04Vcjr

Hi @mkhattab,

On line 184 you set type: 'custom:thermostat-popup-card' that is not needed and can be removed.
You defined popup-cards on line 16 this must be popup_cards with an underscore.

I think the popups_cards will help with your problem.

@DBuit
Oops!
Thanks so much for your help. It’s working fine now

1 Like

I’m having trouble with properly displaying a mini-graph card. For some reason the header font size is very small. I set it to 13px in the settings, but this doesn’t seem to work. If I force it using the cardStyle setting, it does come out the way I expect it, but then the card is all messed up. Am I doing it wrong somewhere? Help is very much appreciated!

chrome_E1qvXFa211 chrome_aAg87LD3Zh

The code I use is:

      - title: Temperatuur
        entities:
          - card: custom:mini-graph-card
            higher: true
            wider: true
            noPadding: true
#            cardStyle: |
#              .header {
#                font-size:13px;
#              }
            cardOptions:
              entities:
                - sensor.woonkamer_temperature
              hours_to_show: 24
              points_per_hour: 2
              line_width: 3
              hour24: true
              animate: true
              decimals: 1
              font_size: 100
              font_size_header: 13
              height: 90
              show:
                graph: line
                icon: false
                fill: true
                extrema: true
                average: false
              line_color: '#ffb414'
              name: Woonkamer

Hi @correctomundo,

If you don’t use the cardStyle i apply a default cardStyle for mini-graph-card. So it looks like it does not fit always. below is the default cardStyle i apply i think you should edit it to fit your needs and use cardStyle in your config.

:host {
	height: 100%;
}

ha-card {
	background: transparent;
	color: #000;
	padding: 0!important;
	box-shadow: none;
}

.header {
	padding: 10px 10px 0 10px;
}

.header .name,
.header .name .ellipsis {
	font-size: 13px!important;
	font-weight: 500;
	color: #000;
	opacity: 1;
}

.header icon {
	color: #f7d959;
}

.states {
	padding: 0 10px;
}

.states .state .state__value {
	font-size: 13px;
}

.header .icon {
	color: #f7d959;
}

This is my real config. What do you mean by “no tabs under service_data”. If i change it too

          - title: Fans
            entities:
              - entity: fan.study_fan
                spin: true
                popup:
                  type: custom:switch-popup-card
                  icon: "mdi-fan"
                  noActiveState: '-'
                  entity_value_path: attributes.speed
                  service: fan.set_speed
                  service_data:
                    entity_id: fan.study_fan
                    speed: value
                  entities:
                    - fan.study_fan
                  buttons:
                    - icon: "mdi:fan"
                      value: high
                      name: "High"
                      color: "#FFF"
                      icon_color: "rgba(255,255,255,1)"
                    - icon: "mdi:fan"
                      value: medium
                      name: "Medium"
                      color: "#FFF"
                      icon_color: "rgba(255,255,255,1)"
                    - icon: "mdi:fan"
                      value: low
                      name: "Low"
                      color: "#FFF"
                      icon_color: "rgba(255,255,255,1)"
                    - icon: "mdi:fan-off"
                      value: off
                      name: "Off"

I get a different error

voluptuous.error.MultipleInvalid: must contain at least one of entity_id, area_id.

`

@slipx06

in your service_data you have entity_id: fan.study_fan replace that with entity_id: this, this will be replaced with the entity or entities defined under entities:

Thanks. Working now

im trying to use the switch-popup-card for my garage door… but i do not get any actual switch buttons just a black card with the icon and state. if i follow your layout for config i get block mapping errors (indenting under - icon:). here is what i have that gives no errors, but i cannot see the switch buttons

          - type: custom:switch-popup-card
            noActiveState: '-'
            entity_value_path: state
            entities: 
            - cover.garage_door
            buttons:
            - icon: "mdi:garage-open"
              value: "open"
              name: "Open"
              color: "#FFF"
              icon_color: "rgba(255,255,255,1)"
              service: cover.open_cover
              service_data:
              entity_id: this
            - icon: "mdi:garage"
              value: "closed"
              name: "Closed"
              color: "#FFF"
              icon_color: "rgba(255,255,255,1)"
              service: cover.close_cover
              service_data:
              entity_id: this

I have the following for my garage door. I have not tested if the buttons work but it does not seem to be reading the state information

          - title: Doors
            entities:
              - entity: cover.garage_door
                popup:
                  icon: mdi:garage
                  type: custom:switch-popup-card
                  entities: 
                  - cover.garage_door
                  noActiveState: '-'
                  entity_value_path: state
                  buttons:
                  - icon: "mdi:garage-open"
                    name: "Open"
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,1)"
                    service: cover.open_cover
                    service_data:
                      entity_id: this
                  - icon: "mdi:garage"
                    name: "Close"
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,1)"
                    service: cover.close_cover
                    service_data:
                      entity_id: this

image

image

1 Like

@slipx06 you should add value: "closed" to your closed button and value: "open" to your open button. this way it knows for what value the buttons should be active and display the active state above the buttons.

@Bartem maybe check your config with @slipx06 his config it is working for him. Of course check my reply above this one about the value that is missing for him.

Thanks. That fixed it @Bartem below is my working code

          - title: Doors
            entities:
              - entity: cover.garage_door
                offStates: closed
                popup:
                  icon: mdi:garage
                  type: custom:switch-popup-card
                  entities: 
                  - cover.garage_door
                  noActiveState: '-'
                  entity_value_path: state
                  buttons:
                  - icon: "mdi:garage-open"
                    name: "Open"
                    value: open
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,1)"
                    service: cover.open_cover
                    service_data:
                      entity_id: this
                  - icon: "mdi:garage"
                    name: "Closed"
                    value: closed
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,1)"
                    service: cover.close_cover
                    service_data:
                      entity_id: this
1 Like

@DBuit Great work or as we say in the Dutch “goed gedaan topper!”. One request or question about your HomeKit card, will it be possible to size the card for example size: 30% / size: 40% or set a hight/width just like is possible wit the custom button card? I saw it’s already possible to do double size but i want to change my custom button cards for your homekit card (much easier instead of all the button templates in decluttering).

See my example below for my custom button card (with - size: 40%) with circle sensor for brightness:
image

and homekit normal view and with higher/wider view (don’t think it’s really working this way with that much white)
image

@DBuit @lubbertkramer
I was also wondering about this because I’d like to be able to fit more tiles on my wall-mounted tablet without scrolling.
I was also wondering if it would be possible to use the icon of the state variable instead of the state. Let’s say I use a contact sensor or binary sensor to show the state instead of “on”/“off”. My customize.yaml file defines device classes for some entities so a contact sensor will show an icon of an open window or closed window depending on state etc.
(We’re getting greedy now!)

Hi, great suggestion that would probably work better. i guess i will make it possible to set the width/height in configuration. but than you also need to be able to change other sizes :thinking: like icon size, round state size etc. that makes it a bit more complicated

so you don’t wanna let the icon depend on the entity but on the state(entity) you configured?
can you make a issue on github for me so i won’t forget to make it :slight_smile: thank you!

Or let the icon/circle with brightness/temp scale with the width/size. In my opinion the number of the brightness/set temp on the climate version is too small to be fully usable. Do you also want a github issue for the size request or?