Custom Lovelace Card - Homekit style card

[weaverprojects]

hi, I hope someone could help me… the popups for persons and light are not in the middle. how do I get these popups in the middle of the screen?

                      - entity: person.jens
                        image: /local/jens4.png
                        popup:
                          type: vertical-stack
                          title: Jens
                          cards:
                            - type: map
                              entities:
                                - person.jens
                              aspect_ratio: '16:9'
                              default_zoom: 8
                            - type: logbook
                              entities:
                                - person.jens
                              hours_to_show: 24

[Jimmy_Berglund]

Compare your code to the ones on HomeKits readMe check what
Stands out and try remove adjust change whatever stands out.

[weaverprojects]

I already did that. I wouldn’t ask if I hadn’t already tried it myself.

[Jimmy_Berglund]

I would not tell you to try again if i did not think the answer was there. I have all the things u do But working as they should. And if you still can’t get it to work by using an example from the readme. Then its some other mod interfearing. So try disable them one by one. Best of luck

[Adrian_Murray]

@Umbe how I set the sidebar to be transparent so i can see my background? When i set mine it is a solid colour.

[mvanlijden (Maarten van Lijden)]

Hi @jimz011 ,
thanks a lot for creating the fork for this. Finally having icons back is great.
I am however missing the icon for the auto mode of my Tado thermostats.
Heating and off modes are represented fine, but the auto mode icon isn’t showing (see image below for example of it in the simple thermostat card). Any way you could add this?

[jimz011 (Jim)]

Funny thing is that I am not a developer, so I was actually very surprised that what I changed even worked. I will try to make that icon work again, but I can’t guarantee it (since well, I’m not a developer ).

But I’ll try, just keep an eye on HACS for an update

[jimz011 (Jim)]

@mvanlijden never mind, I fixed it. You can update through HACS. .

While you are at it you might be interested in my other projects.

Enjoy!

[conorlap (Conor)]

hey @thanasegar , did you ever figure out how to do this? I’ve got it enabled with the ‘Settings’ button - but this solution is much more elegant!

[AwesomeGuyNamedMatt (Matt)]

I have the popup-card working in the browser for both the light-popup-card and switch-popup-card. It works exactly how I want it. My problem though is that it is not working on the companion app (android). If I use my phone to open a web browser to HA the popup works but it does nothing in the app. I can post code if needed. I’m thinking it has something to do with the browser-mod utility. I installed it through HACS. Also, service: browser_mod:debug does nothing.
-Edit: Clearing data for the companion app resolved my issue.

[AwesomeGuyNamedMatt (Matt)]

I used the switch-popup-card to make a popup menu that turns on my TV/AVR/Devices and sets everything to the correct input. Maybe someone else would like this for inspiration.

      - entity: sensor.denon_source
        name: Home Theater
        icon: mdi:television
        offIcon: mdi:power
        offStates:
          - PowerOff
        popup:
          type: custom:layout-card
          entities:
            - type: custom:hui-element
              card_type: custom:switch-popup-card
              entities:
                - sensor.denon_source
              buttons:
                - icon: mdi:power
                  value: script.turn_off_tv
                  name: Power
                - icon: si:nvidia
                  value: script.start_shield_tv
                  name: Sheild Tv
                - icon: si:xbox
                  value: script.turn_on_xbox
                  name: XBox One
                - icon: si:nintendoswitch
                  value: script.turn_on_switch
                  name: Switch
              icon: si:dolby
              noActiveState: 'Off'
              entity_value_path: attributes.percentage
              service: script.turn_on
              service_data:
                entity_id: value

The entity_value_path: attributes.percentage field isn’t used, but it doesn’t work without it. Also, I’m using the simple-icons addon to get the branded icons (xbox, nvidia, switch, etc).
Hope someone finds this useful.

[pimp1310]

can you please post the code for the swipe card in the popup?

in tried it but i get a empty popup.

tap_action:
  action: fire-dom-event
  browser_mod:
    deviceID:
      - laptop_julia
      - firehd_tablet
    command: popup
    title: Fenster Sensoren POPUP
    theme: Custom Background Theme
    large: false
    style: |

      :host .content {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        background: center / cover no-repeat url("/local/profilbilder/background.jpg");
      }
    card:
      type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:swipe-card
              parameters:
                allowTouchMove: true
                effect: slide
                direction: horizontal
                centeredSlides: false
                slidesPerView: auto
                spaceBetween: 8
                pagination:
                  type: bullets
                  hideOnClick: false
              cards:
                
                - type: custom:light-popup-card
                  entity: light.treppenbeleuchtung
                  brightnessHeight: 200px
                  brightnessWidth: 100px
                  switchWidth: 100px
                  switchHeight: 200px
                  settingsPosition: top
                  settings:
                    openButton: Mehr
                    closeButton: Zurück
                  settingsCard:
                    type: entities
                    cardOptions:
                      entities:
                        - light.treppenbeleuchtung
                    cardStyle: |
                      background-color:#FFF; 

[jimz011 (Jim)]

I’d love to put that was years ago, I use the settings button instead now.

[pimp1310]

hi

the settings button dont works for me, because my led stripe has until i switch it on, no color rgb wheel. and when i use the entity for settings he oonly shows me a switch unter the settings button.

or missed i something?

[jimz011 (Jim)]

For this use a light-entity card as the settings page card. And then set it up to show all available features regardless if the entity is on/off. Its probably the neatest way.

I removed the swipe card because it didnt work very well for me.

[pimp1310]

@jimz011

light-entity card

how can i open a other card with the settings from the custom:light-popup-card?

i can only choose a entity ?

- type: custom:light-popup-card
              entity: light.treppenbeleuchtung
              brightnessHeight: 200px
              brightnessWidth: 100px
              switchWidth: 100px
              switchHeight: 200px
              settingsPosition: top
              settings:
                openButton: Mehr
                closeButton: Zurück
              settingsCard:
                type: entities
                cardOptions:
                  entities:
                    - light.treppenbeleuchtung
                cardStyle: |
                  background-color:#FFF;  

i seeeeeeee. i can choose any card as settings card?

[jimz011 (Jim)]

That is correct. I personally use a more-info-card, but light-entity is probably what you are looking for.

Here is my popup (I’d love to share the code but it is extremely heavy templated currently, wouldnt do much good).

[pimp1310]

okay i see, perhaps can you help me to remove the frame from the card?

[jimz011 (Jim)]

Do you have card mod installed?

- type: custom:light-entity
  card_mod:
    style: |
      ha-card {
        box-shadow: none !important;
    }
  entity: light.office

If that for some reason doesn’t work you can try this instead:

- type: custom:light-entity
  card_mod:
    style: 
      .: |
        :host {
          --ha-card-box-shadow: none !important;
        }
  entity: light.office

[pimp1310]

@jimz011

card_mod:
    style: |
      ha-card {
        box-shadow: none !important;
    }

yes i have installed it, but both versions dont work.

you mean the custom:light-entity-card not the custom:light-entity or?

 type: custom:light-entity-card
                card_mod:
                  style: |
                    ha-card {
                      box-shadow: none !important;
                        }
                cardOptions:
                  entity: light.treppenbeleuchtung

and

type: custom:light-entity-card
                card_mod:
                  style: 
                    .: |
                      :host {
                        --ha-card-box-shadow: none !important;
                      }
                cardOptions:
                  entity: light.treppenbeleuchtung
                cardStyle: |
                  background-color:#FFF;    ```