Example 2: Controlling Lights¶

Visualization of lights and interaction to switch lights on and off and to control brightness using a slider for the first row.

Visualization¶

The first lights row shows some cards with different experimental sliders and a segmented arc to display the brightness. The other rows show a standard light card.

The light switch (all cards)

The light switch is made out of 3 circles and an icon:

• the 1^st (bottom) circle is used to get the Neumorphic effect: a button that 'rises' out of the background. It also servers as the edge of the light button.
• the second circle is used to display the activation ring; orange if 'on' and light grey if 'off'.
• the third (top) circle is used to display the inset shadow effect as if the button is "pressed".
• last but not least: the light icon is displayed on top of all those circles.

First card

The first card shows a "more-info" button in the top left, the ligh button, the name of the light, and a slider with the actual percentage on the right side of the slider. The position of that value can be defined in the card.

Second and third card

The configurable position of the percentage is visible in the second and third card: apart from using a different styled slider, the percentage is shown in the circle where the segmented arc is also defined.

The rest of the cards

The other 4 - identical - cards show the light button, the area (Woonkamer = Livingroom), the name of the light, and if present: the brightness in the lower right corner.

Interactions¶

Sliders → Experimental

First row

The first row has an explicit "more-info" menu button and sliders for brightness

• The menu in the upper left corner calls the "more-info" popup for the light.
• Clicking the light icon toggles the state of the light. The circle behind the icon functions as a "button".
• Dragging the slider will set the brightness and update the lights brightness semi-realtime 4 times a second.

Other rows

• All cards displayed toggle the light by clicking on the light icon. The circle behind the icon functions as a "button".

All rows

• All cards displayed show the "more-info" dialog if name, area or brightness percentage is clicked.

Used Home Assistant Integrations¶

• Ikea Tradfri Zigbee lights using zigbee2mqtt, ie the MQTT integration
• Dumb on/off lights using MQTT.

How to make it work in your own installation¶

All cards¶

Required Home Assistant Integrations
The visualization is build on light entities that have a on/off state and a brightness. It does not depend on any specific integration. Any entity from the light domain with these entity/attribute should work

Required Home Assistant Entity Changes
Replace the light entities (state and brightness attribute) with your own entities

View and Card Configuration¶

Lovelace view¶

Decluttering templates¶

Decluttering templates are used extensively in this view except for the cards on the first row.

The following templates are defined in /lovelace/decluttering_templates/decluttering_templates.yaml file:

• The header_template is used for displaying the header sak card
• The divider_template is used for displaying the divider line sak card
• The sak_button_template_nm_tpl is used for displaying the light card

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

- type: custom:decluttering-card
  template: divider_template

- type: custom:decluttering-card
  template: header_template
  variables:
    - content: 'Scenes'

- type: custom:decluttering-card
  template: divider_template

- type: custom:decluttering-card
  template: header_template
  variables:
    - content: 'Verlichting'

- type: custom:decluttering-card
  template: header_template
  variables:
    - content: 'Woonkamer'
    - font_color: var(--secondary-text-color)
    - font_size: 3em

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

- type: horizontal-stack
  cards:
    - type: custom:decluttering-card
      template: sak_light_button_template_nm_tpl
      variables:
        - entity: light.livingroom_light_gasheater_light
        - area: Woonkamer
        - name: Rode Lamp
        - icon: 'mdi:floor-lamp'

    - type: custom:decluttering-card
      template: sak_light_button_template_nm_tpl
      variables:
        - entity: light.livingroom_light_cupboard_light
        - area: Woonkamer
        - name: Boekenkast
        - icon: 'mdi:book-open-outline'

1
2
3
4
5
6
7

header_template:
  !include sak-header-template-mw.yaml
divider_template:
  !include sak-divider-template-mw.yaml

sak_light_button_template_nm_tpl:
  !include sak-light-button-nm-tpl.yaml 

SAK templates¶

The following templates are defined in the /lovelace/sak_templates/sak-templates.yaml file:

• The toolset_light_button_nm is the template used for the standard lights (second and third row of cards).
• The toolset_light_button_slider_nm for the first card on the first row.
• The toolset_light_button_slider3_nm for the second card on the first row.
• The toolset_light_button_slider2_nm for the third card on the first row.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

toolset_light_button_nm:
  !include toolset-light-button-nm-template.yaml

toolset_light_button_slider_nm:
  !include toolset-light-button-slider-nm-template.yaml

toolset_light_button_slider2_nm:
  !include toolset-light-button-slider2-nm-template.yaml

toolset_light_button_slider3_nm:
  !include toolset-light-button-slider3-nm-template.yaml

Remarks¶

• Home Assistant sends a brightness value between 0..255.
  A little piece of javascript in the card converts this to 0..100% as a derived state, including a unit of measurement setting of "%". This means that the value and the uom can be styled as if it is an existing state.