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 
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
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
Why not just use the /www/ folder to put your images in and just call them there? would be much easier since you wonāt need to define the entire path, just /local/images/whatever_image.png.
I have to admit that I have very little experience with ingress.
I already try for local images, but not working. I donāt know why.
And I donāt understand why code is working on my PC for local and remote images.