Picture-elements - styling a āselection areaā
Note: the main idea of styling was found in the post of @gabrielmiranda.
Note: this works in Chrome+Win; in iOS Companion App the behaviour is different.
For some elements it is possible to specify ātap_action
ā.
If it is not specified - a default action like āmore-infoā may be executed (if āentity_idā is defined for this element).
Assume that default action is āmore-infoā (which is true, but may be is not in some cases, I do not know). Then on tapping a āmore-infoā popup is displayed. But in case of a ālong tapā and then releasing a mouse button (so called āhold_actionā) first a āselection areaā (circular or oval shape) appears (sometimes it is called a ārippleā) and then disappears when the āmore-infoā popup comes:
![s6](https://community-assets.home-assistant.io/original/4X/1/6/3/163c73a77ee569bea1338e4dd55029bfe46938aa.gif)
Code
type: picture-elements
title: Default behaviour (tap_action)
elements:
- type: icon
icon: mdi:car
style:
top: 10%
left: 10%
- type: state-icon
entity: zone.home
style:
top: 10%
left: 25%
- type: state-label
entity: sun.sun
style:
top: 10%
left: 70%
- type: image
image: /local/images/test/Stan_small.png
style:
top: 22%
left: 10%
entity: sun.sun
- type: image
image: /local/images/test/car.png
style:
top: 23%
left: 65%
entity: sun.sun
image: /local/images/test/white.jpg
But what if ātap_action: none
ā or āaction: call-serviceā?
Then we see a not disappearing āselection areaā; it only disappears when another element is tapped:
![s5](https://community-assets.home-assistant.io/original/4X/2/a/b/2ab116ac3628601b3b8659606d65806bfb12d7b9.gif)
Code
type: picture-elements
title: Default behaviour
elements:
- type: icon
icon: mdi:car
tap_action: none
style:
top: 10%
left: 10%
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 10%
left: 25%
- type: state-label
entity: sun.sun
tap_action: none
style:
top: 10%
left: 70%
- type: image
image: /local/images/test/Stan_small.png
style:
top: 22%
left: 10%
tap_action: none
- type: image
image: /local/images/test/car.png
style:
top: 23%
left: 65%
tap_action: none
image: /local/images/test/white.jpg
It is possible to make this āselection areaā transparent:
![s1](https://community-assets.home-assistant.io/original/4X/b/c/b/bcb8d960b47698d3d4d515064d5cf3afe316e326.gif)
Code
type: picture-elements
title: transparent
card_mod:
style: |
div#root {
--divider-color: rgba(0,0,0,0);
}
elements:
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 6%
left: 10%
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 6%
left: 30%
image: /local/images/test/white.jpg
Also you may specify a color for this āselection areaā - see below:
Colored area, common style:
![s2](https://community-assets.home-assistant.io/original/4X/f/e/5/fe5b36535cad7bccc593a13a57909816593bcf73.gif)
Code
type: picture-elements
title: Common style
card_mod:
style: |
div#root {
--divider-color: rgba(255,0,0,1);
}
elements:
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 6%
left: 10%
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 6%
left: 30%
image: /local/images/test/white.jpg
Colored area, individual styles:
![s3](https://community-assets.home-assistant.io/original/4X/3/7/0/3709005b4e80c9c5099cb9313a75626fefa7dc97.gif)
Code
type: picture-elements
title: Individual style
elements:
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 6%
left: 10%
card_mod:
style: |
:host {
--divider-color: rgba(255,0,0,1);
}
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 6%
left: 30%
card_mod:
style: |
:host {
--divider-color: rgba(0,255,0,1);
}
image: /local/images/test/white.jpg
How different elements are affected:
![s4](https://community-assets.home-assistant.io/original/4X/8/4/b/84b9fb7833cecddc4217feaeac135c14c3eeb3e8.gif)
What we can see here:
ā icon
& state-label
have an oval area;
ā āpngā image
have a circular or oval area (depends on the imageās aspect ratio);
ā ājpgā image
is not affected (???);
ā service-button
& state-badge
are not affected.
Code
type: picture-elements
title: Different elements
card_mod:
style: |
ha-card {
--divider-color: rgba(255,0,0,1);
}
elements:
- type: icon
icon: mdi:car
tap_action: none
style:
top: 10%
left: 10%
- type: state-icon
entity: zone.home
tap_action: none
style:
top: 10%
left: 25%
- type: state-badge
entity: zone.home
tap_action: none
style:
top: 10%
left: 45%
- type: state-label
entity: sun.sun
tap_action: none
style:
top: 10%
left: 70%
- type: service-button
title: xxxx
service: input_boolean.toggle
service_data:
entity_id: input_boolean.test_boolean
style:
top: 10%
left: 90%
- type: image
image: /local/images/test/Stan_small.png
style:
top: 22%
left: 10%
tap_action: none
- type: image
image: /local/images/test/car.png
style:
top: 23%
left: 65%
tap_action: none
- type: image
image: /local/images/test/orange.jpg
style:
top: 22%
left: 86%
tap_action: none
image: /local/images/test/white.jpg
More examples.