Kathou99
(KathouQC(GirlsPowers))
July 23, 2023, 3:27pm
1
Hi, I don’t know why it’s not already there, but it would be useful to have more flexibility with the image element card, a vertical stack and horizontal stack is not a custom type so I can’t add horizontal-stack or vertical-stack
Good idea? , please vote
Thank
tom_l
July 23, 2023, 4:48pm
2
I’m having a lot of difficulty understanding what you are asking for.
Do you want to put picture element cards in horizontal and/or vertical stacks?
Because that is possible now.
In addition to what @tom_l has said, you can add any card - including vertical and horizontal stacks - to the picture elements card using the HACS hui-element integration.
1 Like
Kathou99
(KathouQC(GirlsPowers))
July 23, 2023, 6:26pm
4
Hi sorry I have corrected to clarify more.
I have a picture-element dashboard so it is in the panel mode.But I has far I can see, I am not able to horizontal-stack or vetical-stack inside the type picture-element.
The documentation did not say if can add this type of cards.
I hope you will understand better
Here is the code I want to make it work:
I use picture element for the state_image
Thank
type: picture-elements
entity: sensor.openweathermap_condition
state_image:
clear-night: /local/images/Weather-st/clear-night.jpg
clear-day: /local/images/Weather-st/clear-day.webp
cloudy: /local/images/Weather-st/cloudy.jpg
fog: /local/images/Weather-st/fog.jpg
hail: /local/images/Weather-st/hail.jpg
partlycloudy: /local/images/Weather-st/partly-cloudy-day,.jpg
partly-cloudy-night: /local/images/Weather-st/partly-cloudy-night.jpg
sleet: /local/images/Weather-st/sleet.jpg
snow-day: /local/images/Weather-st/snow-day.jpg
thunderstorm: /local/images/Weather-st/thunderstorm.jpg
tornado: /local/images/Weather-st/tornado.jpg
wind: /local/images/Weather-st/wind.jpg
elements:
- type: vertical-stack
style:
top: 50%
left: 50%
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- color_thresholds:
- color: '#fe2712'
value: 30
- color: '#fefe33'
value: 20
- color: '#66b032'
value: 10
- color: '#0000cd'
value: -10
color_thresholds_transition: smooth
entities:
- entity: sensor.gw1100b_v2_2_5_feels_like_temperature
name: Température extérieure
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
- color_thresholds:
- color: '#fe2712'
value: 30
- color: '#fefe33'
value: 20
- color: '#66b032'
value: 10
- color: '#0000cd'
value: -10
color_thresholds_transition: smooth
entities:
- entity: sensor.gw1100b_v2_2_5_feels_like_temperature
name: Température resentie
group: false
hour24: true
line_width: 2
points_per_hour: 4
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: custom:mini-graph-card
Kathou99
(KathouQC(GirlsPowers))
July 23, 2023, 6:54pm
5
templeton_nash:
hui-element
I have never try this but it’s work
type: picture-elements
elements:
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: entities
entities:
- sun.sun
- type: glance
entities:
- sun.sun
style:
top: 50%
left: 50%
image: /local/images/test/blue.jpg
2 Likes
Can you show such an example for putting a swipe card inside a picture elements card?
I’ve been battling this for days and never see a card -_-
- type: custom:hui-element
cards:
- type: sensor
entity: sensor.domnasq_system_temperature
- type: sensor
entity: sensor.domnasq_system_temperature
style:
top: 50%
left: 50%
card_type: custom:swipe-card
after such configuration, the card simply does not show - without any error
After the fight, only this was achieved:
- type: custom:hui-element
card_type: custom:swipe-card
start_card: 1
cards:
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
style:
top: 50%
left: 50%
However, instead of showing one tab and scrolling to the other, it shows two side by side:
Not sure if “hui-element” may be used for a CUSTOM card.
Try w/o it.
managed to find a solution
# SWIPE GRID
- type: custom:hui-element
card_type: custom:swipe-card
cards:
- type: vertical-stack
title: Backyard
cards:
- type: horizontal-stack
cards:
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- type: horizontal-stack
cards:
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- type: vertical-stack
title: Backyard
cards:
- type: horizontal-stack
cards:
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- type: horizontal-stack
cards:
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
- entity: light.sufit_salon
type: custom:button-card
template:
- podstawowy
- light
- menu
- ikona_hue
style:
top: 50%
left: 50%
width: 21%