How do I get a tile to have big icon and text like an entity?

Configuration Frontend
1

I have a tefal raclette I’ve smartified, so now it has a pushbutton to toggle it, it has an LED indicating it’s on, it has a temperature sensor, and of course there is a timer built-in to the ESPHome logic, so it indicates if it’s about to turn off.
The pushbutton is mounted in a 3D printed end plate of course, printed in ABS.
I’ve made a couple of cards to control it from HA, and they work nicely, the only problem is that I would like the tile card to look more like the button card.
I have a button card to turn it on, and a tile card to turn it off, the tile card showing the temperature of the raclette.
My button card

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.raclette_relay
visibility:
  - condition: state
    entity: switch.raclette_relay
    state: "off"

This shows as:

billede
billede235×125 2.94 KB

My tile card:

type: tile
entity: sensor.raclette_temperature
vertical: true
visibility:
  - condition: state
    entity: switch.raclette_relay
    state: "on"
tap_action:
  action: perform-action
  perform_action: switch.turn_off
  target:
    entity_id: switch.raclette_relay
color: red
icon: mdi:grill
name: Raclette
features_position: bottom

This shows like this:

billede
billede235×124 2.53 KB

The raclette is not ‘online’ at the moment, thus it is showing as unavailable here (both buttons are ‘invisible’ at the moment because it’s off line).

I’ve tried using the ‘inspector’ to find out if I can do something with CSS, but so far I don’t have any luck with that.
Does anybody here have a suggestion?

2

What is your final goal?
Do you need a card looking like a button - toggling a switch - and showing a temperature?
If yes - then create a stock Button card with a temperature, set a proper tap-action to toggle a switch.

3

Ah, of course, I can du the same trick with the button, have it show the sensor, but trigger the switch, thankyou, I was staring myself blind at the tile to get it to work :slight_smile:

show_name: false
show_icon: true
type: button
entity: sensor.raclette_temperature
icon: mdi:grill
tap_action:
  action: perform-action
  perform_action: switch.turn_off
  target:
    entity_id: switch.raclette_relay
hold_action:
  action: none
name: Raclette
show_state: true
visibility:
  - condition: state
    entity: switch.raclette_relay
    state: "on"

The only thing I miss here is the icon to turn to the ‘on’ state.

4

Getting closer, I just need the right variable name from the template:

show_name: false
show_icon: true
type: button
entity: sensor.raclette_temperature
icon: mdi:grill
tap_action:
  action: perform-action
  perform_action: switch.turn_off
  target:
    entity_id: switch.raclette_relay
    hold_action:
      action: none
name: Raclette
show_state: true
visibility:
  - condition: state
    entity: switch.raclette_relay
    state: "on"
card_mod:
  style: |
    ha-state-icon {
      color: var(--paper-item-icon-active-color) !important;
      }
5

Done :slight_smile:

show_name: false
show_icon: true
type: button
entity: sensor.raclette_temperature
icon: mdi:grill
tap_action:
  action: perform-action
  perform_action: switch.turn_off
  target:
    entity_id: switch.raclette_relay
    hold_action:
      action: none
name: Raclette
show_state: true
visibility:
  - condition: state
    entity: switch.raclette_relay
    state: "on"
card_mod:
  style: |
    ha-state-icon {
      color: var(--state-switch-active-color) !important;
      }
1 Like