2755 lines
86 KiB
YAML
2755 lines
86 KiB
YAML
decluttering_templates:
|
|
test_template:
|
|
card:
|
|
type: custom:button-card
|
|
entity: '[[entity]]'
|
|
|
|
test_default:
|
|
card:
|
|
type: picture-elements
|
|
image: '/local/cast.jpg'
|
|
elements:
|
|
- type: state-label
|
|
entity: '[[entity]]'
|
|
style:
|
|
top: 90%
|
|
left: 20%
|
|
|
|
button_card_templates:
|
|
test_action_template:
|
|
tap_action:
|
|
action: |
|
|
[[[
|
|
console.log("test")
|
|
console.log(variables);
|
|
return "none";
|
|
]]]
|
|
|
|
test_var:
|
|
variables:
|
|
test: "[[[ return 'pouet_template' ]]]"
|
|
|
|
sensor:
|
|
styles:
|
|
card:
|
|
- font-size: 16px
|
|
- width: 75px
|
|
tap_action:
|
|
action: more-info
|
|
state:
|
|
- color: orange
|
|
value: 75
|
|
id: my_id
|
|
sensor_humidity:
|
|
template: sensor
|
|
icon: 'mdi:weather-rainy'
|
|
state:
|
|
- color: 'rgb(255,0,0)'
|
|
operator: '>'
|
|
value: 50
|
|
- color: 'rgb(255,100,0)'
|
|
operator: '>'
|
|
value: 40
|
|
- color: 'rgb(255,200,0)'
|
|
operator: '>'
|
|
value: 35
|
|
- color: 'rgb(0,255,80)'
|
|
operator: '>'
|
|
value: 30
|
|
- color: 'rgb(0,255,255)'
|
|
operator: '>'
|
|
value: 25
|
|
- color: 'rgb(0,0,255)'
|
|
operator: '<'
|
|
value: 25
|
|
|
|
sensor_test:
|
|
template: sensor_humidity
|
|
state:
|
|
- color: pink
|
|
id: my_id
|
|
operator: '>'
|
|
value: 75
|
|
styles:
|
|
name:
|
|
- color: '#ff0000'
|
|
|
|
light_button_style:
|
|
aspect_ratio: 1/1
|
|
show_label: true
|
|
show_state: true
|
|
size: 30%
|
|
label: test-label
|
|
styles:
|
|
card:
|
|
- border-radius: 12px
|
|
- --paper-card-background-color: var(--homekit-white)
|
|
label:
|
|
- color: gray
|
|
- font-size: 11px
|
|
- font-family: Helvetica
|
|
- padding: 0px 10px
|
|
- justify-self: start
|
|
state:
|
|
- font-size: 11px
|
|
- font-family: Helvetica
|
|
- padding: 0px 10px
|
|
- justify-self: start
|
|
- text-transform: capitalize
|
|
- font-weight: bold
|
|
- padding-left: 10px
|
|
grid:
|
|
- grid-template-areas: '"i" "n" "s" "l"'
|
|
- grid-template-columns: 1fr
|
|
- grid-template-rows: 1fr min-content min-content min-content
|
|
img_cell:
|
|
- justify-content: start
|
|
- align-items: start
|
|
icon:
|
|
- height: auto
|
|
name:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
- font-weight: bold
|
|
- font-family: Helvetica
|
|
- font-size: 13px
|
|
|
|
button_picture:
|
|
size: 90%
|
|
show_state: false
|
|
show_label: false
|
|
show_name: false
|
|
entity_picture: https://3c1703fe8d.site.internapcdn.net/newman/csz/news/800/2019/ofalltheforc.jpg
|
|
show_entity_picture: true
|
|
color_type: card
|
|
aspect_ratio: 1/1
|
|
tap_action:
|
|
action: toggle
|
|
haptic: light
|
|
hold_action:
|
|
action: more-info
|
|
haptic: success
|
|
styles:
|
|
card:
|
|
- border-radius: 12px
|
|
# - width: 85px
|
|
# - height: 85px
|
|
state:
|
|
- value: 'on'
|
|
color: '#F0C209'
|
|
id: on-picture
|
|
- value: 'off'
|
|
color: '#555B65'
|
|
id: off-picture
|
|
|
|
cb_overview_counters:
|
|
layout: icon_state
|
|
color: auto
|
|
aspect_ratio: 1/1
|
|
show_state: false
|
|
show_name: true
|
|
show_label: true
|
|
label: '[[[return "42";]]]'
|
|
styles:
|
|
grid:
|
|
- grid-template-rows: 42px auto 42px
|
|
- grid-template-columns: 42px auto
|
|
card:
|
|
- border-radius: 15px
|
|
- margin: 8px 0px 0px 0px
|
|
- padding: 0px 0px
|
|
icon:
|
|
- align-self: end
|
|
- height: 30px
|
|
- width: 30px
|
|
name:
|
|
- justify-self: start
|
|
- padding: 0px 10px
|
|
- font-size: 13px
|
|
label:
|
|
- font-size: 11px
|
|
- font-family: Helvetica
|
|
- text-transform: capitalize
|
|
- font-weight: bold
|
|
- align-self: end
|
|
- justify-self: start
|
|
- padding: 9px 10px
|
|
lock:
|
|
- align-items: flex-end
|
|
state:
|
|
- value: 'on'
|
|
styles:
|
|
card:
|
|
- --paper-card-background-color: rgba(40, 40, 40)
|
|
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
|
|
name:
|
|
- color: white
|
|
state:
|
|
- color: white
|
|
label:
|
|
- color: white
|
|
tap_action:
|
|
action: toggle
|
|
hold_action:
|
|
action: more-info
|
|
|
|
button_body:
|
|
color: auto
|
|
size: 30%
|
|
aspect_ratio: 1/1
|
|
show_state: true
|
|
show_label: true
|
|
tap_action:
|
|
action: toggle
|
|
haptic: light
|
|
hold_action:
|
|
action: more-info
|
|
haptic: success
|
|
styles:
|
|
icon:
|
|
- color: var(--local-color)
|
|
lock:
|
|
- color: red
|
|
card:
|
|
- color: var(--local-color)
|
|
- border-radius: 6px
|
|
- background-color: ivory
|
|
- padding-left: 5px
|
|
- box-shadow: 0px 0px 2px 1px
|
|
name:
|
|
- text-align: start
|
|
- font-weight: bold
|
|
- font-family: Helvetica
|
|
- font-size: 13px
|
|
- justify-self: start
|
|
label:
|
|
- font-size: 11px
|
|
- font-family: Helvetica
|
|
- text-align: start
|
|
- justify-self: start
|
|
state:
|
|
- font-size: 11px
|
|
- font-family: Helvetica
|
|
- justify-self: start
|
|
- text-align: start
|
|
- text-transform: capitalize
|
|
- font-weight: bold
|
|
grid:
|
|
- grid-template-areas: '"i" "n" "s" "l"'
|
|
- grid-template-columns: 1fr
|
|
- grid-template-rows: 1fr min-content min-content min-content
|
|
img_cell:
|
|
- justify-content: start
|
|
- align-items: start
|
|
|
|
button_motion:
|
|
template: button_body
|
|
show_last_changed: true
|
|
tap_action:
|
|
action: more-info
|
|
haptic: light
|
|
hold_action:
|
|
action: more-info
|
|
haptic: success
|
|
styles:
|
|
card:
|
|
- box-shadow: 0px 0px 2px 1px
|
|
state:
|
|
- value: 'on'
|
|
styles:
|
|
card:
|
|
- color: red
|
|
name:
|
|
- color: black
|
|
icon:
|
|
- color: red
|
|
# id: on-icon
|
|
|
|
- value: 'off'
|
|
styles:
|
|
card:
|
|
- color: '#555B65'
|
|
- opacity: 0.8
|
|
icon:
|
|
- color: '#555B65'
|
|
# id: off-icon
|
|
|
|
test1:
|
|
#name: test1
|
|
template:
|
|
- test2
|
|
- test3
|
|
state:
|
|
- value: 42
|
|
icon: mdi:test
|
|
- value: 1
|
|
id: '1'
|
|
pouet: value1 - test1
|
|
test1: ok
|
|
- value: 2
|
|
id: '2'
|
|
pouet: value2 - test1
|
|
test1: ok
|
|
test2:
|
|
#name: test2
|
|
template: test4
|
|
state:
|
|
- value: 1
|
|
id: '1'
|
|
pouet: value1 - test2
|
|
test2: ok
|
|
- value: 2
|
|
id: '2'
|
|
pouet: value2 - test2
|
|
test2: ok
|
|
- value: test2
|
|
icon: mdi:test
|
|
test3:
|
|
name: test3
|
|
state:
|
|
- value: 1
|
|
id: '1'
|
|
pouet: value1 - test3
|
|
test3: ok
|
|
- value: 2
|
|
id: '2'
|
|
pouet: value2 - test3
|
|
test3: ok
|
|
test4:
|
|
name: test4
|
|
label: test4
|
|
state:
|
|
# - value: 1
|
|
# id: '1'
|
|
# pouet: value1 - test4
|
|
# test4: ok
|
|
# - value: 2
|
|
# id: '2'
|
|
# pouet: value2 - test4
|
|
# test4: ok
|
|
- value: test4
|
|
icon: mdi:test
|
|
|
|
views:
|
|
- title: Main
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
show_entity_picture: true
|
|
name: Entity Picture Cast
|
|
entity_picture: /local/cast.jpg
|
|
tooltip: 'mega super long tooltip that should overflow everything here mega super long tooltip that should overflow everything here mega super long tooltip that should overflow everything here mega super long tooltip that should overflow everything here'
|
|
styles:
|
|
tooltip:
|
|
- color: red
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
icon: mdi:lock
|
|
name: Lock + Tooltip Test
|
|
tooltip: 'Test Test'
|
|
lock:
|
|
enabled: true
|
|
duration: 7
|
|
unlock: hold
|
|
styles:
|
|
tooltip:
|
|
- color: red
|
|
- type: 'custom:button-card'
|
|
custom_fields:
|
|
test:
|
|
card:
|
|
type: vertical-stack
|
|
cards:
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
- type: custom:button-card
|
|
name: Change Background
|
|
entity: switch.skylight
|
|
show_icon: false
|
|
aspect_ratio: 2/1
|
|
label: '[[[ return `test` ]]]'
|
|
extra_styles: |
|
|
@keyframes bgswap1 {
|
|
0% {
|
|
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
|
|
}
|
|
25% {
|
|
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
|
|
}
|
|
50% {
|
|
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
|
|
}
|
|
75% {
|
|
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
|
|
}
|
|
100% {
|
|
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
|
|
}
|
|
}
|
|
styles:
|
|
card:
|
|
- animation: bgswap1 10s linear infinite
|
|
- background-size: cover
|
|
name:
|
|
- color: white
|
|
- type: entities
|
|
entities:
|
|
- input_number.test
|
|
- switch.skylight
|
|
- light.test_light
|
|
- type: custom:button-card
|
|
entity: input_number.test
|
|
name: test
|
|
styles:
|
|
card:
|
|
- display: '[[[ if (Number(entity.state) < 30) return "none"; else return null; ]]]'
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Defaults
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
name: Default
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
name: test
|
|
icon: mdi:flash
|
|
color: orange
|
|
- type: 'custom:button-card'
|
|
name: test
|
|
color_type: card
|
|
icon: mdi:flash
|
|
color: orange
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Card-Modder
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:card-modder
|
|
styles:
|
|
card:
|
|
- border-radius: 10px
|
|
card:
|
|
type: entity-button
|
|
entity: switch.skylight
|
|
name: Default HASS
|
|
show_name: false
|
|
show_state: true
|
|
- type: custom:card-modder
|
|
styles:
|
|
card:
|
|
- border-radius: 10px
|
|
card:
|
|
type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_state: true
|
|
show_name: false
|
|
- type: custom:card-modder
|
|
styles:
|
|
card:
|
|
- border-radius: 10px
|
|
card:
|
|
type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Style-Modder
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
color_type: card
|
|
color: rgb(245,116,56)
|
|
styles:
|
|
card:
|
|
# - background-color: rgba(245,116,56,1)
|
|
- border-radius: 30px
|
|
- border: solid 3px rgba(118,185,0,1)
|
|
entity: switch.skylight
|
|
icon: mdi:stop
|
|
name: BUTTON only CType card
|
|
- type: custom:button-card
|
|
styles:
|
|
card:
|
|
- background-color: rgba(245,116,56,1)
|
|
- border-radius: 30px
|
|
- border: solid 3px rgba(118,185,0,1)
|
|
entity: switch.skylight
|
|
icon: mdi:stop
|
|
name: BUTTON only CType card
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Template
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:config-template-card
|
|
variables:
|
|
- states['input_number.test'].state
|
|
entities:
|
|
- input_number.test
|
|
card:
|
|
type: 'custom:button-card'
|
|
entity: input_number.test
|
|
name: '${vars[0]}'
|
|
- type: custom:config-template-card
|
|
variables:
|
|
- states['input_number.test'].state
|
|
entities:
|
|
- input_number.test
|
|
card:
|
|
type: 'custom:button-card'
|
|
color_type: card
|
|
color: '${"rgb(" + Number(vars[0]) * 2 + ",255,255)"}'
|
|
entity: input_number.test
|
|
name: '${vars[0]}'
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Layout
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: icon_name_state_no_state
|
|
show_state: false
|
|
layout: icon_name_state
|
|
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: icon_name_state
|
|
show_state: true
|
|
layout: icon_name_state
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: Testing default size
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: icon_name_state
|
|
color_type: card
|
|
show_state: false
|
|
show_name: false
|
|
layout: icon_name_state
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_name: false
|
|
show_state: false
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: icon_name
|
|
layout: icon_name
|
|
show_state: true
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: icon_state
|
|
layout: icon_state
|
|
show_state: true
|
|
show_name: true
|
|
color_type: card
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: icon_name
|
|
layout: icon_name
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: icon_state
|
|
layout: icon_state
|
|
show_state: true
|
|
show_name: false
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
color_type: card
|
|
name: icon_state
|
|
layout: icon_state
|
|
show_state: true
|
|
show_name: false
|
|
show_units: false
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
layout: icon_name_state2nd
|
|
show_state: true
|
|
show_name: true
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
layout: icon_state_name2nd
|
|
show_state: true
|
|
show_name: true
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: name_state
|
|
layout: name_state
|
|
show_state: true
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: default state
|
|
show_state: true
|
|
units: UNITS TOO LONNNNNNG
|
|
color_type: card
|
|
show_name: false
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
name: default name
|
|
show_state: false
|
|
show_name: true
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: No Name
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_name: false
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
show_name: false
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: No Icon but name and state
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_icon: false
|
|
show_state: true
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
show_icon: false
|
|
show_state: true
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Show State
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_name: false
|
|
show_state: true
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
show_name: false
|
|
show_state: true
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Show Name and State
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_state: true
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
show_state: true
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Redefine name and icon
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: Test Name
|
|
icon: mdi:home
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
name: Test Name
|
|
icon: mdi:home
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Test lights
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color: auto
|
|
styles:
|
|
name:
|
|
- color: var(--button-card-light-color)
|
|
card:
|
|
- -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
|
|
- box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color_type: card
|
|
color: auto
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Test Height
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color: auto
|
|
name: s:default h:200px
|
|
styles:
|
|
card:
|
|
- height: 200px
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color_type: card
|
|
color: auto
|
|
name: s:100% h:200px
|
|
size: 100%
|
|
styles:
|
|
card:
|
|
- height: 200px
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color_type: card
|
|
color: auto
|
|
size: 10%
|
|
name: s:10% h:200px
|
|
styles:
|
|
card:
|
|
- height: 200px
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color: auto
|
|
name: 60px
|
|
styles:
|
|
card:
|
|
- height: 60px
|
|
- width: 60px
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color_type: card
|
|
color: auto
|
|
name: 80px
|
|
styles:
|
|
card:
|
|
- height: 80px
|
|
- width: 30px
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
color_type: card
|
|
color: auto
|
|
name: 300px
|
|
styles:
|
|
card:
|
|
- height: 300px
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: icon_name
|
|
styles:
|
|
card:
|
|
- width: 100px
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: icon_state
|
|
styles:
|
|
card:
|
|
- height: 200px
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Redefine style with state
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
state:
|
|
- value: 'off'
|
|
color: green
|
|
- value: 'on'
|
|
color: red
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
state:
|
|
- value: 'off'
|
|
color: green
|
|
- value: 'on'
|
|
color: red
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Entity Picture
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
entity_picture: https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG
|
|
show_entity_picture: true
|
|
name: Entity Picture Default
|
|
state:
|
|
- value: 'off'
|
|
styles:
|
|
entity_picture:
|
|
- filter: grayscale(100%)
|
|
- border-radius: 50%
|
|
- value: 'on'
|
|
spin: true
|
|
styles:
|
|
card:
|
|
entity_picture:
|
|
- border-radius: 50%
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
show_entity_picture: true
|
|
name: Entity Picture State
|
|
state:
|
|
- value: 'off'
|
|
color: black
|
|
entity_picture: https://welovecatsandkittens.com/wp-content/uploads/2013/09/fallling-asleep-at-keyboard-cat.jpg
|
|
styles:
|
|
entity_picture:
|
|
- filter: grayscale(100%)
|
|
- value: 'on'
|
|
color: '#ce42f4'
|
|
entity_picture: https://media.tenor.com/images/d740131a4906504d47cab865f1bd95b3/tenor.gif
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: camera.demo_camera
|
|
show_live_stream: true
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Redefine name and icon with state
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
state:
|
|
- value: 'off'
|
|
name: This is off
|
|
icon: mdi:lightbulb
|
|
- value: 'on'
|
|
name: This is on
|
|
icon: mdi:lightbulb-on
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
state:
|
|
- value: 'off'
|
|
name: This is off
|
|
icon: mdi:lightbulb
|
|
- value: 'on'
|
|
name: This is on
|
|
icon: mdi:lightbulb-on
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Test tap_action
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: navigate
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/1
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: toggle
|
|
tap_action:
|
|
action: toggle
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: more-info
|
|
tap_action:
|
|
action: more-info
|
|
entity: light.test_light
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: call-service
|
|
tap_action:
|
|
action: call-service
|
|
service: switch.toggle
|
|
service_data:
|
|
entity_id: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: call-service
|
|
tap_action:
|
|
action: call-service
|
|
service: timer.start
|
|
target:
|
|
entity_id: timer.laundry
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: assist
|
|
tap_action:
|
|
action: assist
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: none
|
|
tap_action:
|
|
action: none
|
|
- type: 'custom:button-card'
|
|
icon: mdi:link
|
|
name: url
|
|
confirmation:
|
|
text: '[[[ return "main" ]]]'
|
|
tap_action:
|
|
action: url
|
|
url_path: https://www.google.com
|
|
# confirmation:
|
|
# text: '[[[ return "pouet" ]]]'
|
|
# exemptions:
|
|
# - user: befc8496799848bda1824f2a8111e30a
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Test conditional card
|
|
- type: conditional
|
|
conditions:
|
|
- entity: switch.skylight
|
|
state: 'off'
|
|
card:
|
|
type: vertical-stack
|
|
cards:
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_state: true
|
|
name: Kitchen
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: entities
|
|
entities:
|
|
- switch.skylight
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Test hold_action
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: navigate
|
|
hold_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/1
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: toggle
|
|
hold_action:
|
|
action: toggle
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: more-info
|
|
hold_action:
|
|
action: more-info
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: call-service
|
|
hold_action:
|
|
action: call-service
|
|
service: switch.toggle
|
|
service_data:
|
|
entity_id: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: none
|
|
hold_action:
|
|
action: none
|
|
- type: 'custom:button-card'
|
|
icon: mdi:link
|
|
name: url
|
|
hold_action:
|
|
action: url
|
|
url_path: https://www.google.com
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Effects
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
state:
|
|
- value: 'on'
|
|
color: red
|
|
icon: mdi:alert
|
|
name: Blink
|
|
styles:
|
|
card:
|
|
- animation: blink 2s ease infinite
|
|
- operator: default
|
|
color: green
|
|
name: No Blink
|
|
icon: mdi:shield-check
|
|
- type: 'custom:button-card'
|
|
color_type: icon
|
|
entity: switch.skylight
|
|
state:
|
|
- value: 'on'
|
|
color: red
|
|
icon: mdi:alert
|
|
name: Blink
|
|
styles:
|
|
card:
|
|
- color: red
|
|
- animation: blink 2s ease infinite
|
|
- operator: default
|
|
color: green
|
|
name: No Blink
|
|
icon: mdi:shield-check
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
entity: switch.skylight
|
|
icon: mdi:fan
|
|
name: Fan Spin
|
|
state:
|
|
- value: 'on'
|
|
spin: true
|
|
- operator: default
|
|
spin: false
|
|
- type: 'custom:button-card'
|
|
color_type: icon
|
|
entity: switch.skylight
|
|
icon: mdi:fan
|
|
name: Fan Spin
|
|
state:
|
|
- value: 'on'
|
|
spin: true
|
|
- operator: default
|
|
spin: false
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: test operators and multiple styles
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
state:
|
|
- value: '^of.*$'
|
|
operator: regex
|
|
name: This is off (regex)
|
|
icon: mdi:lightbulb
|
|
- value: '^o.*$'
|
|
operator: regex
|
|
name: This is on (regex)
|
|
icon: mdi:lightbulb-on
|
|
|
|
- type: 'custom:button-card'
|
|
icon: mdi:battery
|
|
# name: Battery
|
|
color_type: card
|
|
entity: input_number.test
|
|
show_name: false
|
|
show_state: true
|
|
tap_action:
|
|
action: more-info
|
|
state:
|
|
- value: 10
|
|
operator: '<'
|
|
color: '#FF0000' #red
|
|
icon: 'mdi:battery-10'
|
|
styles:
|
|
card:
|
|
- animation: blink 2s linear infinite
|
|
|
|
- value: 20
|
|
operator: '<='
|
|
color: '#ff6600' #red orange
|
|
icon: 'mdi:battery-20'
|
|
styles:
|
|
card:
|
|
- font-weight: 1000
|
|
|
|
- value: 30
|
|
operator: '<='
|
|
color: '#ff9933' #dark orange
|
|
icon: 'mdi:battery-30'
|
|
|
|
- value: 40
|
|
operator: '<='
|
|
color: '#ffcc00' #light orange
|
|
icon: 'mdi:battery-40'
|
|
|
|
- value: 50
|
|
operator: '<='
|
|
color: '#FFFF00' #yellow
|
|
icon: 'mdi:battery-50'
|
|
|
|
- value: 60
|
|
operator: '<='
|
|
color: '#FFFF00' #yellow
|
|
icon: 'mdi:battery-60'
|
|
|
|
- value: 70
|
|
operator: '<='
|
|
color: '#FFFF00' #yellow
|
|
icon: 'mdi:battery-70'
|
|
|
|
- value: 80
|
|
operator: '<='
|
|
color: '#CCFF33' #yellow green
|
|
icon: 'mdi:battery-80'
|
|
|
|
- value: 90
|
|
operator: '<='
|
|
color: '#66FF33' #light green
|
|
icon: 'mdi:battery-90'
|
|
|
|
- value: 100
|
|
operator: '<='
|
|
color: '#279b37' #dark green
|
|
icon: 'mdi:battery'
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: 'Bug #89'
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
- type: entity-button
|
|
entity: switch.skylight
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Labels
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: icon
|
|
entity: light.test_light
|
|
label: >
|
|
[[[
|
|
var bri = states['light.test_light'].attributes.brightness;
|
|
return 'Brightness: ' + (bri ? bri : '0') + '%';
|
|
]]]
|
|
show_label: true
|
|
show_state: true
|
|
size: 10%
|
|
styles:
|
|
card:
|
|
- height: 100px
|
|
label:
|
|
- color: gray
|
|
- font-size: 9px
|
|
- justify-self: start
|
|
- padding: 0px 5px
|
|
name:
|
|
- text-transform: uppercase
|
|
- letter-spacing: 0.5em
|
|
- font-familly: cursive
|
|
- justify-self: start
|
|
- padding: 0px 5px
|
|
state:
|
|
- justify-self: start
|
|
- font-size: 10px
|
|
- padding: 0px 5px
|
|
state:
|
|
- value: 'on'
|
|
styles:
|
|
state:
|
|
- color: green
|
|
- value: 'off'
|
|
styles:
|
|
state:
|
|
- color: red
|
|
card:
|
|
- filter: brightness(40%)
|
|
- type: 'custom:button-card'
|
|
color_type: icon
|
|
entity: light.test_light
|
|
layout: icon_label
|
|
label: >
|
|
[[[ return 'Other State: ' + states['switch.skylight'].state; ]]]
|
|
show_label: true
|
|
show_name: false
|
|
size: 100%
|
|
styles:
|
|
card:
|
|
- height: 200px
|
|
label:
|
|
- font-weight: bold
|
|
- writing-mode: vertical-rl
|
|
- text-orientation: mixed
|
|
state:
|
|
- value: 'on'
|
|
styles:
|
|
label:
|
|
- color: red
|
|
- value: 'off'
|
|
styles:
|
|
label:
|
|
- color: green
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: State Template
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: icon
|
|
entity: switch.skylight
|
|
show_state: true
|
|
show_label: true
|
|
state:
|
|
- operator: template
|
|
value: >
|
|
[[[
|
|
return states['light.test_light'].attributes
|
|
&& (states['light.test_light'].attributes.brightness <= 100)
|
|
]]]
|
|
icon: mdi:alert
|
|
- operator: default
|
|
icon: mdi:lightbulb
|
|
- type: 'custom:button-card'
|
|
color_type: icon
|
|
entity: switch.skylight
|
|
show_label: true
|
|
state:
|
|
- operator: template
|
|
value: >
|
|
[[[
|
|
return states['light.test_light'].attributes
|
|
&& (!states['light.test_light'].attributes.brightness || states['light.test_light'].attributes.brightness <= 100)
|
|
]]]
|
|
icon: mdi:weather-night
|
|
label: Night Mode
|
|
- operator: default
|
|
icon: mdi:white-balance-sunny
|
|
label: Day Mode
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Lock
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
name: Only test
|
|
lock:
|
|
enabled: true
|
|
duration: 10
|
|
unlock: double_tap
|
|
exemptions:
|
|
- username: test
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
lock:
|
|
enabled: true
|
|
exemptions: []
|
|
color: black
|
|
name: Always
|
|
entity: switch.skylight
|
|
|
|
# second view
|
|
- title: 2nd
|
|
cards:
|
|
- type: entities
|
|
entities:
|
|
- input_number.test
|
|
- switch.skylight
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
icon: mdi:arrow-left-circle
|
|
name: Return
|
|
tap_action:
|
|
action: navigate
|
|
navigation_path: /lovelace/0
|
|
|
|
# Demo Layout
|
|
- title: Layout Demo
|
|
cards:
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Layout
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: icon_name_state
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: icon_name_state
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: name_state
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: vertical (default)
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: name_state
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: icon_name
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: icon_state
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: icon_name
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: icon_state
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: icon_name with hidden state
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: icon_state with hidden name
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: false
|
|
layout: icon_name
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
show_name: false
|
|
layout: icon_state
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: icon_name_state2nd
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
name: icon_state_name2nd
|
|
color: var(--paper-item-icon-color)
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- padding: 5px 0px
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: icon_name_state2nd
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
layout: icon_state_name2nd
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
- height: 100px
|
|
name: Grid
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_icon: true
|
|
show_state: true
|
|
styles:
|
|
card:
|
|
- height: 200px
|
|
dbltap_action:
|
|
action: call-service
|
|
service: input_number.increment
|
|
service_data:
|
|
entity_id: input_number.test
|
|
- type: custom:vertical-stack-in-card
|
|
title: Entities card sample
|
|
cards:
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: button-card
|
|
entity: switch.skylight
|
|
name: Default
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
- color: var(--primary-color)
|
|
color_type: card
|
|
entity: light.test_light
|
|
hold_action:
|
|
action: more-info
|
|
icon: 'mdi:lightbulb'
|
|
name: Shelf
|
|
state:
|
|
- color: red
|
|
value: 'off'
|
|
type: 'custom:button-card'
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: RGB
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: light.test_light
|
|
layout: rgb_light
|
|
name: Default
|
|
color_type: card
|
|
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
color_type: label-card
|
|
styles:
|
|
card:
|
|
- font-weight: bold
|
|
- text-transform: uppercase
|
|
name: Lock
|
|
- type: 'custom:button-card'
|
|
color_type: blank-card
|
|
styles:
|
|
card:
|
|
- height: 100px
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
lock:
|
|
enabled: true
|
|
styles:
|
|
lock:
|
|
- color: red
|
|
- align-items: flex-end
|
|
- justify-content: flex-start
|
|
- type: 'custom:button-card'
|
|
color_type: card
|
|
lock:
|
|
enabled: true
|
|
color: black
|
|
entity: switch.skylight
|
|
show_label: true
|
|
show_last_changed: true
|
|
|
|
- title: overlay
|
|
cards:
|
|
- type: alarm-panel
|
|
entity: alarm_control_panel.home_alarm
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
tap_action:
|
|
action: overlay
|
|
overlay: cover
|
|
- type: custom:button-card
|
|
entity: alarm_control_panel.home_alarm
|
|
show_state: true
|
|
|
|
- type: 'custom:button-card'
|
|
layout: icon_label
|
|
entity: light.test_light
|
|
color: auto
|
|
show_state: true
|
|
show_name: true
|
|
show_label: true
|
|
styles:
|
|
grid:
|
|
- grid-template-rows: 30px auto 30px
|
|
card:
|
|
- border-radius: 15px
|
|
- height: 105px
|
|
- width: 105px
|
|
- margin: 5px 5px 0px 0px
|
|
icon:
|
|
- align-self: end
|
|
- height: 30px
|
|
- width: 30px
|
|
name:
|
|
- justify-self: start
|
|
- padding: 0px 10px
|
|
- font-size: 13px
|
|
label:
|
|
- align-self: end
|
|
- padding: 1px
|
|
- font-size: 11px
|
|
- font-weight: bold
|
|
- font-family: Helvetica
|
|
state:
|
|
- font-size: 11px
|
|
- font-family: Helvetica
|
|
- text-transform: capitalize
|
|
- font-weight: bold
|
|
- align-self: end
|
|
- justify-self: start
|
|
- padding: 5px 10px
|
|
state:
|
|
- value: 'on'
|
|
styles:
|
|
card:
|
|
- --paper-card-background-color: rgba(40, 40, 40)
|
|
- box-shadow: 0px 0px 20px 3px var(--button-card-light-color)
|
|
name:
|
|
- color: white
|
|
state:
|
|
- color: white
|
|
label:
|
|
- color: white
|
|
- value: 'off'
|
|
styles:
|
|
label:
|
|
- color: rgba(0, 0, 0, 0.0)
|
|
tap_action:
|
|
action: toggle
|
|
hold_action:
|
|
action: more-info
|
|
|
|
- title: Test
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
layout: icon_label
|
|
color: auto
|
|
show_state: false
|
|
show_name: true
|
|
show_label: true
|
|
name: Media
|
|
icon: mdi:music-note
|
|
label: Line 1<br />Line 2
|
|
styles:
|
|
grid:
|
|
- grid-template-rows: 50px auto auto
|
|
- grid-template-columns: 50px auto
|
|
card:
|
|
- border-radius: 15px
|
|
- height: 76px
|
|
- width: 342px
|
|
- margin: 5px 5px 0px 0px
|
|
- --paper-card-background-color: rgba(40, 40, 40)
|
|
- box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color
|
|
icon:
|
|
- color: var(--paper-item-icon-active-color)
|
|
- height: 30px
|
|
- width: 30px
|
|
name:
|
|
- justify-self: start
|
|
- padding: 0px 10px
|
|
- font-size: 12px
|
|
- text-transform: capitalize
|
|
- color: white
|
|
label:
|
|
- text-transform: capitalize
|
|
- font-size: 12px
|
|
- justify-self: start
|
|
- color: white
|
|
tap_action:
|
|
action: toggle
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
icon: mdi:spotlight
|
|
show_name: false
|
|
show_label: true
|
|
label: 1
|
|
layout: custom
|
|
styles:
|
|
grid:
|
|
- display: flex
|
|
- position: relative
|
|
label:
|
|
- position: absolute
|
|
- left: 0
|
|
- right: 0
|
|
- top: 0
|
|
- bottom: 0
|
|
- text-align: right
|
|
- padding: 0px 5px
|
|
img_cell:
|
|
- align-items: center
|
|
- justify-content: center
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
icon: mdi:spotlight
|
|
show_name: false
|
|
show_label: true
|
|
label: 2
|
|
layout: custom
|
|
styles:
|
|
grid:
|
|
- display: flex
|
|
- position: relative
|
|
label:
|
|
- position: absolute
|
|
- left: 0
|
|
- right: 0
|
|
- top: 0
|
|
- bottom: 0
|
|
- text-align: right
|
|
- padding: 0px 5px
|
|
img_cell:
|
|
- align-items: center
|
|
- justify-content: center
|
|
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
icon: mdi:spotlight
|
|
show_name: false
|
|
show_label: true
|
|
label: 3
|
|
layout: custom
|
|
styles:
|
|
grid:
|
|
- display: flex
|
|
- position: relative
|
|
label:
|
|
- position: absolute
|
|
- left: 0
|
|
- right: 0
|
|
- top: 0
|
|
- bottom: 0
|
|
- text-align: right
|
|
- padding: 0px 5px
|
|
img_cell:
|
|
- align-items: center
|
|
- justify-content: center
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
icon: mdi:spotlight
|
|
show_name: false
|
|
show_label: true
|
|
label: 4
|
|
layout: custom
|
|
styles:
|
|
grid:
|
|
- display: flex
|
|
- position: relative
|
|
label:
|
|
- position: absolute
|
|
- left: 0
|
|
- right: 0
|
|
- top: 0
|
|
- bottom: 0
|
|
- text-align: right
|
|
- padding: 0px 5px
|
|
img_cell:
|
|
- align-items: center
|
|
- justify-content: center
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
icon: mdi:spotlight
|
|
show_name: false
|
|
show_label: true
|
|
label: 5
|
|
layout: custom
|
|
styles:
|
|
grid:
|
|
- display: flex
|
|
- position: relative
|
|
label:
|
|
- position: absolute
|
|
- left: 0
|
|
- right: 0
|
|
- top: 0
|
|
- bottom: 0
|
|
- text-align: right
|
|
- padding: 0px 5px
|
|
img_cell:
|
|
- align-items: center
|
|
- justify-content: center
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_label: true
|
|
state:
|
|
- operator: template
|
|
value: >
|
|
var last_changed = new Date(entity.last_changed);
|
|
var now = new Date();
|
|
return (now - last_changed) / 1000 / 60 / 60 <= 1
|
|
color: '#FF0000'
|
|
label: >
|
|
[[[
|
|
var last_changed = new Date(entity.last_changed);
|
|
var now = new Date();
|
|
return `${now} <br/>- ${last_changed}`
|
|
]]]
|
|
- type: custom:button-card
|
|
entity: input_number.test
|
|
show_state: true
|
|
styles:
|
|
icon:
|
|
- transform: rotate(45deg) scaleX(-1)
|
|
hold_action:
|
|
action: call-service
|
|
repeat: 500
|
|
repeat_limit: 2
|
|
service: input_number.increment
|
|
service_data:
|
|
entity_id: input_number.test
|
|
double_tap_action:
|
|
action: call-service
|
|
repeat: 500
|
|
service: input_number.decrement
|
|
service_data:
|
|
entity_id: input_number.test
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
color_type: card
|
|
show_name: false
|
|
show_label: true
|
|
layout: icon_label
|
|
size: 20px
|
|
styles:
|
|
card:
|
|
- height: 50px
|
|
- border-radius: 10px
|
|
grid:
|
|
- grid-template-columns: min-content min-content
|
|
- width: min-content
|
|
- margin: auto
|
|
- grid-gap: 0px 10px
|
|
label: >
|
|
[[[
|
|
return "Windows: " + 1;
|
|
]]]
|
|
state:
|
|
- value: 'on'
|
|
color: rgb(71,39,45) #Red
|
|
icon: mdi:window-open
|
|
styles:
|
|
label:
|
|
- color: rgb(220,69,121)
|
|
icon:
|
|
- color: rgb(220,69,121)
|
|
- value: 'off'
|
|
color: rgb(49,68,42) #Green
|
|
icon: mdi:window-closed
|
|
styles:
|
|
label:
|
|
- color: rgb(134,219,85)
|
|
icon:
|
|
- color: rgb(134,219,85)
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
color_type: card
|
|
show_name: false
|
|
show_label: true
|
|
layout: icon_label
|
|
size: 20px
|
|
styles:
|
|
label:
|
|
- justify-self: start
|
|
# - padding-right: 30%
|
|
card:
|
|
- height: 50px
|
|
- border-radius: 10px
|
|
label: >
|
|
[[[return 'Windows: ' + 1;]]]
|
|
state:
|
|
- value: 'on'
|
|
color: rgb(71,39,45) #Red
|
|
icon: mdi:window-open
|
|
styles:
|
|
label:
|
|
- color: rgb(220,69,121)
|
|
icon:
|
|
- color: rgb(220,69,121)
|
|
- value: 'off'
|
|
color: rgb(49,68,42) #Green
|
|
icon: mdi:window-closed
|
|
styles:
|
|
label:
|
|
- color: rgb(134,219,85)
|
|
icon:
|
|
- color: rgb(134,219,85)
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: binary_sensor.bsensor1
|
|
layout: icon_name_state2nd
|
|
show_state: true
|
|
show_name: true
|
|
show_label: true
|
|
label: label
|
|
- type: 'custom:button-card'
|
|
entity: binary_sensor.bsensor1
|
|
layout: icon_state_name2nd
|
|
show_state: true
|
|
show_name: true
|
|
show_label: true
|
|
label: label
|
|
styles:
|
|
grid:
|
|
- grid-template-areas: '"n i" "s i" "l i"'
|
|
- grid-template-columns: 1fr 40%
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
show_name: true
|
|
show_label: true
|
|
label: label
|
|
- type: 'custom:button-card'
|
|
entity: sensor.sensor1
|
|
show_state: true
|
|
show_name: true
|
|
show_label: true
|
|
label: label
|
|
styles:
|
|
grid:
|
|
- grid-template-areas: '"l" "i" "n" "s"'
|
|
- grid-template-rows: min-content 1fr min-content min-content
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
name: Label and State Same line
|
|
icon: mdi:fire
|
|
color_type: card
|
|
show_state: true
|
|
show_label: true
|
|
label: label
|
|
styles:
|
|
grid:
|
|
- grid-template-areas: '"i i" "n n" "s l"'
|
|
- grid-template-columns: 1fr 1fr
|
|
- grid-template-rows: 1fr min-content min-content
|
|
state:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
label:
|
|
- justify-self: end
|
|
- padding-right: 10px
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
name: Label and State Same line
|
|
icon: mdi:fire
|
|
show_state: true
|
|
show_label: true
|
|
label: label
|
|
styles:
|
|
grid:
|
|
- grid-template-areas: '"i i" "n n" "s l"'
|
|
- grid-template-columns: 1fr 1fr
|
|
- grid-template-rows: 1fr min-content min-content
|
|
state:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
label:
|
|
- justify-self: end
|
|
- padding-right: 10px
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
name: <3 Apple
|
|
icon: mdi:fire
|
|
show_state: true
|
|
styles:
|
|
card:
|
|
- width: 100px
|
|
- height: 100px
|
|
grid:
|
|
- grid-template-areas: '"i" "n" "s"'
|
|
- grid-template-columns: 1fr
|
|
- grid-template-rows: 1fr min-content min-content
|
|
img_cell:
|
|
- align-self: start
|
|
- text-align: start
|
|
name:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
- font-weight: bold
|
|
- text-transform: lowercase
|
|
state:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
state:
|
|
- value: 'off'
|
|
styles:
|
|
card:
|
|
- filter: opacity(50%)
|
|
icon:
|
|
- filter: grayscale(100%)
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
name: <3 Apple
|
|
icon: mdi:fire
|
|
color_type: card
|
|
show_state: true
|
|
styles:
|
|
card:
|
|
- width: 100px
|
|
- height: 100px
|
|
grid:
|
|
- grid-template-areas: '"i" "n" "s"'
|
|
- grid-template-columns: 1fr
|
|
- grid-template-rows: 1fr min-content min-content
|
|
img_cell:
|
|
- align-self: start
|
|
- text-align: start
|
|
name:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
- font-weight: bold
|
|
- text-transform: lowercase
|
|
state:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
state:
|
|
- value: 'off'
|
|
styles:
|
|
card:
|
|
- filter: opacity(50%)
|
|
icon:
|
|
- filter: grayscale(100%)
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
name: <3 Apple
|
|
icon: mdi:fire
|
|
show_state: true
|
|
styles:
|
|
card:
|
|
- width: 100px
|
|
- height: 100px
|
|
grid:
|
|
- grid-template-areas: '"i" "n" "s"'
|
|
- grid-template-columns: 1fr
|
|
- grid-template-rows: 1fr min-content min-content
|
|
img_cell:
|
|
- align-self: start
|
|
- text-align: start
|
|
name:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
- font-weight: bold
|
|
- text-transform: lowercase
|
|
state:
|
|
- justify-self: start
|
|
- padding-left: 10px
|
|
state:
|
|
- value: 'off'
|
|
styles:
|
|
card:
|
|
- filter: opacity(50%)
|
|
icon:
|
|
- filter: grayscale(100%)
|
|
|
|
- title: User Requests
|
|
cards:
|
|
- type: custom:button-card
|
|
template: sensor_test
|
|
entity: input_number.test
|
|
show_entity_picture: true
|
|
ripple_color: rgba(255, 0, 0, 100)
|
|
tap_action:
|
|
action: more-info
|
|
entity: switch.skylight
|
|
color_type: card
|
|
# styles:
|
|
# card:
|
|
# - background-color: black
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
name: 1/1
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
name: 2/1
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 2/1
|
|
- type: custom:button-card
|
|
name: 3/1
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 3/1
|
|
- type: custom:button-card
|
|
name: 4/1
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 4/1
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
name: 1/1.2
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1.2
|
|
- type: custom:button-card
|
|
name: 1/1.3
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1.3
|
|
- type: custom:button-card
|
|
name: 1/1.4
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1.4
|
|
- type: custom:button-card
|
|
name: 1/1.5
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1.5
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: light_button_style
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: light_button_style
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: light_button_style
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: light_button_style
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
show_state: true
|
|
show_name: false
|
|
layout: icon_state
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 2/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: light_button_style
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: light_button_style
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: light_button_style
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: button_picture
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: button_picture
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: button_picture
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
color_type: blank-card
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: cb_overview_counters
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: cb_overview_counters
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
entity: light.test_light
|
|
template: cb_overview_counters
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
- type: custom:button-card
|
|
color_type: blank-card
|
|
|
|
- type: custom:lovelace-template-card
|
|
template: test_template
|
|
variables:
|
|
- entity: switch.skylight
|
|
|
|
- title: User Requests2
|
|
cards:
|
|
- type: custom:button-card
|
|
icon: mdi:fire
|
|
entity: switch.skylight
|
|
name: test
|
|
styles:
|
|
card:
|
|
- height: 50px
|
|
- padding: 0px
|
|
state:
|
|
- value: 'on'
|
|
styles:
|
|
card:
|
|
- box-sizing: border-box
|
|
- border: '3px solid var(--button-card-light-color)'
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: timer.laundry
|
|
show_state: true
|
|
tap_action:
|
|
action: call-service
|
|
service: timer.start
|
|
service_data:
|
|
entity_id: entity
|
|
duration: 60
|
|
- type: entities
|
|
entities:
|
|
- timer.laundry
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
template: button_motion
|
|
entity: switch.skylight
|
|
label: asdflkjsdalkjsfd lksjdfklsdjaf
|
|
name: asldkjasdklasjdlas
|
|
- type: custom:button-card
|
|
template: button_motion
|
|
entity: switch.skylight
|
|
label: asdflkjsdalkjsfd lksjdfklsdjaf
|
|
name: asldkjasdklasjdlas
|
|
- type: custom:button-card
|
|
template: button_motion
|
|
entity: switch.skylight
|
|
label: asdflkjsdalkjsfd lksjdfklsdjaf
|
|
name: asldkjasdklasjdlas
|
|
- type: custom:button-card
|
|
template: button_motion
|
|
entity: switch.skylight
|
|
label: asdflkjsdalkjsfd lksjdfklsdjaf
|
|
name: asldkjasdklasjdlas
|
|
|
|
- title: Custom Fields
|
|
cards:
|
|
- type: custom:button-card
|
|
variables:
|
|
test2: piou
|
|
template: test_var
|
|
show_label: true
|
|
entity: sensor.sensor1
|
|
name: '[[[ return variables.test ]]]'
|
|
label: '[[[ return variables.test2 ]]]'
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
color_type: blank-card
|
|
- type: custom:button-card
|
|
color_type: blank-card
|
|
- type: custom:button-card
|
|
icon: mdi:lightbulb
|
|
aspect_ratio: 1/1
|
|
name: Nb lights on
|
|
styles:
|
|
grid:
|
|
- position: relative
|
|
custom_fields:
|
|
notification:
|
|
- background-color: >
|
|
[[[ if (states['input_number.test'].state == 0) return "green"; return "red" ]]]
|
|
- border-radius: 50%
|
|
- position: absolute
|
|
- left: 60%
|
|
- top: 10%
|
|
- height: 20px
|
|
- width: 20px
|
|
- font-size: 8px
|
|
- line-height: 20px
|
|
custom_fields:
|
|
notification: >
|
|
[[[ return Math.floor(states['input_number.test'].state / 10) ]]]
|
|
- type: custom:button-card
|
|
icon: >
|
|
[[[
|
|
if (entity.state === 'on')
|
|
return "mdi:fire"
|
|
return "mdi:lightbulb"
|
|
]]]
|
|
entity: switch.skylight
|
|
tap_action:
|
|
action: call-service
|
|
service: >
|
|
[[[
|
|
if (states['input_number.test'].state <= 20)
|
|
return "input_number.increment"
|
|
return "input_number.decrement"
|
|
]]]
|
|
service_data:
|
|
command: popup
|
|
title: 'Weather'
|
|
deviceID:
|
|
- this
|
|
card:
|
|
type: custom:swipe-card
|
|
parameters:
|
|
draggable: true
|
|
hide: false
|
|
pagination:
|
|
type: bullets
|
|
scrollbar: null
|
|
snapOnRelease: true
|
|
spaceBetween: 8
|
|
cards:
|
|
- type: iframe
|
|
aspect_ratio: 90%
|
|
url: https://embed.windy.com/embed2.html?lat=41.273&lon=-96.002&zoom=5&level=surface&overlay=rain&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&detailLat=41.273&detailLon=-96.002&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1
|
|
- type: weather-forecast
|
|
entity: weather.hourly
|
|
- type: weather-forecast
|
|
entity: weather.dark_sky
|
|
aspect_ratio: 1/1
|
|
show_name: false
|
|
custom_fields:
|
|
temperature_icon: >
|
|
[[[
|
|
return `<ha-icon
|
|
icon="mdi:thermometer"
|
|
style="height: 100%; padding-bottom: 2px;">
|
|
</ha-icon>`
|
|
]]]
|
|
temperature: >
|
|
[[[ return states['input_number.test'].state ]]]
|
|
my_state: >
|
|
[[[ return `My State is: ${entity.state}` ]]]
|
|
styles:
|
|
grid:
|
|
- grid-template-areas: '"i temperature_icon temperature" "my_state my_state my_state"'
|
|
- grid-template-columns: 50% min-content min-content
|
|
- grid-template-rows: 1fr 1fr
|
|
custom_fields:
|
|
temperature:
|
|
- font-size: 12px
|
|
- text-align: start
|
|
temperature_icon:
|
|
- justify-self: end
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: entities
|
|
entities:
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
|
|
- type: horizontal-stack
|
|
cards:
|
|
- type: custom:button-card
|
|
entity: 'sensor.raspi_temp'
|
|
hold_action:
|
|
action: more-info
|
|
entity: sensor.raspi_temp
|
|
icon: 'mdi:raspberry-pi'
|
|
aspect_ratio: 1/1
|
|
name: HassOS
|
|
styles:
|
|
card:
|
|
- background-color: '#000044'
|
|
- border-radius: 10%
|
|
- padding: 10%
|
|
- color: ivory
|
|
- font-size: 10px
|
|
- text-shadow: 0px 0px 5px black
|
|
- text-transform: capitalize
|
|
grid:
|
|
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
|
|
- grid-template-columns: 1fr 1fr
|
|
- grid-template-rows: 1fr min-content min-content min-content min-content
|
|
name:
|
|
- font-weight: bold
|
|
- font-size: 13px
|
|
- color: white
|
|
- align-self: middle
|
|
- justify-self: start
|
|
- padding-bottom: 4px
|
|
img_cell:
|
|
- justify-content: start
|
|
- align-items: start
|
|
- margin: none
|
|
icon:
|
|
- color: >
|
|
[[[
|
|
if (entity.state < 60) return 'lime';
|
|
if (entity.state >= 60 && entity.state < 80) return 'orange';
|
|
else return 'red';
|
|
]]]
|
|
- width: 70%
|
|
- margin-top: -10%
|
|
custom_fields:
|
|
temp:
|
|
- align-self: start
|
|
- justify-self: end
|
|
cpu:
|
|
- padding-bottom: 2px
|
|
- align-self: middle
|
|
- justify-self: start
|
|
- --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
|
|
ram:
|
|
- padding-bottom: 2px
|
|
- align-self: middle
|
|
- justify-self: start
|
|
- --text-color-sensor: '[[[ if (states["sensor.raspi_ram"].state > 80) return "red"; ]]]'
|
|
sd:
|
|
- align-self: middle
|
|
- justify-self: start
|
|
- --text-color-sensor: '[[[ if (states["sensor.raspi_sd"].state > 80) return "red"; ]]]'
|
|
custom_fields:
|
|
temp: >
|
|
[[[
|
|
return `<ha-icon
|
|
icon="mdi:thermometer"
|
|
style="width: 12px; height: 12px; color: yellow;">
|
|
</ha-icon><span>${entity.state}°C</span>`
|
|
]]]
|
|
cpu: >
|
|
[[[
|
|
return `<ha-icon
|
|
icon="mdi:server"
|
|
style="width: 12px; height: 12px; color: deepskyblue;">
|
|
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
|
|
]]]
|
|
ram: >
|
|
[[[
|
|
return `<ha-icon
|
|
icon="mdi:memory"
|
|
style="width: 12px; height: 12px; color: deepskyblue;">
|
|
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_ram'].state}%</span></span>`
|
|
]]]
|
|
sd: >
|
|
[[[
|
|
return `<ha-icon
|
|
icon="mdi:harddisk"
|
|
style="width: 12px; height: 12px; color: deepskyblue;">
|
|
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>`
|
|
]]]
|
|
#template: button_good
|
|
- type: custom:button-card
|
|
aspect_ratio: 1/1
|
|
custom_fields:
|
|
graph:
|
|
card:
|
|
type: sensor
|
|
entity: '[[[ return entity.entity_id ]]]'
|
|
graph: line
|
|
style: |
|
|
ha-card {
|
|
box-shadow: none;
|
|
}
|
|
picture:
|
|
card:
|
|
type: picture-glance
|
|
camera_image: camera.demo_camera
|
|
entities: []
|
|
camera_view: live
|
|
styles:
|
|
custom_fields:
|
|
graph:
|
|
- filter: opacity(50%)
|
|
- overflow: unset
|
|
card:
|
|
- overflow: unset
|
|
grid:
|
|
- grid-template-areas: '"i" "n" "graph" "picture"'
|
|
- grid-template-columns: 1fr
|
|
- grid-template-rows: 1fr min-content min-content max-content
|
|
|
|
entity: sensor.sensor1
|
|
hold_action:
|
|
action: more-info
|
|
- title: Test decluttering
|
|
cards:
|
|
- type: vertical-stack
|
|
cards:
|
|
- type: custom:decluttering-card
|
|
template: test_default
|
|
variables:
|
|
- entity: switch.skylight
|
|
|
|
- title: Test Templates Parsing
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_label: true
|
|
name: '[[[ return states["switch.skylight"].entity_id ]]]'
|
|
label: |
|
|
[[[ return states['switch.test'] ]]]
|
|
|
|
- type: 'custom:button-card'
|
|
template: test_action_template
|
|
variables:
|
|
test: more-info
|
|
test1: none
|
|
entity: switch.skylight
|
|
|
|
- type: custom:button-card
|
|
name: >
|
|
[[[
|
|
return test.value
|
|
]]]
|
|
|
|
# - type: picture-elements
|
|
# image: '/local/cast.jpg'
|
|
# elements:
|
|
# - type: state-label
|
|
# entity: switch.skylight
|
|
# style:
|
|
# top: 90%
|
|
# left: 20%
|
|
# - type: custom:button-card
|
|
# color_type: blank-card
|
|
# - type: custom:button-card
|
|
# color_type: blank-card
|
|
|
|
- title: Test Config Templates
|
|
cards:
|
|
- type: 'custom:button-card'
|
|
template: test1
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
extra_styles: |
|
|
[[[
|
|
return `ha-card {
|
|
background: ${states['switch.skylight'].state === 'on' ? "blue" : "red"} !important;
|
|
}`
|
|
]]]
|
|
- type: 'custom:button-card'
|
|
extra_styles: |
|
|
[[[
|
|
return `ha-card {
|
|
background: ${states['switch.skylight'].state === 'on' ? "red" : "blue"} !important;
|
|
}`
|
|
]]]
|
|
name: Test
|
|
- type: 'custom:button-card'
|
|
entity: switch.skylight
|
|
show_label: true
|
|
show_icon: false
|
|
show_name: false
|
|
label: >
|
|
[[[
|
|
return states['switch.skylight'].state
|
|
]]]
|
|
aspect_ratio: 16/10
|
|
tap_action:
|
|
action: none
|
|
styles:
|
|
card:
|
|
- color: '#DADADB'
|
|
label:
|
|
- font-size: 6em
|
|
|
|
- type: custom:button-card
|
|
entity: switch.skylight
|
|
state_display: Default state_display
|
|
show_state: true
|
|
state:
|
|
- value: 'on'
|
|
state_display: state[].state_display
|
|
- value: 'off'
|