Custom Lovelace Card - Homekit style card

[mkhattab (Pharaohnough)]

Hi @Umbe
I haven’t really managed to get it working and I don’t use it for that reason. I would love to find a solution if you find one. I have the popup working and it displays properly but taking my action buttons does absolutely nothing.

Here’s my code for the pop-up definition (before views section of the UI) :

media_player.office_stb:
    card:
      type: 'custom:media_player-popup-card'
      switchHeight: 400px
      switchWidth: 150px
      entity: media_player.office_stb
      actions:
        - service: media_player.volume_mute
          service_data:
            entity_id: this
          name: MUTE
          icon: 'mdi:speaker'
        - service: media_player.media_play_pause
          service_data:
            entity_id: this
          name: PLAY/PAUSE
          icon: 'mdi:play-pause'
        - service: media_player.media_next_track
          service_data:
            entity_id: this
          name: SOURCE
          icon: 'mdi:skip-next'
    style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
          box-shadow:none;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
        }

and here’s the tile definition under views :

- entity: media_player.office_stb
                tap_action:
                  action: more-info
                  entity: media_player.office_stb

and this is what the popup looks like:

[haseat]

Hi all,

I stumbled upon this amazing card yesterday by accident and started on replacing my current frontend with this immediately . I have to questions/problems:

1. I cannot get the confirmation to work. Whatever I do, I do not get a confirmation dialog. Does anyone have a working example for me?
2. I would need some help with css. This is completely out of my comfort zone, and I have spent about 2 hours already trying to get this to work: Depending on a sleepmode, I want to change the backgroundcolor of a button.

The conditionalClass looks like this

      - entity: light.kids_lights
        hide: >
          [[[ if (states['binary_sensor.show_kids'].state == "on") return false;
          else return true ]]]     
        conditionalClass: >
          [[[ if (states['group.sleepmodes'].state == "on") return
          "sleepmodeclass"; else return "" ]]]

and works fine, but I can’t figure out what to put here:

type: 'custom:homekit-card'
home: false
tileHoldAnimation: true
statePositionTop: true
style: |
  :host {
    --tile-background: rgba(255, 255, 255, 0.8);
    --tile-border-radius: 12px;
    --tile-width: 100px;
    --tile-height: 100px;
    --tile-on-background: rgba(255, 255, 255, 1);
    
    --tile-name-text-color: rgba(0, 0, 0, 0.4);
    --tile-on-name-text-color: rgba(0, 0, 0, 1);
    
    --tile-state-text-color: rgba(0, 0, 0, 0.4);
    --tile-on-state-text-color: rgba(0, 0, 0, 1);
    
    --tile-state-changed-text-color: rgb(134, 134, 134);
    --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
    
    --tile-value-text-color: rgba(255, 0, 0, 1);  
    
    --tile-icon-color: rgba(0, 0, 0, 0.3);
    --tile-on-icon-color: #f7d959;
    
    --tile-width-mobile: 90px;
    --tile-height-mobile: 90px;
    --min-header-height: 150px;
    --tile-icon-size: 30px;
    --tile-image-radius: 100%

    --slider-width: 120px;
    --slider-height: 120px;
  }

If anyone with knowledge in css could help me out here, I would be immensely grateful.

Thanks!
Robert

[haseat]

Finally confirmations work

In case somebody else is looking for an example, here you go:

  - entity: input_boolean.paper
    spin: true
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.paper
      confirmation:
        text: Are you sure the trashcans are out?
    hide: >
      [[[ if (entity.state == "on") return false; else return true
      ]]]

[maxym]

While this panel card allows to define the popup for all sub-cards at once, and the popup sports settingsCards, which require to pass entity id…

How can I pass entity id of caller card to settingsCard?
Here is an example:

type: 'custom:homekit-card'
statePositionTop: true
entities:
  - popup:
      type: 'custom:light-popup-card'
      settings:
        openButton: More
        closeButton: Less
      settingsCard:
        type: 'custom:light-entity-card'
        cardOptions:
          entity: ?????
    entities:
      - entity: light.bedroom_1
      - entity: light.bedroom_2
      - entity: light.bedroom_3

With regards

[Jimmy_Berglund]

@DBuit
Hi m8.

Wondering how i can make the timestamp of my new washing mashin show the correkt time on the card entity.

If you look on the picture here. The time stamp is no real time thats understandable for me atleast.
And it become the same on the state when i use the sensor on the card.

But if i look on the intergration the time looks totaly understandable to when the washer will be done.

i guess i need to use the statePath: ina correct manner. But when i look on the developers tool i have only one thing i can see and that is this.
friendly_name: Klar
device_class: timestamp

[Jimmy_Berglund]

With abitt better searching on the forums i could see it has to do with how entity card works and that why it works on the other platform is cause its using the entities card.

Lovelace: Cannot format template sensor entity as relative time

Hello @michalzadkowski and @codedmind. My washer integration is quite steady (just the cycle count is not 100% perfect), here’s what I have right now: #################################################### # # # Input Number # # # #################################################### input_number: maq_lavar_cycles: name: Number of Cycles min: 0 max: 1…

[Umbe (Umberto)]

My idea , would be that the tap on the card makes the player ON / OFF while the popup manage the volume with the slider , play pause and track select.
i have the first card which is a normal one , so no buttons , which does nothing if i tap it , but if i hold i get the popup.Also i do not understand why my popup slider has a dot instead of a line.

maybe @DBuit can help

                      - entity: media_player.multiroom
                        icon: mdi:speaker-wireless
                        offIcon: 'mdi:garage'
                        offStates:
                          - "off"
                          - "unavailable"
                          - "paused"
                        tap_action: 
                          action: call service
                          service: media_player.media_play_pause
                          service_data:
                            entity_id: media_player.multiroom
                          haptic: light 
                        popup:
                          settings: true
                          type: custom:media_player-popup-card
                          actions:
                            - service: media_player.media_previous_track
                              service_data:
                                entity_id: this
                              name: previous
                              icon: mdi:skip-previous
                            - service: media_player.media_play_pause
                              service_data:
                                entity_id: this
                              name: play/pause
                              icon: mdi:play-pause
                            - service: media_player.media_next_track
                              service_data:
                                entity_id: this
                              name: next
                              icon: mdi:skip-next

[Jimmy_Berglund]

@DBuit But is there a way to build this in to the card? or does it already have something i can use?
Or will i have to use the enteties card in another tab insted.

[ryanmsnyder (Ryan)]

Does anyone know of a way to use an input number with the homekit card as if it were for a light entity? I would like the tile to display the same exact way it would with a light. Also, is there a way to have the light-popup card work with an input number?

[maxym]

Since I found no a HK-looking card for setting light colours, do you think could we ask author od HK popup light card extend it’s functionality? I mocked up some layout I would be OK with. Maybe you could support this idea?
Or maybe there are replacements I just don’t know?

For CCT

for full colour (HSV selector can be translated to any model)

[mkhattab (Pharaohnough)]

@Umbe You can easily do that with the built-in features of this card.
This example should give you the functionality you’re after (tap to toggle, hold to bring up services/buttons/volume control)

- entity: media_player.office_stb
                tap_action:
                  action: more-info
                  entity: media_player.office_stb
                hold_action:
                  action: call-service
                  service: media_player.toggle
                  service_data:
                    entity_id: media_player.office_stb

Give that a try it should work.
What is the card you’re using for your multiroom media player? That looks awesome!

[Umbe (Umberto)]

Thanks ,
I am using https://github.com/DBuit/Homekit-panel-card for the players , meanwhile for the music i have embedded in an iframe the logitech media server with the material skin

                    - card: "iframe"
                      wider: true
                      higher: true
                      widerSize: 6
                      higherSize: 5
                      noPadding: true
                      cardOptions:
                        card: iframe
                        aspect_ratio: 83%
                        url: 'https://xxx.xxx.xxx'

, the problem is that when i use it for a media player and i tap the card , this does nothing.
my setup has some picoreplayer running with squeezbox which play when powered on , so my idea was to have the tap to turn each one on or off , and the popup to control the players , but i cannot get the card to manage the power , while if you use a light it switch on/off.
I tested the card , and does exactly what is in on off if hold and info if tap , now , can i place the popup card in your script with the custom popup card ?

edit: works perfectly

                      - entity: media_player.pi1
                        tap_action:
                          action: call-service
                          service: media_player.toggle
                          service_data:
                            entity_id: media_player.pi1
                        hold_action:
                          action: call-service
                          service: browser_mod.popup
                          service_data:
                            title: Sonos Alrum
                            hide_header: true
                            deviceID: this
                            style:
                              $: |
                                .mdc-dialog .mdc-dialog__container {
                                  width: 100%;
                                }
                                .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                                  width:100%;
                                  box-shadow:none;
                                }
                              .: |
                                :host {
                                  --mdc-theme-surface: rgba(0,0,0,0);
                                  --secondary-background-color: rgba(0,0,0,0);
                                  --ha-card-background: rgba(0,0,0,0);
                                  --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
                                  --mdc-dialog-min-height: 100%;
                                  --mdc-dialog-min-width: 100%;
                                  --mdc-dialog-max-width: 100%;
                                }
                                mwc-icon-button {
                                  color: #FFF;
                                }                
                            card:
                              type: custom:media_player-popup-card
                              entity: media_player.pi1
                              icon: none
                              fullscreen: false                                                
                              actions:
                                - service: media_player.media_previous_track
                                  service_data:
                                    entity_id: this
                                  name: previous
                                  icon: mdi:skip-previous
                                - service: media_player.media_play_pause
                                  service_data:
                                    entity_id: this
                                  name: play/pause
                                  icon: mdi:play-pause
                                - service: media_player.media_next_track
                                  service_data:
                                    entity_id: this
                                  name: next
                                  icon: mdi:skip-next   

[mkhattab (Pharaohnough)]

Great - I was just posting my config as a sample but you beat me to it.
I’m going to try and implement your media player - I love it

[haseat]

Hi everybody,

is there a way to nicely display a timer? I have a sensor for the timer which looks like this (note: state=time when timer ends):

So far, I have tried these 2 cards, the first one looks great but doesn’t show what I want (when does the timer end), the 2nd shows what I want but looks … meh .

      - entity: sensor.livingroom_echo_next_timer
        name: Echo Timer
        hide: >
          [[[ if (entity.state != "unavailable") return false; else return true
          ]]]          
      - card: entities
        wider: true
        cardOptions:
          entities:
            - entity: sensor.livingroom_echo_next_timer
              name: Timer

Is there a way to show the text of the entities card (“in 2 hours”) natively on a homekit panel card?

Thanks

[Jimmy_Berglund]

Ive alltso come across this problem above. It seem to have something to do with how entity is handled against enteties card were it acualy works

I’ve not home to a solution yett on my side. Anyone know a way?

[SlipperyPickle]

I’m not able to scroll in the home assistant app. The website works great on mobile. Am I doing something wrong?

[fillwe]

Hello everyone! Has anybody solved using offState with a sensor? Would like to have my temperature sensors always showing as off, but can’t figure out how to do it for a single tile in a card?

[DBuit]

Hi,

not sure you still need it but.
Maybe use the entities card in a tile? and use css to look good.

[DBuit]

Hi @fillwe,

offStates can not be used for this, or only when you add every possible value the temp can be.
But you could use conditionalClass this can add a css class to the tile.

What you could do is add this to the temp tile:

conditionalClass: >
      [[[
        return "showOff";
      ]]]

and in the style part of the card:

cards:
      - type: "custom:homekit-card"
        style: |
          .showOff {
              background-color: var(--tile-background, rgba(255, 255, 255, 0.8))!important;
          }
          .showOff .icon {
              color: var(--tile-icon-color, rgba(0, 0, 0, 0.3))!important;
          }
          .showOff .name {
              color: var(--tile-name-text-color, rgba(0, 0, 0, 0.4))!important;
          }
          .showOff .state {
              color: var(--tile-state-text-color, rgba(0, 0, 0, 0.4))!important;
          }

[D-Vine (tom)]

Newbie question.
I been playing around with the homekit style card. Changing colors, background etc. etc.
Got some cards and some pop up cards working now.

only the pop-up is showing correct in the mobile device but in 3 web browsers it doesn’t.
I can play with the witch en height that is working on the mobile but on my computer still a to small pop up.
the switch of the pop-up scales that i see

In my configurations.yaml i hae thiss

lovelace:
  mode: yaml
  resources:
    [ {url: /hacsfiles/lovelace-xiaomi-vacuum-card/xiaomi-vacuum-card.js,        type: module},
      {url: /local/slider-entity-row.js,                                         type: module},
      {url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js,                 type: module},
      {url: /hacsfiles/light-popup-card/light-popup-card.js,                     type: module},
      {url: /hacsfiles/button-card/button-card.js,                               type: module}  ]

and this is my ui.lovelace.yaml

views:
  - title: "Noordwal"
    panel: true
    cards:
      - type: "custom:homekit-card"
        style: |
          :host {
          --tile-background: rgba(125, 125, 125, 0.2);
          --tile-border-radius: 8px;
          --tile-width: 90px;
          --tile-height: 90px;
          --tile-on-background: rgba(13, 23, 74, 1);
          
          --tile-name-text-color: rgba(20, 20, 20, 1);
          --tile-on-name-text-color: rgba(130, 130, 130, 1);
          
          --tile-state-text-color: rgba(20, 20, 20, 1);
          --tile-on-state-text-color: rgba(120, 120, 120, 1);
          
          --tile-state-changed-text-color: rgb(18, 43, 129);
          --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
          
          --tile-value-text-color: rgba(0, 0, 0, 1);
          
          
          --tile-icon-color: rgba(0, 0, 0, 0.3);
          --tile-on-icon-color: #f7d959;
          
          
          --tile-width-mobile: 90px;
          --tile-height-mobile: 90px;
  
          --min-header-height: 150px;

          --tile-icon-size: 30px;

          --tile-image-radius: 100%

          --slider-width: 20px;
          --slider-height: 20px;
            }
        enableColumns: true
        statePositionTop: true
        rows:
          - row: 1
            columns:
              - column: 1
                tileOnRow: 4
                entities:
                  - title: Woonkamer
                    entities: 
                      - entity: light.woonkamer_light_tv_677
                        slider: true
                        name: TV
                        popup:
                          type: custom:light-popup-card
                      - entity: light.woonkamer_light_achter_bank_674
                        slider: true
                        name: Bank
                        popup:
                          type: custom:light-popup-card
                      - entity: light.woonkamer_dimmer_woonkamer_mid_664
                        slider: true
                        name: midden
                        popup:
                          type: custom:light-popup-card
                      - entity: light.keuken_eetkamer_tafel_654
                        slider: true
                        name: Eetkamertafel
                        popup:
                          type: custom:light-popup-card
                      - entity: light.keuken_keuken_659
                        slider: true
                        name: keuken
                        popup:
                          type: custom:light-popup-card
                      - entity: light.hal_light_hal_669
                        slider: true
                        name: Hal
                      - entity: switch.bering_20_2_22
                        name: berging
                        popup:
                          type: custom:light-popup-card
              - column: 2  
                tileOnRow: 3
                entities:
                  - title: Tuin
                    entities:
                      - entity: light.woonkamer_tuin_verlichting_511
                        name: Tuin
                      - entity: cover.woonkamer_zonnenscherm_270
                        name: Zonnenscherm
          - row: 2
            columns:
              - column: 1
                tileOnRow: 4
                entities:
                  - title: 1e Verdieping
                    entities:
                      - entity: light.badkamer_badkamer_light_508
                        name: badkamer
                        slider: true
                        popup:
                          type: custom:light-popup-card
                      - entity: light.kamer_gooimeer_slaapkamer_gooimeer_639
                        name: Slaapkamer Gooimeer
                        slider: true
                        popup:
                          type: custom:light-popup-card
                      - entity: switch.kamer_tuin_tv_slaapkamer_635
                        name: TV
                      - entity: light.baby_kamer_babykamer_licht_357
                        name: Kleine kamer
                        slider: true
                        popup:
                          type: custom:light-popup-card
          - row: 3
            columns:
              - column: 1
                entities:
                  - title: Zolder
                    entities:
                      - entity: switch.was_ruimte_droger_252
                        name: Droger
                      - entity: switch.was_ruimte_wasmachine_617
                        name: Wasmachine
                      - entity: light.zolder_kamer_spanningslof_515
                        name: Spanningslof
                      - entity: switch.zolder_kamer_computer_513
                        name: Computer
                      - entity: light.was_ruimte_licht_wasruimte_294
                        name: Wasruimte
                        popup:
                          type: custom:light-popup-card
                          scenesInARow: 2
                          brightnessWidth: 130px
                          brightnessHeight: 350px
                          switchWidth: 110px
                          switchHeight: 300px