Homekit Infused 5 (HKI) v2023.1.3

Share your Projects! Dashboards & Frontend
122

well, without your code we wouldn’t know…

this is what I do, using the horizontal filler to have the cards not touch the edges of the display, which is particularly necessary on mobile devices:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_body
        entity: sensor.cpu_temperature
    #        icon: mdi:chip
        name: Cpu temp
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 50
            styles:
              card:
                - '--local-color': blue
          - operator: '<'
            value: 60
            styles:
              card:
                - '--local-color': green
          - operator: '<'
            value: 70
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 80
            styles:
              card:
                - '--local-color': red

      - type: custom:button-card
        template: button_body
        entity: sensor.processor_use
    #        icon: mdi:chip
        name: Cpu usage
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 10
            styles:
              card:
                - '--local-color': blue
          - operator: '<'
            value: 45
            styles:
              card:
                - '--local-color': green
          - operator: '<'
            value: 60
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 80
            styles:
              card:
                - '--local-color': red

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        template: horizontal-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_body
        entity: sensor.disk_use_home
    #        icon: mdi:chip
        name: Disk use
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 500
            styles:
              card:
                - '--local-color': green
          - operator: '<'
            value: 600
            styles:
              card:
                - '--local-color': brown
          - operator: '<'
            value: 700
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 800
            styles:
              card:
                - '--local-color': red
          - operator: '<'
            value: 1000
            styles:
              card:
                - '--local-color': purple


      - type: custom:button-card
        template: button_body
        entity: sensor.disk_free_home
    #        icon: mdi:chip
        name: Disk free
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 2
            styles:
              card:
                - '--local-color': red
          - operator: '<'
            value: 6
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 10
            styles:
              card:
                - '--local-color': blue
          - operator: '<'
            value: 32
            styles:
              card:
                - '--local-color': green

      - type: custom:button-card
        template: button_body
        entity: sensor.disk_use_percent_home
    #        icon: mdi:chip
        name: Disk use
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 10
            styles:
              card:
                - '--local-color': red
          - operator: '<'
            value: 30
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 40
            styles:
              card:
                - '--local-color': brown
          - operator: '<'
            value: 80
            styles:
              card:
                - '--local-color': green

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        template: horizontal-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_body
        entity: sensor.memory_free
    #        icon: mdi:chip
        name: Mem free
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 100
            styles:
              card:
                - '--local-color': red
          - operator: '<'
            value: 300
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 400
            styles:
              card:
                - '--local-color': brown
          - operator: '<'
            value: 1000
            styles:
              card:
                - '--local-color': green

      - type: custom:button-card
        template: button_body
        entity: sensor.memory_use
    #        icon: mdi:chip
        name: Mem usage
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 500
            styles:
              card:
                - '--local-color': green
          - operator: '<'
            value: 600
            styles:
              card:
                - '--local-color': brown
          - operator: '<'
            value: 700
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 800
            styles:
              card:
                - '--local-color': red

      - type: custom:button-card
        template: button_body
        entity:  sensor.memory_use_percent
    #        icon: mdi:chip
        name: Mem use
        tap_action:
          action: more-info
        state:
          - operator: '<'
            value: 50
            styles:
              card:
                - '--local-color': green
          - operator: '<'
            value: 60
            styles:
              card:
                - '--local-color': brown
          - operator: '<'
            value: 75
            styles:
              card:
                - '--local-color': orange
          - operator: '<'
            value: 95
            styles:
              card:
                - '--local-color': red

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        template: horizontal-filler
123

This is because this is an old screenshot (which is mentioned in the docs. If you are looking for my old code please click here.

I have redone that menu to look different:

image
image1125×2436 370 KB

This is what the menu looks like with the current code.

I will upload new screenshots and videos within the week. Though the biggest visual change is this particular page with these buttons. Also you should know that the styling I did to create those buttons you ask for might no longer work as I believe it uses some keys that are deprecated. Anyways, I pasted the link, you might get some use out of it.

124

Thanks @jimz011Now it makes more sense why I didn’t get it to work, spent a couple of overs to try to understand what I missed.

I will take a closer look at the old code and se if I can get it to work, or if this new way is the way to go. This new way als looks real good and ties in the the all over theme better.

1 Like
125

I am still working on the menu, as I want it to be a hub where you can do everything.

Here is a more actual video of my lovelace setup:

126

That vacuum card is very nice. The part with the map over the house and the ability to draw zones was epic. I didn’t know that what possible outside of the app. I have a roborock myself and will definitely take a look on how you did that!

127

I haven’t uploaded that specific code yet, but it will come real soon. I’m actually in the works of fixing it now. Might drop it tonight or tomorrow.

128

My to-do list just gets bigger and bigger :dizzy_face:

129

Here’s the code, I tried it with different pixel spacing, still resulted in card errors. :man_shrugging:

# Horizontal Space
horizontalspace:
  card:
    type: 'custom:button-card'
    color_type: blank-card
    styles:
      card:
        - width: 0px

# Vertical Space
verticalspace:
  card:
    type: 'custom:button-card'
    color_type: blank-card
    styles:
      card:
        - height: 0px
130

what happens when you add some px to the width / height? right now you use a card with 0 size, which is not very useful?

131

Hi everyone, I will be pushing out updates tonight.

A preview of the upcoming update:

I expect it to be online around 01.00 am CEST. Postponed to the 10th of July.

7 Likes
132

Love your work, I am taking inspiration and starting mine from scratch :slight_smile:
Is there anyway to style the cards transparently so that the vertical stack background is applied to all the cards within the stack?

As an example, for yours I can see you are using homekit-white as the background for all cards within a pop-up, whereas I am tryning to get it so that all cards are effectively transparent and so it appears as one large card rather than multiple within a vertical stack.

Does this make sense?

133

@jimz011 I know you use a lot of pop-up card in your setup. I’ve been starting to integrate this into mine, but it doesn’t really look good across devices, looks pretty good on mobile, but if it is too long it gets cut off on my desktop with no way to scroll, have you come across this and / or found any good solutions or work arounds?

1 Like
134

Do you use a background image with the cards? It will look a bit better if you do. However it will never look as great on a desktop though. The heights differ which makes the card look weird on desktops and not only that, the problem is that there is no way to scroll on popup cards. However there is a bad solution to that and that is to use swipe-card within a popup card. Though I can’t seem to get it to work smoothly, it really lags like crazy when using that.

@Ryan_Grandy
Edit: I am considering removing all the popup cards in favor of a menu and conditional cards. Conditional cards have the big advantage that they are on the same view and can be scrolled upon. Not only that, but they can also have a more-info window popup, whereas you can’t open the more-info view on a popup card. I am still testing this and it is in an early stage (I actually came up with this because of your post. And I agree with you, on some ipads it will even render an ugly black box at the bottom of those cards in weird cases).
You can see what I did to accomodote for this problem, however like I said I am still testing it and I have problems with gaps. I only have one page done so the gap isn’t very obvious (you might not even notice it at all), but it really will be hard to get this right as I will have to mix different views into one another. I will keep you informed on how/what and if I will use this as a permanent solution (but I like the idea of not having to deal with “small” popup views anymore.

135

Edit, for screenshots on this update, please click here

Changes (11/07/2019)

Sorry for the long delay, I have actually tried to rearrange the setup for use with swipe-card, but unfortunately this is way too buggy to be any good (it looked nice though), anyways a weeks work totally useless. But no fear, I still have the promised update for you guys.

  • Added a pretty cool Vacuum Control Center, this will replace the previously used xiaomi-vacuum-cleaner-card and you can safely remove that addon if you use this setup, you will need a custom card for the zone map which can be found here: https://github.com/PiotrMachowski/Home-Assistant-Lovelace-Xiaomi-Vacuum-Map-card, the rest of the cards are just cards that you should already have if you follow this setup.
  • The maintenance/cleaning popup card no longer has the dog card
  • Moved around button placements of the frontpage to fit the menu button (previously this was the “other view”, now you can simply press the menu button on the frontpage to show the entire menu, convenient eh?)
  • Testing conditional cards as a replacement to popup cards, so far it seems to work very well. If you want to try it out yourself you can see my code, it uses conditional cards to show the menu now whereas before you would have to go to the actual view. This should save time and makes the interface a bit easier to use, in the future I might decide to swap all popup cards in favor of conditional cards, but like I said this is something I am currently testing
  • The NOW ON and AUTOMATIONS popup buttons have been moved to the menu
  • Added a dog popup button on the frontpage, this card was moved from the maintenance/cleaning popup card. It also has a state, device tracker and location added to it. For questions about this please send me a message on the HA community forums.
  • Splitted the frontpage in multiple yaml files, this is in preparation for the conditional cards as this would clutter a single view immensely
  • Fixed some automations related to the Xiaomi Vacuum Cleaner
  • Fixed notifications on the frontpage related to the Xiaomi Vacuum Cleaner
  • Minor fixes to the code

NOTE: Unfortunately all these changes (and the changes I still have in mind) keeps me from working on proper theming, themes are worked on but at a very slow pace, please have patience or use any other theme available on the community. If you do decide to use the theme I provide note that if you really need to get work done in the dev-states panel you will have to change the theme back to default as there are some black and white elements which are themed badly.

3 Likes
136

I was trying to dig into your YAML to see how you have this set up. Looks like you’re using input booleans to trigger the conditional cards, if I’m not mistaken? I’ve thought about this approach myself, but the one thing I don’t like is that it doesn’t scale well to multiple users. You’d either need to create a separate input boolean and card for each user, or the view could change without warning if two people are on the same view simultaneously (probably a fairly rare edge case, but still something to be aware of).

137

Yes that is correct, I am looking for a way as well. I have 2 things in mind, either a state-switch or an entire view for my spouse, which will then be hidden/unhidden by cch. The problem is, that when I do that that the code will increase in size a lot, so I might use decluttering templates for this so it will only be a few lines of code extra. I am still experimenting with this, but I do like the performance of the conditional cards. On my repo I have only done the main menu as you might have seen. But I have them on all my previous popup cards now. But like you say multiuser is not ideal.

I will experiment some more with this and see what works nicely. Ofc you can expect any updated code to arrive on github.

1 Like
138

Changes (15/07/2019)

BREAKING CHANGE:

  • This update has a major change and that is the removal of popup cards, there are some left, but most are gone now in favor of state-switches and conditional cards. This is still experimental so it is prone to change! The reason why I removed popup cards are simple. They are hard to use when copying an entire setup as they need to be setup correctly for them to work properly, this also means that you will need to adjust all the entities first before the card will show up properly. Conditional cards solves this problem as it will just display nothing if nothing is defined and will not break all other popup cards in the chain. Another major reason is because the size of the popup cards look really awkward on tablets when using conditional cards within those popups. The location of the popup will change randomly to a point you can’t even see it on your screen anymore. This is most prominent on tablets/desktops. Another major reason is iOS. When you try to run popup cards on iOS it sometimes bugs and show you a duplicate of the card within the same popup. It looks really bad and only retrying to open the card fixes the problem, this is most prominent on older hardware like an iPad Air, iPhone 6s and less on newer devices like the iPhone 8 or iPhone X.
  • So after reading the above you might think by yourself, ‘Hey Jimz’, ‘if you use conditional cards, how will you deal with multiple users as they would clearly be visible to all users now wouldn’t it?’. I’d say good question and the experimental solution is this: in this release I have added a state-switch to show views per user now.
  • ‘But Jimz, that would massively increase the code now wouldn’t it?’, Well not necessarily. I have removed many of the input_select options I had before and removed all the buttons that came with the popup cards (the 4 buttons on top of almost every popup card). It took up a lot of code and the removal of all these lines make up for the added code discussed above.
  • ‘And how would I get to those pages that were previously accessible with those buttons?’ Easy, you simply swipe on the “popup” now and it will switch the page.

These changes will make per user views possible and changing anything in the menu or anything else in lovelace will not affect the other user when used at the same time. This means that when I open up the vacuum control panel (which is a conditional card) will only show for me and not for my wife and vice versa. She can open the same page at the same time and she will have no interference of me using the same conditional card!

Changes:

  • Removed most input_select options with the exception of a few (like the menu)
  • Removed popup-cards with the exception of weather and light page (to show a more-info window in a popup, this will be replaced by browser-mod in the next update)
  • Added conditional cards in favor of popup cards, this has changed the config A LOT, do not overwrite your config with this if you do not know what you are doing
  • Removed all buttons that used to navigate you through the popup-cards, this also affects all newly added cards like the vacuum control center card.
  • Added swipe-card in favor of the old input_select buttons, this makes one handed use on phones a breeze.
  • Added state-switch to accomodate for multi-users which was previously no problem with popup-cards. WARNING: This is a massive change and has made the setup a lot more complicated for new users. I use includes A LOT because not only will it save me a lot of time if I break a piece of the code (as most of the time only that part will not load) and is it easier to find, but also gives me the opportunity to organise the code in a way that I find suitable (and duplication of code doesn’t look that bad this way, as they are in separate files).
  • Split decluttering templates, this makes it easier to manage your templates and add very long templates if needed as this won’t clutter the decluttering templates file :stuck_out_tongue:
  • Many minor changes to the UI to accomodate for all these changes above

You know what? Why don’t you see for yourself what has changed?
Video: CLICK ON THE IMAGE TO START VIDEO

Watch Video

1 Like
139

Forgot to mention you @apop but I believe you mean something like this? I have tested this and it works very well. My wifes interactions doesn’t interfere with mine in the UI. We can both be on the same view but seeing something different as it will show different cards per user. I have tried to keep code duplication to a minimum, but unfortunately I can’t do it everywhere. Actually the code is roughly the same size as before. Unfortunately I have a duplicate menu view for now and that is what makes the size a tad bit larger. I will make a templated version of this in the next release so that it will only take 3 lines of code to duplicate this.

140

Yeah, that’s looking nice! Definitely going to see if I can take some more inspiration from this for my setup. Thanks for continuing to share your work with the community!

141

Hi Jim,

Thank you for your awesome work.

I’m building a theme quite similar to yours from scratch and using your work as inspiration. I’ve probably missed something obvious but I’m having a hard time figuring out how you group entities together and give them header names, for example “Kleine Kamer”? I’ve put arrows on one of your screenshots below to illustrate what I mean :smile:

headers
headers668×1448 130 KB