Custom Lovelace Card - Homekit style card

Share your Projects! Dashboards & Frontend
,
1121

I tried without luck
If i dont add the tap_action then i get a popup too.
So single press on the button gives me this popup (without popup defined)

If i added folowing code:

cards:
              - type: custom:button-card
                entity: alarm_control_panel.risco
                name: Alarm
                show_label: false
                size: 40%
                icon: mdi:shield-off
                state:
                  - icon: 'mdi:shield-on'
                    styles:
                      icon: 
                        - color: var(--sidebar-selected-icon-color)
                    value: 'on'
                styles:
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: popup
                  entity: alarm_control_panel.risco
                  type: alarm-panel

i get no popup at all

What i want to get as popup is the alarm panel card, like this:

1122

Sorry forgot to mention you @DBuit

1124

This setup uses browser-mod as well, right? Then just use browser-mod for the AlarmPanel popup.
I’m not sure about auto closing but there probably is a way. Interesting idea though.

1125

Hi guys a question. Is there a card to display camera images with homekit panel card style? Could you suggest me a possible solution?

1126

Can you explain a bit more pls

Been looking at https://github.com/thomasloven/hass-browser_mod
Installed it too.
But this wont work when using the home assistant app for android right?
It only works with browsers?

1127

Install this:

Use this for tap_action wherever you want:

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      entity: alarm_control_panel.section_1
      type: alarm-panel
  deviceID: this
  title: Security

EDIT: It does work in companion app as well, the only difference is the popup will be “fullscreen”. (not sure about tablets)

1 Like
1128

I actually just did this, gonna try it out now, thanks

edit: its working on my laptop
we’ll see if it works on phone android app

thx guys
didnt know about this browser mod

edit: it works and android app and on tablet using fully kiosk browser too (not fullscreen, phew)

1129

Hi
I have a question concerning the risco integration

I have a button showing the state of the alarm and if u press it pops up the control panel to give in the code

This is the code

cards:
              - type: custom:button-card
                entity: alarm_control_panel.risco
                name: Alarm
                show_label: false
                size: 40%
                icon: mdi:shield-off
                state:
                  - icon: 'mdi:shield-on'
                    styles:
                      icon: 
                        - color: var(--sidebar-selected-icon-color)
                    value: 'on'
                styles:
                  icon:
                    - color: var(--primary-text-color)
                tap_action:
                  action: call-service
                  service: browser_mod.popup
                  service_data:
                    card:
                      entity: alarm_control_panel.risco
                      states:
                        - arm_home
                        - arm_away
                      type: alarm-panel
                    deviceID:
                      - this
                    title: Alarm

I got 2 problems:

  • the button doesnt change icon when its armed, so there might be something wrong there?
  • when pressed and i give in my code, the alarm state doesnt change

Any idea?

1130

Hi Dbuit and all the other you guys could help me understand why despite having correctly used the instructions that I enclose, I get this image instead of the one that is on the page: https://github.com/DBuit/cover-popup-card
I followed to the letter what is described in the github page, but what I get is the first image attached very different from the github one. Can you help me?

Immagine
Immagine1

                  - entity: cover.cucina_piccola
                    name: Cucina Piccola
                    icon: 'mdi:window-shutter'
                    popup:
                      type: 'custom:cover-popup-card'
                      sliderService: cover.set_cover_position
                      sliderColor: '#DF2645'
                      sliderHeight: 350px
                      sliderWidth: 150px
                      sliderThumbColor: '#DF2645'
                      sliderTrackColor: '#DFC726'
                      brightnessWidth: 150px
                      brightnessHeight: 350px
                      actionsInARow: 2
                      actions:
                        - service: cover.open_cover
                          service_data:
                            entity_id: cover.cucina_piccola
                          name: open
                          icon: 'mdi:window-shutter-open'
                        - service: cover.close_cover
                          service_data:
                            entity_id: cover.cucina_piccola
                          name: close
                          icon: 'mdi:window-shutter'
1131

A little update reading and rereading your posts I realized that the problem I reported here only occurs with FIREFOX, while with Android and Chrome it works perfectly. Could you help me and suggest what modification I need to make to see the slider correctly on FIREFOX. Thank you all

1132

Hello @DBuit, do you have plan for an update soon?

Thank you :grinning:

1133

Is it possible to hide the value and keep only the icon and the name?

IMG_4014
IMG_4014750×1624 56 KB

1 Like
1134

Thanks @mkhattab - although that doesn’t quite work for me. For some reason, the background-colour and text-colours are ignored, and I can’t get the glow working in this way.

Is there a summary somewhere of all the variables that we can refer to in the style: area?

1135

@thecrane I have been trying to find a reference for customisable variables as well because there are other things I’d like to change. Please share if you find anything and I’ll do the same as well

1136

i have the same with my hue lights. Ikea lights working wel.

1137

Hi @thecrane and @mkhattab,

Look at https://github.com/DBuit/Homekit-panel-card and search for Css variables and default values
That are the variables, and if something is not changing try to add !important to overwrite old css with your css.

1138

I have two questions:

  1. How can i add more space between a the downside of a tile and the title from a new row?
  2. I have a custom tile to navigate to another page and i want to see it in the “off” state instead of the “on” state. How can i fix that?

Thanks

1139

Hi could you post me the code you used to display MIN and MAX temperature and the time when they occurred? I imagine that there is an ad hoc code that detects these values ​​and that written in the configuratio.yaml because I do not see it in the CARD Thanks

1140

Is it just for me that 116 brakes this card? I get just a blank page and when i edit the card everything show upp. Yes i cleard the page cashe 10 times.

1141

Same for me. Seems more stable on Safari than Chrome, but I see this in both Browsers