Vertical Button Card

Description

Card card_vertical_button can be used in different ways. The primary usage is to switch between scenes or toggle a scene on/off. The secondary use is to toggle a switch or light. It's intended to be used with helper entities, either input_select or input_boolean.

You connect the card to either an input_select (toggle between scenes) or input_boolean (toggle one scene) and the button will change the state of these entities. The final step is to create an automation that triggers on the state change and then runs the actions you want, apply a scene or interact with other entities.

The variable ulm_card_vertical_button_state needs to be used together with input_select to tie a specific state to the button.

Variables

Variable	Default	Required	Notes
ulm_card_vertical_button_state	on		Compare the entity state value with this value, ex: the button will be on if the entity.state == state (only required with input_select)
ulm_card_vertical_button_color	blue		color for the when the button is on. The color names are defined in the theme. The following colors are supported: blue, green, yellow, pink, red, purple

Usage

- type: 'custom:button-card'
  template: card_vertical_button
  entity: input_select.test_vertical_buttons
  name: Away
  icon: mdi:television-classic
  show_last_changed: true
  variables:
    ulm_card_vertical_button_state: Away
    ulm_card_vertical_button_color: green

Template Code

card_vertical_button.yaml

---
### VERTICAL BUTTONS (fka SCENES) ###
card_vertical_button:
  variables:
    ulm_card_vertical_button_color: "blue"
    ulm_card_vertical_button_state: "on"
  show_label: true
  label: ""
  name: |
    [[[
      if( entity.entity_id.startsWith("input_select.") )
        return variables.ulm_card_vertical_button_state;
      else if( entity.entity_id.startsWith("input_boolean.") )
        return "";
      return entity.state;
    ]]]
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    label:
      - justify-self: "center"
      - align-self: "start"
      - font-weight: "bolder"
      - font-size: "12px"
      - filter: "opacity(40%)"
    name:
      - margin-top: "10px"
      - justify-self: "center"
      - font-weight: "bold"
      - font-size: "14px"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"
    grid:
      - grid-template-areas: "'i' 'n' 'l'"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "10px 0px 8px 0px"
  size: "20px"
  state:
    - operator: "template"
      value: |
        [[[
          return entity.state == variables.ulm_card_vertical_button_state;
        ]]]
      styles:
        icon:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 1)`; ]]]"
        label:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
        name:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
        img_cell:
          - background-color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 0.2)`; ]]]"
        card:
          - background-color: "[[[ return `rgba(var(--color-background-${variables.ulm_card_vertical_button_color}), var(--opacity-bg))`; ]]]"
  tap_action:
    action: "call-service"
    service: |
      [[[
        if( entity.entity_id.startsWith("input_select.") )
          return "input_select.select_option";
        if( entity.entity_id.startsWith("input_boolean.") )
          return "input_boolean.toggle";
        if( entity.entity_id.startsWith("switch.") )
          return "switch.toggle";
        if( entity.entity_id.startsWith("light.") )
          return "light.toggle";
        if( entity.entity_id.startsWith("automation.") )
          return "automation.toggle";
        if( entity.entity_id.startsWith("input_button.") )
          return "input_button.press";
        if( entity.entity_id.startsWith("fan.") )
          return "fan.toggle";
        if( entity.entity_id.startsWith("vacuum.") )
          return "vacuum.toggle";
        if( entity.entity_id.startsWith("script.") )
          return "script.toggle";
        if( entity.entity_id.startsWith("button.") )
          return "button.press";
        // If we need to support other entities we can add these options here.
        return "";
      ]]]
    service_data: |
      [[[
        var obj;
        if( entity.entity_id.startsWith("input_select.") )
          obj = { entity_id: entity.entity_id, option: variables.ulm_card_vertical_button_state };
        else
          obj = { entity_id: entity.entity_id };
        return obj;
      ]]]