Custom Lovelace Card - Homekit style card

Thank you ! you help me .

Are there any more new rollers ???

How can I extract data from a group?
For example I have a set of all kitchen windows and lamps I want if one is on or open I will see a message

I dont use the rule sins it laggs heavy for me. I guess you can look in this thread were people and tackle the problem before.

This is very nice even if it comes with the time needed to setup. Quick question though. For covers, (MyQ Garage in my case), do we still have to state the icons change based on state, or is a dynamic option available? Sorry, just need some clarification. Great work still!

Looks like 118.0 fixes the disappearing tiles :smiley:

1 Like

Can allso say that everything is back to normal with 118

Guys with the new version 0.118 of home assistant it seems to have been solved the problems of the cards that did not appear when the upgrade with the Home assistant version .117.x was done

1 Like

              - entity: switch.shelly_shsw_pm_d8bfc019b974
                state: switch.shelly_shsw_pm_d8bfc019b974
                statePath: attributes.remaining_time
                hold_action:
                  action: call-service
                  service: browser_mod.command
                  service_data:
                    command: popup
                    title: דוד - מידע ואפשרויות נוספות
                    card:
                      type: entities
                      entities:
                        - entity: switch.shelly_shsw_pm_d8bfc019b974
                          name: On / Off
                          icon: 'mdi:power'
                        - entity: sensor.shelly_shsw_pm_d8bfc019b974_uptime
                        - entity: input_number.slider1
                        - entity: input_text.timeset
                    deviceID:
                      - this
                tap_action:
                  action: call-service
                  service: browser_mod.command
                  service_data:
                    command: popup
                    title: טיימר לדוד
                    card:
                      type: vertical-stack
                      cards:
                        - type: 'custom:button-card'
                          entity: switch.shelly_shsw_pm_d8bfc019b974
                          name: turn off
                          icon: 'mdi:timer-off-outline'
                          aspect_ratio: 4/1
                          tap_action:
                            action: call-service
                            service: script.turn_on
                            service_data:
                              entity_id: script.hot_water_off
                        - type: 'custom:button-card'
                          entity: switch.shelly_shsw_pm_d8bfc019b974
                          name: 20 minutes
                          icon: 'mdi:timer-outline'
                          aspect_ratio: 4/1
                          tap_action:
                            action: call-service
                            service: script.turn_on
                            service_data:
                              entity_id: script.set_20_time_for_hot_water
                        - type: 'custom:button-card'
                          entity: switch.shelly_shsw_pm_d8bfc019b974
                          name: 30 minutes
                          icon: 'mdi:timer-outline'
                          aspect_ratio: 4/1
                          tap_action:
                            action: call-service
                            service: script.turn_on
                            service_data:
                              entity_id: script.set_30_time_for_hot_water
                        - type: 'custom:button-card'
                          entity: switch.shelly_shsw_pm_d8bfc019b974
                          name: 45 minutes
                          icon: 'mdi:timer-outline'
                          aspect_ratio: 4/1
                          tap_action:
                            action: call-service
                            service: script.turn_on
                            service_data:
                              entity_id: script.set_45_time_for_hot_water

Hello friends,

I have the following code.

Works really well, I have a cube-button and after pressing back a window opens with buttons.

But I want to make another cube button add more square shaped buttons like homekit style card how can I do that?
Thanks

Am i misunderstanding something or are you not using homekit card? if not then use it. as a ground.
Then you can use your custom button card over it when ever you wanna do that. And then use the homekit cards buttons when u wanna do that.

It does not go the other way around. Homekit card is your Dashboard if you use it so to say.

I love this card. Does anyone have any suggestions for the best popup to control a fan, to switch from low, medium, and high?

Hi @FaceBush i think you need switch popup card: https://github.com/DBuit/switch-popup-card

This is exactly what I need. Thanks so much!

I am trying to have the speed of my fan show on the card where the state is by default. I think this can be accomplished with statePath, right? I am having trouble getting it to work though. Can someone help steer me in the right direction with the code? Or let me know if it is not possible.

Thanks!

How did you configure weather in this card? Can you share the code please?

Can you make a screenshot from this entity in your i think developtools (Ontwikkelhulpmiddelen if you are dutch)

Than i can see what data the entity has to help you with the statePath.

Sorry for the late Respons.
Take not that if the code looks abitt wierd its cause im not using Yaml based but interface based.

              - 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
            title: Information
1 Like

@DBuit I am sorry , i am not able to create an iframe card , and i see in your sample images you had 1 green but there is no code. Can you share the iframe code ?
An other question is how can i rename Zone 1 below and on the left of the flame there is the Auto button , but it misses the icon , how can i add it ?
Also the name idle … even if is heating remains idle… any idea ?

Hi @Umbe,

Not sure about the iframe part. You can use any lovelace card in a tile if you want. so if you want an iframe you can do this:

                    entities:
                      - card: iframe
                        noPadding: true
                        cardOptions:
                          url: "https://google.com"
                        cardStyle: |

In the cardStyle part you can add CSS to make it look good.

Than de thermostat.
The title Zone1 can be changed with name option.
The auto button should be visible have to look into that problem. save for the state idle.
Can you share me the entities information in the developers tool than i can see what is giving the current state for your entity.

1 Like

@DBuit firt of all , thank you :slight_smile:
here the hive card (is the custom component)

i must say also that after the update , i cannot change any background to transparent , i can put colors but i would love the transparent one

Hello all
I’m considering overhaul of my HA GUI to use HK card intensively.
I have idea to have a kind of navigator on main page, which would allow me to jump to screens specific for particular rooms.
However I would like to see basic information from each room in this navigator. For example if any light is turned on, temperature, window status etc.

Before I start to invent a wheel, I would like to ask is it possible to somehow achive homekit-style button, filled by multiple status informations in its corners?

something like the picture above mocked up in Paint:
obrazek

Hi @DBuit and all,
is there a way to hide the on/off state of a tile and move the entity name at the bottom?
I’ve tried hideState but it hides the attribute on top right of the tile (for example the brightness circle for a light).
I’ve read almost all the thread and haven’t found any solution or example.

Thanks