Hi I managed to create a custom button card and a popup card button from Tuya
function:
- click
- double click
- hold click
Background image:
FIX module:
in vertical-stack-in-card.js
edit border radius: add //
// ele.style.borderRadius = '0';
popup_cards:
sensor._action:
title: Obývacia izba (Tlačidlo Tuya 4)
card:
type: custom:vertical-stack-in-card
style: |
.type-custom-vertical-stack-in-card {
background: center url('/local/img/background/tuya_scene_switch.jpg');
background-size: 100%;
padding: 3.9% 3.8%;
aspect-ratio: 1/1.037;
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 1/1
tap_action:
action: toggle
entity: light.
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgb(241, 241, 241)
- border-radius: 20px 0px 0px
- border-right: 0.05em solid rgb(150, 150, 150)
- border-bottom: 0.05em solid rgb(150, 150, 150)
custom_fields:
button-color:
- position: absolute
- margin-left: '-35px'
- margin-right: auto
- left: 50%
- bottom: '-8px'
state:
- value: 'off'
color: rgb(190, 190, 190)
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
style: |
ha-card {
background-image: {{ 'radial-gradient( rgb(160, 255, 153), rgb(17, 237, 1) )' if is_state('light.', 'on') else 'radial-gradient( rgb(220, 220, 220), rgb(200, 200, 200) )' }};
}
color_type: card
tap_action:
action: toggle
entity: light.
show_name: false
show_state: false
show_icon: false
styles:
card:
- width: 70px
- height: 5px
- border-radius: 0px
- box-shadow: 0 0 0 0
- type: custom:button-card
aspect_ratio: 1/1
tap_action:
action: toggle
entity: light.
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgb(241, 241, 241)
- border-bottom-left-radius: 0px
- border-bottom-right-radius: 0px
- border-top-left-radius: 0px
- border-top-right-radius: 20px
- border-bottom: 0.05em solid rgb(150, 150, 150)
custom_fields:
button-color:
- position: absolute
- margin-left: '-35px'
- margin-right: auto
- left: 50%
- bottom: '-8px'
state:
- value: 'off'
color: rgb(190, 190, 190)
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
style: |
ha-card {
background-image: {{ 'radial-gradient( rgb(160, 255, 153), rgb(17, 237, 1) )' if is_state('light.', 'on') else 'radial-gradient( rgb(220, 220, 220), rgb(200, 200, 200) )' }};
}
color_type: card
tap_action:
action: toggle
entity: light.
show_name: false
show_state: false
show_icon: false
styles:
card:
- width: 70px
- height: 5px
- border-radius: 0px
- box-shadow: 0 0 0 0
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 1/1
tap_action:
action: toggle
entity: light._light
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgb(241, 241, 241)
- border-bottom-left-radius: 20px
- border-bottom-right-radius: 0px
- border-top-left-radius: 0px
- border-top-right-radius: 0px
- border-right: 0.05em solid rgb(150, 150, 150)
custom_fields:
button-color:
- position: absolute
- margin-left: '-35px'
- margin-right: auto
- left: 50%
- bottom: '-8px'
state:
- value: 'off'
color: rgb(190, 190, 190)
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
style: |
ha-card {
background-image: {{ 'radial-gradient( rgb(160, 255, 153), rgb(17, 237, 1) )' if is_state('light._light', 'on') else 'radial-gradient( rgb(220, 220, 220), rgb(200, 200, 200) )' }};
}
color_type: card
tap_action:
action: toggle
entity: light._light
show_name: false
show_state: false
show_icon: false
styles:
card:
- width: 70px
- height: 5px
- border-radius: 0px
- box-shadow: 0 0 0 0
- type: custom:button-card
aspect_ratio: 1/1
tap_action:
action: toggle
double_tap_action:
action: call-service
confirmation:
text: prepne na TV-BOX
service: script.tv_source_change
hold_action:
action: call-service
confirmation:
text: Prepne na Magio-Box
service: script.tv_source_change_up
entity: script.tv_on_off_media_center
show_name: false
show_state: false
styles:
grid:
- position: relative
card:
- background-color: rgb(241, 241, 241)
- border-bottom-left-radius: 0px
- border-bottom-right-radius: 20px
- border-top-left-radius: 0px
- border-top-right-radius: 0px
custom_fields:
button-color:
- position: absolute
- margin-left: '-35px'
- margin-right: auto
- left: 50%
- bottom: '-8px'
state:
- value: 'off'
color: rgb(190, 190, 190)
- value: 'on'
color: rgb(17, 237, 1)
custom_fields:
button-color:
card:
type: custom:button-card
style: |
ha-card {
background-image: {{ 'radial-gradient( rgb(160, 255, 153), rgb(17, 237, 1) )' if is_state('script.tv_on_off_media_center', 'on') else 'radial-gradient( rgb(220, 220, 220), rgb(200, 200, 200) )' }};
}
color_type: card
tap_action:
action: toggle
entity: script.tv_on_off_media_center
show_name: false
show_state: false
show_icon: false
styles:
card:
- width: 70px
- height: 5px
- border-radius: 0px
- box-shadow: 0 0 0 0
columns: 2
ANOTHER PROJEKT SHARE:
Xiaomi Aqara Opple six button
Xiaomi Mesh Smart Wall Switch