jimz011
February 22, 2022, 10:39pm
1324
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?
Make sure you update all the custom cards and addons to their latest versions!
Restart Home Assistant!
1 Like
Dakul05
February 25, 2022, 4:45pm
1325
First of, thank you so much for creating this - its awsome.
I have earlier used a lot of conditional cards do display information, and would love to continue to do so.
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!
jimz011
February 25, 2022, 9:09pm
1326
Try this:
my_view:
custom:
- title: Test stack
cards:
- type: conditional
conditions:
- entity: binary_sensor.test
state: 'on'
card:
type: markdown
content: works!
Dakul05
February 26, 2022, 1:43pm
1327
Thanks a million!
jimz011
March 1, 2022, 11:20pm
1328
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
lpt2007
March 2, 2022, 4:01pm
1329
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
jimz011
March 2, 2022, 6:37pm
1331
I will release a trailer this week. Documentation videos will come end of next week together with the actual release.
jimz011
March 2, 2022, 6:38pm
1332
Tried clearing cache? If you are in ios you might want to try a service call. browser_mod.reload_window
jimz011
March 2, 2022, 10:09pm
1334
I have gone over your code and don’t see any weird stuff. Other than ofcourse you use custom code.
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.
lpt2007
March 2, 2022, 10:17pm
1335
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
jimz011
March 2, 2022, 10:19pm
1336
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.
lpt2007
March 2, 2022, 10:28pm
1337
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.
jimz011
March 2, 2022, 10:31pm
1338
I still think it is weird though. It is also not something that HKI blocks (since well it is just a wrapped lovelace loop).
Just something crazy, but did you use the HA app or a browser on your phone? Maybe try both to see what happens?
lpt2007
March 2, 2022, 10:33pm
1339
I already try this, result is the same.
jimz011
March 2, 2022, 10:45pm
1340
What you could try is to disable the addons and use custom_cards (this might work or might not).
(#HKI 4 ONLY, if people are reading this)
create a folder inside your views folder with the exact same name as your view (in your case probably media) and create a file with whatever filename.yaml
Then paste all the code you have from custom in that file (starting from the first horizontal-stack in your current custom: addon, so do not copy the title part). Remove all the code below custom: and rename custom: to custom_cards: and restart. This just disables most features of HKI on that view (you won’t see the difference though) and gives you a more classic YAML style view (you can also reload lovelace instead of restarting when using this method).
If that doesn’t work either I really wouldn’t know and you might have to ask in the button-card thread.
lpt2007
March 2, 2022, 10:48pm
1341
I will try this and I will report back.
thx for help
jimz011
March 2, 2022, 10:49pm
1342
You might want to read up here:
(Once again for readers, this is for HKI 4 ONLY)
And don’t worry it says custom_cards will be removed in the future, but it won’t. It has been renamed for HKI 5, but other than that you can still continue to use it. And tbh, in your case it is probably the better option since you can reload lovelace.
In my opinion the custom addon is more suitable for single cards or smaller card projects, since you want to heavily customize your card (which I encourage btw) I think this is the better option (unless you want to use HKI addons on the same page).
lpt2007
March 2, 2022, 10:55pm
1343
jimz011:
create a folder inside your views folder with the exact same name as your view (in your case probably media) and create a file with whatever filename.yaml
Then paste all the code you have from custom in that file (starting from the first horizontal-stack in your current custom: addon, so do not copy the title part). Remove all the code below custom: and rename custom: to custom_cards: and restart. This just disables most features of HKI on that view (you won’t see the difference though) and gives you a more classic YAML style view (you can also reload lovelace instead of restarting when using this method).
Result is the same.
I will try to ask on button-card thread.
Thx
Keep doing great work
