Example 10: A colorful mix¶

And a short GIF to give you an idea of the CSS animations:

Actions:

• I moved
• I switched all three lights to on.
• I changed the brightness of the right-most light back and forth.
• And finally, I switched all three lights to off.

Visualization¶

Indoor environment sensors, occupancy, airvisual, and some light switchable square cards with status, icon, history, segmented arc, and card animations.

Interactions¶

• All tools support by default the "more-info" dialog once clicked.
• The lights can be switched on/off by clicking/tapping the large light icon.
• All lights brightness update during dragging.

Used Home Assistant Integrations¶

• First row: Aqara temperature, humidity and pressure Zigbee sensors
• Second row: Aqara Occupancy Zigbee sensor
• Second row: Airvisual integration
• Third row: Ikea Tradfri Zigbee Lights

How to make it work in your own installation¶

Other than the Air Visual integration, the other generic ones are temperature, humidity, and pressure sensors, occupancy switches, and light switches, so you can replace them with your own entities.

Environment sensors (First row)¶

Required Home Assistant Entity Changes
Replace the sensor entities with your own entities. As long as the entities do not use an attribute for the value, the history tool will work.

Movement/occupancy sensor (Second row)¶

Required Home Assistant Entity Changes
Replace the occupancy entity with your own entity.

AirVisual (Second row)¶

Required Home Assistant Integrations
The only integration you need are the Airvisual entities, so you need the Airvisual integration

Required Home Assistant Entity Changes
The Airvisual entities should be the same for every installation, so no changes are needed on that part. If you don't have a presence sensor, replace it with an on/off sensor and the card should at least work!

Lights (Third row)¶

Required Home Assistant Entity Changes
Replace the light entities with your light entities that have a brightness attribute.

View and Card Configuration¶

Lovelace view¶

Decluttering templates¶

None.

SAK templates¶

None.

Remarks¶

The AQI Card (second row, second card)

You see two lines below the "46 AQI" state: a scale and the actual value. This is the segmented arc which is configured in such a way that it resembles a straight line. So this is not a new tool you're seeing

The segarc config uses an elliptical display and a small arc to resemble a line.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

- type: 'segarc'
  id: 0
  position:
    cx: 65
    cy: 35
    radius_x: 120         # Wide ellipse
    radius_y: 1           # ...with almost no height
    start_angle: 190      # Show only 20 degrees of the
    end_angle: 170        # ..ellipse to look like a straight line
    width: 2
  entity_index: 0
  scale:
    min: 0
    max: 300
    width: 2
    offset: 3