Custom Lovelace Card - Homekit style card

Share your Projects! Dashboards & Frontend
,
550

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

1 Like
551

Hey @DBuit,

Thanks for coming back :slight_smile:

Sorry for my unprecise question. It was late :slight_smile:
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 :slight_smile:

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 :slight_smile:

Thanks for your support man. Appreciate it!

552

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
1 Like
553

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?

554

Te check out offStates in documentation on github to fix that

1 Like
555

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?

556

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!

557

@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.

558

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

559

@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'
560

Hi
Did you manage to fix this issue? Iā€™m seeing the same alignment problem

561

I have the same error, any solution?

Bildschirmfoto 2020-04-05 um 16.16.50
Bildschirmfoto 2020-04-05 um 16.16.50732Ɨ374 32.1 KB
Bildschirmfoto 2020-04-05 um 16.17.25

562

I did

This is what I used:

  #OFFICE
            - type: state-icon
              entity: light.office
              deep_press: true
              tap_action:
                action: toggle
              hold_action:
                action: call-service
                service: browser_mod.popup
                service_data:
                  title: Office Light
                  larger: true
                  style:
                    width: 100%
                    height: 100%
                  card:
                    type: custom:light-popup-card
                    entity: light.office
                    icon: mdi:lightbulb
                    actionsInARow: 2
                    supportedFeaturesTreshold: -1
                    brightnessWidth: 130px
                    brightnessHeight: 380px
                    borderRadius: 35px
                    sliderColor: "#FFD60A"
                    sliderTrackColor: "#2c2c2e"
                    sliderThumbColor: "#2c2c2e"
                  DeviceID:
                  - this
563

How do you add a camera view? Id like to create a 2 wide carde using ā€œwiderā€ but have the camera displayed on the front of the button. live view. is that possible? thank you.

564

Is there a way to change the icon color? I want to use an other color than yellow when on for specific entities.

565

keep getting error:
Custom element doesnā€™t exist: homekit-card.

type: ā€˜custom:homekit-cardā€™

how to install it
cant find instructions
thx

566

Hi @DBuit,

Thanks for sharing this card with us. I have couple questions that I am not able to find an answer by myself.

  1. What would be the action if I want to use tap_action instead of hold_action for covers to have the custom pop-up card popup?
  2. With my Iphone I do not get any haptic when I toggle the lights or any other button. Is that something that can be added?
  3. Is it possible to add the on top right circle (like the sensors already have) for other cards? Ex. person.examle to have the last_changed on top-right circle (not sure if I explained this one right)
567

Yes you can do it with style option. check github: https://github.com/DBuit/Homekit-panel-card

You have a css variable --tile-on-icon-color this is the color when the entity as an on state.

568

Hi, maybe use HACS this makes it really easy!

569

Hi man,

  1. Check out this: Custom Lovelace Card - Homekit style card
  2. It is not added at this moment
  3. Not sure have to try this myself. there is no special handeling for person entities so if it is not working out of the box i need to add some code :slight_smile: