Custom Lovelace Card - Homekit style card

arasco85 · June 12, 2020, 2:18pm

So i have successfully figured out how to get the popup media player and popup light as a non popup. I love the look of the cards and am only missing the switch popup card. I cannot figure out how to get it to work. I can get the card to dislpay but the buttons do not work. any of you gurus know what im doing wrong? @DBuit

entities:
  - fan.master_bedroom_fan
buttons:
  - color: '#FFF'
    icon: 'mdi:fan'
    icon_color: 'rgba(255,255,255,1)'
    name: High
    value: high
  - color: '#FFF'
    icon: 'mdi:fan'
    icon_color: 'rgba(255,255,255,1)'
    name: Medium
    value: medium
  - color: '#FFF'
    icon: 'mdi:fan'
    icon_color: 'rgba(255,255,255,1)'
    name: Low
    value: low
  - icon: 'mdi:fan-off'
    name: 'Off'
    value: 'off'
entity_value_path: attributes.speed
icon: mdi-fan
noActiveState: '-'
service: fan.set_speed
service_data:
  entity_id: this
  speed: value
type: 'custom:switch-popup-card'
fullscreen: false

Log Details (ERROR)
Logger: frontend.js.latest.202006032
Source: components/system_log/__init__.py:209
First occurred: June 11, 2020, 10:29:52 PM (29 occurrences)
Last logged: 9:20:43 AM

http://192.168.1.168:8123/browser_mod.js:1:6757 Uncaught TypeError: Cannot convert undefined or null to object
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>'
https://eangf9d6d6n8uveprryljb48rdskyr8y.ui.nabu.casa/hacsfiles/switch-popup-card/switch-popup-card.js:2523:37 TypeError: Attempted to assign to readonly property.

skank · June 12, 2020, 3:29pm

Hi,

Thx
Borders are fixed.
Yeah troubles with the icon size, willing to add a style for it?
Will wait for fix of disabling icon color change.
Any idea why there is a little blank space before the icon ,so its not aligned with text?

I really appreciate the slider not being visible in off state. (as is now) To me this makes sense.

capstan1 · June 12, 2020, 7:00pm

Sadly, I don’t get the sliders in the latest update. Neither when it’s off nor when it’s on.
If I turn back to the first version with sliders it’s working.

Noah · June 14, 2020, 8:48pm

is it possible to use svg-files instead of icons?

Mariusthvdb · June 14, 2020, 9:05pm

Hi Lubbert,

please let me ask how you get the notification to show the circle with brightness percentage? Is this a feature of the homekit style card, or a custom made notification. It s just I cant spot it in the code you posted.

lubbertkramer · June 15, 2020, 11:41am

Native solution in the homekit card, i also have made a solution with the button card combined with circle sensor which can be found here -> Lovelace: Button card

Here is my code from the Homekit card:

id: MobileLights
title: MobileLights
path: Mobile-Lights
panel: true
icon: mdi:lightbulb

cards:

  - type: "custom:homekit-card"
    useBrightness: true
    useTemperature: true
    titleColor: "#FFF"
    enableColumns: true
    statePositionTop: true
    # style: |
    #   :host {
    #     --tile-background: #ff0000;
    #     --tile-on-background: #00ff21;
    #   }
    rows:
      - row: 1
        columns:
          - column: 1
            # tileOnRow: 4
            entities:
              - title: Begane grond
                entities:
                  - entity: light.grp_beganegrond
                    name: Begane grond
                    spin: false
                    icon: bha:mirror-lamp
                    slider: true
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                      settings: true
                  - entity: light.grp_toilet
                    name: Toilet
                    icon: bha:ceiling-lamp
                    slider: true
                    popup:
                      type: custom:light-popup-card
                      scenesInARow: 2
                      brightnessWidth: 130px
                      brightnessHeight: 350px
                      switchWidth: 110px
                      switchHeight: 300px
                      settings: true

Mariusthvdb · June 15, 2020, 11:50am

thanks, the https://github.com/custom-cards/circle-sensor-card is new to me. cool.

thought I had seen it fly by in A different take on designing a Lovelace UI somewhere, but couldn’t find it anymore.

this might be a simple solution indeed.

edit

found it in the above post and linked config of Mattias Persson (mat8707)

  custom_fields:
    info: >
      [[[ if (entity.state === 'on' && entity.attributes.brightness) {
      const brightness = Math.round(entity.attributes.brightness / 2.54);
      const radius = 20.5; const circumference = radius * 2 * Math.PI;
      return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
      transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
      <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="10">%</tspan></text></svg>`; } ]]]

and styling:

  styles:
    custom_fields:
      info: &circle_pos
        [top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]

but this doesnt really auto-adjust the size and position…

Schermafbeelding 2020-06-15 om 17.40.13

will ask Mattias in his thread.

DBuit · June 16, 2020, 12:46pm

Hi,

You might need to set:
:host {
–tile-background: #ff0000;
–tile-on-background: #00ff21;
}

These 2 color settings to see difference.
You also set slider to show in your config?

DBuit · June 16, 2020, 12:47pm

No not at the moment, if you want please put this on github so i can random to add maybe

DBuit · June 16, 2020, 12:49pm

Hi @skank,

Just released update and added --tile-icon-size to set size of the icon default it is 30px.

DBuit · June 16, 2020, 1:18pm

Hi @arasco85,

It works for me with your config:

- title: test
    cards:
      - type: 'custom:switch-popup-card'
        entities:
          - fan.fan_test
        buttons:
          - color: '#FFF'
            icon: 'mdi:fan'
            icon_color: 'rgba(255,255,255,1)'
            name: High
            value: high
          - color: '#FFF'
            icon: 'mdi:fan'
            icon_color: 'rgba(255,255,255,1)'
            name: Medium
            value: medium
          - color: '#FFF'
            icon: 'mdi:fan'
            icon_color: 'rgba(255,255,255,1)'
            name: Low
            value: low
          - icon: 'mdi:fan-off'
            name: 'Off'
            value: 'off'
        entity_value_path: attributes.speed
        icon: mdi-fan
        noActiveState: '-'
        service: fan.set_speed
        service_data:
          entity_id: this
          speed: value
        fullscreen: false

Got this:

skank · June 16, 2020, 3:04pm

Working thx, now left is only the useBrightness and useTemperaturefix , so color doesnt change of the icon

arasco85 · June 16, 2020, 5:27pm

Thanks for looking! I can get the card to pull up but it seems like the buttons function wont work. It will show the correct speed value when changed via a different source but the buttons wont call a new speed. So the card is getting the correct attribute but i cant get it to call.

Olle · June 18, 2020, 5:15am

Just wanted to drop by and say thanks for the work you’ve done with this card, I like the homekit aesthetics coupled with the power of home assistant

DBuit · June 18, 2020, 4:50pm

Hi @arasco85,

you got any erros in logs when using the button?
Just something you could try, place the value on the buttons in quotes: ‘high’
Maybe it does not see it as a string?

Let me know

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