Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
3

Rotating an element:

First let’s consider a rotation around Z-axis.

In the example below a rotation applied to these elements:

  • state-badge;
  • state-icon;
  • icon;
  • state-label;
  • service-button;
  • image.

There are 2 methods to define an angle:

  • by “turns” (1 turn = 360degrees, used in the example below);
  • by “degrees”.

By default because of unknown reason a rotation causes changing the "translate()" style - so it causes changing a position too.
To avoid this, the "translate(-50%,-50%)" filter must be used along with the "rotate()" filter.
In the example below the first rotation (+90 degrees, 2nd column) is defined w/o using the "translate(-50%,-50%)" filter, other rotations are defined with it. It is clearly seen that the 1st rotated element changed it’s position.
WARNING: order of commands in “transform” function matters! Use "translate" before other commands.

image
image461×642 47.7 KB

type: picture-elements
title: ''
elements:
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 10%
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 30%
      transform: rotate(0.25turn)
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 60%
      transform: translate(-50%,-50%) rotate(-0.25turn)
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 85%
      transform: translate(-50%,-50%) rotate(0.5turn)
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 28%
      left: 10%
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 28%
      left: 30%
      transform: rotate(0.25turn)
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 28%
      left: 60%
      transform: translate(-50%,-50%) rotate(-0.25turn)
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 28%
      left: 85%
      transform: translate(-50%,-50%) rotate(0.5turn)
  - type: icon
    icon: mdi:car
    style:
      top: 38%
      left: 10%
  - type: icon
    icon: mdi:car
    style:
      top: 38%
      left: 30%
      transform: rotate(0.25turn)
  - type: icon
    icon: mdi:car
    style:
      top: 38%
      left: 60%
      transform: translate(-50%,-50%) rotate(-0.25turn)
  - type: icon
    icon: mdi:car
    style:
      top: 38%
      left: 85%
      transform: translate(-50%,-50%) rotate(0.5turn)
  - type: state-label
    entity: sensor.cleargrass_1_co2
    style:
      top: 52%
      left: 10%
  - type: state-label
    entity: sensor.cleargrass_1_co2
    style:
      top: 52%
      left: 30%
      transform: rotate(0.25turn)
  - type: state-label
    entity: sensor.cleargrass_1_co2
    style:
      top: 52%
      left: 60%
      transform: translate(-50%,-50%) rotate(-0.25turn)
  - type: state-label
    entity: sensor.cleargrass_1_co2
    style:
      top: 52%
      left: 85%
      transform: translate(-50%,-50%) rotate(0.5turn)
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 70%
      left: 10%
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 70%
      left: 30%
      transform: rotate(0.25turn)
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 70%
      left: 60%
      transform: translate(-50%,-50%) rotate(-0.25turn)
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 70%
      left: 85%
      transform: translate(-50%,-50%) rotate(0.5turn)
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 90%
      left: 10%
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 90%
      left: 30%
      transform: rotate(0.25turn)
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 90%
      left: 60%
      transform: translate(-50%,-50%) rotate(-0.25turn)
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 90%
      left: 85%
      transform: translate(-50%,-50%) rotate(0.5turn)
image: /local/images/white.jpg

Below there is an example of rotation around X- & Y-axis (angle is defined by degrees) - for state-badge only.
Similarly to the previous example, the "translate(-50%,-50%)" filter is applied only to the 2nd & 3rd rotations.
image

type: picture-elements
title: ''
card_mod:
  style: |
    ha-card { height: 180px !important; }
elements:
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 10%
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 30%
      transform: rotateX(180deg)
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 60%
      transform: translate(-50%,-50%) rotateX(180deg)
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 85%
      transform: translate(-50%,-50%) rotateY(180deg)
image: /local/images/white.jpg
6 Likes