Custom Lovelace Card - Homekit style card

@DBuit This doesn’t seem to work with lock entities (tapping the tile to toggle lock/unlock). Is there anything specific I should do to get it working?

Hi, you should set the tap_action to make it toggle on tap. It only default toggle for light and switch entities

That did the trick. Thank you so much!

1 Like

I’m having a hard time getting this to work.

I changed installed using HACS by adding the repo to HACS.
Change loveless mode to yaml and added the ui-lovelace.yaml and added the resource at the top and followed the examples on the github page.

But all i get is a lovelace with no entities… just a white page

Heres my ui-lovelace.yaml

resources:
  url: /community_plugin/homekit-panel-card/homekit-panel-card.js
  type: module

title: Hjem
views:
  - title: "Hjem"
    icon: mdi:home-outline
    path: "hjem"
    panel: true
    cards:
      - type: "custom:homekit-card"
        home: true
        rules: |
          {% if "Vandaag" in states('sensor.blink_gft') %} <li>Vandaag groenebak aan de straat</li> {% endif %}
          {% if "Vandaag" in states('sensor.blink_papier') %} <li>Vandaag oudpapier aan de straat</li> {% endif %}
          {% if "Vandaag" in states('sensor.blink_pmd') %} <li>Vandaag plastic aan de straat</li> {% endif %}
          {% if "Vandaag" in states('sensor.blink_restafval') %} <li>Vandaag grijzebak aan de straat</li> {% endif %}
          {% if states('sensor.current_lights_on') | float > 0 %} <li>{{states('sensor.current_lights_on')}} lampen aan</li> {% endif %}
          {% if states('sensor.current_media_players_on') | float > 0 %} <li>{{states('sensor.current_media_players_on')}} speakers aan</li> {% endif %}
        title: "Demo"
        useBrightness: false
        titleColor: "#FFF"
        enableColumns: true
        statePositionTop: true
        entities:
          - title: Row 1
            entities:
              - entity: light.bryggers
              - entity: climate.gulv_kontor
              - entity: media_player.stue_tv
          - title: Row 2
            entities:
              - entity: light.entre
  - title: "Test"

any hints and tips is appreciated

guess this might be the reason why its blank… but cant figure out how to solve it

Custom element doesn't exist: homekit-card.
type: 'custom:homekit-card'
home: true
rules: >
  {% if "Vandaag" in states('sensor.blink_gft') %} <li>Vandaag 
.................................

@Heine_Madsen: did you install browser_mod from HACS?

yes it’s installed

That was the reason I got a blank page once.

This bit seems a bit weird above ‘views’: ‘title: Hjem’

Removed that line but stille the same issue

Hey Jim!

where can we find the rgb-card? I’d like to add it to my light-popup card but can’t seem to find it. Its not this card is it: https://github.com/bokub/rgb-light-card ?
thanks for checking…

@DBuit any chance we can get a lock popup?

Also can anyone else try using the thermostat card as a regular card without a pop-up … it just won’t display for me… shows up and then my whole view disappears instantly

Also I am using @jimz011 s Hki so I didn’t know if something setup with that is causing it

Well, yes, it is exaclty that one I use XD. However the light-popup card does have some sort of this by itself. I just use the rgb-card though.

Did you download and install my modified js file (and deleted the .gz file) ? Because it is a requirement to run it with HKI. It has some changes to the way fullscreen is handled.

I believe that’s what I had originally but pulled the updated one after I saw updates were made because it wasn’t working … I’ll check again to see what I have in there. So you are saying it should work and display just like the regular thermostat card right in my climate view with your modified one? (I don’t want it as a popup just a standard card)
— so i just tried your modified one and still no luck, it shows up for a second then disappears… i see a bunch or this type of stuff in the console, which does not happen when j choose the standard thermostat card:

Error in parsing value for ‘padding-left’. Declaration dropped. [climate:95:23]

Error in parsing value for ‘padding-left’. Declaration dropped. [climate:166:23]

Expected declaration but found ‘@apply’. Skipped to next declaration. [climate:3:11]

Expected declaration but found ‘@apply’. Skipped to next declaration. [climate:25:1]

Unknown property ‘-moz-flex-basis’. Declaration dropped. 3 [climate:36:25]

Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. [climate:1:60]

Dangling combinator. Ruleset ignored due to bad selector. [climate:8:46]

Dangling combinator. Ruleset ignored due to bad selector.

@Bartem Ah yes, it seems I misunderstood you. And you are right, the card won’t work on a standard view just like that. However what does work is the following, try to put it inside an entities card like so:

                - type: entities
                  entities:
                    - type: custom:thermostat-popup-card
                      entity: climate.kleine_kamer

I have tried this and this seems to work.

Getting closer… putting it in an entities card helped a little at least it’s not disappearing…

Yes please! I second this request

@DBuit Is there any way to change icon color to a manual setting?

18

One of my tiles is a lock and it always appears yellow regardless of state.
Can I somehow override the colors for its on / off states?

Hi at this moment you can’t overwrite the icon colors.
I think you should set offStates so it shows the tile in off state when locked or unlocked what you want.
Check the readme for offStates.

1 Like

@Bartem just released new version of the thermostat popup card that fixes it so you can use it as a normal card.

Also set fullscreen: false in your yaml config so it won’t make it fill up the whole page.