Custom Lovelace Card - Homekit style card

[mkhattab (Pharaohnough)]

@DBuit Welcome back!
My thermostat popup cards don’t have any controls for some reason. The controls are there because if I move the cursor around and tap the thermostat responds but they’re just not visible!
Do you have any idea what could be wrong?

Here’s my config:

climate.office_ac:
    card:
      entity: climate.office_ac
      type: 'custom:thermostat-popup-card'
    style:
      '--iron-icon-fill-color': '#FFF'
      align-items: center
      background: 'rgba(0, 0, 0, 0.8)'
      display: block
      flex-direction: column
      height: 100%
      justify-content: center
      left: 0
      margin: 0
      position: fixed
      top: 0
      width: 100%
      z-index: 999
    title: ''

and then for the card:

- entity: climate.office_ac
   tap_action:
     action: more-info
     entity: climate.office_ac
   wider: true

[Krocko]

The light icon on the top of the light popup card don’t get the color from the light state. Is there something to configure?

[Kem]

can you share your weather tile config thanks

[DBuit]

@Kem

- card: weather-forecast
                        noPadding: true
                        wider: true
                        cardOptions:
                          entity: weather.weersverwachting
                        cardStyle: |
                            ha-card {
                                padding: 5px!important;
                                display: flex!important;
                                flex-direction: column!important;
                                background: transparent!important;
                                box-shadow: none!important;
                                border-radius:0!important;
                            }
                            .content {
                               display: flex!important;
                                flex-direction: row!important;
                            }
                            .icon-image {
                                min-width: auto!important;
                            }
                            .icon-image > * {
                                height: 32px!important;
                                flex: 0 0 32px!important;
                            }
                            .info .name-state {
                                font-weight: 500;
                            }
                            .info .name-state .state {
                                font-size:14px!important;
                                text-align:right;
                            }
                            .info .name-state .name {
                                font-size:14px!important;
                            }
                            .info .temp-attribute {
                                width:100%;
                                font-weight: 500;
                            }
                            .info .temp-attribute .temp {
                                    font-size: 16px!important;
                            }
                            .info .temp-attribute .temp span {
                                    font-size: 14px!important;
                            }
                            .forecast {
                                font-size: 10px!important;
                                padding-top: 5px!important;
                            }
                            .forecast-image-icon {
                                padding:0!important;
                            }
                            .forecast-image-icon > * {
                                width:20px!important;
                                height:20px!important;
                                margin: 0 auto!important;
                            }
                            .forecast .temp {
                                margin-top:0!important;
                                font-size:12px!important;
                            }
                            .forecast .templow {
                                display:none;
                            }

[Kem]

@DBuit thank you this is an awesome card

[martheijnen (Mart)]

Hey @DBuit it’s me again, from the sidebar card

I am combining this card with the custom:layout-card from here, but when using the column/rows feauture the card is broken and just won’t show up (i guess, because the layout card also uses it) I want to achieve something (see picture) where i can have the remote control, combined with the homekit card but it only works if I don’t use the column/rows and that’s something I’d love to use.

So below I’ll show you the code & screenshot of how I bypassed it (by making 3 layouts in the layout card) but I’d love to have 2, with column/row feauture of you enabled in the homekit card

without:

    cards:
    - type: custom:layout-card
      layout: vertical
      min_columns: 3
      max_columns: 3
      column_width: [24%,38%,38%]
      cards:
        - type: vertical-stack
          cards:
            - cards:
#CUTOUT BECAUSE 2 MANY CHARACTERS IN FORUM POST
              type: vertical-stack
        - break
        - type: custom:homekit-card
          style: !include ../styles/homekit-card.yaml
          entities:
          - title: Living
            entities:
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: mediaplayer-card
                  variables:
                    - entity: media_player.tv_living_room
                    - icon: television
                    - name: Television
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: mediaplayer-card
                  variables:
                    - entity: media_player.kodi_living_room
                    - icon: kodi
                    - name: Kodi
                    - tap_action: more-info
                    - show_entity_picture: true
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: playstation-card
                  variables:
                    - entity: media_player.playstation_4_pro
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: playstation-card
                  variables:
                    - entity: media_player.playstation_4_pro
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: playstation-card
                  variables:
                    - entity: media_player.playstation_4_pro
          - title: Recent TV Shows
            entities:
              - card: custom:upcoming-media-card
                noPadding: true
                cardOptions:
                  line1_text: '$empty'
                  line2_text: '$empty'
                  line3_text: '$empty'
                  line4_text: '$empty'
                  line5_text: '$empty'
                  entity: sensor.emby_latest_tv_shows
                  position: 1
              - card: custom:upcoming-media-card
                noPadding: true
                cardOptions:
                  line1_text: '$empty'
                  line2_text: '$empty'
                  line3_text: '$empty'
                  line4_text: '$empty'
                  line5_text: '$empty'
                  entity: sensor.emby_latest_tv_shows
                  position: 2
              - card: custom:upcoming-media-card
                noPadding: true
                cardOptions:
                  line1_text: '$empty'
                  line2_text: '$empty'
                  line3_text: '$empty'
                  line4_text: '$empty'
                  line5_text: '$empty'
                  entity: sensor.emby_latest_tv_shows
                  position: 3
        - break
        - type: custom:homekit-card
          style: !include ../styles/homekit-card.yaml
          entities:
          - title: Living
            entities:
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: mediaplayer-card
                  variables:
                    - entity: media_player.tv_living_room
                    - icon: television
                    - name: Television
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: mediaplayer-card
                  variables:
                    - entity: media_player.kodi_living_room
                    - icon: kodi
                    - name: Kodi
                    - tap_action: more-info
                    - show_entity_picture: true
              - card: custom:decluttering-card
                noPadding: true
                cardOptions:
                  template: playstation-card
                  variables:
                    - entity: media_player.playstation_4_pro

          - title: Recent Movies
            entities:
              - card: custom:upcoming-media-card
                noPadding: true
                cardOptions:
                  line1_text: '$empty'
                  line2_text: '$empty'
                  line3_text: '$empty'
                  line4_text: '$empty'
                  line5_text: '$empty'
                  entity: sensor.emby_latest_movies
                  position: 1
              - card: custom:upcoming-media-card
                noPadding: true
                cardOptions:
                  line1_text: '$empty'
                  line2_text: '$empty'
                  line3_text: '$empty'
                  line4_text: '$empty'
                  line5_text: '$empty'
                  entity: sensor.emby_latest_movies
                  position: 2
              - card: custom:upcoming-media-card
                noPadding: true
                cardOptions:
                  line1_text: '$empty'
                  line2_text: '$empty'
                  line3_text: '$empty'
                  line4_text: '$empty'
                  line5_text: '$empty'
                  entity: sensor.emby_latest_movies
                  position: 3

This results in the following (sidebar is not in code, but using your sidebar card), but I more like it to have 2 layouts (so 1 for remote & 1 for homekit card), and now I “bypassed” it by making 3 layouts (1 remote, 1 homekit & another homekit). I prefer the rows/columns version, but that’s just not working out and results in showing nothing (not even an error, just blanco card)

[skank]

I still have to do this for my lights
I have to able to adjust the brightness of my lights
Now i just turn them on/off
I want it as simple as possible
Whats the best way to do this?

Use the light pop up card?
But i think its too much for that no?

[DBuit]

Hello everyone,

If people are interested i added this:

So you can use a slider in the tile to change the brightness, no pop-up needed anymore
If you wanna test it out you can install it with HACS, reinstall the card and enable beta version!

[Krocko]

Can anyone please help me to solve this?

[Freshhat]

Looks great, can you please share your config for the waste collection? I’m also trying to achieve this with my waste google cal.

[skank]

I like the idea but isnt it an option to have the slider at the right edge, instead of the middle of the card?

[lubbertkramer]

How do i select the beta version in HACS or do i need to add the beta from Git?

[DBuit]

Maybe, how would you see that?
Im just testing atm maybe it wont work at al

Chrome is working safari is kinda buggy at the moment btw

[DBuit]

When you have the card in HACS, you can click the 3 dots (bottom right) and click on reinstall.
Than a pop-up shows and there is a switch to enable beta versions

[DBuit]

Hello everyone,

If you use any of the pop-up cards they are all updated with some icon fixes.
For the media player and cover pop-up i added that you can already see the volume/position while sliding.

Check my github to find the cards: https://github.com/DBuit?tab=repositories

[skank]

Mm dont know
maybe a scrollbar at the bottom of the button, or a scrollbar to the far right of the card?
I’m not sure if thats a good way, maybe popup is better or not?
What would you recommend as simple popup for adjusting brightness only, so a simple slidebar

Also with your experience, whats the best thing thing to use? double tap to activate popup? Cause you dont always want the popup, most of the time i just toggle it on/off
The switch popup card?
Looks nice and clean

[DBuit]

i now use light popup it has the slider on hold action / long press
and tap is on / off

[lubbertkramer]

Thanks, found it!

Will try it out (also with my partner for the WAF) and will provide feedback.

[Noah]

good work, i’ll try out the cards this evening.
Also the sidebar card looks interesting

[skank]

Hey Dbuit

Wow cool feature!
Just tested this
Its much nicer and cleaner than popupcard i think

However i did encounter troubles

Ill demonstrate with pics

Eettafel is when the light is completely out. i would like to stay it that way
When i turn it on, you get the slider, however when i slide it completely to the left, the button doesnt return to the one like “eettafel”, it looks empty see the pic .
You shouldnt see the slider if its off i think
If i move it back it comes ok again

Maybe it would look nice to if the grey part (which is the off %) would have the same color as when its completely off, if u know what i mean (the shadow color)

edit: i thought it would slide from top to bottom, but when i tried , i saw it slided horizontally… actually very good ! no need to put it to the right then