Homekit Infused 5 (HKI) v2023.1.3

Share your Projects! Dashboards & Frontend
1704

Could be it’s not something directly within Kiosk that at’s fault, but the way it hides the header, somehow makes the lates card-mod not sticky elements anymore. But in any case: using Kiosk Mode and latest card-mod, breaks sticky elements. Disabling Kiosk Mode (just disabling to hider header is enough) makes sticky work again).

How can I get the 3.1.4 + fix? I see that 3.1.4 is few versions behind and is from march 31 2022?

@Mariusthvdb could you perhaps DM me, so I don’t hijack Jimmy’s thread anymore.

1706

I use this as I also had the problem of the viewport having an empty space. I fixed it by adding #view

      #view {
        margin-top: 0px !important;
      }
1707

For some reason this pushed the empty space to the bottom of the page. But I just saw browser-mod 2.2.1 was released, which fixes hide header and sidebar. Updated that and removed the theme variabel for now. Though there are some bugs with 2.2.1, at least the header is now gone, without empty spaces and sticky working.

1 Like
1708

Hi Jim,

I am grateful for the project and for all your efforts.
A few more things and I will finish to configure it.
I have a question please: can I bring into Homekit a page ui-lovelace that is already configured? If yes, I will really appreciate if you could guide me through this process, when you have some spare time.
Thank you very much

irrigation
irrigation1496×701 122 KB

2
21080×2340 214 KB

Screenshot_20230422_065123_io.homeassistant.companion.android
Screenshot_20230422_065123_io.homeassistant.companion.android1080×2340 197 KB

1709

You can not import the entire page directly as there are some lines of code that will conflict. However I will point you in the right direction.

Check out either the custom addon or use custom_legacy (which would disable most elements of hki on a specific view). They are both pretty well documented.

You can find custom_legacy in the configuration part of the docs and custom addon in the addons section.

I hope this helps @florin.nae

In both cases it is mostly copy/paste.

1710

Hello,

After the update at version 2023.5 I have an issue: when I set the navigation bar downside, a bar line appear on top of the header as you can see in the screenshot.
How can I get rid of this bar line?

Thank you in advance!

1
11080×2340 165 KB

1711

I will push a fix soon

1712

@florin.nae this has now been fixed.

1713

New user of HKI here. Pretty excited to get my dashboard into shape. Professional presentation is important to me and for me HKI very well represents my mantra “less is more”.

Went through the installation steps and have the new dashboard. However I get this custom element doesn't exist: popup-card and when looking for it in HACS I can’t find anything. What does this error mean?

image
image730×323 17.2 KB

1714

Please check out this thread:

1715

Thanks.

Even though I downloaded the browser-mod integration in HACS I never installed it via Devices & Services. So I didn’t have browser mod in the left navigation bar.

Once that was done it worked and I have the canvas to work from - cool.

I had a look at the installation guide and didn’t find this step to install browser-mod via Devices & Services. Is this considered common knowledge or did something go wrong in me not following the installation steps?

1716

Not your fault, browser mod changed a few months back and I have not changed the documentation. For some people it works without doing anything and for some it doesn’t.

Well at least it is working now so happy coding!

1 Like
1717

EDIT: with a lot of tinkering around & restarts I managed to sort this one out :slight_smile:

Hello, trying to get some layout fixed in my dashboard but cannot get my head around it…
I have a view with only a few buttons, so would like to see two buttons side by side and that times 3 in separate rows.

Screenshot HKI_BDB
Screenshot HKI_BDB1495×868 64 KB

I tried: 1. adjusting the size of the button entries, but that leaves me with blank space, 2. adjusting the aspect ratio, but same issue, 3. fiddling around with a grid-layout but that messed everything up. Anyone with a suggestion? Thx in advance!

1718

I’m having fun building my dashboard :slight_smile:

Got a question re the code for the person on the home view

On Jimz own setup file frontpage-photo-jimmy.yaml

  - type: image
    entity: person.jimmy
    image: /local/images/jimmy_small.png
    tap_action:
      action: navigate
      navigation_path: jimmy
    hold_action:
      action: none
    style:
      left: 50%
      top: 50%
      width: 100%
      heigth: 100%
    filter: grayscale(100%)
    state_filter:
      "home": revert

we have this code

state_filter:
"home": revert

What does this do?

Also the location of the person seems to be picked up by the sensor sensor.reistijd_jimmy_work

- type: conditional
    conditions:
      - state: "home"
        entity: person.thomas
    elements:
      - type: state-label
        entity: sensor.reistijd_thomas_work
        style:

and sensor.reistijd_jimmy to represent what looks like elapsed time at the location. How are these sensors created? I know this is not actually a UI question but this is really cool and I’d like to adopt this as well.

In fact it would be cool to combine this with the zones in Home Assistant to indicate in which defined zone a person is

1719

I’m trying the Google Calendar integration atomic calendar revive but it doesn’t load.

Have followed the HACS instructions here
https://docs.totaldebug.uk/atomic-calendar-revive/overview/quickstart.html

and then this message appeared

After the download completes, since you are not using Lovelace in storage mode you need to manually add the resource with these settings:

url: /hacsfiles/atomic-calendar-revive/atomic-calendar-revive.js
type: module

Where do I add these resources? The documentation said add it to ui-lovelace.yaml but I don’t have that file

1720

Have you looked for it in your ‘Resources’ list? It should look like this:

Screenshot 2023-05-17 103225
Screenshot 2023-05-17 1032251920×705 82.5 KB

You can add this JavaScript modulle there manually.

My issue with this is that I have an Outlook integration and it does not seem to pick up any of the events in that calendar… The documentation speaks about Google or CalDav, so I’m now trying with Jimz default calendar addon.

1721

Thanks for that tip. After adding it it has loaded.
image

I thought that the dashboard section wasn’t used in our case given everything is done through yaml.

Anyway I’m using Google Cal as I’m on Google Workspace.

Would you be able to use Google Cal or are you locked into the Outlook world?

1722

I have a Google account as well, so tried the native integration. My calendars were successfully loaded to the Calendar add-on, but… so were my Outlook calendars? So I’m not entirely sure why this card is somehow treating the Google calendar entity as something different than my Outlook calendar entity.

1723

Unfortunately I’m not a developer which you probably can work out based on my queries :slight_smile: but I’m sure Jimmy or someone else may have experienced this before

1724

Really like the notifications. Batteries are a constant struggle so I’m wondering if it’s possible to create a notification if a battery is say less than 10%.

Had a look at the documentation and the sample code but couldn’t find anything