Awair Element Cards #3

Series 2 will be released in 2025!

Swiss Army Knife Awair Element Product

Visualization¶

These cards mimic the display of an Awair Element.

The graphs are not specifically for Awair sensor data. They can be used for other sensors too!

There are 3 variations of this card.

Awair Card #3a

The card that matches the Awair display without icons which column is which sensor!

Awair Card #3c
Awair Card #3b

The same as #3a, but now with icons for each sensor, so you don't have to memorize which column is which sensor! The background icon is ommitted.

Awair Card #3c
Awair Card #3c

Same as example #3b, but now with rounded, rectangles for the sensor values instead of the Awair circles.

Awair Card #3c

Description	Aspect Ratio	Target Size
A cards show Awair sensor data in different ways.	1/1	Grid with 2 columns

Interaction¶

Part	Description
Card	All tools connected to an entity do show by default the "more-info" dialog once clicked

Awair Element Card #3a¶

4.0.1

The "original" Awair card that mimics the way Awair shows all of its sensors and the overal "air quality" index ranging from 0 to 100.

Swiss Army Knife Functional Card Awair 3a - Light

Design¶

The Awair cards are very similar to the sensor #4 design: the latter was derived from the original Awair sensor cards!. It has a 1/1 aspectratio and is meant to be part of a grid with 2 columns in order to be readable on mobile devices.

Description	Aspect Ratio	Target Size
A specific Card for Awair Element hardware that mimics the Awair way of showing graded sensor data using dots for each of the 5 sensors ranging from green (OK) to red (very bad).	1/1	Grid with 2 columns

Tools used¶

The card is built with 12 tools. You can find the numbers as 'dref: 1' in the template itself for easy referencing.

Swiss Army Knife Functional Card Design Awair Card #3a

Number	Tool	Description
1	circle	Circle as background for the icon. Background color is determined by the colorstop for the main entity
2	icon	Icon of the entity
3	segarc	SegArc around the circle. Color according to the colorstop for the entity
4	state	State that displays the value of the entity
5	area	Location of the entity
6	name	Short description of the entity's sensor
7	icon	Icon as background for the card. Can be switched on/off
8..12	sparkline	Sparkline showing Awair alike values of the 5 sensors: temperature, humidity, CO₂, VOC and PM2.5

Template variables for `sak_layout_fce2_sensor4`¶

There are no template variables for this template card.

Usage¶

Replace example entities with your entities!

- type: 'custom:swiss-army-knife-card'
    entities:
    - entity: sensor.awair_element_study_score
        name: 'Awair Element'
        area: 'Study'
    - entity: sensor.awair_element_study_temperature
        name: 'Temp'
        area: 'Study'
    - entity: sensor.awair_element_study_humidity
        name: 'Humidity'
        area: 'Study'
        decimals: 0
    - entity: sensor.awair_element_study_carbon_dioxide
        name: 'CO2'
        area: 'Study'
    - entity: sensor.awair_element_study_volatile_organic_compounds
        name: 'Chemicals'
        area: 'Study'
    - entity: sensor.awair_element_study_pm2_5
        name: 'PM2.5'
        area: 'Study'
        icon: mdi:dots-hexagon
    layout:
    template:
        name: sak_layout_fce2_awair3a

YAML Template Definition¶

4.0.1

Full definition of layout template

Awair Element Card #3b¶

4.0.1

A slightly changed version compared to the #3a version: Icons are added below each column of dots, so you don't have to memorize which colomn is which sensor...

Swiss Army Knife Functional Card Awair 3b - Light

Usage¶

Replace example entities with your entities!

- type: 'custom:swiss-army-knife-card'
    entities:
    - entity: sensor.awair_element_study_score
        name: 'Awair Element'
        area: 'Study'
    - entity: sensor.awair_element_study_temperature
        name: 'Temp'
        area: 'Study'
    - entity: sensor.awair_element_study_humidity
        name: 'Humidity'
        area: 'Study'
        decimals: 0
    - entity: sensor.awair_element_study_carbon_dioxide
        name: 'CO2'
        area: 'Study'
    - entity: sensor.awair_element_study_volatile_organic_compounds
        name: 'Chemicals'
        area: 'Study'
    - entity: sensor.awair_element_study_pm2_5
        name: 'PM2.5'
        area: 'Study'
        icon: mdi:dots-hexagon
    layout:
    template:
        name: sak_layout_fce2_awair3b

YAML Template Definition¶

4.0.1

Full definition of layout template

Awair Element Card #3c¶

4.0.1

A variant of #3b: now with bigger rounded rectangles instead of tiny circles for a larger display of the sensors colors.

Swiss Army Knife Functional Card Awair 3c - Light

Usage¶

Replace example entities with your entities!

- type: 'custom:swiss-army-knife-card'
    entities:
    - entity: sensor.awair_element_livingroom_score
        name: 'Awair Element'
        area: 'Livingroom'
    - entity: sensor.awair_element_livingroom_temperature
        name: 'Temp'
        area: 'Livingroom'
    - entity: sensor.awair_element_livingroom_humidity
        name: 'Humidity'
        area: 'Livingroom'
        decimals: 0
    - entity: sensor.awair_element_livingroom_carbon_dioxide
        name: 'CO2'
        area: 'Livingroom'
    - entity: sensor.awair_element_livingroom_volatile_organic_compounds
        name: 'Chemicals'
        area: 'Livingroom'
    - entity: sensor.awair_element_livingroom_pm2_5
        name: 'PM2.5'
        area: 'Livingroom'
        icon: mdi:dots-hexagon
    layout:
    template:
        name: sak_layout_fce2_awair3c

YAML Template Definition¶

4.0.1

Full definition of layout template

Awair Element Cards #3

Visualization¶

Interaction¶

Awair Element Card #3a¶

Design¶

Tools used¶

Template variables for sak_layout_fce2_sensor4¶

Usage¶

YAML Template Definition¶

Awair Element Card #3b¶

Usage¶

YAML Template Definition¶

Awair Element Card #3c¶

Usage¶

YAML Template Definition¶

Template variables for `sak_layout_fce2_sensor4`¶