Custom Lovelace Card - Homekit style card

lubbertkramer · June 11, 2020, 10:26pm

Covers should be also a great use just like lights. I have Slide (also Dutch company) on my curtains and my blinds are controlled by RF hub. Just like with mediaplayer cards for volume

I’m not using the style settings in the card because i define everything in my theme files. Will take a look on how to define this because even with the default HA design the slider is not visible

Part of my code:

  - type: "custom:homekit-card"
    useBrightness: true
    useTemperature: true
    titleColor: "#FFF"
    enableColumns: true
    statePositionTop: true
    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

When i indeed add the code to the custom card it’s working. But i do prefer the previous update where the slider was just shown"

Previous update 4.9.2:

Current update changed style 4.9.3:

  - type: "custom:homekit-card"
    useBrightness: true
    useTemperature: true
    titleColor: "#FFF"
    enableColumns: true
    statePositionTop: true
    style: |
      :host {
        --tile-background: #ff0000;
        --tile-on-background: #00ff21;
      }

DBuit · June 12, 2020, 6:02am

Hi @lubbertkramer,

I will add the slider for more entities when it is all working

What do you like more? to also see the slider when it is in off state?

doktordoc · June 12, 2020, 6:27am

Hey
How to change color of numbers and circle color in top right corner,on icons, barley visible

DBuit · June 12, 2020, 7:00am

Hi @skank,

For the round corners we have this style:
-tile-border-radius: 12px; set it to -tile-border-radius: 0;

I don’t know what you did with your icons, maybe i should at a style to set the icon size
There is an option to disable the icon color to change but it is not working at the moment have to fix that, the setting is called useBrightness and useTemperature so you now for when it is fixed.

lubbertkramer · June 12, 2020, 8:57am

Great, can’t wait to use this functionality also on other entities then lights!

I prefer not to see the slider when it’s off, it’s the best logic also for the WAF (just to keep it in our minds)

WIll try if i can add the tile-background / tile-on-background to my themes file.hopefully this will work because i like to keep my code as clean as possible on my lovelace files For the rest great work, will buy you a coffee/beer later, saw you had a button on your git page!

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