A work around is to load an almost completely transparent image.
1 Like
Another possible method is using a conditional element: show the “image” element only when some condition is met.
Thank u, now I am using the work around with the transparent image, but I will try the conditional element!
Hi, may I ask for some help. disclaimer: I may not ask what I want in the correct way but give me a chance.
I would like to have a picture elements card on a dashboard. I want something like a picture elements card with my satellite house view where I can add squares with the accompanied colors.
Something like this:
I have asked for some help on another thread and think I am half way but do not know how to get that sensor to output colors in my card.
my template sensor:
- sensor:
- name: PV With Color
state: "{{ states('sensor.pvpower') }}"
device_class: power
unit_of_measurement: W
attributes:
color: >-
{%- macro interpolate(value, start, stop) -%}
{%- set (start_value, start_color) = start -%}
{%- set (stop_value, stop_color) = stop -%}
{%- set (start_r, start_g, start_b) = (int(start_color[0:2], base=16), int(start_color[2:4], base=16), int(start_color[4:6], base=16)) -%}
{%- set (stop_r, stop_g, stop_b) = (int(stop_color[0:2], base=16), int(stop_color[2:4], base=16), int(stop_color[4:6], base=16)) -%}
{%- set s = ((value - start_value)/(stop_value - start_value)) -%}
{# some channels might be negative; most browsers are probably tolerant, but in case not #}
{%- set r = max(int(start_r + s*(stop_r - start_r)), 0) -%}
{%- set g = max(int(start_g + s*(stop_g - start_g)), 0) -%}
{%- set b = max(int(start_b + s*(stop_b - start_b)), 0) -%}
rgb({{ r }}, {{ g }}, {{ b }});
{%- endmacro -%}
{%- set value = states('sensor.pvpower') | float(0) -%}
{%- set value_map = {
50: "3498db",
125: "70a03c",
200: "ff9800",
275: "e74c3c"
} -%}
{%- set keys = value_map | sort -%}
{%- set index = keys | select("lt", value) | list | length -%}
{%- if index == 0 -%}
#{{ value_map[keys | first] }}
{%- elif index == keys | length -%}
#{{ value_map[keys | last] }}
{%- else -%}
{%- set start = (keys[index - 1], value_map[keys[index - 1]]) -%}
{%- set stop = (keys[index], value_map[keys[index]]) -%}
{{ interpolate(value, start, stop) }}
{%- endif -%}
Things I tried:
Or this:
Can you please help me out to get an entity with a meaningful icon/something to display the color on a picture elements card.
The end goal is to create a PV solar heatmap and see how my panels are performing.
1 Like
Picture elements card have different elements which may be used to represent a sensor’s state. You should decide yourself how you want your data presented.
As for your code - since you posted pictures instead of a code, I may only tell you that:
- picture 1: the code is absolutely wrong for badges, they are probably supposed to be elements;
- picture 2: card-mod style for badges applied for another element.
Hi
I’m trying to solve the issue with icons having a different size when using a picture-elements on different screen sizes, mainly a computer and a smartphone.
I’ve followed @Ildar_Gabdullin’s instructions and set up the following config:
- type: picture-elements
style: |
ha-card {
{% if is_state('input_boolean.test_boolean','on') %}
--my-state-color: magenta;
--responsive-size: scale(2.00,2.00);
{% else %}
--my-state-color: cyan;
--responsive-size: scale(1.00,1.00);
{% endif %}
}
elements:
- type: state-icon
entity: input_boolean.test_boolean
style:
top: 10%
left: 30%
'--paper-item-icon-color': var(--my-state-color)
transform: var(--responsive-size)
It does work when switching on and off the boolean.
But now, how can I set up the condition to use mediaquery on min-width instead ???
I’ve looked over internet and that forum for hours without finding anything working. Everything I’ve tried end up with my icon going back to default color and size but never taking the screen size as an input.
Can someone please help me on that ?
1 Like
Hi, the code in the picture is definitely wrong. That’s why I asked for some help. I want to end up with a " square" icon on a picture elements card showing me the color of the PV panels.
Thus indeed not a badge or icon, but I need something workable to proceed 
Do you have card-mod installed?
Create a design in MS paint or something. Then you may choose a suitable element.
Do not forget about a possibility of using custom cards as elements; for instance, you may end up using custom:button-card for displaying complex data and/or tap_action.
Yes I’ve installed it, I figured your example wouldn’t work without it.
But is there a way to be sure the mod is actually working ?
In case of using Chrome - open Code Inspector ; or whatever it is called in your browser.
Check the INFO panel, there must be a message about card-mod and it’s version.
Probably, if you say that my example did work - then it is really installed.
Now go to card mod thread - 1st post - link at the bottom - consolidation post - find an article about different clients
1 Like
Indeed, I have CARD-MOD 3.2.0 IS INSTALLED
Oh thank you so much !!!
Finally found THE post that explained everything !!!
And now it work depending of the screen size.
Thank you again 
1 Like
Sorry, something like this
Ok, the card must contain:
- main background image - satellite image
- 3 elements.
And now you should decide about these elements - absolutely same questions when designing any UI:
- do you need displaying data on them? Is it one sensor or many? Is it some sensor’s state or attribute - or is it some processed data based on other sensor/sensors? Is it “text”, “text + icon”, “icon”? Any graphs, any tables?
- do you need any tap_action for an element? A different actions for different parts of an element?
What you may need is custom:button-card; or it could be a stack of different cards; or it could be a simple markdown card.
How to connect a font downloaded from the Internet?
That’s awesome stuff.
Thank you very much for putting this together!
You made my day 
1 Like
Hi, how is it possible to scale the icon to full width of the picture element container?
I have overlaying images as svg icon files, which change the color based on state. Using width defined in px it is possible to adjust the elements to one device size, but on the other (or e.g. in landscape mode) the width of the pictures element card is different.
thanks
Give a SHORT code with an icon you wish to stretch.