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

```yaml #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" color_icon_1: "yellow" color_icon_2: "blue" color_icon_3: "purple" color_icon_4: "green" color_icon_5: "red" color_bg_1: "yellow" color_bg_2: "blue" color_bg_3: "purple" color_bg_4: "green" color_bg_5: "red" ``` ```yaml #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: "call-service"
          service: |
            [[[
              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"
              }
            ]]]
          service_data:
            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: "call-service"
          service: |
            [[[
              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"
              }
            ]]]
          service_data:
            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: "call-service"
          service: |
            [[[
              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"
              }
            ]]]
          service_data:
            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: "call-service"
          service: |
            [[[
              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"
              }
            ]]]
          service_data:
            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: "call-service"
          service: |
            [[[
              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"
              }
            ]]]
          service_data:
            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)"