🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
3653

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

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

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

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

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

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

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.

4 Likes