button-card
button-card copied to clipboard
custom-cards
Uptime unit bug.
This is not a bug, use helpers to format datetime..
https://github.com/custom-cards/button-card?tab=readme-ov-file#javascript-templates
This is not a bug, use helpers to format datetime..
https://github.com/custom-cards/button-card?tab=readme-ov-file#javascript-templates
Which one should I choose for this format [* d * h]. thanks
@Ainndy use correct template ..
{{ states.sensor.uptime.state }}
change with your sensor entity..
@Ainndy use correct template ..
{{ states.sensor.uptime.state }}change with your sensor entity..
My entity is the sensor.water_server_uptime_sensor ..
I know, but you have to know what its state shows.. use this in template and send screen..
{{ states.sensor.water_server_uptime_sensor.state }}
I know, but you have to know what its state shows.. use this in template and send screen..
{{ states.sensor.water_server_uptime_sensor.state }}
1.5769
Ok, so it's not a date time object... how do you have the button-card set?
好的，所以它不是一个日期时间对象......你是如何设置按钮卡的？
Ok, so it's not a date time object... how do you have the button-card set?
The entity is esphome uptime, homeassistant supports displaying the day time unit, but the button card does not support displaying it. https://esphome.io/components/sensor/uptime.html
type: custom:button-card entity: sensor.water_server_uptime_sensor color: lightgreen show_icon: false show_name: true show_state: true styles: card: - background-color: lightgreen - border-radius: 18px - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) - width: 80px - height: 30px - padding: 15px - border: none name: - font-size: 11px - color: gray - margin-bottom: "-1px" state: - font-size: 12px - color: black - margin-bottom: "-1px" style: z-index: 3 top: 95% left: 87.5% transform: translate(-50%, -50%)
use this to change the state to format d:h, its just calculated to total whole day and hours..
state_display: >
[[[
let days = entity.state;
const wholeDays = Math.floor(days); // Extract the full days
const hours = Math.round((days - wholeDays) * 24);
return `${wholeDays}d:${hours}h`;
]]]
use this to change the state to format d:h, its just calculated to total whole day and hours..
state_display: > [[[ let days = entity.state; const wholeDays = Math.floor(days); // Extract the full days const hours = Math.round((days - wholeDays) * 24); return `${wholeDays}d:${hours}h`; ]]]
OK, thank you very much
use this to change the state to format d:h, its just calculated to total whole day and hours..
state_display: > [[[ let days = entity.state; const wholeDays = Math.floor(days); // Extract the full days const hours = Math.round((days - wholeDays) * 24); return `${wholeDays}d:${hours}h`; ]]]
Hello, how to make a single button and three buttons in a grid card have the same height?
type: horizontal-stack
cards:
- square: true
type: grid
cards:
- type: custom:button-card
name: Living Room
icon: mdi:sofa
entity: sensor.wi_fizhi_neng_yao_kong_temperature
show_state: true
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
entity: switch.water_server_ring_switch
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
entity: switch.water_server_ring_switch
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
entity: switch.water_server_ring_switch
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr;
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- fonr-size: 18px
- font-weight: 500
- color: black
icon:
- justify-self: start
- align-self: start
- fonr-size: 14px
- opacity: "0.6"
state:
- min-height: 80px
- justify-self: start
- align-self: start
- fonr-size: 14px
img_cell:
- justify-content: start
- position: absolute
- width: 130px
- height: 130px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: red
- border-radius: 500px
- type: custom:button-card
name: Living Room
icon: mdi:sofa
entity: sensor.wi_fizhi_neng_yao_kong_temperature
show_state: true
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr;
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- fonr-size: 18px
- font-weight: 500
- color: black
icon:
- justify-self: start
- align-self: start
- fonr-size: 14px
- opacity: "0.6"
state:
- min-height: 80px
- justify-self: start
- align-self: start
- fonr-size: 14px
img_cell:
- justify-content: start
- position: absolute
- width: 130px
- height: 130px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: red
- border-radius: 500px
columns: 2
Remove the horizontal-stack, put buttons to grid?
square: false
type: grid
cards:
- type: custom:button-card
entity: sun.sun
- type: custom:button-card
entity: sun.sun
columns: 2
sun.sun
square: false
type: grid
cards:
- square: true
type: grid
cards:
- type: custom:button-card
name: Living Room
icon: mdi:sofa
entity: sun.sun
show_state: true
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
entity: sun.sun
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
entity: sun.sun
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
entity: sun.sun
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr;
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- fonr-size: 18px
- font-weight: 500
- color: black
icon:
- justify-self: start
- align-self: start
- fonr-size: 14px
- opacity: "0.6"
state:
- min-height: 80px
- justify-self: start
- align-self: start
- fonr-size: 14px
img_cell:
- justify-content: start
- position: absolute
- width: 130px
- height: 130px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: red
- border-radius: 500px
- type: custom:button-card
name: Living Room
icon: mdi:sofa
entity: sun.sun
show_state: true
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
icon: mdi:lamp
show_name: false
show_state: false
styles:
card:
- width: 36px
- height: 36px
- border-radius: 50%
- background-color: red
- display: flex
- justify-content: center
- align-items: center
icon:
- width: 18px
- height: 18px
styles:
grid:
- grid-template-areas: "\"n btn\" \"s btn\" \"i btn\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr;
card:
- padding: 22px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- fonr-size: 18px
- font-weight: 500
- color: black
icon:
- justify-self: start
- align-self: start
- fonr-size: 14px
- opacity: "0.6"
state:
- min-height: 80px
- justify-self: start
- align-self: start
- fonr-size: 14px
img_cell:
- justify-content: start
- position: absolute
- width: 130px
- height: 130px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: red
- border-radius: 500px
columns: 2
square: false type: grid cards:
- square: true type: grid cards:
why? Use single grid to buttons, not grid in grid.
@Ainndy please dont use this issue on the uptime 'bug', for asking non related config questions about nested cards....
lets keep this tidy (we all get notified) and hop over to the community for help on config questions
o and if you do, dont post these huge configs, just the minimal section you see an issue/have question about
@Ainndy please dont use this issue on the uptime 'bug', for asking non related config questions about nested cards....
lets keep this tidy (we all get notified) and hop over to the community for help on config questions
o and if you do, dont post these huge configs, just the minimal section you see an issue/have question about
Sorry, ok...
square: false
type: grid
cards:
- square: true
type: gridcards:why? Use single grid to buttons, not grid in grid.
Sending configuration codes seems to disturb others😅
