Lovelace: Button Text Card

I developed a custom card based on Soft UI: Lovelace Soft UI - Simple and Clean Lovelace Configuration

68747470733a2f2f7361766a65652e6769746875622e696f2f627574746f6e2d746578742d636172642f6c6f676f2e706e67

It’s available on HACS and has many configuration options.

GitHub: https://github.com/Savjee/button-text-card

Feel free to open issues, contribute code or make suggestions for new features :wink:

7 Likes

I tried creating a basic test button with this to toggle a light but I simply gethe below with no tap action working

image

code:

type: 'custom:button-text-card'
title: Dining Lights
icon: 'mdi:lightbulb-multiple'
entity: light.dining_lights
tap_action:
  action: toggle

Where have I gone wrong here? Unfortunately the tap action stuff isn’t documented for this card

Hmm, that looks correct to me. The tap_action should follow the default behaviour. Here’s one that I use (and works):

entity: switch.3d_printer
icon: 'mdi:power'
icon_height: 30px
name: Aan/Uit
show_icon: true
show_name: true
tap_action:
  action: toggle
type: button

Are you sure the entity_id is correct?

The entity_id is definitely correct

@Savjee How do you return state on an specific attribute other than the default state?
As usual, I’m sure it is some little detail.
Tried these and I don’t get a result.

title: |
  [[[ return states["sensor.nws_alerts"].spoken_desc ]]]
title: |
  [[[ return states["sensor.nws_alerts", "spoken_desc"].state ]]]
title: |
  [[[ return states.attribute["sensor.nws_alerts", "spoken_desc"].state ]]]
title: |
  [[[ return states["sensor.nws_alerts", "spoken_desc"].attribute ]]]

There are two ways you can do this.

I recommend defining an entity_id. That way you can use the shorthand entity.state or entity.attributes.XXXX which is a bit shorter:

type: 'custom:button-text-card'
entity: climate.office_ac
hide_condition: |
  [[[ return entity.state === "off" ]]]
subtitle: >
  [[[ return entity.attributes.temperature + '°C']]]
title: AC on

Alternatively, you can use states[xxx] as well:

states["climate.office_ac"].attributes.temperature
1 Like

That did the trick, Thank you @Savjee.

Alert

type: 'custom:button-text-card'
entity: sensor.nws_alerts
hide_condition: |
  [[[ return entity.attributes.spoken_desc === null ]]]
title: ''
subtitle: |
  [[[ return entity.attributes.spoken_desc ]]]
icon_size: 55
icon_color: red
icon: 'mdi:alert'
icon_animation: ''
font_color: black
large: true
background_color: yellow

Some examples that may be useful:

type: 'custom:button-text-card'
title: |
  [[[ return states["sensor.purpleair_description"].state ]]]
subtitle: Air Quaility
icon_size: 55
icon_color: |
  [[[
    if(states["sensor.purpleair_aqi"].state > 300){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 200){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 150){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 100){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 50){
      return 'black';
    } else{
      return 'black';
    }
  ]]]
icon: |
  [[[
    if(states["sensor.purpleair_aqi"].state > 300){
      return 'mdi:emoticon-dead';
    } else if(states["sensor.purpleair_aqi"].state > 200){
      return 'mdi:emoticon-cry';
    } else if(states["sensor.purpleair_aqi"].state > 150){
      return 'mdi:emoticon-sad';
    } else if(states["sensor.purpleair_aqi"].state > 100){
      return 'mdi:emoticon-confused';
    } else if(states["sensor.purpleair_aqi"].state > 50){
      return 'mdi:emoticon-neutral';
    } else{
      return 'mdi:emoticon-excited';
    }
  ]]]
font_color: |
  [[[
    if(states["sensor.purpleair_aqi"].state > 300){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 200){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 150){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 100){
      return 'white';
    } else if(states["sensor.purpleair_aqi"].state > 50){
      return 'black';
    } else{
      return 'black';
    }
  ]]]
large: true
background_color: |
  [[[
    if(states["sensor.purpleair_aqi"].state > 300){
      return '#731425';
    } else if(states["sensor.purpleair_aqi"].state > 200){
      return '#8C1A4B';
    } else if(states["sensor.purpleair_aqi"].state > 150){
      return '#EA3324';
    } else if(states["sensor.purpleair_aqi"].state > 100){
      return '#EF8533';
    } else if(states["sensor.purpleair_aqi"].state > 50){
      return '#FFFF55';
    } else{
      return '#68FF43';
    }
  ]]]

-Good
-Moderate
-USG
-Unhealthy
h1
h2

3 Likes

Hey! Total noob here.

How can I add more condition to hide the card to this code? I want it only to show if the alarm is triggered, which means it needs to stay hidden when it is disarmed/armed_away/armed_home.

type: 'custom:button-text-card'
large: true
entity: alarm_control_panel.alarmo
title: Alarme ligado!
background_color: '#A81419'
font_color: '#fff'
icon: 'mdi:alarm-light'
hide_condition: |
  [[[ return entity.state === "armed_home";"armed_away";"disarmed" ]]]
tap_action:
  action: navigate
  navigation_path: /lovelace/seguranca

There are two ways of doing this.

First, you could hide the card when your alarm is set to armed_home OR armed_away OR disarmed:

hide_condition: |
  [[[ return entity.state === "armed_home" || entity.state === "armed_away" || entity.state === "disarmed" ]]]

Or you could say: hide the card when the alarm is not triggered:

hide_condition: |
  [[[ return entity.state !== "triggered" ]]]
1 Like

Thank you! Now I understand the logic X)

Is it possible also to hide the card with a tap?

Not sure. You could try to configure a tap_action that then turns on an input_boolean:

That input_boolean could then be used as a condition for your card.

1 Like