Custom Lovelace Card - Homekit style card

[slipx06]

Is it possible to make the picture-glance card use all the space in the tile? It only uses the top half of the tile like your image even when playing around with cardStyle.

[DBuit]

Yes you @slipx06 can with the cardStyle

First add noPadding: true to lose the border around the tile
and add this on your style

cardStyle: |
  :host {
    display: flex;
    height: 100%;
  }

[DBuit]

At this moment you can use normal size tiles or the 2x times width tiles thats all at the moment.

[fitim]

If I use this, the whole view is empty.

I can’t get it to work as a single card… maybe because I don’t use the thomasloven plugins?

[weaverprojects]

hi I’m using the Homekit-panel-card with the popup card. is it possible to show a switch to open and close the garage door?

this is my code:

actions:
  - icon: 'mdi:garage-open'
    name: open
    service: cover.open_cover
    service_data:
      entity_id: this
  - icon: 'mdi:garage'
    name: close
    service: cover.close_cover
    service_data:
      entity_id: this
actionsInARow: 2
entities:
  - entities:
      - double_tap_action:
          action: more-info
        entity: cover.garage_door
        name: Garage
    popup:
      type: 'custom:cover-popup-card'
      sliderService: cover.set_cover_position
    title: Garage
type: 'custom:homekit-card'

[DBuit]

Hi man i can look to modify the card to be a switch but van you show me the data you have for this entity in your developer tools in home assistant? Because it nerd something to determin to show OR a slider OR a switch

[CM000n (Simon)]

Hi @DBuit , thanks again for your tip. Unfortunately, it only works partially The problem is, if I leave the “title:” parameter in the browser_mod.popup service data blank or delete it, nothing is displayed anymore. If I enter a title, it will be displayed strangely, at least in connection with your climate card:

This is my corresponding config:

cards:
  - type: "custom:homekit-card"
    breakOnMobile: true
    statePositionTop: true
    entities:
      - title: Klimakontrolle
        entities: 
          - entity: climate.heizung_bad
            tap_action:
              action: call-service
              service: browser_mod.popup
              service_data:
                  title: Test
                  card:
                    type: custom:thermostat-popup-card
                    entity: climate.heizung_bad
                  deviceID:
                    - this

But this is probably a problem of the browser mod and not the homekit card, so I will also mention it there in the thread for @thomasloven .

Many thanks again!

[fitim]

No solution for my problem ?

[weaverprojects]

[DBuit]

Can you try set fullscreen setting to false on the pop-up card? than it won’t float outside i think.

[DBuit]

@fitim found out the problem and did a code change and release new version: https://github.com/DBuit/cover-popup-card/releases/tag/0.1.1

[fitim]

Thanks for your effort, but its causing still the same problem for me …

[DBuit]

Maybe Cache?
Are you using HACS?

[fitim]

Yes, I’m using HACS. My browser is Safari …

[DBuit]

Can you try chrome? and check console if there are errors maybe? in safari / chrome

[fitim]

Neither firefox nor chrome are working. This is the error I get in the log:

Error handling message: invalid template (TemplateSyntaxError: unexpected char “'” at 131) for dictionary value @ data[‘template’]. Got “ha-card {\n background-color: var(–primary-background-color);\n border-radius: 15px;\n box-shadow: \n {% if is_state(‘sun.sun’, 'above_horiz\n”

[iMartien (Martien)]

Did you got this working? Also would like to open an pop-up card with a single tap on climate entities for example…

[DBuit]

That is strange i does work for me in chrome…
Maybe add ?v=0.1.1 to the import in lovelace-ui.yaml make sure cache is not the problem

[DBuit]

@CM000n and @iMartien

What you can do at works is define at the top of the lovelace configuration the popup-cards: part from browser_mod like this for example:

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

and put this tap_action on your climate:

                      - entity: climate.climatedemo
                        tap_action:
                          action: more-info
                          entity: climate.climatedemo

[iMartien (Martien)]

Thanks, going to try this!