[Help] Needed - Button card Customization (Solar Panel)

Configuration Frontend
1

Hi all,

Can someone help me out here :slight_smile: (looks like chatgpt is not doing it’s magic)
Have created below button for my Solar Panel Heater.

image
image118×111 1.94 KB

Trying to use custom-button to add solar panel water temperature sensor on the top right on the button.

type: custom:button-card
entity: switch.painel_solar_s1pm_fev25_switch_0
name: Painel Solar
icon: mdi:solar-power
show_state: true
show_label: true
tap_action:
  action: toggle
hold_action:
  action: call-service
  service: script.start_timer_and_turn_on_solar_switch
double_tap_action:
  action: more-info
custom_fields:
  temp: >
    [[[
      let temp = states['sensor.painel_solar_s1pm_fev25_temperature'].state;
      let tempNum = parseFloat(temp);
      let tempColor = tempNum <= 15 ? 'blue' : tempNum >= 60 ? 'red' : 'orange';
      return `<div style="display:flex; align-items:center; gap:2px;">
                <ha-icon icon="mdi:thermometer" style="color:${tempColor}; width:12px; height:12px;"></ha-icon>
                <span style="color:${tempColor}; font-size:12px; font-weight:bold;">${temp}°C</span>
              </div>`;
    ]]]
aspect_ratio: 1/1
styles:
  card:
    - width: 150px
    - height: 130px
    - border-radius: 12px
    - padding: 10px
    - background: 'rgba(30, 30, 30, 0.8)'  # Dark background
    - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3)
  grid:
    - grid-template-areas: "'i i' 'n n ' 'i i'"
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
      - position: absolute
      - top: 5px
      - right: 5px
      - display: flex
      - align-items: end
      - gap: 2px
  icon:
    - color: >
        [[[
          return entity.state === 'on' ? '#FF5722' : 'grey';
        ]]]
    - align-self: start
    - justify-self: start
    - position: absolute
    - width: 120%
    - height: 100px
  name:
    - font-size: 13px
    - color: white
    - font-weight: bold
    - align-self: middle
    - justify-self: middle    
  state:
    - font-size: 11px
    - color: white
label: >
  [[[
    let power = states['sensor.painel_solar_s1pm_fev25_switch_0_power'].state;
    return entity.state === 'on' ? `ON | ${power} W` : `OFF | ${power} W`;
  ]]]

image
image148×140 3.02 KB

Believe is just some grid settings that I’m missing.

Thank you.

2

Aer you trying to make it look like something similar to this?

image
image290×248 7.14 KB

3

Exactly!
That’s we the goal

4

Start with this

type: custom:button-card
entity: switch.painel_solar_s1pm_fev25_switch_0
name: Painel Solar
icon: mdi:solar-power
show_state: true
show_label: true
tap_action:
  action: toggle
hold_action:
  action: call-service
  service: script.start_timer_and_turn_on_solar_switch
double_tap_action:
  action: more-info
custom_fields:
  temp: |
    [[[
      let temp = states['sensor.painel_solar_s1pm_fev25_temperature'].state;
      let tempNum = parseFloat(temp);
      let tempColor = tempNum <= 15 ? 'blue' : tempNum >= 60 ? 'red' : 'orange';
      return `<div style="display:flex; align-items:center; gap:2px;">
                <ha-icon icon="mdi:thermometer" style="color:${tempColor}; width:12px; height:12px;"></ha-icon>
                <span style="color:${tempColor}; font-size:12px; font-weight:bold;">${temp}°C</span>
              </div>`;
    ]]]
styles:
  card:
    - width: 150px
    - height: 130px
    - border-radius: 12px
    - padding: 10px
    - background: rgba(30, 30, 30, 0.8)
    - box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3)
  img_cell:
    - justify-content: start
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
      - position: absolute
      - top: 15px
      - right: 5px
      - display: flex
      - align-items: end
      - gap: 2px
  icon:
    - color: |
        [[[
          return entity.state === 'on' ? '#FF5722' : 'grey';
        ]]]
  name:
    - font-size: 13px
    - color: white
    - align-self: middle
    - justify-self: middle
  state:
    - font-size: 11px
    - color: yellow
label: >
  [[[
    let power = states['sensor.painel_solar_s1pm_fev25_switch_0_power'].state;
    return entity.state === 'on' ? `ON | ${power} W` : `OFF | ${power} W`;
  ]]]
1 Like
5

You Rullez! Thank you so much. You make it look so easy :slight_smile: