Custom Lovelace Card - Homekit style card

capstan1 · June 19, 2020, 5:08pm

where would I need to put the :host… part?

Yes, I defined slider true:

entities:
  - entities:
      - entity: light.esstisch
        tileHoldAnimation: true
        slider: true
        wider: true
      - entity: light.sofa
        slider: true
      - entity: light.lightstrip
        slider: true
      - entity: media_player.wohnzimmer
    popup:
      settings:
        fullscreen: false
        sliderColoredByLight: true
        closeButton: Schließen
        openButton: Einstellungen
      type: 'custom:light-popup-card'
    title: Wohnzimmer
horizontalScroll: true
statePositionTop: false
tileHoldAnimation: true
type: 'custom:homekit-card'

But I don’t get any sliders:

arasco85 · June 19, 2020, 7:36pm

Log Details (ERROR)
Logger: frontend.js.latest.202006033
Source: components/system_log/__init__.py:209
First occurred: June 18, 2020, 10:02:22 AM (8 occurrences)
Last logged: 2:34:55 PM

http://192.168.1.168:8123/frontend_latest/chunk.36ce3d06af20541e9198.js:2:61210 Uncaught YAMLException: unacceptable kind of an object to dump [object Undefined]
http://192.168.1.168:8123/hacsfiles/switch-popup-card/switch-popup-card.js:2523:43 Uncaught TypeError: Cannot assign to read only property 'entity_id' of object '#<Object>'

It works fine as a popup. Just not using it as a non popup. Not sure where to look but i greatly appreciate any help.

tonioa · June 20, 2020, 2:41pm

Hi,
i have the same problem here:

2020-06-20 16:38:13 ERROR (MainThread) [frontend.js.latest.202005195] https://xxxxxxx:8123/hacsfiles/switch-popup-card/switch-popup-card.js:2523:37
TypeError: Attempted to assign to readonly property.

seasideCT · June 20, 2020, 8:55pm

Hi guys – is there a way to incorporate custom mini-media-player either in the Panel or Sidebar?

I’m using the following and getting the error

"Specify an entity from within the media_player domain."

Thanks

type: 'custom:homekit-card'
useBrightness: false
useTemperature: false
titleColor: '#FFFF'
statePositionTop: true
entities:
  - title: Media
    entities:
      - card: 'custom:mini-media-player'
        cardOptions:
          entities:
            - media_player.basement_sonos_beam

doktordoc · June 21, 2020, 7:45am

Is there possibility that for example : mini media player card or media player card shows what is on, like in normal , when is not homekit card
Background to be what is on media player
Thx

tonioa · June 21, 2020, 9:13am

Hi,

I am trying to use popup with “custom:switch-popup-card” for my covers

“service: cover.set_cover_position” is working fine but i don’t have the status reported at the top and also no icon ?

Here is the conf:

            - entity: cover.bureau
              name: Bureau
              offStates: "closed"
              offIcon: mdi:window-shutter
              icon: mdi:window-shutter-open
              state: sensor.cover_pos_bureau
              popup:
                type: custom:switch-popup-card
                noActiveState: '-'
                entity_value_path: attributes.position
                service: cover.set_cover_position
                service_data:
                  entity_id: this
                  position: value
                entities:
                  - cover.bureau
                buttons:
                  - icon: "mdi:window-shutter-open"
                    value: 100
                    name: "Ouvert"
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,1)"
                  - icon: "mdi:window-shutter-open"
                    value: 80
                    name: "80%"
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,0.8)"
                  - icon: "mdi:window-shutter-open"
                    value: 50
                    name: "50%"
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,0.6)"
                  - icon: "mdi:window-shutter-open"
                    value: 30
                    name: "30%"
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,0.4)"
                  - icon: "mdi:window-shutter"
                    value: 0
                    name: "Fermé"
                    color: "#FFF"
                    icon_color: "rgba(255,255,255,0.2)"

Also can be possible to add “actions” buttons on the “custom:switch-popup-card” like the other card ?

Thanks for your help

                actionsInARow: 3
                actions:
                  - service: cover.open_cover
                    service_data:
                      entity_id: this
                    name: open
                    icon: mdi:window-shutter-open
                  - service: cover.stop_cover
                    service_data:
                      entity_id: this
                    name: stop
                    icon: mdi:stop
                  - service: cover.close_cover
                    service_data:
                      entity_id: this
                    name: close
                    icon: mdi:window-shutter

DBuit · June 22, 2020, 12:26pm

Hi,

on the card configuration not on the specific tile you set a style:

style: |
          :host {
            --tile-background: #6a6c6f;
            --tile-on-background: #FFF;
        
          }

i justed tested the slider with wider: true but the size is not ok so need to fix that.

DBuit · June 22, 2020, 12:28pm

Hi @seasideCT

In you cardOptions you are using entities but you can only give one so it should be:
entity: media_player.basement_sonos_beam

DBuit · June 22, 2020, 12:31pm

Hi @tonioa,

For the switch popup you are missing entity_value_path

Add this so it nows from what attribute of the entity it can read the value.
entity_value_path: attributes.current_position`

Check the developer tools in hass for your entity if current_position is the right one for you.

About the actions plz add a issue on github for the popup card so i dont forget

DBuit · June 22, 2020, 12:35pm

Hi @doktordoc,

You could use any card an put it in a tile.
So you can use the mini media player and put this in a tile.
Check out this on github what you could do: https://github.com/DBuit/Homekit-panel-card/issues/31

tonioa · June 22, 2020, 1:01pm

Hi,
Thanks I replace with the right attribute and it’s working fine now

For the action button, i have added an issue on github.

capstan1 · June 22, 2020, 3:30pm

That’s kinda working. I’m getting a darker background when off which goes great with dark themes.
But still, I can’t see the slider without changing css. Am I the only one experiencing this?

doktordoc · June 22, 2020, 4:05pm

No, just black black backround, and name of media player

                      - card: media-control
                        wider: true
                        higher: true
                        noPadding: true
                        cardOptions:
                          entity: media_player.tanix
                        cardStyle: |
                          ha-card {
                            height:100%;
                          }
                          .ratio {
                            padding-bottom: 70%!important;
                          }

seasideCT · June 23, 2020, 2:34am

Hi @DBuit

Worked perfectly, thank you for clarifying

atebeta · June 23, 2020, 3:58am

How do I change the color of the temperature part of the icon so it’s a different color green?

DBuit · June 23, 2020, 6:06am

Hi @atebeta,

in the style part of the configuration you could add this css rule:

homekit-button .icon.climate {
     background-color:#F00!important;
}

DBuit · June 23, 2020, 6:10am

Hi @capstan1

The slider in tile is kinda work in progress so this is the only way at the moment.
I will make it better and also make it possible for other entities.

DBuit · June 23, 2020, 6:11am

Hi @doktordoc,

Strange your code is working for me.
Any error in logs?

capstan1 · June 23, 2020, 6:21am

I totally understand! Ijust wondered because it was there without css-styling at the beginning!

Keep up the good work!

atebeta · June 23, 2020, 7:46am

EDIT: managed to get it working. I had to remove

useTemperature: false

Thanks for the help. Is there a way to give it 2 different colors basis on/off?