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:

11 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

6 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

Just wanted to give you a heads up, I love your button text card. It’s really practical and simple to use while still being very beautiful. Great work!

I am looking to do the exact same thing as you. I’d like to change features based on the attribute “title”. Can you tell me what I am doing wrong with my icon color? Thank you!

type: 'custom:button-text-card'
entity: sensor.nws_alerts
icon: mdi:weather-cloudy
title: ''
subtitle: | 
 [[[ return entity.attributes.title ]]]
icon_color: |
  [[[
    if(states["sensor.nws_alerts"].attributes.title  == Flood Watch){
      return 'red';
    } else{
      return 'black';
    }
  ]]]

1st thing I see is that your indentions are not the same: under subtitle and icon_color should be the same indention.
ahh… Flood Watch should be in quotes ‘Flood Watch’
Need to make sure that that is the actual title that comes across for an actual Flood Watch

1 Like

As @GlennHA mentioned, wrap Flood Watch in quotes.
That should do it (if your sensor has a title attribute):

type: "custom:button-text-card"
entity: sensor.nws_alerts
icon: mdi:weather-cloudy
title: ""
subtitle: | 
   [[[ return entity.attributes.title ]]]
icon_color: |
   [[[
      if(states["sensor.nws_alerts"].attributes.title  == "Flood Watch"){
         return "red";
      } else{
         return "black";
      }
   ]]]
1 Like

Thank you!