With the help of ChatGPT I created a tree moisture level card. The layout is good, but tap action does not work on each card. Is there a better solution?
type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
card:
- border-radius: 22px
- padding: 18px 14px 18px 14px
- background: "#ffffff"
- box-shadow: 0 4px 10px rgba(0,0,0,0.12)
grid:
- grid-template-areas: |
"title title title"
"left divider right"
- grid-template-columns: 1fr 1px 1fr
- grid-template-rows: min-content 1fr
custom_fields:
title:
- justify-self: center
- align-self: center
- font-size: 14px
- font-weight: 500
- color: "#555"
- padding-bottom: 20px
left:
- justify-self: center
- align-self: center
- width: 100%
right:
- justify-self: center
- align-self: center
- width: 100%
divider:
- justify-self: center
- align-self: center
- width: 1px
- height: 90px
- background: "#b8b8b8"
- border-radius: 999px
custom_fields:
title: Tree Moisture
divider: ""
left: |
[[[
const state = states['sensor.trees_monitor_1_moisture_state']?.state ?? 'Unknown';
const voltage = states['sensor.trees_monitor_input_1']?.state ?? '--';
let icon = 'mdi:help-circle';
let color = '#888';
if (state === 'Dry') {
icon = 'mdi:water-remove';
color = '#d9534f';
} else if (state === 'Moist') {
icon = 'mdi:water-percent';
color = '#f0ad4e';
} else if (state === 'Wet') {
icon = 'mdi:water-check';
color = '#28a745';
}
return `
<div style="text-align:center;">
<ha-icon icon="${icon}" style="width:36px;height:36px;color:${color};"></ha-icon>
<div style="font-size:18px;font-weight:600;color:${color};margin-top:4px;line-height:1.2;">
${state}
</div>
<div style="width:28px;border-top:2px solid #cfcfcf;margin:8px auto;"></div>
<div style="font-size:12px;color:#666;line-height:1.2;">
${voltage} V
</div>
<div style="font-size:11px;color:#999;margin-top:6px;line-height:1.2;">
Tap for chart
</div>
</div>
`;
]]]
right: |
[[[
const state = states['sensor.trees_monitor_2_moisture_state']?.state ?? 'Unknown';
const voltage = states['sensor.trees_monitor_input_2']?.state ?? '--';
let icon = 'mdi:help-circle';
let color = '#888';
if (state === 'Dry') {
icon = 'mdi:water-remove';
color = '#d9534f';
} else if (state === 'Moist') {
icon = 'mdi:water-percent';
color = '#f0ad4e';
} else if (state === 'Wet') {
icon = 'mdi:water-check';
color = '#28a745';
}
return `
<div style="text-align:center;">
<ha-icon icon="${icon}" style="width:36px;height:36px;color:${color};"></ha-icon>
<div style="font-size:18px;font-weight:600;color:${color};margin-top:4px;line-height:1.2;">
${state}
</div>
<div style="width:28px;border-top:2px solid #cfcfcf;margin:8px auto;"></div>
<div style="font-size:12px;color:#666;line-height:1.2;">
${voltage} V
</div>
<div style="font-size:11px;color:#999;margin-top:6px;line-height:1.2;">
Tap for chart
</div>
</div>
`;
]]]
tap_action:
action: none
This code works, but the vertical divider does not display correctly.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:button-card
name: Tree Moisture
show_name: true
show_icon: false
show_state: false
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- padding: 10px 0 8px 0
name:
- justify-self: center
- align-self: center
- text-align: center
- font-size: 14px
- font-weight: 500
- color: "#555"
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.trees_monitor_input_1
show_icon: false
show_name: false
show_state: false
tap_action:
action: more-info
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- border-right: 1px solid #55555533
- border-radius: 0
- padding: 0
- margin: 0
- height: 120px
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
custom_fields:
content:
- justify-self: center
- align-self: center
- text-align: center
custom_fields:
content: |
[[[
const state = states['sensor.trees_monitor_1_moisture_state']?.state ?? 'Unknown';
const voltage = states['sensor.trees_monitor_input_1']?.state ?? '--';
let icon = 'mdi:help-circle';
let color = '#888';
if (state === 'Dry') {
icon = 'mdi:water-remove';
color = '#d9534f';
} else if (state === 'Moist') {
icon = 'mdi:water-percent';
color = '#f0ad4e';
} else if (state === 'Wet') {
icon = 'mdi:water-check';
color = '#28a745';
}
return `
<div style="text-align:center;">
<ha-icon icon="${icon}" style="width:36px;height:36px;color:${color};"></ha-icon>
<div style="font-size:18px;font-weight:600;color:${color};margin-top:4px;line-height:1.2;">
${state}
</div>
<div style="width:28px;border-top:2px solid #ccc;margin:8px auto;"></div>
<div style="font-size:12px;color:#666;line-height:1.2;">
${voltage} V
</div>
<div style="font-size:11px;color:#999;margin-top:10px;line-height:1.2;">
Tap for chart
</div>
</div>
`;
]]]
- type: custom:button-card
entity: sensor.trees_monitor_input_2
show_icon: false
show_name: false
show_state: false
tap_action:
action: more-info
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- border-radius: 0
- padding: 0
- margin: 0
- height: 120px
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
custom_fields:
content:
- justify-self: center
- align-self: center
- text-align: center
custom_fields:
content: |
[[[
const state = states['sensor.trees_monitor_2_moisture_state']?.state ?? 'Unknown';
const voltage = states['sensor.trees_monitor_input_2']?.state ?? '--';
let icon = 'mdi:help-circle';
let color = '#888';
if (state === 'Dry') {
icon = 'mdi:water-remove';
color = '#d9534f';
} else if (state === 'Moist') {
icon = 'mdi:water-percent';
color = '#f0ad4e';
} else if (state === 'Wet') {
icon = 'mdi:water-check';
color = '#28a745';
}
return `
<div style="text-align:center;">
<ha-icon icon="${icon}" style="width:36px;height:36px;color:${color};"></ha-icon>
<div style="font-size:18px;font-weight:600;color:${color};margin-top:4px;line-height:1.2;">
${state}
</div>
<div style="width:28px;border-top:2px solid #ccc;margin:8px auto;"></div>
<div style="font-size:12px;color:#666;line-height:1.2;">
${voltage} V
</div>
<div style="font-size:11px;color:#999;margin-top:10px;line-height:1.2;">
Tap for chart
</div>
</div>
`;
]]]
card_mod:
style: |
ha-card {
border-radius: 22px;
padding: 18px 14px 18px 14px;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
overflow: hidden;
}
Found a solution myself, if anyone is interested. I just added another custom button card between the sensors.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:button-card
name: Tree Moisture Levels
show_name: true
show_icon: false
show_state: false
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- padding: 10px 0 10px 0
name:
- justify-self: center
- align-self: center
- text-align: center
- font-size: 14px
- font-weight: 0
- color: "#555"
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.trees_monitor_input_1
show_icon: false
show_name: false
show_state: false
tap_action:
action: more-info
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- border-right: none
- border-radius: 0
- padding: 0
- margin: 0
- height: 120px
grid:
- grid-template-areas: "\"content\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr
custom_fields:
content:
- justify-self: center
- align-self: center
- text-align: center
custom_fields:
content: |
[[[
const state = states['sensor.trees_monitor_1_moisture_state']?.state ?? 'Unknown';
const voltage = states['sensor.trees_monitor_input_1']?.state ?? '--';
let icon = 'mdi:help-circle';
let color = '#888';
if (state === 'Dry') {
icon = 'mdi:water-remove';
color = '#d9534f';
} else if (state === 'Moist') {
icon = 'mdi:water-percent';
color = '#f0ad4e';
} else if (state === 'Wet') {
icon = 'mdi:water-check';
color = '#28a745';
}
return `
<div style="text-align:center;">
<ha-icon icon="${icon}" style="width:36px;height:36px;color:${color};"></ha-icon>
<div style="font-size:18px;font-weight:600;color:${color};margin-top:4px;line-height:1.2;">
${state}
</div>
<div style="width:28px;border-top:1px solid rgba(0,0,0,0.12);margin:8px auto;"></div>
<div style="font-size:12px;color:#666;line-height:1.2;">
${voltage} V
</div>
</div>
`;
]]]
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- border-right: 1px solid rgba(0,0,0,0.12)
- border-radius: 0
- padding: 0
- width: 3px
- height: 90px
- margin-top: 15px
- margin-bottom: 15px
- type: custom:button-card
entity: sensor.trees_monitor_input_2
show_icon: false
show_name: false
show_state: false
tap_action:
action: more-info
styles:
card:
- background: transparent
- box-shadow: none
- border: none
- border-radius: 0
- padding: 0
- margin: 0
- height: 120px
grid:
- grid-template-areas: "\"content\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr
custom_fields:
content:
- justify-self: center
- align-self: center
- text-align: center
custom_fields:
content: |
[[[
const state = states['sensor.trees_monitor_2_moisture_state']?.state ?? 'Unknown';
const voltage = states['sensor.trees_monitor_input_2']?.state ?? '--';
let icon = 'mdi:help-circle';
let color = '#888';
if (state === 'Dry') {
icon = 'mdi:water-remove';
color = '#d9534f';
} else if (state === 'Moist') {
icon = 'mdi:water-percent';
color = '#f0ad4e';
} else if (state === 'Wet') {
icon = 'mdi:water-check';
color = '#28a745';
}
return `
<div style="text-align:center;">
<ha-icon icon="${icon}" style="width:36px;height:36px;color:${color};"></ha-icon>
<div style="font-size:18px;font-weight:600;color:${color};margin-top:4px;line-height:1.2;">
${state}
</div>
<div style="width:28px;border-top:1px solid rgba(0,0,0,0.12);margin:8px auto;"></div>
<div style="font-size:12px;color:#666;line-height:1.2;">
${voltage} V
</div>
</div>
`;
]]]
card_mod:
style: |
ha-card {
border-radius: 22px;
padding: 18px 14px 18px 14px;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
overflow: hidden;
}
