Custom Lovelace Card - Homekit style card

david1 · March 15, 2020, 6:31pm

- title: Lights
  path: lights_path
  cards:
    - type: "custom:homekit-card"
      enableColumns: true
      statePositionTop: true
      rows:
        - row: 1
          columns:
            - column: 1
              tileOnRow: 4
              entities:
                - title: Living Room
                  entities: 
                    - entity: light.tv_light_1  
                    - entity: light.tv_light_2
                    - entity: light.living_room_light
                    - entity: light.living_room_light_r
            - column: 2  
              tileOnRow: 3
              entities:
                - title: Kitchen
                  entities:
                    - entity: light.beganegrond  
        - row: 2
          columns:
            - column: 1
              tileOnRow: 4
              entities:
                - title: Upstairs
                  entities:
                    - entity: binary_sensor.wasmachine_status
                    - entity: weather.weersverwachting
        - row: 3
          columns:
            - column: 1
              entities:
                - title: Bedroom
                  entities:
                    - entity: switch.doorbell_chime_active

this doesnt work at all and its straight from the examples

DBuit · March 16, 2020, 7:05am

Hi,

I worked on it a bit it is working but not documented or anything. But you can use it with hacs as custom repo.

Flagun · March 17, 2020, 2:08pm

Hi,
is it possible to make a tile wider than just 2 times wide?

Martin_Pejstrup · March 18, 2020, 7:55am

Thanks, did that. But still have trouble getting it going.

  - title: Sonos
    id: musik
    panel: true
    cards:
      - type: "custom:custom-sonos-card"
        name: Sonos
        entities:
          - media_player.alrum
          - media_player.terrase

  - url: /community_plugin/custom-sonos-card.js?v=1.0
    type: module

\hassio\config\www\community\custom-sonos-card

2020-03-18_08h53_05

Can you spot my error?

mrkrabs · March 26, 2020, 10:05pm

Thanks for your work, it’s awesome!

Quick one - how do I change a background of a single tile? I should use cardstyle, right?

Flo.C · March 31, 2020, 11:00pm

Hi @DBuit! Great work here. Getting close to h e the first Version up and running

Two questions:

I integrated my covers into the card. Sadly I can’t simply push the tile to just open it. I need to “push through” any idea how to configure this?
Pretty sure you saw @Mattias_Persson Theme.
A different take on designing a Lovelace UI
Any chance we get animated tiles too?

Thanks a lot

mkhattab · April 1, 2020, 10:51am

Thanks @DBuit this is a nice addition.
It looks great.
Will you also be able to add the off state definition for sidebarMenu items to differentiate visually the current state (as discussed before) ?

mkhattab · April 1, 2020, 11:02am

This is actually a much nicer and more elegant solution than sidebarMenu
Great work Sir!

Flo.C · April 1, 2020, 5:22pm

anyone who could might help?

DBuit · April 1, 2020, 5:25pm

Hi @Flo.C,

What do you mean with push through? Is that longpress do you het pop-up? If hat you can set a tap_action to control An entity when you tap/click it.

I Will check the animation maybe i can add something Nice

DBuit · April 1, 2020, 5:27pm

I could animate the background color but he uses icons with colors so cant do that.

Flo.C · April 1, 2020, 5:36pm

Hey @DBuit,

Thanks for coming back

Sorry for my unprecise question. It was late
My intent is that I simple toggle or “short press” the tile and the cover is simply open or closing. If I need to have it on a certain position, I would can use the “long press”.

So basically like the light tiles

About the animation: If the icons would have no color, would it work then? I like the one with the closing toilet or the fan

Thanks for your support man. Appreciate it!

DBuit · April 2, 2020, 2:35pm

Hi man,

So you could do it like this i think i have no cover to test:

entities:
          - title: Navigation
            entities:
              - entity: cover.demo     
                name: Cover
                tap_action:
                  action: call-service
                  service: cover.toggle
                  service_data:
                    entity_id: cover.demo

Flo.C · April 2, 2020, 6:02pm

Thats it!! Perfekt! Thanks a lot.

The only thing is now that the icons are always yellow on the cover tile. Any possibility to change this? So grey when they are closed?

DBuit · April 2, 2020, 7:14pm

Te check out offStates in documentation on github to fix that

Flo.C · April 2, 2020, 7:44pm

You Sir are a legend!

One last thing and then I’ll stop (promise)
What else do I need to insert in the code above to have the cover stopped if I toogle it a second time?

I saw that there is cover.stop But I don’t know how to implement it. Do I need a template or something?

DBuit · April 3, 2020, 7:40am

Hi man,

No problem!
If you want that it is more complicated you need to save that it is running or something and if you than tap it it should stop.

I guess you need a script but i don’t know how you need to find some HA script master!

ASNNetworks · April 3, 2020, 8:56am

@DBuit Hi, is it possible to change the brightness/volume/cover percentage color above the slider of your popup-cards? I have a white background and can’t read the percentage anymore. I tried some codes by using inspecting elements, but it didn’t work.

I want it to match my text colors in my theme, but the percentages are hardcoded to white.

Also a way to change the icon color when active of the popup-cards? It’s yellow now but I’d rather use a color matching my theme.

Darbos · April 4, 2020, 12:47am

Any chance you can share your config, Im having a hard time wrapping my head around this…thank you.

mkhattab · April 4, 2020, 11:26am

@DBuit I am having trouble getting your media_player popup card to work on tap action.
It works if I set tap_action to more-info it shows the standard more-info card on tap but your card only works on long press. Here is my config:
In Lovelace UI root:

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

and the card is as follows:

- entity: media_player.humax_receiver
  fullscreen: false
  tap_action:
    action: more-info
    entity: media_player.humax_receiver
  popup:
    actions:
    - icon: 'mdi:skip-previous'
        service: media_player.media_previous_track
        service_data:
        entity_id: this
    - icon: 'mdi:volume-mute'
        service: media_player.volume_mute
        service_data:
        entity_id: this
        is_volume_muted: true
    - icon: 'mdi:skip-next'
        service: media_player.media_next_track
        service_data:
        entity_id: this
    scenesInARow: 2
    type: 'custom:media_player-popup-card'