Homekit Infused 5 (HKI) v2023.1.3

Ok, now I got it. Thanks a lot, I rely appreciate it

1 Like

you do know you could take out a lot of lines using a simple template for this :wink:

I have this in templates:

horizontal-filler:
  color_type: blank-card
  styles:
    card:
      - width: 3px

vertical-filler:
  color_type: blank-card
  styles:
    card:
      - height: 3px

and use this in configs:

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

3 lines less for each occurrence in your setup …

2 Likes

Very good idea, will definitely use this. Thank you!

I’ve fixed most of the theming issues in mine by taking another theme and then splicing in some of the key parts from yours.

Care to share the code? I have 3 more things to do before I go full on theming, but a headstart will always help.

I have a new vacuum control center upcoming and some additions to the main menu. As well as decluttering the button cards (as advised by @Mariusthvdb).

These 3 things won’t take very long to complete. I expect to have some themes ready next week.

It is right here! Files · master · home-server / hass-config · GitLab

Here is the theme I “merged” with yours.

1 Like

I actually had the same idea and made my own templates, the vertical one would work great, but the horizontal one would never work and threw up an error every time I tried to integrate it. I spend a ton of time trying to fix it, but it never worked properly. Yet here you are as proof that it does work! Wonder what I did wrong…

I rely like the “bottoms” you have on the other page,

Skärmavbild 2019-07-08 kl. 12.13.03
I have tried to copy them from your code but can’t get them to look like that, what am I missing? I can’t get the icon to the left and the text centered.

This is what I get now

from this code

title: Other
path: information
cards:

  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - entity: input_select.ovrigtmenyn
            state: Hem
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: 'custom:button-card'
                  color_type: blank-card
                  styles:
                    card:
                      - width: 10px
                - type: custom:decluttering-card
                  template: switch_button_card
                  variables:
                    - entity: input_boolean.test
                    - name: Klimat
                    - icon: thermometer
                    - show_state: false
                    - opacity: 0.9
                    - aspect_ratio: 4/1
                    - tap_action:
                        action: call-service
                        service: input_select.select_option
                        service_data:
                          option: Klimat
                          entity_id: input_select.ovrigtmenyn
                        haptic: light
                - type: 'custom:button-card'
                  color_type: blank-card
                  styles:
                    card:
                      - width: 10px

I added - aspect_ratio: 4/1 that was not in your code for the card, but without it I got a very big card.

What am I missing?

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

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:

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.

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

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:

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!

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.

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

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

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?

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

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?

@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