Custom Lovelace Card - Homekit style card

[DBuit]

A while ago @hST started this topic Card Tools popup? (Homekit style card ) and gave me the idea because i really like the homekit style and there are some themes like jimz but i did’t want to configure so much and it felt easier in one card so i made one.

So i developed one card you can use to fill a page in home assistant in homekit style.
I also developer a seperate light pop-up card you can use togheter, so the light entity used a custom card as pop-up and it is also in homekit style.

Check it out over here: https://github.com/DBuit/Homekit-panel-card

This is the first card i’m showing on the forum so let me know what you think what i can do better!

Somescreenshots:

[CM000n (Simon)]

Thanks a lot @DBuit ,

that looks really great!
I’ll try it out as soon as I get home from work.

BTW: Could you possibly share your other Homeassistant configuration? How did you get the navigation buttons for the views in your video from the header to the footer?

HASS custom homekit frontend

[DBuit]

Hello,

The video you found is not from the lovelace card im sharing here.
I made a custom frontend from scratch with a homekit style it can be found here: https://github.com/DBuit/hass-home-remote

I don’t have a build app on github so you can’t really use it at the moment or you must be familiar with angular / ionic and programming than you can do it yourself.
I talked about this frontend before on the forum and it is hosting for my personal use but you can try it out i explained it here: Card Tools popup? (Homekit style card )

If you wanna try it out and need help let me know if you wanna host it yourself let me know i can build the application.

[DBuit]

I see now i placed the explained it in dutch haha so that won’t work.
Here in english

I got the web application running here: https://home.buitwebdevelopment.nl/
You can use it there to test it out, I will soon put a ready-made app online that you can use it yourself in your www directory.

But when you visit the website you will be taken directly to the settings page.
The easiest way is to first create your configuration.json. How you need to make the configuration can be found on github but to get you started:

1. Make a folder “home_remote” in your www directory and a file “configuration.json” in it.
2. Write the configuration in the configuration.json file (look on github how)
3. Go to the website i just mentioned, you will see the settingspage and enter the home assistant url (This only works if your home assistant can be accessed outside your network)
4. Use the save button to save the url
5. There is a button to download the configuration from your home assistant use the button when it is done loading you can see the configuration downloaded at the end of the page
6. Use the refresh app button to load the updated configuration
7. If your configuration is working you will see the menu at the bottom getting filled.
8. Go to a tab and a connection to the home assistant will be made and you will be redirected to log in and then you are ready.
   9 Optional you can go to settings and use a long lived token this works best for now you never have to sign in and the connection is made much quicker.

If you need any help let me know.

[CM000n (Simon)]

Oh, that definitely looks very interesting! But I don’t know now if I want to have an additional frontend for Homeassistant.
I think I’ll see what can be done directly with lovelace, your homekit style card and the new custom header from mayker.
This one now supports a footer mode

Once again many thanks and a good start into the new year!

[DBuit]

Yeah sure let me know how it works out

[CM000n (Simon)]

Oh, one more question. I hope I’m not bugging you. But in your readme on github, you wrote “It is possible that an entity is not standard and is not shown as you expected. An example of this is weather entity, for this I have therefore added a separate tile to the card so that it is displayed in the correct way.”

However, I couldn’t find anything regarding the extra tile in the sample code that was also there. Or am I just blind and missed it? If not, could you please add the corresponding code section?

Once again, thank you very much!

[DBuit]

I think it is simpler.
When you use a weahter entity the tile will be displayed differtenly than other entities it is just build in the card like this you dont have to configure it.

[JohanEikelenboom (Johan)]

Maybe a stupid question, but how do I add the homekit custom card to? I checked your github page, but couldn’t find the install instructions…

Also for the pop-up card

[CM000n (Simon)]

Hi @DBuit ,
I got to play around now with your new Lovelace home kit card. I gotta say, it’s really a great job you’ve done here! Just amazing how easy it is now to create homekit style views using your card.

Unfortunately I miss a little bit the flexibility and the customization possibilities on your Homekit card.
Here you can do more with Button Cards and other Lovelace cards. Of course, this is also accompanied by a much greater configuration effort. Here your card does a really great job, because you can create great HA Views relatively easy with it.

Right now I miss those things the most.

• The Homekit Buttons do not use translations
• Offline devices are not greyed out but appear as if they were online.
• The font size is, for my taste, a bit too big.
• With lights the current color is not shown on the Homekit buttons.
• It is not possible to combine entities, e.g. for additional information, with other entities on the Homekit buttons (e.g. a switch for watering with a sensor for the tank level).
• Other Lovelace Cards (e.g. mini-graph-card) cannot be displayed within the Homkit Buttons
• A horizontal scrollbar appears, at least in the desktop view
• If I have more than 3 entities, there is no line break on mobile devices

I hope this doesn’t seem too rude. I just wanted to show you what I’m missing right now. If I missed configuration options, please correct me.

I will definitely keep an eye on your work

Here again to perhaps visualize my point of view a little better.
The representation of my lights view with your homekit card (Very easy and fast ) :

The representation of my lights view with the old manual configuration (a little nicer (imho) but much much more yaml code and a little buggy :-/ )

[CM000n (Simon)]

Just place the https://github.com/DBuit/Homekit-panel-card/blob/d67d4e900f81d00985be448630de7b2d81331bb2/dist/homekit-panel-card.js File under a folder in your homeassitant directory where you store your other lovelace plugins too.
For example I placed mine under '.homeassistant\www\community\homekit-panel-card\homekit-panel-card.js'

Then finally add this to your lovelace resources:

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

[JohanEikelenboom (Johan)]

Thnx, I’ll give it a try

[DBuit]

Hey man,

Good to hear you like it and hate it
Thanks for the feedback that is what i was looking for im gonna work on that!

You have an example of the card combining 2 entities?

[Pater100 (Patrick Smits)]

I like this stye very much,

I am going to try this myself

[jimz011 (Jim)]

I am going to release a new version of HKI very soon, this will give you the buttons you already used to (the ones with a lot of yaml) and it will only take up very little code. It also includes this great popup vertical slider in it (no extra configuration required)

[DBuit]

I made some fixes and added some stuff to the card.

• The tile icon will now color have the color of the light
• Font size is smaller (maybe make it a config later)
• You can set in the configuration to break the tiles after 3 on mobile view, default it will make it scrollable (this was buggy before)
• Translations are fixed for lights
• Offline devices are not shown like online

I added a to do section in the readme on github with stuff i wanna add soon.

@CM000n i used your feedback to make the card better maybe wanna give it another try to test the fixes and let me know if it works better now. thank you!

[DBuit]

I’m working on the graphs in the tiles but i was thinking why develop it again when it is already in the mini-graph-card so i made an option to load other lovelace cards inside a tile and you can overwrite the styling to make it fit homekit styling.

I will add default styling for some cards so it is less configuration to use it with the right styling.

You can find in the development branch: https://github.com/DBuit/Homekit-panel-card/tree/development

Example with the mini-graph-card and the iframe card:

[CM000n (Simon)]

Wow, that was really fast! Great job you’re doing!

I must say I like the new font size and how the unavailable entities are now displayed.
Also the automatic line break function on mobile devices is great! But here I would have another, albeit cosmetic, customization wish
Would it be possible to make the line break so that the Button Cards are centered? Otherwise, on my Android phone (2340 x 1080 pixels resolution) I always have a slightly larger margin on the left than on the right:

On desktop devices, the display now (regardless of whether with or without breakOnMobile function) seems to have some kind of error. Here I now get a scrollbar under each group:

BTW: Do you plan to release this on HACS for further and easier updates?

Thanks again for your great work and hopefully a good start into the new year for you

[DBuit]

Hello,

I did some fixes.

• Scrollbars should be gone now on desktop
• On mobile the tiles are a bit smaller so they work on more screens and they are centered (@CM000n)
• You can now load other lovelace cards inside a tile like the mini-graph-card you can also use other i tried iframe card but any card should work but not all cards will be displayed really good so you can overwrite styles to make it fit better. The mini-graph-card does not need custom styles i added the custom style in the card.

I will add hacs support next to make it easier to install for people and update

[CM000n (Simon)]

Wow, thanks again for your great work.
And also again a few hints and requests from my side

The individual tiles are now really better and centered on mobile devices. Unfortunately, a problem is now increasingly emerging that was already there before. The text does not scale with the size of the tiles. This means that the text is now “cut off” more:

Meanwhile I have also tested my other view with the remaining devices with the Homekit Style Card. There is a question/request regarding the display of other entities.

I have some device trackers which are displayed as binary sensor. I did this because the label “home” / “not_home” for example doesn’t make much sense on my TV. Instead, I just want to know if it is “on” / “off”.

binary_sensor:
  - platform: template
    sensors:
      philipstv:
        friendly_name: "Philips-TV"
        value_template: >-
          {{ is_state('device_tracker.philipstv', 'home') }}

These sensors are currently displayed on the Homekit Style Card as if they are “on”, even though they are “off” (on the picture the “TV” tile above left). Could this be adjusted so that they are also greyed out when they are “off”?

I also have some template sensors that measure the current state of our dishwasher, washing machine and dryer based on their current power consumption:

  - platform: template
    sensors:
      status_spuelmaschine:
        friendly_name: 'Spülmaschine'
        value_template: >-
          {% if states('sensor.stromverbrauch_spuehlmaschine')|float <= 0 %}
            off
          {% elif states('sensor.stromverbrauch_spuehlmaschine')|float < 100 %}
            Spült
          {% elif states('sensor.stromverbrauch_spuehlmaschine')|float >= 100 %}
            Trocknet
          {% else %}
            PRÜFEN!
          {% endif %}

The “off” status is correctly recognized and even translated here in the Homekit Style card, but the dishwasher still appears as if it is on, even though it is already switched off (“Spülmaschine” tile on top right):

Last but not least, I have a question about how Sonos devices (or media players in general) look. Since, as with Sonos, they often don’t turn off properly, but simply go into a “Paused” state, you may want to choose another display mode? Otherwise it looks as if they are constantly on and playing something, but they don’t

I hope that wasn’t too much again
I say thank you again and wish you a good start into the new year @DBuit .