How can I create a card that is button size with large temperature reading without an icon?

Configuration Frontend
1

How can I create a card that is button size with large temperature reading without an icon? After doing a web search the only example that I could find is a sensor widget in AppDaemon Dashboard for Home Assistant.

It is found here but I am not interested in using AppDaemon. How can I customize a button to look the same in Lovelace? I have HassOS 3.10 and Home Assistant 0.105.4 on a RPi4

2

I created one to emulate the Tado icons in the app.

I use lovelace gen and layout card grid to load this and position it.

# lovelace_gen
type: custom:button-card
gridcol: {{grid_x|default('1/1')}}
gridrow: {{grid_y|default('1/1')}}
style: |
  ha-card {
    border-radius: 10px;
  }
aspect_ratio: 1/1
show_icon: false
show_name: true
show_label: true
show_state: false
icon: mdi:door-closed


custom_fields:
  current_temperature: >
    [[[
      return states['{{entity_primary}}'].attributes.current_temperature + '°';
    ]]]
styles:
  grid:
    - position: relative
  card:
    - width: 172px
    - height: 172px
    - background: >
        [[[
          if (states['{{entity_primary}}'].state == "off")
            return "radial-gradient(circle farthest-side at left top, rgba(159, 179, 194, 0.8), rgba(159, 179, 194, 0.5)), rgb(104, 131, 150)";
          if (states['{{entity_primary}}'].attributes.temperature < states['{{entity_primary}}'].attributes.current_temperature)
            return "radial-gradient(circle farthest-side at left top, rgba(68, 198, 120, 0.8), rgba(68, 198, 120, 0.5)), rgb(23, 171, 105)";
          return "radial-gradient(circle farthest-side at left top, rgba(255, 186, 0, 0.8), rgba(255, 186, 0, 0.5)), rgb(255, 153, 0)";
        ]]]
  name:
    - justify-self: start
    - font-size: 14px
    - font-weight: bold
    - padding: 135px 0px 0px 15px
    - color: white
    - font-family: Helvetica Neue,Arial,sans-serif
    - font-weight: 700
    
  label:
    - justify-self: start
    - font-size: 12px
    - padding: 1px 0px 3px 15px
    - color: white
    - font-weight: 500

    - font-family: Helvetica Neue,Arial,sans-serif

  custom_fields:
    current_temperature:
      - position: absolute
      - left: 15px
      - top: 28%
      - font-size: 45px
      - font-weight: 800
      - color: white
      - font-family: Helvetica Neue,Arial,sans-serif
entity: {{entity_primary}}
tap_action:
  action: toggle
state:
  - operator: template
    value: states.climate.clim_salon.attributes.fan_mode == '5'
    styles:
      icon:
        - color: green
  - value: "on"
    color: rgb(110,235,15)
  - value: "off"
    color: var(--button-off-color)
  - value: "unavailable"
    color: rgba(0,0,0,1)
label: >
        [[[
          if (states['{{entity_primary}}'].state == "heat" && (states['{{entity_primary}}'].attributes.temperature < states['{{entity_primary}}'].attributes.current_temperature))
            return 'Set to ' + states['{{entity_primary}}'].attributes.temperature;
          if (states['{{entity_primary}}'].state == "heat" && (states['{{entity_primary}}'].attributes.temperature > states['{{entity_primary}}'].attributes.current_temperature))
            return 'Heating to ' + states['{{entity_primary}}'].attributes.temperature;
          if (states['{{entity_primary}}'].state == "auto" && (states['{{entity_primary}}'].attributes.temperature < states['{{entity_primary}}'].attributes.current_temperature))
            return 'Set to ' + states['{{entity_primary}}'].attributes.temperature;
          if (states['{{entity_primary}}'].state == "auto" && (states['{{entity_primary}}'].attributes.temperature > states['{{entity_primary}}'].attributes.current_temperature))
            return 'Heating to ' + states['{{entity_primary}}'].attributes.temperature;
          return "Frost Protection";
        ]]]

Hope it helps?

Annotation 2020-02-17 013936

1 Like