Custom Lovelace Card - Homekit style card

[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

[fillwe]

@DBuit

          .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;
          }

Thanks! Working perfectly

[Jimmy_Berglund]

Thx for getting back.

Im still trying to make it look good but ive only come this far.

Om trying to make it so that it looks something like to the left. Cause then i can turn on and off the Machine and se how long its been done and how long it will take it to be done.

Is there anyway to make it so=? right one is that im just playing with it to try to make it work.

      - column: 1
        entities:
          - entities:
              - deep_press: true
                entity: switch.tvattmaskin
                icon: 'mdi:washing-machine'
                offIcon: 'mdi:washing-machine'
                offStates:
                  - 'off'
                  - none
                  - Stängd
                  - Av
                state: sensor.washer_status_iso
              - card: entities
                wider: true
                cardOptions:
                  entities:
                    - entity: sensor.washer_status_iso
                      name: Trättmaskin
                    - entity: sensor.tvattmaskin_washer_completion_time

Ive removed my css cause i frankly are to embarrassed to show it xD

[andrew47 (Andrew)]

Is there something i am missing?
Why doesn’t start the tiles at the top of the screen?

sidebar:
  digitalClock: true
  clock: false
  date: true
  dateFormat: DD MMMM YYYY
  hideTopMenu: false
  style: |
    :host {
        --sidebar-background: #171D1F;
        --sidebar-text-color: #B4B7B7;
        --face-color: #FFF;
        --face-border-color: #FFF;
        --clock-hands-color: #000;
        --clock-seconds-hand-color: #FF4B3E;
        --clock-middle-background: #FFF;
        --clock-middle-border: #000;
    }
    
    h1.digitalClock {
        color: #B4B7B7;
        font-weight: 350;
        font-size: 70px!important;
        padding-left: 30px;
        padding-top: 30px;
    }
    
    .date {
        color: #545C5F;
        font-weight: 450;
        line-height: 35px;
        padding-left: 30px;
        padding-top: 20px;
    }

    .template li {
        font-weight: 450!important;
        font-size: 26px;
        line-height: 35px!important;
        padding-left: 30px;
        padding-top: 20px;
    }
    
  template: |
    <li>{{ states('sensor.sidebar_greeting') }}</li>
    
    <li>{{ states('sensor.sidebar_weather') }}</li>
    
    <li>{{ states('sensor.sidebar_active') }}</li>
  
  width:
    mobile: 0
    tablet: 30
    desktop: 18

kiosk_mode:
  hide_header: true

background: center / cover no-repeat url("/local/background.png") fixed

views:
  - panel: true
    path: "home"
    cards:
      - type: "custom:homekit-card"
        home: true
        useBrightness: false
        useTemperature: false
        titleColor: "#FFF"
        enableColumns: true
        statePositionTop: true
        rows:
          - row: 1
            columns:
              - column: 1
                tileOnRow: 4
                entities:
                  - title: Verlichting Begane grond
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                    entities: 
                      - entity: light.shelly_shdm_1_db2cc7
                        name: Gang
                        icon: mdi:track-light
                      - entity: light.shelly_shdm_1_d0ea50
                        name: schemerlamp woonkamer
                        icon: mdi:floor-lamp
                      - entity: light.shelly_shdm_1_db48c4
                        name: plafond woonkamer
                        icon: mdi:track-light
                      - entity: light.shelly_shdm_1_db30bc
                        name: plafond keuken
                        icon: mdi:track-light

[DBuit]

Hi,

I can give it a try but just so i try the right thing.
You want the clock i con above, and Klar as name and 3 minuter sedan below the name right?
Just like the left tile.

And you want 2 seperate tiles for the 2 entities you now have in the right tile?

[DBuit]

Hi,

Set home to false maybe, this takes some space at the top to show info. but you are not using that.

[andrew47 (Andrew)]

Thanks,
Will try that when I get home.