Custom Lovelace Card - Homekit style card

DBuit · January 31, 2020, 11:43am

Hello everyone,

I just updated the light pop-up (https://github.com/DBuit/light-popup-card) with a few requested changes.

First three configuration options to change color of the slider

sliderColor (Change color of the slider)
sliderColoredByLight (Let the slider color be defined by the lights color/brightness *overwrites sliderColor)
sliderThumbColor(Change the color of the line that you use to slide the slider)

And In new version the brightness is shown at the slider while sliding so you can directly see what percentage you are setting before releasing it

Origin · February 1, 2020, 10:05am

Hey, I am a little confused of what’s gone wrong, perhaps I have updated or installed something that’s conflicting with this, but for the last week my setup using these cards shows nothing. I have several pages all using the cards and none of them work. I’ll try to provide all details;

This is my yaml file for the main set up;
https://gist.github.com/OriginNRG/00a0ecedc5620d36415dfda2ad01fecf

I won’t bother sharing the others as they are all formatted the same way.

I do get an error in the console;

Uncaught (in promise) TypeError: Cannot read property 'split' of null
    at new s (template.ts:108)
    at Object.templateFactory (shady-render.ts:82)
    at f.__commitTemplateResult (parts.ts:265)
    at f.commit (parts.ts:218)
    at f.__commitIterable (parts.ts:320)
    at f.commit (parts.ts:222)
    at o.update (template-instance.ts:53)
    at f.__commitTemplateResult (parts.ts:277)
    at f.commit (parts.ts:218)
    at f.__commitIterable (parts.ts:320)

Heres a screenshot of what I see: https://i.imgur.com/wdGsAam.png

I can’t remember exactly when it all went wrong, but as I say, nothing shows on the page and yet no lovelace errors show either so I am stumped currently, I thought maybe it was a formatting issue but now I am not so sure. Perhaps you guys know of this or can point me in the right direction.

correctomundo · February 1, 2020, 11:31am

Great stuff @DBuit! I was wondering if you could share which theme you’re using? I really like your background and overall color setting!

nimey · February 1, 2020, 9:44pm

Hey Guys,

can aybody please help me im struggeling with the minigraph card inside this card

  - entities:
      - card: 'custom:mini-graph-card'
        cardOptions:
          entities:
            - entity: sensor.mainroomtemperature
              name: Livingroom
        cardStyle: |
          .header {
            padding: 0;
          }
          .header .icon {
            color: #f7d959;
          }
          .states {
            padding: 0;
          }
          .states .state .state__value {
            font-size:14px;
          }
        wider: true

Thanks

size9ed · February 2, 2020, 4:09am

I’ve just installed the custom card and am having the same problem, nothing showing up at all.

slipx06 · February 2, 2020, 10:42am

Try add noPadding:true:

  - card: 'custom:mini-graph-card'
    noPadding: true        
    cardOptions:
      entities:
        - entity: sensor.mainroomtemperature
          name: Livingroom

mkhattab · February 2, 2020, 4:24pm

Great work on this. I’m now using it as my daily driver on a wall mounted tablet and it’s fantastic. I am also trying to get climate entities to show your thermostat-popup with a single tap but this doesn’t work. It brings up the standard HA more-info dialog. Any suggestions?

DBuit · February 2, 2020, 4:25pm

Hey @mkhattab do you have browser_mod by Thomas loven installed and set the popups part in your lovelace yaml?

DBuit · February 2, 2020, 4:26pm

That is strange if i use your setup i get the same. Gonna try to find what is wrong

mkhattab · February 2, 2020, 4:27pm

Hi @DBuit Thanks for the super quick reply.
I don’t have browser_mod installed.
Your thermostat popup is working perfectly but only with long-pressing the tile

Origin · February 2, 2020, 4:45pm

Thanks, so confused. I even decided to try to copy what you have on git resulting in the same scenario. Perhaps something is conflicting I’m not sure.

nimey · February 2, 2020, 8:59pm

Unfortunately not

DBuit · February 3, 2020, 6:05am

@Origin just released new version with a fix for your problem. The problem was the custom tiles i made a mistake in the code should work now!

@size9ed i think it should work for you if you install the new version if not can you share the error and your configuration?

DBuit · February 3, 2020, 7:52am

Hi @nimey for the mini graph card i overwritten styles are built in the card so you can remove the cardStyle part. How does it look if you do that?

briis · February 3, 2020, 8:01am

The edges are now gone for me with the latest version. But when I open it on my iPhone I get displacement of the tiles with mini graph card, as you can see on the picture below:

DBuit · February 3, 2020, 8:07am

Hi @briis, ok good.
Im aware of the displacement issue. it has something to do with safari but havent found a fix yet or what the problem is… hope to fix it soon looks weird!

DBuit · February 3, 2020, 8:44am

@briis i think i fixed it.
Made a new version: https://github.com/DBuit/Homekit-panel-card/releases/tag/0.4.2

If you can test it for me (i dont have iphone) and let me know if it is fixed that would be nice!

size9ed · February 3, 2020, 8:56am

Working for me now, thank you

briis · February 3, 2020, 9:02am

Just tested, and it works. I had to restart HA before it worked though, I guess it had to clear some cache. But now it is placed correctly. Thank you for the quick fix.

Origin · February 3, 2020, 10:37am

Thanks @DBuit updated and restarted Hass, perfect thank you for the swift fix