Homekit Dashboard: complete automatic dashboards with Apple Home look and feel

Share your Projects! Dashboards & Frontend
, ,
1

A user-friendly dashboard for everyday use of Home Assistant. It has the look and feel of the Apple Home app so it’s intuitive for friends and family. It’s a standard Home Assistant dashboard so works on both Android and Apple devices (and in browsers).

This is not just a skin or a theme. It’s a complete dashboard generator that automatically creates all pages for domains, areas, sensor lists, etc,. all the links, badges and backgrounds, and does all the layout.

It automatically follows all changes to your Home Assistant configuration. It uses custom strategy so adding or deleting devices and entities, moving them between areas, changing names, backgrounds, etc. is immediately reflected in the dashboard.

combi
combi1793×1280 218 KB

Homekit Dashboard makes extensive use of Home Assistant areas and labels (“On Home View”, “Favorite”, “In Summaries”) and other settings. Areas drive dashboard creation, only entities assigned to an area are included in the dashboard. Labels determine what entities are included on the home page and in badges. Adding entities is described in the Populating the dashboard page in the wiki.

When installed with HACS it works out of the box: 3 lines of YAML are all you need to create a complete dashboard. A configuration can optionally be attached to the dashboard to fine-tune the layout, but as much as possible the dashboard uses your Home Assistant configuration. So for instance a background set on an area immediately shows up in the dashboard.

combi2
combi21793×1280 176 KB

There is a fair amount of documentation in the wiki. I hope you like it!

12 Likes
2

This is fantastic! I just installed it and got it up and running. Looks great but the best part is the custom UI strategy using device areas + labels.

Thanks for all your hard work on this!

3

Thanks, glad you like it! Would love to hear your feedback after you’ve used it for a while.

4

How can I add a custom page to this? I’m using Scrypted cameras that require a page with iframes

5

Great job Henk.
I like this :slight_smile:

possible the add weather card ?
possible to change icone color and background button because it can’t see correctly icon and texte ?
Thanks for all

6

Hi Olivier, thanks, glad you like it! I will add a weather card, will be in the next release. I don’t understand the problem with the color/background button, can you give an example/post a screenshot?

7

Sorry, missed this earlier. The latest release supports the picture-entity card and the advanced-camera-card and webrtc-camera cards (both in HACS) for cameras, does that work? I don’t expect to add iframe support anytime soon, sorry.

8

Thanks for developing this dashboard. I installed and setup as described but I get the following:

Error loading the dashboard strategy:

TypeError: Cannot read properties of undefined (reading ‘area_id’)

Any thoughts on what may be causing this?

9

Hi, have you defined at least one area (see Populating the dashboard · hwhesselink/homekit-dashboard Wiki · GitHub)? I just realized this is not stated clearly in the README, will update that.

10

Yes, I have many defined areas within HA.

11

Can you open Developer Tools (F12 key in Firefox and Chrome), select the Console tab and then refresh the dashboard page. That should give more detail about the error, please copy and paste here. Thanks

12

Thank you for your help. Here is the code from the console for the error:

get-strategy.ts:154 TypeError: Cannot read properties of undefined (reading 'area_id')
    at StrategyHomekitDashboard.generate (homekit-dashboard.js?hacstag=989481972110:1:1296)
    at async d (get-strategy.ts:150:5)
    at async h (get-strategy.ts:185:8)
    at async S._fetchConfig (ha-panel-lovelace.ts:395:9)
d @ get-strategy.ts:154
await in d
h @ get-strategy.ts:166
_fetchConfig @ ha-panel-lovelace.ts:395
await in _fetchConfig
willUpdate @ ha-panel-lovelace.ts:180
performUpdate @ reactive-element.ts:1512
scheduleUpdate @ reactive-element.ts:1410
_$EP @ reactive-element.ts:1382
await in _$EP
requestUpdate @ reactive-element.ts:1321
_$Ev @ reactive-element.ts:1055
E @ reactive-element.ts:1038
i @ lit-element.ts:130
S @ ha-panel-lovelace.ts:63
N @ scoped-custom-element-registry.ts:642
t @ scoped-custom-element-registry.ts:408
createElement @ hass-router-page.ts:297
_createPanel @ hass-router-page.ts:317
_currentLoadProm.i.then._currentLoadProm @ hass-router-page.ts:215
Promise.then
update @ hass-router-page.ts:206
performUpdate @ reactive-element.ts:1514
scheduleUpdate @ reactive-element.ts:1410
_$EP @ reactive-element.ts:1382
await in _$EP
requestUpdate @ reactive-element.ts:1321
set @ reactive-element.ts:789
rebuild @ hass-router-page.ts:285
await in rebuild
_updateRoutes @ partial-panel-resolver.ts:215
willUpdate @ partial-panel-resolver.ts:86
performUpdate @ reactive-element.ts:1512
scheduleUpdate @ reactive-element.ts:1410
_$EP @ reactive-element.ts:1382
await in _$EP
requestUpdate @ reactive-element.ts:1321
_$Ev @ reactive-element.ts:1055
E @ reactive-element.ts:1038
c @ hass-router-page.ts:46
v @ partial-panel-resolver.ts:41
N @ scoped-custom-element-registry.ts:642
t @ scoped-custom-element-registry.ts:408
u @ lit-html.ts:1218
$ @ lit-html.ts:1639
_$AI @ lit-html.ts:1475
p @ lit-html.ts:1282
$ @ lit-html.ts:1636
_$AI @ lit-html.ts:1475
F @ lit-html.ts:2278
update @ lit-element.ts:171
performUpdate @ reactive-element.ts:1514
scheduleUpdate @ reactive-element.ts:1410
_$EP @ reactive-element.ts:1382
await in _$EP
requestUpdate @ reactive-element.ts:1321
set @ reactive-element.ts:789
j @ lit-html.ts:1987
_$AI @ lit-html.ts:1927
p @ lit-html.ts:1282
$ @ lit-html.ts:1636
_$AI @ lit-html.ts:1475
F @ lit-html.ts:2278
update @ lit-element.ts:171
performUpdate @ reactive-element.ts:1514
t.performUpdate @ storage.ts:172
scheduleUpdate @ reactive-element.ts:1410
_$EP @ reactive-element.ts:1382
await in _$EP
requestUpdate @ reactive-element.ts:1321
set @ reactive-element.ts:789
_updateHass @ hass-base-mixin.ts:50
_updateHass @ context-mixin.ts:123
(anonymous) @ connection-mixin.ts:291
(anonymous) @ connection.js:23
_handleMessage @ connection.js:15
13

Do you have any entities or devices that have labels (one or more of “On Home View”, “Favorite”, “In Summaries”) but that aren’t assigned to an area? If so can you try with those labels removed.