Homekit Infused 5 (HKI) v2023.1.3

Dynamic resizing only works nicely on panel views. HKI is entirely built on panel views. It also has the layout-card baked in as an addon. HKI 5 has all layout card options available like grids, but also mediaquery is possible. So yes you should be able to create a nice dashboard with HKI 5.

Also HKI has no limitations regarding cards, you can use any card you want even ones not included as a HKI addon by using the ā€˜custom:ā€™ or ā€˜custom_legacy:ā€™ addon. If you for example love the just released mushroom cards, you can use them in HKI.

Giving a custom card the HKI style, colors, fonts etc. All you would need to do is to add the hki class to your custom card.

- type: markdown
  card_mod:
    class: hki
  content: Hello World

I will also post videos prior to the release, with installation and configuration instructions in addition to the ofc very detailed documentation HKI already has.

Stay tuned! A few more weeks. Though I aim for an early March release.

Hey Jim,
been a while since I checked your stuff, and it seems to be growing still, cool.!

exploring the options for class in card-mod-theme, I noticed your post above, and tried to find that in you repo, but couldnā€™t find that in your themes folder. Could you please point me to the spot where you declare that class in card-mod-theme settings so I can have a look? thanks!

I havent posted it on my repo yet. It is for HKI 5 (I will highly recommend you to check out that code when it releases) as it is much much cleaner. A few more weeks and I will upload it.

I expect early March.

a ok, I thought you had already set the class, but no worries, I can wait :wink: thx.

@Mariusthvdb My apologies for the late decent reply. Had been too busy to actually reply you with the answer you were looking for.

No need to wait until I upload it. Iā€™ll just share how!

# one of my split theme files.yaml
HKI Custom (Dark):
  card-mod-theme: HKI Custom (Dark)
  card-mod-card: |
    .hki {
      border-radius: 12px;
    }
# Card
- type: markdown
  card_mod:
    class: hki
  content: >
    This card will have the styles that are configured within the HKI class, in this case `border-radius: 12px`

I hope this helps!

thanks Jim.
im struggling with this: šŸ”¹ Card-mod - Super-charge your themes! - #1046 by Mariusthvdb

maybe you could check that? seems I did what you suggest, but ti didnt workout just yetā€¦

Hi,
Iā€™ve installed and configured HomeKit Infused following the instructions. Iā€™ve been able to set up rooms etcā€¦

But I have the following error on the Home tab whenever I go into the dashboard (both via the browser and the the mobile app). The error does, however, clear up after around 20 secs.

I have installed the card manually and also via HACS - but the error still appears. I am on the following versions:
HomeKit Infused: 2022.01.2
HA OS: 2022.2.9

Error t.setConfig is not a function
type: custom:swipe-card
parameters:
  allowTouchMove: true
  grabCursor: true
  autoplay:
    disableOnInteraction: false
cards:
  - type: conditional
    conditions:
      - entity: input_boolean.dummy1
        state_not: nothing
    card:
      type: custom:button-card
      style: |
        ha-card {
          margin-top: -5px;
        }
      name: >-
        [[[ return `Homekit Infused Version:
        ${states['sensor.hki_current_version'].state}`; ]]]
      icon: mdi:apps
      size: 100%
      entity: input_boolean.dummy1
      layout: icon_name
      show_state: false
      show_label: false
      double_tap_action:
        action: navigate
        navigation_path: /homekit-infused/ha_settings
        haptic: light
      tap_action:
        action: more-info
        haptic: heavy
      styles:
        card:
          - '--ha-card-background': rgba(0,0,0,0.0)
          - box-shadow: none
          - height: 45px
          - width: 350px
        name:
          - font-size: var(--subtitle-font-size)
          - font-family: var(--font-family)
          - color: var(--subtitle-text-color)
          - justify-self: start
          - font-weight: var(--subtitle-font-weight)
        grid:
          - grid-template-areas: '"i n"'
          - grid-template-columns: 8% 1fr
          - grid-template-rows: 1fr
        icon:
          - color: var(--subtitle-text-color)
          - padding-bottom: 3px
      state:
        - value: 'off'
          spin: false

HKI 5 will be released soon, so it should address some of these errors.

Homekit Infused 2022.02.0

Changes:

  • Hotfix for the HKI menu. Some users had issues when updating to the latest version of HA that these buttons would no longer show in the menu.

This will be the last HKI in the v4 family. HKI will move on to v5 next month. A video trailer will be released within 2 weeks!

How to Update?
*NOTE: CREATE A BACKUP BEFORE UPDATING!!!

Make sure you update all the custom cards and addons to their latest versions!
Download the release, then copy and overwrite the following two folders:

  • /hki-base/
  • /packages/

Restart Home Assistant!

1 Like

First of, thank you so much for creating this - its awsome.
Ive managed to get everyting (one exception as below) to work just as i wished thanks to your awsome framwork!
Unfortunally i couldnt leave this post as a pure celebration, i have one issue, thats most likely me thinking all wrong. I tried in so many ways to get conditional cards to work within a view, but fail each time.

I have earlier used a lot of conditional cards do display information, and would love to continue to do so.
Any one with a good idea of a direction?

a simple example would be sort of like below.

  my_view:
    custom: 
      - title: Test stack
        cards:
        type: conditional
        conditions:
        - entity: binary_sensor.test
          state: 'on'
        card:
          type: markdown
          content: works!

Try this:

  my_view:
    custom: 
      - title: Test stack
        cards:
          - type: conditional
            conditions:
              - entity: binary_sensor.test
                state: 'on'
            card:
              type: markdown
              content: works!

Thanks a million!
(i feel the shame here)

For anyone that wants to try HKI 5, it is online right now!

No big announcements yet, since I will do the actual release after the videoā€™s have been created, but it is here for those that are brave enough to try it.

NOTE: Do NOT install HKI 5 where you have installed HKI 4, use a fresh installation! You have been warned!

1 Like

Why I canā€™t see pictures on my moble devices?

View on my computer:

View on my moble device:

Here is code:

    title: MEDIA
    subtitle: "[[[ if (states['media_player.group_kodi'].state == 'Playing') return `Trenutno predvaja medijski predvajalnik.`; else return `Vsi medijski predvajalniki so nehali predvajati.`; ]]]"
    columns: 
      buttons: 4
    icon: mdi:disc-player
    show_in_favorites: true
    button_badge: sensor.current_tvs_on
    button_label: "[[[ if (states['sensor.current_tvs_on'].state == 0) return `Ugasnjeno`; else return `Prižgano`; ]]]"
    view_selector:
      columns: 3
      aspect_ratio: 3/1
      
      elements:
      
        - icon: mdi:kodi
          path: media_players_kodi
          
        - icon: mdi:television-classic
          path: media_players_tv
          
        - icon: mdi:arrow-left-circle
          path: home
        
    custom:
    
      - title: Kaj dogaja
        cards:
    
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                aspect_ratio: 2/3
                size: 100%
                show_entity_picture: true
                entity_picture: >-
                  [[[ if (states['media_player.livingroom_mp'].state == 'paused' ||
                  states['media_player.livingroom_mp'].state == 'playing') return
                  `${states['sensor.livingroom_mp_media_cover'].state}`; if
                  (states['media_player.livingroom_mp'].state == 'idle') return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/%20kodi.png`;
                  else return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/kodi_red.png`;
                  ]]]
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-radius: 12px;
                      background-image: {% if is_state('sun.sun', 'above_horizon') %} 
                            url("/local/images/wallpapers/gray-wood.png") 
                      {% else %} 
                            url("/local/images/blue-wood.png") 
                      {% endif %};
                      background-blend-mode: darken;
                      background-size: cover;
                    }
              - type: custom:button-card
                aspect_ratio: 2/3
                size: 100%
                show_entity_picture: true
                entity_picture: >-
                  [[[ if (states['media_player.bedroom_mp'].state == 'paused' ||
                  states['media_player.bedroom_mp'].state == 'playing') return
                  `${states['sensor.bedroom_mp_media_cover'].state}`; if
                  (states['media_player.bedroom_mp'].state == 'idle') return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/%20kodi.png`;
                  else return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/kodi_red.png`;
                  ]]]
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-radius: 12px;
                      background-image: {% if is_state('sun.sun', 'above_horizon') %} 
                                url("/local/images/wallpapers/gray-wood.png") 
                      {% else %} 
                                url("/local/images/blue-wood.png") 
                      {% endif %};
                      background-blend-mode: darken;
                      background-size: cover;
                    }
              - type: custom:button-card
                aspect_ratio: 2/3
                size: 100%
                show_entity_picture: true
                entity_picture: >-
                  [[[ if (states['media_player.childrens_mp_down'].state == 'paused' ||
                  states['media_player.childrens_mp_down'].state == 'playing') return
                  `${states['sensor.childrens_mp_down_media_cover'].state}`; if
                  (states['media_player.childrens_mp_down'].state == 'idle') return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/%20kodi.png`;
                  else return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/kodi_red.png`;
                  ]]]
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-radius: 12px;
                      background-image: {% if is_state('sun.sun', 'above_horizon') %} 
                                url("/local/images/wallpapers/gray-wood.png") 
                      {% else %} 
                                url("/local/images/blue-wood.png") 
                      {% endif %};
                      background-blend-mode: darken;
                      background-size: cover;
                    }
              - type: custom:button-card
                aspect_ratio: 2/3
                size: 100%
                show_entity_picture: true
                entity_picture: >-
                  [[[ if (states['media_player.childrens_mp_up'].state == 'paused' ||
                  states['media_player.childrens_mp_up'].state == 'playing') return
                  `${states['sensor.childrens_mp_up_media_cover'].state}`; if
                  (states['media_player.childrens_mp_up'].state == 'idle') return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/%20kodi.png`;
                  else return
                  `http://192.168.200.199:8123/api/hassio_ingress/5T7I6xnRnVxHJjiXy4xaAhbFr8SDk7s38IU0L5RjGjU/api/file?filename=/config/www/images/logos/kodi_red.png`;
                  ]]]
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-radius: 12px;
                      background-image: {% if is_state('sun.sun', 'above_horizon') %} 
                                url("/local/images/wallpapers/gray-wood.png") 
                      {% else %} 
                                url("/local/images/blue-wood.png") 
                      {% endif %};
                      background-blend-mode: darken;
                      background-size: cover;
                    }    
### END    
      - title: Dnevna
        cards:
          - type: custom:mini-media-player
            entity: media_player.livingroom_tv
            icon: mdi:television-classic
            volume_stateless: false
            tap_action:
              action: none
            hide:
              name: true
              info: true
              controls: true
              mute: false
              source: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 4
              buttons:
                - icon: mdi:numeric-1-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.livingroom_tv
                    source: HDMI 1
                  
                - icon: mdi:numeric-2-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.livingroom_tv
                    source: HDMI 2
                  
                - icon: mdi:numeric-3-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.livingroom_tv
                    source: HDMI 3
                  
                - icon: mdi:numeric-4-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.livingroom_tv
                    source: HDMI 4
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }
                
          - type: custom:mini-media-player
            entity: media_player.livingroom_mp
            icon: mdi:kodi
            volume_stateless: false
            info: scroll
            replace_mute: stop
            tap_action:
              action: none
            hide:
              name: true
              info: false
              controls: false
              mute: false
              source: true
              power: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 4
              buttons:
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }

      - title: OtroŔka
        cards:
          - type: custom:mini-media-player
            entity: media_player.childrens_tv_down
            icon: mdi:television-classic
            volume_stateless: false
            tap_action:
              action: none
            hide:
              name: true
              info: true
              controls: true
              mute: false
              source: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 4
              buttons:
                - icon: mdi:numeric-1-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.childrens_tv_down
                    source: HDMI 1
                  
                - icon: mdi:numeric-2-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.childrens_tv_down
                    source: HDMI 2/MHL
                    
                - icon: mdi:netflix
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.childrens_tv_down
                    source: Netflix
                    
                - icon: mdi:youtube
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.childrens_tv_down
                    source: YouTube
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }
                
          - type: custom:mini-media-player
            entity: media_player.childrens_mp_down
            icon: mdi:kodi
            volume_stateless: false
            info: scroll
            replace_mute: stop
            tap_action:
              action: none
            hide:
              name: true
              info: false
              controls: false
              mute: false
              source: true
              power: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 4
              buttons:
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }

          - type: custom:mini-media-player
            entity: media_player.childrens_tv_up
            icon: mdi:television-classic
            volume_stateless: false
            tap_action:
              action: none
            hide:
              name: true
              info: true
              controls: true
              mute: false
              source: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 1
              buttons:
                - icon: mdi:numeric-1-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.childrens_tv_up
                    source: HDMI
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }
                
          - type: custom:mini-media-player
            entity: media_player.childrens_mp_up
            icon: mdi:kodi
            volume_stateless: false
            info: scroll
            replace_mute: stop
            tap_action:
              action: none
            hide:
              name: true
              info: false
              controls: false
              mute: false
              source: true
              power: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 4
              buttons:
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }

      - title: Spalnica
        cards:
          - type: custom:mini-media-player
            entity: media_player.bedroom_tv
            icon: mdi:television-classic
            volume_stateless: false
            tap_action:
              action: none
            hide:
              name: true
              info: true
              controls: true
              mute: false
              source: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 5
              buttons:
                - icon: mdi:numeric-1-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.bedroom_tv
                    source: HDMI1
                  
                - icon: mdi:numeric-2-box-outline
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.bedroom_tv
                    source: HDMI2
                  
                - icon: mdi:youtube-subscription
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.bedroom_tv
                    source: VOYO
                  
                - icon: mdi:netflix
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.bedroom_tv
                    source: Netflix
                    
                - icon: mdi:youtube
                  type: service
                  id: media_player.select_source
                  data:
                    entity_id: media_player.bedroom_tv
                    source: YouTube
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }
                
          - type: custom:mini-media-player
            entity: media_player.bedroom_mp
            icon: mdi:kodi
            volume_stateless: false
            info: scroll
            replace_mute: stop
            tap_action:
              action: none
            hide:
              name: true
              info: false
              controls: false
              mute: false
              source: true
              power: true
              power_state: false
            shortcuts:
              hide_when_off: true
              attribute: source
              columns: 4
              buttons:
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
                - icon: mdi:movie-search-outline
                  type: source
                  id: search_movies
                  
            toggle_power: true
            
            card_mod:
              style: |
                ha-card {
                  --ha-card-border-radius: 12px;
                }

Error in supervisor:
WARNING (MainThread) [supervisor.api.ingress] No valid ingress session None

Problem is probably way I am using entity_picture links, but I donā€™t know why configuration works on my PC and donā€™t work on mobile devices.

Any idea?

Thanks mate. I will wait for the videos first before i try it. But i literally have a new HA install waiting to install HKI5

I will release a trailer this week. Documentation videos will come end of next week together with the actual release.

Tried clearing cache? If you are in ios you might want to try a service call. browser_mod.reload_window

Hi @jimz011

Thanks for quick reply.

I tryed but not working. :frowning:

I have gone over your code and donā€™t see any weird stuff. Other than ofcourse you use custom code.
But that should work regardless. I think maybe it has something to do with your ingress links.

How do you connect to HA from your phone? Do you use an internal or external url for example? It is important that if you serve images over https that you also run the webview over https, same is true for http. It might be possible that you visit your HA instance via an external ip on your browser but use the internal ip on your phone or vice versa.

If this is the case it would explain why it doesnā€™t show images on one device but not the other.

No, this is not the case. I am using only internal ip.

I tried on multiple ios and android devices and result is the same.

When I connect form device I see error in supervisor WARNING (MainThread) [supervisor.api.ingress] No valid ingress session None