Skip to content

use scene instead of name in hc_scene_card #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jerome2710 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

use scene instead of name in hc_scene_card #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 31 additions & 31 deletions HaCasa/dashboard/HaCasa/templates/internal_templates/hc_scene_card.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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: |
Expand All @@ -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
Expand All @@ -135,24 +135,24 @@ 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
target:
entity_id:
- input_select.scene_selector
data:
option: "[[[ return variables.name_3 ]]]"
option: "[[[ return variables.scene_3 ]]]"
item4:
card:
type: custom:button-card
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -232,4 +232,4 @@ hc_scene_card:
entity_id:
- input_select.scene_selector
data:
option: "[[[ return variables.name_5 ]]]"
option: "[[[ return variables.scene_5 ]]]"
74 changes: 55 additions & 19 deletions docs/docs/usage/cards/hc_scene_card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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` |
| 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 |