Skip to content

Binary Card

Swiss Army Knife Functional Card Binary Sensor1 D06 Light Off
Swiss Army Knife Functional Card Binary Sensor1 D06 Light On
Swiss Army Knife Functional Card Binary Sensor1 D06 Dark Off Swiss Army Knife Functional Card Binary Sensor1 D06 Dark On

This card uses the Material 3 theme D06, TealBlue

Description Aspect Ratio Target Size
A card that shows the state of a binary sensor 4/1 Grid with 2 columns
SAK Tool Used for
Circle The half circle, as the left part of the circle is cutoff by the card. Animated, state dependent
Icon Entity Icon. Animated, state dependent. Can spin if configured
Name Name of Entity
State Value of Entity

Interaction

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

Usage

1.0.0-rc.3

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: light.livingroom_light_duo_right_light
      name: 'Pump Pool'
      icon: mdi:pump
  layout:
    template:
      name: sak_layout_fce_binary

########################################################################

- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: light.livingroom_light_duo_right_light
      name: 'Pump Pool'
      icon: mdi:pump
  layout:
    template:
      name: sak_layout_fce_binary
      variables:
        - sak_layout_binary_icon_spin: true
Data Default Required Description
entities The single entity on the card
sak_layout_binary_icon_spin false Spin the icon or not in state 'on'

YAML Template Definition

1.0.0-rc.3

Full definition of layout template 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
sak_layout_fce_binary:
  template:
    type: layout
    defaults: 
      - sak_layout_binary_icon_spin: false
  layout:
    aspectratio: 4/1
    toolsets:
      # ================================================================
      - toolset: half-circle
        position:
          cx: 0                             # Center on cards border 
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: circle
            position:
              cx: 50
              cy: 50
              radius: 50
            entity_index: 0
            animations:
              - state: 'on'
                styles:
                  circle:
                    fill: var(--theme-sys-color-primary)
              - state: 'off'
                styles:
                  circle:
                    fill: var(--theme-sys-elevation-surface-neutral4)
            styles:
              circle:
                stroke: none
      # ================================================================
      - toolset: column-icon
        position:
          cx: 25
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 45
            entity_index: 0
            # Define template variable for this icon tool, so it can be
            # processed by a piece of JavaScript ;-)
            # The template engine will replace the variable!
            variables:
              sak_layout_binary_icon_spin : '[[sak_layout_binary_icon_spin]]'
            animations:
              - state: 'on'
                styles:
                  icon:
                    # Use template variable as the source to spin or not.
                    # the config JavaScript parameter is this tools config...
                    animation: >
                      [[[ if (tool_config.variables.sak_layout_binary_icon_spin) return "spin 3s linear infinite";
                          return "";
                      ]]]
                    fill: var(--primary-background-color)
              - state: 'off'
                styles:
                  icon:
                    fill: var(--theme-sys-color-secondary)
            styles:
              icon:
                opacity: 0.9

      # ================================================================
      - toolset: column-name
        position:
          cx: 70                # Left part = 75, so 75+(300-75)/2
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: name
            position:
              cx: 50
              cy: 37
            entity_index: 0
            styles:
              name:
                text-anchor: start
                font-size: 30em
                font-weight: 700
                opacity: 1
          # ------------------------------------------------------------
          - type: state
            position:
              cx: 50
              cy: 70
            entity_index: 0
            show:
              uom: none
            styles:
              state:
                text-anchor: start
                font-size: 26em
                font-weight: 500
                opacity: 0.7