Hi,
I started to play around with HA since last week. I have managed to get almost what I am looking for with my wall panel. The last part that I am missing is the ability to fit pictures to the free space.
I would like to display a slideshow of pictures which don’t have the same size. On top of it I would like to display some information (date, time, temperature, humidity, …). I have setup a camera to navigate through the images with the help of imagesdirectory-camera.
Here is what I have so far:
title: Kiosk
views:
- title: Kiosk
type: panel
path: kiosk
cards:
- type: picture-elements
image: https://picsum.photos/160/100
camera_image: camera.pictures
camera_view: live
aspect_ratio: 16x10
style:
left: 50%
top: 50%
elements:
- type: state-label
entity: sensor.date
style:
transform: none
top: 5px
left: 5px
font-size: 20px
color: white
background-color: rgba(10, 10, 10, 0.4)
border-radius: 10px
- type: state-label
entity: sensor.time
style:
transform: none
top: 5px
right: 5px
font-size: 20px
color: white
background-color: rgba(10, 10, 10, 0.4)
border-radius: 10px
- type: custom:auto-entities
card:
type: entities
title: null
show_header_toggle: true
filter:
template: |-
{% for state in states.sensor -%}
{%- if state.entity_id | regex_match("sensor\.esp12f_ht_.*_temperature", ignorecase=False) -%}
{{
{
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Temperature')[0]
}
}},
{%- endif -%}
{%- endfor %}
style:
transform: none
bottom: 5px
left: 5px
background-color: rgba(10, 10, 10, 0.4)
border-radius: 10px
- type: custom:auto-entities
card:
type: entities
title: null
show_header_toggle: false
filter:
template: |-
{% for state in states.sensor -%}
{%- if state.entity_id | regex_match("sensor\.esp12f_ht_.*_humidity", ignorecase=False) -%}
{{
{
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Humidity')[0]
}
}},
{%- endif -%}
{%- endfor %}
style:
transform: none
bottom: 5px
right: 5px
For some reason, camera.pictures is not cycling through the images in the picture-elements but it does in a picture-entity. I have also tried to use the HA-dashboard custom view but couldn’t get the image to do what I wanted.
title: Kiosk
views:
- title: Kiosk
path: kiosk
type: custom:ha-dashboard
usePanel: true
sidebar:
screenMinWidth: 800px
cards:
- type: glance
show_name: false
show_icon: false
show_state: true
entities:
- entity: sensor.date
- entity: sensor.time
card_mod:
style: |
ha-card {
font-size: 20px !important;
}
- type: custom:auto-entities
card:
type: entities
title: Temperatures
show_header_toggle: false
filter:
template: |-
{% for state in states.sensor -%}
{%- if state.entity_id | regex_match("sensor\.esp12f_ht_.*_temperature", ignorecase=False) -%}
{{
{
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Temperature')[0]
}
}},
{%- endif -%}
{%- endfor %}
- type: custom:auto-entities
card:
type: entities
title: Humidity
show_header_toggle: false
filter:
template: |-
{% for state in states.sensor -%}
{%- if state.entity_id | regex_match("sensor\.esp12f_ht_.*_humidity", ignorecase=False) -%}
{{
{
'entity': state.entity_id,
'name': state.attributes.friendly_name.split(' Humidity')[0]
}
}},
{%- endif -%}
{%- endfor %}
cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.pictures
image: https://picsum.photos/${width}/${height}
camera_image: camera.pictures
I have read through pages and pages of forum with no luck so far.
Has anyone successfully done that? Are there any pointers to the direction?
Thanks