Custom Lovelace Card - Homekit style card

[DBuit]

Hello everyone,

Got a update for the light popup card: Release Version 0.5 · DBuit/light-popup-card · GitHub

Some new options added:

1. hideIcon → hides the icon above the slider / switch
2. hideState → hides the state above the slider / switch
3. actions got extra option action which you can set to call-service or fire-dom-event (if not set it will use call-service so existing configuration won’t break)
4. image option for actions to use image in the action button.

Below example of the hideState and hideIcon and the image in a action button:

[tech_fr3ak]

now fan supports percentage is it possible to use slider function with it ?
I’ve enabled slider but not showing slider for fan entity

[Br3b]

thanks for your time spent on this amazing work and your answers!
Sad that a individual styling is not possible ;/

[DBuit]

Hi @Br3b ,

i lied man sorry
i forgot something, you can change the style of 1 tile by using conditionalClass option.
If you add a conditionalClass like below it will add this css class to that tile. And than you can add styles for that class.

conditionalClass: >
      [[[
          return "your-custom-class";
      ]]]

[DBuit]

Hi @tech_fr3ak,

At this moment slider option is only working for lights srry

[Br3b]

haha, thanks man!

My CSS skills are very limited. Where do i implement the class with ccs?

Greetings

[DBuit]

Hi @Br3b,

on the homekit card you got the style part just add it in there like this:

style: |
          .your-custom-class {
              background-color:#F00!important;
          }

This will make the background of the tile red

[Br3b]

Hi @DBuit thanks for your time, but sadly nothing is changing

[DBuit]

@Br3b .

Can you share your config, it works for me

[Br3b]

@DBuit

yes sure, i will send my messy config for that particular usecase.

      - column: 2
        tileOnRow: 3
        entities:
          - title: Media
            entities:
              - card: 'custom:swipe-card'
                wider: true
                higher: true
                widerSize: 2
                higherSize: 2
                noPadding: true
                cardOptions:
                  parameters:
                    start_card: 2
                    autoplay:
                      delay: 3000
                    speed: 1000
                  cards:
                    - type: vertical-stack
                      cards:
                        - type: horizontal-stack
                          cards:
                            - type: 'custom:button-card'
                              entity: switch.strom_tv_wohnzimmer
                              name: TV
                              icon: 'mdi:television'
                              aspect_ratio: 1/1
                              show_state: true
                              state:
                                - value: 'off'
                                  styles:
                                    card:
                                      - filter: opacity(50%)
                                    icon:
                                      - filter: grayscale(100%)
                            - type: 'custom:button-card'
                              entity: switch.wohnzimmer_strom_denon
                              name: Denon
                              icon: 'mdi:cast-audio'
                              aspect_ratio: 1/1
                              show_state: true
                              state:
                                - value: 'off'
                                  styles:
                                    card:
                                      - filter: opacity(50%)
                                    icon:
                                      - filter: grayscale(100%)
                        - type: horizontal-stack
                          cards:
                            - type: 'custom:button-card'
                              entity: switch.wol_pc
                              tap_action:
                                action: toggle
                                confirmation:
                                  text: Karls PC Ein/Ausschalten ?
                              name: Karls PC
                              icon: 'mdi:microsoft-windows'
                              aspect_ratio: 1/1
                              show_state: true
                              state:
                                - value: 'off'
                                  styles:
                                    card:
                                      - filter: opacity(50%)
                                    icon:
                                      - filter: grayscale(100%)
                            - type: 'custom:button-card'
                              entity: switch.pi_hole
                              name: Pi-Hole
                              icon: 'mdi:pi-hole'
                              aspect_ratio: 1/1
                              show_state: true
                              state:
                                - value: 'off'
                                  styles:
                                    card:
                                      - filter: opacity(50%)
                                    icon:
                                      - filter: grayscale(100%)

Thanks in advance!
Greetings

[DBuit]

@Br3b ,

now i know why it won’t work you want to style one of the card inside the swipe card
but what i said was configuration for the home-kit card but when you start with the swipe-card i cant help.

You do have cardStyle: | for the swipe card but i don’t know if you can get to the element you wanna style.

i am reading the info for the card-mod on github and it looks like you can just add:

card_mod:
      style: |
        :host {
          color: red;
          }

In your config to style the card you want. have you tried that?

[Br3b]

@DBuit

card_mod:
      style: |
        :host {
          color: red;
          }

@DBuit hi there, thanks for your time!
Sadly it seems not working. So it seems I have to try it with a picture elemnt like Matt did:
.
Or do you know another way to get the homeklit button cards into a swipe card?

Do I understand something wrong here? Because if I create a swipe-card normally it looks like this:

And there is no background of the card.

If I try to put the swipe-card in a homekit-card it looks like this:

Thats why i tought that I need to style the homekit-card.
Greetings!

[poudenes]

Hi All,

Can someone tell me how to change thickness of the slider part (darker pink part) and how to change the color of this part. Also the smaller part inside…

I want bigger part darker then the inside part…

Used the pink color for better view of the problem

[DBuit]

Hi @Br3b ,

Ok this is easy back to my solution which should work.

I got this for example:

- card: custom:swipe-card
                        conditionalClass: >
                          [[[
                              return "your-custom-class";
                          ]]]
                        wider: true
                        higher: true
                        widerSize: 2
                        higherSize: 2
                        noPadding: true
                        cardOptions:
                          cards:
                            - type: entities
                              entities:
                                - entity: sensor.anniversary_bruiloft
                            - type: entities
                              entities:
                                - entity: sensor.birthday_liene

And i got this on the homekit-card style:

- type: "custom:homekit-card"
        style: |
          .your-custom-class {
              background-color:transparent!important;
          }

This is working.

[DBuit]

Hi @poudenes ,

You can use style to change the color and the side of the grey thumb.
Example css:

- type: "custom:homekit-card"
        style: |
          .button input[type="range"]::-webkit-slider-thumb {
            border-right: 8px solid var(--tile-on-background)!important;
            border-left: 8px solid var(--tile-on-background)!important;
            border-top: 10px solid var(--tile-on-background)!important;
            border-bottom: 10px solid var(--tile-on-background)!important;
            box-shadow: -350px 0 0 350px var(--tile-on-background), inset 0 0 0 80px #F00!important;
          }

Will make it like this:

[Klex1404]

Hi @DBuit ,
after swirling around with other dashboards I’ve come back to use the real thing, your homekit card.

One thing I’m strugling with is the horizontalScroll option. With below code it still breaks the 4th button to the next row on my iPhone.
What am I doing wrong?

Thanks for the hard work!

views:
  - title: "Home"
    icon: mdi:home-outline
    path: "home"
    panel: true
    cards:
      - type: "custom:homekit-card"
        home: false
        title: "Ons huis"
        titleColor: "#FFF"
#        enableColumns: true
        horizontalScroll: true
        statePositionTop: true
        useBrightness: false
        useTemperature: false
        entities:
          - title: Modi
            entities:
              - entity: input_boolean.alarm_mode
              - entity: input_boolean.donker_mode
              - entity: input_boolean.slaap_mode
              - entity: input_boolean.vakantie_mode

[kruton]

Thanks for the tip! Doublechecked, it is open/closed, so that should be ok…
What I do not understand is, why the ‘shutter’ symbols are displayed in Home Assistant, but if I do not define any icons in the frontend it shows the ‘window’ icon instead of the ‘shutter’ icon?!

[Br3b]

hi @DBuit,
yeah, it is working! Thanks alot!

Your homekit panel card buttons are based on button-card right?
Could you share the configuration of the button-card to appear as your homekit buttons?
Thanks for all your amazing work and help!
Greetings and stay safe!

[Klex1404]

Is there anyone who has horizontalScroll working?

Many thanks!

[Quinten94B]

@DBuit first of all, great work with the homekit panel card and slider card. I’m using these for my wallmounted tablet, but the name label and and other text just is a little bit to small in my case.

I have been searching and trying but was not able to scale the text trough css. Is this even possible?