diff --git a/HaCasa/dashboard/HaCasa/templates/internal_templates/hc_scene_card.yaml b/HaCasa/dashboard/HaCasa/templates/internal_templates/hc_scene_card.yaml index ad7b32e..613689d 100644 --- a/HaCasa/dashboard/HaCasa/templates/internal_templates/hc_scene_card.yaml +++ b/HaCasa/dashboard/HaCasa/templates/internal_templates/hc_scene_card.yaml @@ -7,13 +7,13 @@ hc_scene_card: scene_1: name_1: icon_2: - scene_2: + scene_2: name_2: icon_3: - scene_3: + scene_3: name_3: icon_4: - scene_4: + scene_4: name_4: icon_5: scene_5: @@ -45,7 +45,7 @@ hc_scene_card: - grid-template-rows: 1fr 40px icon: - - color: "[[[ if (states[entity.entity_id].state == variables.name_1) {return '#fff'} else {return 'var(--icon-color)'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_1) {return '#fff'} else {return 'var(--icon-color)'} ]]]" card: - background: none - border-radius: 0 @@ -54,15 +54,15 @@ hc_scene_card: - height: auto - "--mdc-ripple-color": transparent img_cell: - - background: "[[[ if (states[entity.entity_id].state == variables.name_1) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" + - background: "[[[ if (states[entity.entity_id].state == variables.scene_1) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" - padding: 15px - border-radius: 20px - box-shadow: var(--ha-card-box-shadow) - height: 30px - width: 30px name: - - color: "[[[ if (states[entity.entity_id].state == variables.name_1) {return 'var(--ha-card-backgound-active)'} else {return 'var(--icon-color)'} ]]]" - - font-weight: "[[[ if (states[entity.entity_id].state == variables.name_1) {return '700'} else {return '500'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_1) {return 'var(--ha-card-backgound-active)'} else {return 'var(--icon-color)'} ]]]" + - font-weight: "[[[ if (states[entity.entity_id].state == variables.scene_1) {return '700'} else {return '500'} ]]]" - font-size: 14px tap_action: action: call-service @@ -71,8 +71,8 @@ hc_scene_card: entity_id: - input_select.scene_selector data: - option: "[[[ return variables.name_1 ]]]" - + option: "[[[ return variables.scene_1 ]]]" + item2: card: type: custom:button-card @@ -86,7 +86,7 @@ hc_scene_card: - grid-template-rows: 1fr 40px icon: - - color: "[[[ if (states[entity.entity_id].state == variables.name_2) {return '#fff'} else {return 'var(--icon-color)'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_2) {return '#fff'} else {return 'var(--icon-color)'} ]]]" card: - background: none - border-radius: 0 @@ -95,15 +95,15 @@ hc_scene_card: - box-shadow: none - "--mdc-ripple-color": transparent img_cell: - - background: "[[[ if (states[entity.entity_id].state == variables.name_2) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" + - background: "[[[ if (states[entity.entity_id].state == variables.scene_2) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" - padding: 15px - border-radius: 20px - box-shadow: var(--ha-card-box-shadow) - height: 30px - width: 30px name: - - color: "[[[ if (states[entity.entity_id].state == variables.name_2) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" - - font-weight: "[[[ if (states[entity.entity_id].state == variables.name_2) {return '700'} else {return '500'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_2) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" + - font-weight: "[[[ if (states[entity.entity_id].state == variables.scene_2) {return '700'} else {return '500'} ]]]" - font-size: 14px tap_action: action: call-service @@ -112,12 +112,12 @@ hc_scene_card: entity_id: - input_select.scene_selector data: - option: "[[[ return variables.name_2 ]]]" + option: "[[[ return variables.scene_2 ]]]" item3: card: type: custom:button-card icon: "[[[ return variables.icon_3 ]]]" - name: "[[[ return variables.name_3 ]]]" + name: "[[[ return variables.name_3 ]]]" styles: grid: - grid-template-areas: | @@ -126,7 +126,7 @@ hc_scene_card: - grid-template-rows: 1fr 40px icon: - - color: "[[[ if (states[entity.entity_id].state == variables.name_3) {return '#fff'} else {return 'var(--icon-color)'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_3) {return '#fff'} else {return 'var(--icon-color)'} ]]]" card: - background: none - border-radius: 0 @@ -135,16 +135,16 @@ hc_scene_card: - box-shadow: none - "--mdc-ripple-color": transparent img_cell: - - background: "[[[ if (states[entity.entity_id].state == variables.name_3) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" + - background: "[[[ if (states[entity.entity_id].state == variables.scene_3) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" - padding: 15px - border-radius: 20px - height: 30px - width: 30px - box-shadow: var(--ha-card-box-shadow) name: - - color: "[[[ if (states[entity.entity_id].state == variables.name_3) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" - - font-weight: "[[[ if (states[entity.entity_id].state == variables.name_3) {return '700'} else {return '500'} ]]]" - - font-size: 14px + - color: "[[[ if (states[entity.entity_id].state == variables.scene_3) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" + - font-weight: "[[[ if (states[entity.entity_id].state == variables.scene_3) {return '700'} else {return '500'} ]]]" + - font-size: 14px tap_action: action: call-service service: input_select.select_option @@ -152,7 +152,7 @@ hc_scene_card: entity_id: - input_select.scene_selector data: - option: "[[[ return variables.name_3 ]]]" + option: "[[[ return variables.scene_3 ]]]" item4: card: type: custom:button-card @@ -166,7 +166,7 @@ hc_scene_card: - grid-template-rows: 1fr 40px icon: - - color: "[[[ if (states[entity.entity_id].state == variables.name_4) {return '#fff'} else {return 'var(--icon-color)'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_4) {return '#fff'} else {return 'var(--icon-color)'} ]]]" card: - background: none - border-radius: 0 @@ -175,15 +175,15 @@ hc_scene_card: - overflow: visible - "--mdc-ripple-color": transparent img_cell: - - background: "[[[ if (states[entity.entity_id].state == variables.name_4) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" + - background: "[[[ if (states[entity.entity_id].state == variables.scene_4) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" - padding: 15px - border-radius: 20px - height: 30px - width: 30px - box-shadow: var(--ha-card-box-shadow) name: - - color: "[[[ if (states[entity.entity_id].state == variables.name_4) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" - - font-weight: "[[[ if (states[entity.entity_id].state == variables.name_4) {return '700'} else {return '500'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_4) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" + - font-weight: "[[[ if (states[entity.entity_id].state == variables.scene_4) {return '700'} else {return '500'} ]]]" - font-size: 14px tap_action: action: call-service @@ -192,7 +192,7 @@ hc_scene_card: entity_id: - input_select.scene_selector data: - option: "[[[ return variables.name_4 ]]]" + option: "[[[ return variables.scene_4 ]]]" item5: card: type: custom:button-card @@ -206,7 +206,7 @@ hc_scene_card: - grid-template-rows: 1fr 40px icon: - - color: "[[[ if (states[entity.entity_id].state == variables.name_5) {return '#fff'} else {return 'var(--icon-color)'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_5) {return '#fff'} else {return 'var(--icon-color)'} ]]]" card: - background: none - border-radius: 0 @@ -215,15 +215,15 @@ hc_scene_card: - box-shadow: none - "--mdc-ripple-color": transparent img_cell: - - background: "[[[ if (states[entity.entity_id].state == variables.name_5) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" + - background: "[[[ if (states[entity.entity_id].state == variables.scene_5) {return 'var(--ha-card-backgound-active)'} else {return 'var(--ha-card-background)'} ]]]" - padding: 15px - border-radius: 20px - height: 30px - width: 30px - box-shadow: var(--ha-card-box-shadow) name: - - color: "[[[ if (states[entity.entity_id].state == variables.name_5) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" - - font-weight: "[[[ if (states[entity.entity_id].state == variables.name_5) {return '700'} else {return '500'} ]]]" + - color: "[[[ if (states[entity.entity_id].state == variables.scene_5) {return 'var(--primary-color)'} else {return 'var(--icon-color)'} ]]]" + - font-weight: "[[[ if (states[entity.entity_id].state == variables.scene_5) {return '700'} else {return '500'} ]]]" - font-size: 14px tap_action: action: call-service @@ -232,4 +232,4 @@ hc_scene_card: entity_id: - input_select.scene_selector data: - option: "[[[ return variables.name_5 ]]]" \ No newline at end of file + option: "[[[ return variables.scene_5 ]]]" diff --git a/docs/docs/usage/cards/hc_scene_card.md b/docs/docs/usage/cards/hc_scene_card.md index 9f27e7c..33bdcd6 100644 --- a/docs/docs/usage/cards/hc_scene_card.md +++ b/docs/docs/usage/cards/hc_scene_card.md @@ -14,9 +14,45 @@ Adds the scenes card. It switches between the scenes you selected. For now, it h ## Usage ### Input selector needed -This card used a input selector to determine which scene is active. It does this based on the name of your scene. Its important that the options you add to the input selector have the same name as the name you give in the card. +This card used an input selector to determine which scene is active. It does this based on the id of your scene. It's important that the options you add to the input selector have the same id as the scene you give in the card. -You'll also need a automation to change the scene when the input selector changes. +For example: + +```json +{ + "key": "input_select", + "data": { + "items": [ + { + "id": "scene_selector", + "name": "scene_selector", + "options": [ + "scene.home", + "scene.work", + "scene.away", + "scene.night", + "scene.movie" + ] + } + ] + } +} +``` + +You'll also need an automation to change the scene when the input selector changes. For example: + +```yaml +- alias: Scene selector + triggers: + - trigger: state + entity_id: + - input_select.scene_selector + actions: + - action: scene.turn_on + data: + entity_id: '{{ trigger.to_state.state }}' + mode: restart +``` There are a lot of guides online on how to do this. @@ -46,20 +82,20 @@ There are a lot of guides online on how to do this. ## Variables -| Variable | Default | Required | Description| -|----------|---------|----------|------------| -| icon_1 | '' | Yes | Icon for first item | -| scene_1 | '' | Yes | Scene entity first item (`scene.x`) | -| name_1 | '' | Yes | Name of first item, needs to be the same as name in `input_selector` | -| icon_2 | '' | Yes | Icon for second item | -| scene_2 | '' | Yes | Scene entity second item (`scene.x`) | -| name_2 | '' | Yes | Name of second item, needs to be the same as name in `input_selector` | -| icon_3 | '' | Yes | Icon for third item | -| scene_3 | '' | Yes | Scene entity third item (`scene.x`) | -| name_3 | '' | Yes | Name of third item, needs to be the same as name in `input_selector` | -| icon_4 | '' | Yes | Icon for forth item | -| scene_4 | '' | Yes | Scene entity forth item (`scene.x`) | -| name_4 | '' | Yes | Name of forth item, needs to be the same as name in `input_selector` | -| icon_5 | '' | Yes | Icon for fifth item | -| scene_5 | '' | Yes | Scene entity fifth item (`scene.x`) | -| name_5 | '' | Yes | Name of fifth item, needs to be the same as name in `input_selector` | \ No newline at end of file +| Variable | Default | Required | Description | +|----------|---------|----------|-------------------------------------------------------------------------------------------------| +| icon_1 | '' | Yes | Icon for first item | +| scene_1 | '' | Yes | Scene entity first item (`scene.x`), needs to be the same as a scene option in `input_selector` | +| name_1 | '' | Yes | Name of first item | +| icon_2 | '' | Yes | Icon for second item | +| scene_2 | '' | Yes | Scene entity second item (`scene.x`), needs to be the same as a scene option in `input_selector` | +| name_2 | '' | Yes | Name of second item | +| icon_3 | '' | Yes | Icon for third item | +| scene_3 | '' | Yes | Scene entity third item (`scene.x`), needs to be the same as a scene option in `input_selector` | +| name_3 | '' | Yes | Name of third item | +| icon_4 | '' | Yes | Icon for forth item | +| scene_4 | '' | Yes | Scene entity forth item (`scene.x`), needs to be the same as a scene option in `input_selector` | +| name_4 | '' | Yes | Name of forth item | +| icon_5 | '' | Yes | Icon for fifth item | +| scene_5 | '' | Yes | Scene entity fifth item (`scene.x`), needs to be the same as a scene option in `input_selector` | +| name_5 | '' | Yes | Name of fifth item |