Custom Lovelace Card - Homekit style card

Read the latest changes to popup. You need to change the style info.

id say use the settings funktion against this card

Where i need to do this modification here is my config working previously

cards:
- type: custom:homekit-card
title: "Volets"
titleColor: "#FFF"
enableColumns: true
statePositionTop: true
useBrightness: true
useTemperature: true
rows:
  # Volets Rez-de-chaussée
  - row: 1
    columns:
      - column: 1
        #tileOnRow: 2
        entities:
          - title: Rez-de-chaussée
            entities:
              # SĂ©jour Nord
            - entity: cover.sejour_nord
              name: SĂ©jour Nord
              offStates: "closed"
              offIcon: mdi:window-shutter
              icon: mdi:window-shutter-open
              state: sensor.cover_pos_sejour_nord
              popup:
                type: custom:cover-popup-card
                sliderService: cover.set_cover_position
                sliderColor: "#ddd"
                sliderTrackColor: "#FFF"
                sliderThumbColor: "#ddd"
                sliderThumbBorderColor: "#FFF"
                sliderTrackStripeColor: "#ddd"
                actionsInARow: 3
                actions:
                  - service: cover.open_cover
                    service_data:
                      entity_id: this
                    name: open
                    icon: mdi:window-shutter-open
                  - service: cover.stop_cover
                    service_data:
                      entity_id: this
                    name: stop
                    icon: mdi:stop
                  - service: cover.close_cover
                    service_data:
                      entity_id: this
                    name: close
                    icon: mdi:window-shutter
                  - service: cover.set_cover_position
                    service_data:
                      entity_id: this
                      position: 30
                    name: 30%
                    icon: mdi:swap-vertical
                  - service: cover.set_cover_position
                    service_data:
                      entity_id: this
                      position: 50
                    name: 50%
                    icon: mdi:swap-vertical
                  - service: cover.set_cover_position
                    service_data:
                      entity_id: this
                      position: 80
                    name: 80%
                    icon: mdi:swap-vertical

Hi @tonioa,

You have browser_mod and card_mod installed? in new version this is needed to get everything working again.

Yes it’s already installed

Light popup is ok on my iphone, i have only the problem on Cover popup on my iphone

Did you ever get the time to have a look on that code i sent to make a action config with the coloring globe?

Ah! yeh what you need to lower the hight of the bar. im using the settings below to have it working on my gf’s iphone 6s.
brightnessHeight: 310px
brightnessWidth: 110px

Hi DBuit, did you ever get the time to look in to that code i showed?

Hi!

I’m using the Homekit-panel-card for my light switches to get a homekit style button, but the problem is I’m can’t get it to center it.

I don’t want to use the panel mode, because this will align all the buttons to the left like this with almost no space: https://i.imgur.com/9wJOP7O.png

What I prefer is that it’s like a normal card like this: https://i.imgur.com/yuUrl2J.png

When I disable the panel mode, it centers the card in the middle. With multiple buttons, it just adds them to the right and don’t center them like this: https://i.imgur.com/87CTg03.png

Can someone help me with this?

Hello,

Is it possible to align the bottom right row with the top right rows?


Thanks

set the tileOnRow to 5 for temeratura

That worked.

Thank you!

@DBuit is it possible to display the percentage of the cover on the button so I don’t have to open the popup each time I want to check what the percentage is?

Hello guys, can I hide that information?

2020-08-14_35

Also the possibility to remove the “name” displayed will be appreciated =)

Thaks!

Hi @DBuit

Any chance you’re planning on working on this card and converting it to Homekit Style? I love it, but would have a few suggestions (e.g. previous/next track, album artwork for favourites, etc.) if you were planning on developing it further.

Thanks for all your work!

Hi guys,

Small update with some new configuration: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.5.6

Added 2 new config options for the extra state that is displayed for lights this is default brightness for example.
You could already overwrite this the the state option and just set any entity and the state would display on the position where it normally would show the brightness.
Now i added statePath with this you can also display any other values of the entity you set in state so example:

- entity: sensor.door
  name: door sensor
  state: light.frontdoor
  statePath: attributes.brightness

This will display the brightness of the light instead of just the state which would be on / off

The other thing is hideState.
So when you have a light or a sensor they default display the extra state and by setting hideState to true this is gone.

@NdR the hideState is something for you :wink: and the name can be hidden by just setting the name with empty string name: ""

1 Like

Hi @Dyl,

I wanna develop it more it you got some nice ideas can you add them on github?

Thanks!

Hi @Flavio_Afonso,

I just added statePath this can be used to display the percentage

Done! Look forward to seeing how it comes together.

Hello everyone,

Got something new :slight_smile:

I added masonry which makes it possible to make different size tiles to fit nicely
In the old version you would get this:

With masonry enables you get this:

I also added the option to make tiles 6 times the width or height of the default tile.
Checkout the update: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.5.7

Thank you. I updated the card and added “statePath: attributes.current_position” to one of my covers but it still doesn’t show me the percentage on the button.

Thanks

also set the state with the enitity it should get the value from