Uptime unit bug.

[Ainndy]

[ngocjohn]

This is not a bug, use helpers to format datetime..
https://github.com/custom-cards/button-card?tab=readme-ov-file#javascript-templates

[Ainndy]

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

[ngocjohn]

Can you show me the state via dev tools template?

[Ainndy]

Can you show me the state via dev tools template?

[ngocjohn]

@Ainndy use correct template ..

{{ states.sensor.uptime.state }}

change with your sensor entity..

[Ainndy]

@Ainndy use correct template ..

{{ states.sensor.uptime.state }}

change with your sensor entity..

My entity is the sensor.water_server_uptime_sensor ..

[ngocjohn]

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 }}

[Ainndy]

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

[ngocjohn]

Ok, so it's not a date time object... how do you have the button-card set?

[Ainndy]

好的，所以它不是一个日期时间对象......你是如何设置按钮卡的？

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%)

[ngocjohn]

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`;
  ]]]

[Ainndy]

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

[Ainndy]

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

[ngocjohn]

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

[Ainndy]

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

[ngocjohn]

square: false
type: grid
cards:

• square: true
  type: grid
  cards:

why? Use single grid to buttons, not grid in grid.

[Mariusthvdb]

@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]

@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...

[Ainndy]

square: false

type: grid

cards:

• square: true

type: grid

cards:

why? Use single grid to buttons, not grid in grid.

Sending configuration codes seems to disturb others😅