Custom-card "Scenes Card"

The card_scenes you can control up to 5 entity such as scene, script or automation.

Credits

Author: sildehoop - 2021 Version: 1.2.0

Breaking changes

1.2.0

#OLD
- type: "custom:button-card"
 template:
   - card_scenes
 variables:
   entity_1: "scene.YOUR_SCENE"
   entity_2: "scene.YOUR_SCENE"
   entity_3: "scene.YOUR_SCENE"
   entity_4: "scene.YOUR_SCENE"
   entity_5: "scene.YOUR_SCENE"
   name_1: "YOUR_NAME"
   name_2: "YOUR_NAME"
   name_3: "YOUR_NAME"
   name_4: "YOUR_NAME"
   name_5: "YOUR_NAME"
   icon_1: "mdi:YOUR_ICON"
   icon_2: "mdi:YOUR_ICON"
   icon_3: "mdi:YOUR_ICON"
   icon_4: "mdi:YOUR_ICON"
   icon_5: "mdi:YOUR_ICON"
   icon_color_1: "yellow"
   icon_color_2: "blue"
   icon_color_3: "purple"
   icon_color_4: "green"
   icon_color_5: "red"
   bg_color_1: "yellow"
   bg_color_2: "blue"
   bg_color_3: "purple"
   bg_color_4: "green"
   bg_color_5: "red"

#NEW
- type: "custom:button-card"
 template:
   - card_scenes
 variables:
   entity_1:
     entity_id: "scene.YOUR_SCENE"
     icon: "mdi:YOUR_ICON"
     icon_color: "yellow"
     name: "YOUR_NAME"
     bg_color: "yellow"
   entity_2:
     entity_id: "scene.YOUR_SCENE"
     icon: "mdi:YOUR_ICON"
     icon_color: "blue"
     name: "YOUR_NAME"
     bg_color: "blue"
   entity_3:
     entity_id: "scene.YOUR_SCENE"
     icon: "mdi:YOUR_ICON"
     icon_color: "purple"
     name: "YOUR_NAME"
     bg_color: "purple"
   entity_4:
     entity_id: "scene.YOUR_SCENE"
     icon: "mdi:YOUR_ICON"
     icon_color: "green"
     name: "YOUR_NAME"
     bg_color: "green"
   entity_5:
     entity_id: "scene.YOUR_SCENE"
     icon: "mdi:YOUR_ICON"
     icon_color: "red"
     name: "YOUR_NAME"
     bg_color: "red"

Changelog

1.3.0

Option to trigger automation

1.2.0

Implementation of nested variables

1.1.0

Auto dark mode box shadow

1.0.0

Initial release

Usage

- type: "custom:button-card"
  template:
    - card_scenes
  variables:
    entity_1:
      entity_id: "scene.YOUR_SCENE"
      icon: "mdi:YOUR_ICON"
      icon_color: "yellow"
      name: "YOUR_NAME"
      bg_color: "yellow"
    entity_2:
      entity_id: "scene.YOUR_SCENE"
      icon: "mdi:YOUR_ICON"
      icon_color: "blue"
      name: "YOUR_NAME"
      bg_color: "blue"
    entity_3:
      entity_id: "scene.YOUR_SCENE"
      icon: "mdi:YOUR_ICON"
      icon_color: "purple"
      name: "YOUR_NAME"
      bg_color: "purple"
    entity_4:
      entity_id: "scene.YOUR_SCENE"
      icon: "mdi:YOUR_ICON"
      icon_color: "green"
      name: "YOUR_NAME"
      bg_color: "green"
    entity_5:
      entity_id: "scene.YOUR_SCENE"
      icon: "mdi:YOUR_ICON"
      icon_color: "red"
      name: "YOUR_NAME"
      bg_color: "red"

Requirements

n/a

Variables

Variable	Example	Required	Explanation
entity_	scene.evening_light	yes	Your scene entity
name_	Night	yes	The name to show
icon_	mdi:weather-night	yes	The icon to show
color_icon_	yellow, blue, purple, green, red	no	The color of the icon to show
color_bg_	yellow, blue, purple, green, red	no	The color of the icon background to show

Template code

Template Code

custom_card_scenes.yaml

---
card_scenes:
  show_icon: false
  show_name: false
  show_label: false
  variables:
    entity_1:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
    entity_2:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
    entity_3:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
    entity_4:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
    entity_5:
      entity_id:
      icon: "mdi:help-circle-outline"
      icon_color: "gray"
      name: "n/a"
      bg_color: "gray"
  styles:
    grid:
      - grid-template-areas: "'item1 item2 item3 item4 item5'"
      - grid-template-columns: "1fr 1fr 1fr 1fr 1fr"
      - grid-template-rows: "min-content"
      - justify-items: "center"
      - column-gap: "auto"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "card_scenes_pill"
        entity: "[[[ return variables.entity_1.entity_id ]]]"
        icon: "[[[ return variables.entity_1.icon ]]]"
        name: "[[[ return variables.entity_1.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_1.icon_color ]]]"
          color_bg: "[[[ return variables.entity_1.bg_color ]]]"
        tap_action:
          action: "perform-action"
          perform_action: |
            [[[
              let domain = variables.entity_1.entity_id.substr(0, variables.entity_1.entity_id.indexOf("."));
              if (domain == "automation") {
                return "automation.trigger"
              } else {
                return "homeassistant.turn_on"
              }
            ]]]
          target:
            entity_id: "[[[ return variables.entity_1.entity_id ]]]"
    item2:
      card:
        type: "custom:button-card"
        template: "card_scenes_pill"
        entity: "[[[ return variables.entity_2.entity_id ]]]"
        icon: "[[[ return variables.entity_2.icon ]]]"
        name: "[[[ return variables.entity_2.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_2.icon_color ]]]"
          color_bg: "[[[ return variables.entity_2.bg_color ]]]"
        tap_action:
          action: "perform-action"
          perform_action: |
            [[[
              let domain = variables.entity_2.entity_id.substr(0, variables.entity_2.entity_id.indexOf("."));
              if (domain == "automation") {
                return "automation.trigger"
              } else {
                return "homeassistant.turn_on"
              }
            ]]]
          target:
            entity_id: "[[[ return variables.entity_2.entity_id ]]]"
    item3:
      card:
        type: "custom:button-card"
        template: "card_scenes_pill"
        entity: "[[[ return variables.entity_3.entity_id ]]]"
        icon: "[[[ return variables.entity_3.icon ]]]"
        name: "[[[ return variables.entity_3.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_3.icon_color ]]]"
          color_bg: "[[[ return variables.entity_3.bg_color ]]]"
        tap_action:
          action: "perform-action"
          perform_action: |
            [[[
              let domain = variables.entity_3.entity_id.substr(0, variables.entity_3.entity_id.indexOf("."));
              if (domain == "automation") {
                return "automation.trigger"
              } else {
                return "homeassistant.turn_on"
              }
            ]]]
          target:
            entity_id: "[[[ return variables.entity_3.entity_id ]]]"
    item4:
      card:
        type: "custom:button-card"
        template: "card_scenes_pill"
        entity: "[[[ return variables.entity_4.entity_id ]]]"
        icon: "[[[ return variables.entity_4.icon ]]]"
        name: "[[[ return variables.entity_4.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_4.icon_color ]]]"
          color_bg: "[[[ return variables.entity_4.bg_color ]]]"
        tap_action:
          action: "perform-action"
          perform_action: |
            [[[
              let domain = variables.entity_4.entity_id.substr(0, variables.entity_4.entity_id.indexOf("."));
              if (domain == "automation") {
                return "automation.trigger"
              } else {
                return "homeassistant.turn_on"
              }
            ]]]
          target:
            entity_id: "[[[ return variables.entity_4.entity_id ]]]"
    item5:
      card:
        type: "custom:button-card"
        template: "card_scenes_pill"
        entity: "[[[ return variables.entity_5.entity_id ]]]"
        icon: "[[[ return variables.entity_5.icon ]]]"
        name: "[[[ return variables.entity_5.name ]]]"
        variables:
          color_icon: "[[[ return variables.entity_5.icon_color ]]]"
          color_bg: "[[[ return variables.entity_5.bg_color ]]]"
        tap_action:
          action: "perform-action"
          perform_action: |
            [[[
              let domain = variables.entity_5.entity_id.substr(0, variables.entity_5.entity_id.indexOf("."));
              if (domain == "automation") {
                return "automation.trigger"
              } else {
                return "homeassistant.turn_on"
              }
            ]]]
          target:
            entity_id: "[[[ return variables.entity_5.entity_id ]]]"

card_scenes_pill:
  show_icon: true
  show_label: false
  show_name: true
  variables:
    color_icon: "gray"
    color_bg: "gray"
  styles:
    grid:
      - grid-template-areas: "'i' 'n'"
      - grid-template-columns: "min-content"
      - grid-template-rows: "1fr 1fr"
      - row-gap: "12px"
      - justify-items: "center"
      - column-gap: "auto"
    card:
      - box-shadow: "none"
      - padding: "5px"
      - box-shadow: >
          [[[
            if (hass.themes.darkMode){
              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
            } else {
              return "var(--box-shadow)";
            }
          ]]]
      - border-radius: "50px"
      - place-self: "center"
      - width: "52px"
      - height: "84px"
    icon:
      - color: >
          [[[
            var color = [variables.color_icon];
            if (color == "gray"){
              var color = "rgba(var(--color-theme),0.20)";
            } else if(color == "yellow"){
              var color = "rgba(var(--color-yellow),1)";
            } else if(color == "blue"){
              var color = "rgba(var(--color-blue),1)";
            } else if(color == "purple"){
              var color = "rgba(var(--color-purple),1)";
            } else if(color == "green"){
              var color = "rgba(var(--color-green),1)";
            } else if(color == "red"){
              var color = "rgba(var(--color-red),1)";
            }
            return color;
          ]]]
    img_cell:
      - background-color: >
          [[[
            var color = [variables.color_bg];
            if (color == "gray"){
              var color = "rgba(var(--color-theme),0.05)";
            } else if(color == "yellow"){
              var color = "rgba(var(--color-yellow),0.20)";
            } else if(color == "blue"){
              var color = "rgba(var(--color-blue),0.20)";
            } else if(color == "purple"){
              var color = "rgba(var(--color-purple),0.20)";
            } else if(color == "green"){
              var color = "rgba(var(--color-green),0.20)";
            } else if(color == "red"){
              var color = "rgba(var(--color-red),0.20)";
            }
            return color;
          ]]]
      - border-radius: "50%"
      - width: "42px"
      - height: "42px"
    name:
      - font-weight: "bold"
      - font-size: "9.5px"
      - width: "33px"
      - padding-bottom: "7px"
    state:
      - color: "rgba(var(--color-theme),0.9)"
  color: "var(--google-grey)"