jimz011
February 14, 2022, 6:00pm
1316
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,
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!
jimz011
February 15, 2022, 11:45am
1318
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
jimz011
February 17, 2022, 8:39pm
1320
@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.š¹ 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ā¦
addy2022
February 19, 2022, 4:07pm
1322
Hi,
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:
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
jimz011
February 19, 2022, 5:15pm
1323
HKI 5 will be released soon, so it should address some of these errors.
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
thx.
