Category Archives: HA – Lovelace

Code Snippet – custom:button-card Template – large_status

Posted on by
Reply

Date Created:

Date Modified:

Description:

A third part addon called button-card is a highly customizable component the supports JavaScript and templates. I use it for multiple things, including displaying the status of components in my home theater. This snippet is the template I use for displaying statuses in my control panels and theater remote.

  large_status:
    variables:
      site_var: Label
      entity_var: Entity
      name_var: Name
      state_var: State
      background_var: BackgroundColor
      color_var: IconColor
    layout: icon_label
    label: '[[[ return variables.label_var; ]]]'
    show_name: true
    show_label: true
    styles:
      card: null
      label:
        - justify-self: left
        - align-self: center
        - padding-left: 10px
        - font-weight: bold
        - font-size: 15px
        - font: Ubuntu,sans-serif
      name:
        - justify-self: left
        - align-self: center
        - padding-left: 10px
        - font-size: 12px
        - color: rgba(155, 155, 155, 1)
        - font: Ubuntu,sans-serif
        - font-weight: bold
      grid:
        - grid-template-areas: '"i l" "i n" "i s"'
        - grid-template-columns: 1fr 80%
        - padding: 3px
        - padding-left: 10px
      img_cell:
        - border-radius: 20px
        - height: 40px
        - width: 40px
        - background: rgba(50, 61, 37, 1)
      icon:
        - width: 50%
        - height: 50%
        - padding-left: 1px
        - padding-bottom: 3px
        - color: rgba(139, 195, 74, 1)

Code Snippet – Hue Play Sync Status

Posted on by
Reply

Date Created:

Date Modified:

Description:

For those using Philips Hue Play Sync Box, you can integrate it with Home Assistant. Because Home Assistant treats the sync box like a media play, your able to start/stop the light syncing and grab status information. I have a dashboard the shows a summary of status information for all the hardware in my media cabinet. This card uses the custom:button-card to display the status of the Play Sync box.

Note: This snippet makes use of the button-card template feature. The template I used for this can be found here:

type: custom:button-card
template: large_status
icon: hue:sync-box
name: |
  [[[
    var status = ""
    if (states['media_player.theater_sync_box'].state == "idle" )
      var status = "On - Sync Idle ";
    else if (states['media_player.theater_sync_box'].state == "playing")
      status = "On - Sync Active ";
    else
      return "Off"
    status = status + "- " + entity.attributes.source
    return status;
  ]]]
entity: media_player.theater_sync_box
variables:
  label_var: Hue Play Sync

Code Snippet – Door and Lock Status

Posted on by
Reply

Date Created:

Date Last Modified:

Description:

This snippet uses two entities, a door lock and door sensor, and displays the status to the user. Using combination of icons, icon color and text, the user can determine if the door is open, closed and locked.

Code:

- type: custom:mushroom-template-card
  primary: Basement Door
  secondary: >-
       {{ 'Closed and Locked' if
       is_state_attr('binary_sensor.basement_door', 'raw_state_text',
       'Closed') and is_state('lock.basement_door_lock', 'locked') else
       'Open' if is_state_attr('binary_sensor.basement_door',
       'raw_state_text', 'Opened') else 'Closed and Unlocked' if
       is_state_attr('binary_sensor.basement_door', 'raw_state_text',
       'Closed')}}
  icon: >-
      {{ 'mdi:door-closed-lock' if
      is_state_attr('binary_sensor.basement_door', 'raw_state_text',
      'Closed') and is_state('lock.basement_door_lock', 'locked') else
      'mdi:door-open' if is_state_attr('binary_sensor.basement_door',
      'raw_state_text', 'Opened') else 'mdi:door-closed' if
       is_state_attr('binary_sensor.basement_door', 'raw_state_text',
      'Closed')}}
  icon_color: >-
     {{ 'light-green' if is_state_attr('binary_sensor.basement_door',
     'raw_state_text', 'Closed') and
     is_state('lock.basement_door_lock', 'locked') else 'yellow' if
     is_state_attr('binary_sensor.basement_door', 'raw_state_text',
     'Closed') else 'red' is
     is_state_attr('binary_sensor.basement_door', 'raw_state_text',
     'Opened')}}
  entity: binary_sensor.basement_door
   hold_action:
      action: more-info

Code Snippet – Cover Status

Posted on by
Reply

Date Created:

Date Last Modified:

Description:

This code snippet is an example of a cover status. In this example, we are displaying the current status of a group of blinds to the user. This snippet uses the Mushroom Dashboard cards. Two things are happening here:

  1. The secondary information is dynamic and changes depending on the status of the entity (in this case “cover.basement_window_shades”):
    • Open if the shade position is 0
    • Closed if the position is 100
    • Partially Open if the shade position is anything other that 0 or 100
  2. Similar to #1 the icon displayed is based on the status:
    • mdi:window-closed if the shade position is at 100. Note: mdi:window-closed shows a window with no shade giving the user the impression that the shade is fully open.
    • mdi:roller-shade-closed if the shade position is at 0.
    • mdi:roller-shade if the shade is partially open.

Code:

      - type: custom:mushroom-template-card
        primary: Basement Shades
        secondary: >-
          {{ 'Open' if is_state_attr('cover.basement_window_shades',
          'current_position', 100) else 'Closed' if
          is_state_attr('cover.basement_window_shades', 'current_position', 0)
          else 'Partially Open'}}
        entity: cover.basement_window_shade_02
        icon: >-
          {{ 'mdi:window-closed' if
          is_state_attr('cover.basement_window_shades', 'current_position',
          100) else 'mdi:roller-shade-closed' if
          is_state_attr('cover.basement_window_shades', 'current_position', 0)
          else 'mdi:roller-shade'}}
        icon_color: light-green