Hi I managed to create a custom button card and a popup card button from Xiaomi
function:
- click
- double click
- hold click
- led point control unavailable xiaomi button (at least i think it’s well written, you can check and let me know)
Background image:
FIX module:
in vertical-stack-in-card.js
edit border radius: add //
// ele.style.borderRadius = '0';
sensor._action:
title: Zádverie (Tlačidlo Opple)
card:
type: custom:vertical-stack-in-card
style: |
ha-card {
background: center url('/local/img/background/six_button_opple.jpg');
background-size: 100%;
padding:12.3%;
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 1/1.5
tap_action:
action: none
entity: light.
show_name: false
show_state: false
show_icon: false
styles:
grid:
- position: relative
card:
- background-color: rgb(239, 239, 239)
- border-bottom-left-radius: 0px
- border-bottom-right-radius: 0px
- border-top-left-radius: 3px
- border-top-right-radius: 3px
- margin: 0px
- border-right: 0.15em solid rgb(74, 74, 74)
custom_fields:
button-color:
- position: absolute
- right: 50%
- top: 50%
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
color_type: card
tap_action:
action: none
entity: light.light_group_light
show_name: false
show_state: false
show_icon: false
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
styles:
card:
- display: inline-block
- width: 20px
- height: 20px
- border-radius: 50%
- border-style: solid
- border-width: 2px
- border-color: gray
- background-color: rgba(0, 0, 0, 0)
- position: absolute
- box-shadow: 0 0 0 0
- transform: translate(-50%, -50%)
- type: custom:button-card
aspect_ratio: 1/1.5
tap_action:
action: toggle
double_tap_action:
action: call-service
confirmation:
text: Kde sa nachádza vysávač?
service: script.button_vacuum_locate
hold_action:
action: call-service
confirmation:
text: Naspäť do doku?
service: script.button_vacuum_dock
entity: script.1626236977449
icon: bha:vacuum
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgb(239, 239, 239)
- border-bottom-left-radius: 0px
- border-bottom-right-radius: 0px
- border-top-left-radius: 3px
- border-top-right-radius: 3px
- margin: 0px
- border-right: 0.15em solid rgb(74, 74, 74)
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
- type: custom:button-card
aspect_ratio: 1/1.5
tap_action:
action: toggle
entity: light.
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgb(239, 239, 239)
- border-bottom-left-radius: 0px
- border-bottom-right-radius: 0px
- border-top-left-radius: 3px
- border-top-right-radius: 3px
- margin: 0px
custom_fields:
button-color:
- position: absolute
- right: 15%
- top: 12%
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
style: |
ha-card {
background-color: {{ 'gray' if is_state('sensor._action', 'unavailable') else 'blue' }};
}
tap_action:
action: more-info
entity: sensor._action
show_name: false
show_state: false
show_icon: false
styles:
card:
- width: 5px
- height: 5px
- border-radius: 50%
- box-shadow: 0 0 0 0
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 1/1.5
tap_action:
action: none
entity: light.
show_name: false
show_state: false
show_icon: false
styles:
grid:
- position: relative
card:
- background-color: rgb(239, 239, 239)
- border-bottom-left-radius: 3px
- border-bottom-right-radius: 3px
- border-top-left-radius: 0px
- border-top-right-radius: 0px
- margin: 0px
- border-right: 0.15em solid rgb(74, 74, 74)
custom_fields:
button-color:
- position: absolute
- right: 50%
- top: 50%
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
color_type: card
tap_action:
action: none
entity: light.light_group_light
show_name: false
show_state: false
show_icon: false
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
styles:
card:
- display: inline-block
- width: 20px
- height: 20px
- border-radius: 50%
- border-style: solid
- border-width: 2px
- border-color: gray
- background-color: rgba(0, 0, 0, 0)
- position: absolute
- box-shadow: 0 0 0 0
- transform: translate(-50%, -50%)
- type: custom:button-card
aspect_ratio: 1/1.5
tap_action:
action: none
entity: light.
show_name: false
show_state: false
show_icon: false
styles:
grid:
- position: relative
card:
- background-color: rgb(239, 239, 239)
- border-bottom-left-radius: 3px
- border-bottom-right-radius: 3px
- border-top-left-radius: 0px
- border-top-right-radius: 0px
- margin: 0px
- border-right: 0.15em solid rgb(74, 74, 74)
custom_fields:
button-color:
- position: absolute
- right: 50%
- top: 50%
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
color_type: card
tap_action:
action: none
entity: light.light_group_light
show_name: false
show_state: false
show_icon: false
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
styles:
card:
- display: inline-block
- width: 20px
- height: 20px
- border-radius: 50%
- border-style: solid
- border-width: 2px
- border-color: gray
- background-color: rgba(0, 0, 0, 0)
- position: absolute
- box-shadow: 0 0 0 0
- transform: translate(-50%, -50%)
- type: custom:button-card
aspect_ratio: 1/1.5
tap_action:
action: toggle
entity: switch.
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgb(239, 239, 239)
- border-bottom-left-radius: 3px
- border-bottom-right-radius: 3px
- border-top-left-radius: 0px
- border-top-right-radius: 0px
- margin: 0px
state:
- value: 'off'
color: gray
- value: 'on'
color: rgb(17, 237, 1)
ANOTHER PROJEKT SHARE:
Tuya Scene Switch 4 button
Xiaomi Mesh Smart Wall Switch
