savjee / button-text-card Goto Github PK

I'm using three of these cards in position 1,2,3. When hidden, sometimes they take up the space and other times not. See below. resizing the window fixes the problem even if you resize it to the original size. The issue is consistent and so is the fix.

Here they take up all three spots and hence a whole column

Same window size just clicked on edit

Appreciatie the work done on this custom card! It looks much better then the default one.
But i can't figure out how to match the custom card with the theme i have setup (ios dark theme).
The area where the text it written, looks blank.

I am trying to match it within an horizantal stack configuration. Any idea what i am doing wrong? or is this option not yet written.

thanks!

I have tried a few things but I can't see to get a template with 'if' statements working. I have tried with the entry and using entry.state. If I remove the template every thing else will display. It is probably something simple, but I could use some guidance. This will also help add another example for you templates.

background_color: |
  [[[
    if (states("sensor.purpleair_aqi") >= 300);{
      return '#731425';
    }else if (states("sensor.purpleair_aqi") >= 200);{
      return '#8C1A4B';
    }else if (states("sensor.purpleair_aqi") >= 150);{
      return '#EA3324';
    }else if (states("sensor.purpleair_aqi") >= 100);{
      return '#EF8533';
    }else if (states("sensor.purpleair_aqi") >= 50);{
      return '#FFFF55'';
    }else{
      return '#68FF43';
    }
  ]]]

Full Card:

type: 'custom:button-text-card'
title: |
  [[[ return states["sensor.purpleair_description"].state ]]]
subtitle: Air Quaility (Work in Progress)
icon: none
large: true
font_color: '#fff'
background_color: |
  [[[
    if(states('sensor.purpleair_aqi') >= 300);{
      return '#731425';
    } else if(states('sensor.purpleair_aqi') >= 200);{
      return '#8C1A4B';
    } else if(states('sensor.purpleair_aqi') >= 150);{
      return '#EA3324';
    } else if(states('sensor.purpleair_aqi') >= 100);{
      return '#EF8533';
    } else if(states('sensor.purpleair_aqi') >= 50);{
      return '#FFFF55';
    } else{
      return '#68FF43';
    }
  ]]]

The current documentation doesn't provide great examples. How come something like this won't work?

subtitle: > 
   [[[
     return 'Current Temp: ' + states.[sensor.master_bedroom_temperature].state;
   ]]]

Thanks for the wonderful plugin, have been using it in all my dashboards now.
Just wondering if it is possible to animate the icons? I tried 'spin: true' but not luck.

Thanks in advance,

I think when you copy chunks of code (without even taking the time to modify it to match your use case) it would be great to give some credits to the people who wrote it initially ;)

Also, why not share templates for button-card with the community instead of creating a whole new card for a specific purpose as I think (but I might be wrong) that everything you are doing can be achieved with button-card?

I know this repo is literally called button-text-card, but I'm interested in a button without any text. This would allow for some more versatility in this custom card, without having to load up a separate card for a plain styled button.

I'm happy to work on this; just wasn't sure if this was something that'd be worthwhile.

Feedback by fitim

Hi!

I've have used this card since the beginning of the year, however it stopped worked a few weeks ago. Not sure when, but I can not get any tap_action to work. My tap actions works fine with the regular button card.

I'm currently on Home Assistant 2021.7.1, but it hasn't worked for the past versions.

type: custom:button-text-card
title: ...
icon: ...
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: ...
    card: !include popup.yaml

Revert back to custom-card-helpers when they fix their getLovelace implementation

Hi there

A feature request, please: As you have for hide_condition, could you add a show_condition.

This would make it much easier to show buttons if something happens.

e.g. a door open/closed pair of buttons. With hide_condition, you need to hide the button for the state opposite of the button's state.

Am I making any sense??!

Hi, I'm seeing - or not seeing in ths case - an issue with your awesome Button Text Card.
When I updated to HA 2023.7, both cards I had setup stopped display anything at all. HA isn't giving me any obvious errors, just what is displayed in the screen shot.
I've updated the button-text-card.js to the lastest version from this repo (Apr 6th) and restarted HA but that didn't t fix it.
Previously I was on HA 2023.3

Home Assistant 2023.7.1
Frontend 20230705.1 - latest

There was a issue/ thread about depressed state earlier in the issues. In general pressed/depressed buttons works nicely inside lovelace vertical stack card, you just define 2 buttons of same size with different colors/ texts and use the visibilty controlling entity in opposite states, the other button is activated whille off and the other while on. Lovelace will draw the button on exactly the same location, because only one can be active at the time.

It works OK with sensors etc. However, I am using a persistent notification to control button visibilty. The problem with persistent notifications is that they exist only when they are active; when deactivated the ebtity does not have any state, because it does not exist. Thus, I cannot use it to control the button visibility in depressed state.

I do not know javascript well (button-text-card does not use jinja, but javascript in templating), so is there a nice way the check inside button-text-card, that does the entity exist and how could i use that to control the visibility?

(Although this question is handling the button depressed state, technically this is a separate issue, so I made a new thread for this)

Hi,
Thank you for you work. I can't figure out how to make the button a button. I see in the source that it handle actions. But I'm totally unsure how to implement any actions on the press of a button.

Currently what I have :
type: custom:button-text-card title: Lights subtitle: Close all. icon: mdi:lightbulb-outline tap_action: action: call-service service: light.turn_off target: entity_id: light.all

Thanks for any insight.

hi i'm trying to use this card, but i get this error

Custom element doesn't exist: button-text-card.

type: 'custom:button-text-card'
title: Only title
icon: 'mdi:format-title'

home-assistant.log

2020-03-19 16:33:17 ERROR (MainThread) [frontend.js.latest.202002205] https://192.168.1.33:8123/hacsfiles/button-text-card/button-text-card.js:271:96 SyntaxError: invalid regular expression flag s
2020-03-19 16:33:18 ERROR (MainThread) [frontend.js.latest.202002205] https://192.168.1.33:8123/frontend_latest/chunk.b5b99c32e8fe08e69155.js:2696:228 TypeError: e.parentElement is null
2020-03-19 16:33:18 ERROR (MainThread) [frontend.js.latest.202002205] https://192.168.1.33:8123/frontend_latest/chunk.b5b99c32e8fe08e69155.js:2696:228 TypeError: e.parentElement is null

resources.yaml

# Button Text Card
  - url: /hacsfiles/button-text-card/button-text-card.js
    type: module

How is it possible to achieve having the same element shadows as the Lovelace Soft UI, which uses this style snippet:

style: |
  ha-card {
      background-color: var(--primary-background-color);
      border-radius: 15px;
      margin: 10px;
      box-shadow: 
        {% if is_state('sun.sun', 'above_horizon') %}
          -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
        {% else %}
          -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
        {% endif %}   
   }    

I am not very familiar with the codes, but I would like to display the optimal room temperature based on a temperature sensor, I used this formula, it works with all operands +, *, / but if I use the - what I need does not work , can someone help me?

[[[ return 'Optimal Room Temperature: ' + states["sensor.temperature"].state - 5; ]]]

I've tried to set the color of an icon by using the following:

icon_color: '[[[ return ''#FF0000'' ]]]'

This template works on the title field, but here on the icon_color, it displays the default color. If I hard code it (e.g. icon_color: '#FF0000'), it shows the color as expected.

As for a fix, my thought is that adding the following line to _configureIconColor() (before the default fall through option) will allow whatever is rendered to pass through. Haven't tested it yet, though.

   if (this._renderedConfig?.icon_color) {
      this.style.setProperty('--icon-color', this._renderedConfig.icon_color);
      return;
    }

When I press the button in the android app I get a weird double vibration.
Is it possible to turn it off for this button?

Hi! Thanks for your module, its great.
Mostly im using it for notify me about some non-good states at my house, for example: bad temperature, unavailable sensors or dead batteries, moistures was on, etc.

Now I want to use this card for notify me to replace ground of my flower, I have a sensor that measure soil quality, it shows at 4-digit (most of time) number at the state (for example "2449" µS/cm)

When I try to add a card-notification with hide condition like is:
hide_condition: |
[[[ return entity.state > "500" ]]]

this does not work, because I try to track 3-digit number, but the state is 4-digit now.
So what bug I have:
If state is 2350 (for examle) and I use THIS numbers for hide condition:
1 - card will shows
3 - card will hide
22 - card will show
24 - card will hide
234 - card will show
236 - card will hide
2349 - card will show
2351 - card will hide.

So how can I use state " > 500" if module thinks the 500 is bigger then 2350, because it will compare only first 3 digits for 3-digit condition?

Thanks for any help.

P.s.: sorry for my english

I'd like to change background_color according to entity_state similar to how we can change the icon.

Hello,
and thanks for the useful card!

It would be very cool to have more flexible styling options, for example to be able to modify size, padding, font sizes, etc. of the card from its configuration options.

I'm a newbie trying to install this but cant find the lovelace.config file.
Can you tell me where this is please?

Love this custom button!

Is it possible to correct the spacing when one button shows for "on" and one for "off"? When the state changes, the spacing is not correct. The "gate is open" button moves down and then the spacing above the red button is too big and below is too small.

for Hacs the [email protected]:Savjee/button-text-card.git isn't working.

using the regular https://github.com/Savjee/button-text-card is working.

Feedback by fitim

It seems fair, as there is already the option to customize font & background color.

Hello!

First: a huge thankyou for providing this awesome card!

Now my issue: If I try to template the spin animation, nothing happens. Using icon_animation: spin works fine. Here's my card config:

type: custom:button-text-card
entity: sensor.systemauslastung
icon: mdi:server-network
font_color: |
  [[[ return (entity.state < 45) ? 'rgb(96, 125, 139)' : 'white' ]]]
background_color: |
  [[[ if (entity.state < 45) return 'white';
      if (45 <= entity.state < 50) return 'orange';
      if (50 <= entity.state < 65) return 'red';
      return 'rgb(168, 20, 25)' ]]]
icon_animation: |
  [[[ return (entity.state > 65) ? 'spin' : 'blink' ]]]

I've tried with

  [[[ return (entity.state > 65) ? 'spin' : ' ' ]]]

  [[[ return (entity.state > 65) ? 'spin' : '' ]]]

  [[[ if (entity.state > 65) return 'spin'; return ' ' ]]]

  [[[ if (entity.state > 65) return 'spin'; return '' ]]]

Any hint is much appreciated.

Core version 2023.0b6
Card version 0.6.2

Using a config example there is nothing shown in the preview.

Also, nothing after saving changes

And nothing after exiting Edit mode

The configuration I used:

type: custom:button-text-card
title: Title
subtitle: Subtitle
icon: mdi:lightbulb-outline

Feedback by fitim

Make it look nice in a horizontal-stack and vertical-stack

Is there a way to change the size of the actual button? Not just the size of the icon inside the button. I'm looking at the https://github.com/custom-cards/button-card which has a style property that allows for changing the dimensions of the actual button.

Configuration error detected:
Custom element not found: button-text-card

As a sudden or after updating to Home Assistant 2022.11.4 I get this error. I deleted the addon, reinstalled it and restarted HA. The error persists. What can I do?

My system runs on RPi4b:
Home Assistant 2022.11.4
Supervisor 2022.10.2
Operating System 9.3
Frontend 20221108.0 - latest