If you can share how you got your alarm state in picture/words - on the bottom left and weather and image on top right. I have something similar but it’s just words/numbers from the sensor. Yours looks more interesting.
Thx
Template sensors are your friend for this. You can see some examples in my config here. Click the header on the description to go to the code.
1 Like
Here is mine for my solar heating system. I have 4 sets of solar vacuum tubes that heat a water storage tank in my crawlspace. When the pumps are activated, they spin and light up as yellow. The pumps on the screen shot are not aligned correctly but are centered with my wall mount dashboard due to different resolution.
4 Likes
Hi I am building my floorplan and using your honeycomb menu. I’m having a problem with the honeycomb buttons.
Whats happening is.
When I have no buttons the honeycomb buttons show up when I hold the centre button.
But when I try to do the honeycomb buttons I only get 1 to show and it won’t do anything. Can you help maybe share some code for the honeycomb buttons .
Thanks
Hello everyone,
I am trying to create my own picture elements cards and I am a bit stuck.
I would like to create a semi-transparent black bar at the bottom, but I do not want to create an image to overlay.
From what I understand, you can create a background bar for an element you use. But is there a way to do this without adding it to a specific entity?
And one additional question: is it possible to place a simple text somewhere (without having to create a state or something manually)? Kind of like the title, but within the picture.
As for “manually” - to get something you have to create something MANUALLY.
A text label must be some kind of added element.
Also, you may use an image WITH a text.
Same. Any image/text/icon/control must be an element or a part of some element.
I am trying to keep the images pure so I can change the text etc. without editing the image everytime.
I managed to create the background bar by using type: icon without an icon.
I wanted to use ‘title’ in the icon element but that does not seem to work. Maybe I am missing something?
- type: icon
icon: mdi
title: Living room
style:
background-color: rgba(0, 0, 0, 0.5)
bottom: 0
color: white
font-size: 12px
left: 0
line-height: 300%
padding: 0 0px
transform: initial
width: 100%
P.S.: The icon is left blank on purpose. That way I can create an “empty” bar at the bottom.
Why not using state-label & image as elements?
1 Like
Because I would need an image (required) and I would need an entity who’s label I can use. Meaning, I would have to manually create an entity just so I can display a label. Actually I would need to create a bunch of entities as I need different labels.
Imho creating a bunch of entities for service purpose - not a big deal.
Alternatively you may use a markdown card: create a decluttering template for a card w/o background and with required font-size, then use it in 100 places.
1 Like
Sorry, found the information when I googled for css styling, so I removed the question before you answered.
But what I hae not fixed yet:
I would like the main image to have a tap_action.
Tap_action for the picture of picture elements card is not supported. So I figured I would simply use my target image in ‘type: image’.
But that leaves me with the issue of defining the (invisible) background image of the picture elements card.
I wanted to use a small “dummy” image to reduce the loading time etc. But I cannot figure out how to scale it to size.
type: picture-elements
elements:
- type: image
image: /local/images/alex_half.jpg
style:
width: 100%
height: 100%
transform: initial
top: 0%
left: 0%
tap_action:
action: navigate
navigation_path: /lovelace-home/areas/
- type: state-label
entity: person.alex
style:
background-color: rgba(0, 0, 0, 0.5)
bottom: 0
color: white
font-size: 12px
text-align: left
left: 0
line-height: 100%
padding: 0 0
transform: initial
width: 100%
image: /local/images/alex_half.jpg
This works, but it loads my alex_half_jpg twice, which is a waste of resources.
If I wanted to change the picture card image to e.g. a 1x1px image, how could I scale it to the size of the ‘type: image’ image?
I noticed that the layout looks quite different in my browser compared to the companion app. So it seems that the layout is not being applied correclty even though I am specifying everything in relative values (%) rather than absolute (px).
Is this a known issue or am I defining something wrongly?
Browser Editor Preview:
Browser dashboard after saving:
Companion app:
Code:
type: picture-elements
elements:
- type: image
image: /local/images/black_50.png
style:
bottom: 0%
left: 0%
width: 100%
height: 15%
transform: none
background-color: rgba(0, 0, 0, 0.0)
tap_action:
action: navigate
navigation_path: /lovelace-home/persons
hold_action:
action: none
- type: state-icon
entity: light.ambient_light_lr
icon: mdi:ceiling-light-outline
tap_action:
action: toggle
style:
bottom: 0%
right: 5%
transform: none
'--paper-item-icon-color': white
border-radius: 5px
- type: state-icon
entity: light.main_light_lr
icon: mdi:ceiling-light
style:
bottom: 0%
right: 20%
transform: none
'--paper-item-icon-color': white
border-radius: 5px
tap_action:
action: toggle
- type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
full_row: true
min: 4.5
max: 23
step: 0.5
hide_state: false
style:
bottom: 0%
left: 10%
transform: none
'--paper-item-icon-color': white
border-radius: 5px
- type: state-label
entity: sensor.eq_3_battery_living_room
prefix: (
suffix: )
style:
bottom: 0%
left: 44%
transform: none
color: black
font-weight: bold
text-transform: lowercase
text-shadow: 1px 1px 1px white
opacity: 50%
border-radius: 5px
image: /local/images/living_room_16_9.jpg
You can use text-element. It is available via HACS. The code in picture element card looks then following:
type: picture-elements
image: /local/ups_background.png
elements:
- type: custom:text-element
text: Your Label
style:
top: 90%
left: 15%
1 Like
Am I the only one to observe this? Or am I doing something wrong?
No, that is common with picture element cards.
As far as I know there is only two ways to deal with it.
Live with it
or
Create different cards for different devices.
I believe a lot of us just sigh and go with #1.
1 Like
Strange. Has an issue been raised on github on this? Relative positions should be identical on all devices. I am terrible at living with things 
Especially since the whole purpose of the picture elements card is to create something “pretty” 