Skip to content

Example 10: A colorful mix

AmoebeLabs Swiss Army Knife Custom Card Example 10 - 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.

AmoebeLabs Swiss Army Knife Custom Card Example 10 - Colorful mix Movie

Visualization

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

Cards 1, 2 and 3 use a similar design with small variations in the state bar (top of card), thickness of segmented arc and history bars.

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

I use [zigbee2mqtt][zigbee2mqtt-url] for the Zigbee sensors and lights. Zigbee2mqtt can be used either as docker container or [Home Assistant Add-on][zigbee2mqtt-addon-url] combined with the MQTT integration

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

file location included from
view-sake10.yml /lovelace/views sak-examples-dashboard.yaml

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
Back to top