Hi!
I have a nice dashboard. Now i would like to have a red pulsing “shield” icon if the alarm is on.
Can you help me with the yaml code en instructions where to place them?
If so that would be great! 
You can use Picture-Elements card with the following YAML:
type: picture-elements
elements:
- type: image
image: null
entity: switch.alarm_system_entity
name: Alarm System Status
style:
left: 50%
top: 55%
width: 50%
state_image:
'on': /local/images/alarm-system-armed.gif
'off': /local/images/alarm-system-disarmed.png
image: /local/images/blank-shield.png
dark_mode_image: /local/images/blank-shield.png
Be sure to store these 3 attached images in a folder called ‘images’ inside your /config/www/ folder (or anywhere you want - just update the urls point to your folder)
Disarmed:
Blank Placeholder: (There is an image below, it’s transparent)
Alarm System Armed:
Hi!
This looks very good! Thank you! If i past this:
type: picture-elements
elements:
- type: image
image: null
entity: alarm_control_panel.alarmsysteem
name: Alarm System Status
style:
left: 50%
top: 55%
width: 50%
state_image:
'on': /local/map/3D/alarm/3.gif
'off': /local/map/3D/alarm/1.png
image: /local/map/3D/alarm/2.png
dark_mode_image: /local/map/3D/alarm/2.png
Then im getting this as a response, can you tell me what to do?
Configuratiefouten ontdekt:
bad indentation of a mapping entry (2:14)
1 | type: picture-elements
2 | elements:
------------------^
3 | - type: image
4 | image: null
Hope to hear from you!
It’s because of your spacing. The word ‘elements:’ needs to start underneath the ‘t’ of the word ‘type’ above.
Also, your ‘on’: and ‘off’: need to start under the ‘a’ of ‘state_image:’ above. And finally, the last 2 lines need to start underneath the ‘t’ of the word ‘type’ at the top.
** Tip:
style:
left: 50% # <--this % can be changed to move the icon left/right within the card starting
top: 55% # <-- this % can be changed to move the icon up/down within the card
width: 50% # <-- this % can be changed to increase/decrease the size of the icon
See this image to show how yours should look:
Hi Thank you for youre help! I did as you tolt me ( i think) but, now no errors but also no icons… any idea’s?
Thank you!
You need to move “image: /local/map/3D/alarm/2.png” over to the left. See photo:
Also, for your entity, what are the states it uses? On/Off? Armed/Disarmed? You can check by going to the Developer Tools, click on States, and paste in your entity.
Do this when your system is armed, and do it when it disarmed. Then you will know what entities you need to type under state_image for “on” and “off”.
Hi,
Here I am again I’m very happy with your persistence!
I adjusted the code and found the correct entity.
The icon remains gone. This is not visible. The code no longer produces errors and the images have the correct name and are in the correct folder…
Do you have any other ideas?
Now you’re missing “width: 50%” in your style section.
style:
left: 50%
top: 55%
width: 50%
And what is the other entity when your system is NOT armed.
Armed = alarm_disarm
Disarmed = ??
Try this when you figure out disarmed:
state_image:
'armed_home': /local/map/3D/alarm/3.gif
'??': /local/map/3D/alarm/1.png
Or try this:
state_image:
'0': /local/map/3D/alarm/3.gif
'1': /local/map/3D/alarm/1.png
Unfortunately I don’t have alarm system to try and figure this out for you. But it’s a matter of figuring out the entity state for on and off and it will work.
Hi Colton!
I hope you doing oke!
Ive creaded a post: How to add "element card" to floorplan?. The code you send me did not work for me 
Hopfully some can help me out.
Thank you!
Hi!
There are a couple of errors, that’s why. Your dark mode image needs to be trans.png.
Also, your picture element needs to be within your floorplan. You have it behind it by not placing the picture element inside the floorplan.