Custom Lovelace Card - Homekit style card

Share your Projects! Dashboards & Frontend
,
1548

Code to get it working as good as possible is

              - card: weather-forecast
                cardOptions:
                  entity: weather.smhi_hemma
                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;
                  }
                higher: true
                higherSize: 1
                noPadding: true
                wider: true
                widerSize: 2
1549

Ive never been able to get a working button that you press that get in to the wheel.
But what get you the setting to pick color like that in the end of the gif animation is = “custom:light-entity-card”

Below you have my code that i use. But then you have to press Settings to get in to it. And that works fine for me. If you ever find out how to get it so that you can select that rainbow button to get in to it im all ears.

              - deep_press: true
                entity: light.vardagsrum_golvlampor
                icon: hue:floor-shade
                name: Golvlampor
                offStates:
                  - 'off'
                  - unavailable
                  - otillgänglig
                  - unknown
                popupExtend:
                  actions:
                    - color: '#d8d9e1'
                      service: light.turn_on
                      service_data:
                        color_temp: 153
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#d5b08d'
                      service: light.turn_on
                      service_data:
                        color_temp: 326
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#ce944b'
                      service: light.turn_on
                      service_data:
                        color_temp: 500
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#271a00'
                      service: light.turn_on
                      service_data:
                        brightness: 5
                        color_temp: 500
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#2E8B57'
                      service: light.turn_on
                      service_data:
                        color_name: seagreen
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#D2691E'
                      service: light.turn_on
                      service_data:
                        color_name: chocolate
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#FF00FF'
                      service: light.turn_on
                      service_data:
                        color_name: fuchsia
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#DC143C'
                      service: light.turn_on
                      service_data:
                        color_name: crimson
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#1E90FF'
                      service: light.turn_on
                      service_data:
                        color_name: dodgerblue
                        entity_id: light.vardagsrum_golvlampor
                    - color: '#FFD700'
                      service: light.turn_on
                      service_data:
                        color_name: gold
                        entity_id: light.vardagsrum_golvlampor
                  actionsInARow: 5
                  displayType: slider
                  settings:
                    closeButton: stäng
                    openButton: Inställningar
                  settingsCard:
                    cardOptions:
                      brightness: true
                      child_card: true
                      consolidate_entities: true
                      hide_header: false
                      shorten_cards: false
                      entity: light.vardagsrum_golvlampor
                      secondary_info: last-changed
                      smooth_color_wheel: true
                    cardStyle: |
                      background-color:#FFF;
                    type: custom:light-entity-card

I think i gave upp on it cause it was not possible unless you use Yaml mode.

1550

Hi

I tried this code , but again, doesnt work
Your code has highersize 1 and widersize 2
My code needs highersize 2 and widersize 3
I adjusted it, but then again, your code doenst work, it shows like this

I found your code already way up in this topic, and tried that before too, without luck

So still, i’m looking for a code that works for higherSize 2 and widerSize 3
Think i tried like, 30 codes… without luck

1551

I have it working in a somewhat similar fashion by using the setting button of the popup slider. Don’t have any actions with presets. But letting the settings link to the a light-entity-card which can show the RGB wheel does the trick for me. This is my popup after pre

image
image510×679 17.9 KB

image
image585×657 42.4 KB

Popup config for my entire row of lights (White & RGB):

            popup:
              type: custom:light-popup-card
              displayType: slider
              sliderColoredByLight: true
              fullscreen: true
              settings:
                openButton: Details
                closeButton: Sluiten
              settingsPosition: top
              settingsCard:
                type: custom:light-entity-card
                cardOptions:
                  entity: this
                  hide_header: false
                  persist_features: true
                  show_slider_percent: true
                  full_width_sliders: true
                  brightness: true
                  color_temp: true
                  white_value: true
                  color_wheel: true
                  color_picker: true
                  style: |
                    ha-card {
                      --ha-card-background: white;
                      width: 400px;
                    }
1552

Hi mvanlijden,

Thanks for sharing your code, i managed to get it to work.

I do have 1 question, I happen to have a Lighting group called Dining Lights that has around 7 bulbs.
So when i try to launch the RGB wheel for it, it appears for each bulb.

2 issues i have :

  1. I am only able to scroll and see from Bulb 4 to Bulb 7, but not able to see anything above that. Is there anything i can do to fix this?
  2. Is it possible that i can control just 1 RGB Wheel and adjust the Colors for all 7 Bulbs at 1 go…(Not sure if that is possible).
    Screenshot 2021-11-18 at 9.46.39 PM
    Screenshot 2021-11-18 at 9.46.39 PM678×1882 167 KB

    I
1 Like
1553

You could create a group (Light Group - Home Assistant) and use that in the card. The controls are always linked to one entity, but with the group that will go to all lights in the group.

edit: should have read better that you already have the groups. I truly don’t know why the difference is being made. But it might be a good idea to test and configure your card separately from the popup first and then copy everything over to the popup settings config. Otherwise check the topic for the light-entity-card: Light Entity Card

1554

Thanks Maarten,

Checked the Light Entity thread and found that the following code is required for grouped entities

  consolidate_entities: true
1555

Hi man,

Love the card makes everything look so sleek.

I have one issue with the heating & cooling. When I use the ‘useTemperature’ code it doesn’t change anything? Atm I have my air conditioning set to cool at 19 degrees but it shows the temp in red?

Anything I can do about that?

Also, with the media entity, can I have it switch the icon to show what I’m watching or on what service? EG show netflix icon or disney plus icon when I’m watching those?

1556

Hey man, this looks great. How did you get the media player to show normal sized and shows the content and use the home kit card at the same time?

I can’t seem to achieve that since it’s in panel mode

1557

I’m still looking to get a weather forecast card in a tile
But with widerSize: 3 and higherSize: 2
It’still not working using following code

                    card: weather-forecast
                    noPadding: true
                    wider: true
                    widerSize: 3
                    higher: true
                    cardOptions:
                      entity: weather.thuis
                    style: |
                      :host {
                        --heigth: 100% ;
                      }

I’m trying to get a tile for and input select button too, but even that one, has layout problems with padding
Here’s that code

                    card: custom:button-card    
                    noPadding: true
                    wider: true
                    cardOptions:
                      entity: input_select.radio_station  
                      styles:
                          card:
                            - width: 240px
                            - height: 120px
                            - font-size: 15px
                          name:
                            - justify-self: start
                            - padding-left: 10px
                            - font-weight: bold
                            - padding-bottom: 25px
                          img_cell:
                            - justify-content: start
                            - padding-left: 25px
                          icon:
                            - justify-self: start  
                            - padding-top: 10px

Anyone can help?

1558

Question. What type of eviroment do you use against homeassistant? Are you zoomed? Or something like that? Is it like that in all your devices?

Why I’m asking is cause the code I game you should
Work. Makes me wonder if the problem is allse were.

1559

I am not zoomed…
Its happening on tablet (the weather) but not on smartphone, but the input select happens also on smartphone and tablet

1560

Is it possible to get rid from the text “off” but keep the brightness value if the light is on. I’m trying to find a solution but it seems not possible? Thx in advance

1561

Nevermind it, i was fed up with it and changed away from homekit style for some pages

1562

I can’t seem to get my media entity to change to display the media content when its playing.

What do I need to do?

Screen Shot 2021-11-27 at 11.55.15 PM
Screen Shot 2021-11-27 at 11.55.15 PM2066×1336 163 KB

1 Like
1563

@Twours hi, how did you change the color on the thermostat card? Would you share your code?

thx

1564

Hi everyone has any of you created a media player to manage Volumio?
If you haven’t made it but you have a card with a media player, could you share the code?
Thanks

1565

Hi @skank

This is my weather card:
weather example

and this is my config:

                      - card: weather-forecast
                        noPadding: true
                        wider: true
                        widerSize: 3
                        cardOptions:
                          entity: weather.weersverwachting
                        cardStyle: |
                            ha-card {
                                padding: 10px!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;
                            }

Maybe is helps you?
About the checkcard, can you share what card that is? and what is not working?

2 Likes
1566

someone know why I cant use homekit card?

Screenshot 2021-11-29 101222
Screenshot 2021-11-29 1012221258×600 30.9 KB

I installed with HACS and I added the resources, what I doing wrong?

22
221431×569 30.1 KB

3
31094×207 9.26 KB

1567

Hi all,
Looking for a solution where I can nest the homekit cards. I basically want to have a homekit dashboard where my entities are grouped. From there I will like to get a popup for say lights, wher a new homekit card will allow me to select the individual lights and set their properties in a second popup. Possible?