Fun with custom:button-card

crankycowboy · June 6, 2023, 7:10pm

I’m working on a very simple grid setup using a combination of different cards with the custom:button-card and I’m having problems with the icon “disappearing” if I add styling. My custom button cards are shorter than my other cards (whether I choose “render cards as squares” or not. If I choose to render as squares, and then change the aspect ratio of the custom button card to 1/1 it changes the button to the right size, but the icon disappears. I’ve played with icon sizes etc and just can’t get it. I can manipulate the size of the card by making the icon bigger (with aspect_ratio off) but then the size of my icon doesn’t match my other cards. Right now I’m only messing with the “motion” card and will apply to the others once I have a solution. Any suggestions? Thank you!

show_name: true
show_icon: true
type: custom:button-card
show_state: false
show_label: true
size: 60%
aspect_ratio: 1/1
name: Motion
icon: mdi:motion-play-outline
entity: automation.garage_motion_lights
label: |
  [[[
    if (states['automation.garage_motion_lights'].state === "on")
      return "Enabled";
    else if (states['automation.garage_motion_lights'].state === "off")
      return "Disabled";
  ]]]
tap_action:
  action: toggle
styles:
  grid:
    - grid-template-areas: '"n" "i" "l"'
      font-size: 12px
state:
  - value: 'off'
    color: yellow
    icon: mdi:motion-sensor-off
    styles:
      icon:
        - animation: blink 2s ease infinite
  - value: 'on'
    color: steelblue
    icon: mdi:motion-sensor

without Aspect Ratio turned on:

show_name: true
show_icon: true
type: custom:button-card
show_state: false
show_label: true
size: 60%
#aspect_ratio: 1/1
name: Motion
icon: mdi:motion-play-outline
entity: automation.garage_motion_lights
label: |
  [[[
    if (states['automation.garage_motion_lights'].state === "on")
      return "Enabled";
    else if (states['automation.garage_motion_lights'].state === "off")
      return "Disabled";
  ]]]
tap_action:
  action: toggle
styles:
  grid:
    - grid-template-areas: '"n" "i" "l"'
      font-size: 12px
state:
  - value: 'off'
    color: yellow
    icon: mdi:motion-sensor-off
    styles:
      icon:
        - animation: blink 2s ease infinite
  - value: 'on'
    color: steelblue
    icon: mdi:motion-sensor

big icon
missing icon
render as squares

Faecon · June 8, 2023, 7:46am

I have a custom card cover. Is there a way to see the instant position of the cover ? When I slide, it goes very slow. How can I update this faster ?

- type: "custom:button-card"

    template: card_cover
    entity: cover.raamrechts
    variables:
      ulm_card_cover_name: Raam rechts
      ulm_card_cover_enable_slider: true
      ulm_card_cover_enable_horizontal: true

marcorm69 · June 8, 2023, 3:01pm

Hi all.

I probably don’t see the obvious.
I’m trying to change the background color based on the state of another entity.
I’ve done this several times and it always worked, in this case it didn’t

This code NOT WORK: whatever the value of the entity, the background color does not change

card:
    - background-color: |
        [[[
          if (states['input_boolean.zone1_time1_running'].state === "on") return 'red';
          else return 'black';
        ]]]

This code WORK

card:
    - background-color: |
        [[[
          if (states['input_boolean.zone1_time1_running'].state != "off") return 'red';
          else return 'black';
        ]]]

ok, you say, use the second one , yes, of course, but i would like to understand where i am going wrong in the first code.

Regards,
Marco

HA_n00b · June 9, 2023, 8:26pm

I made a button to toggle and input_boolean. When the toggle state is ‘on’, I want to turn on a switch.
How to do that? Anyone can help?

card:
  type: custom:button-card
  entity: input_boolean.secure_mode
  show_state: true
  name: Secure Mode
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.frontcam_detect

paddy0174 · June 9, 2023, 9:33pm

You’re not going wrong, you’re just doing different things.

not off is something different than is on. not off can be anything, including on, but it is not limited to. Just use a different state, eg. open or unavailable or unknown, and you see why. Open is not off, but it isn’t automatically is on.

And you’re doing a different check with === compared to !=. You’re checking here not only for the value, but additionally for the type of your condition.

See here:

Both things could be the reason, why things aren’t working as expected.

Marcus_Lundblad · June 9, 2023, 11:30pm

Hi all! Anybody know what i need to add to use more of the card? i want the icon to use more of the card “closer to the edge” if u know what i mean?

terminus · June 12, 2023, 10:04am

Hi Guys! I’m trying to alterate a state of a entity and in consequence the color of the icon:
If two switches are in state “on” it should turn green otherwise red for example. Tried this:

            [[[
              var circulation=states[switch.frischwasserzirkulationspumpe].state;
              var loadingpump=states[switch.ladepumpe].state;
              if (circulation == true) && (loadingpunp == true) return 'on';
              else return 'off';
            ]]]

but it didn’t work out. Any hints?

ktownsend-personal · June 12, 2023, 1:57pm

A couple of things:

you need to quote the entity id’s in the square brackets
you need to compare the states to “on” rather than true

terminus · June 12, 2023, 7:35pm

Thank you very much. Just hat to add some brackets too

Shakey · June 22, 2023, 9:26pm

Trying to get toggle to work on a custom-card button so as to toggle on and off a relay on a PLC and also show its current state. Currently it does not show state and will only turn on the relay and not off when pressed again.

Custom_button looks like this:

entity: switch.furnace_reset
icon: mdi:lamp
color_type: card
color: rgb(255,0,15)
aspect_ratio: .8/.2
tap_action:
  action: toggle
type: custom:button-card

my switch code looks something like this:

command_line:
  - switch:
      name: "Furnace Reset"
      command_on: "/usr/bin/curl -X GET http://192.168.12.12/state.xml?relay1State=1"
      command_off: "/usr/bin/curl -X GET http://192.168.12.12/state.xml?relay1State=0"
      command_state: "curl -k http://192.168.12.12/state.xml"
      value_template: "{{ value_json['datavalues']['relay1'] == 1}}"

and to get the state I treat the relay as a sensor:

rest:
  - resource: http://192.168.12.12/state.xml
    scan_interval: 16
    sensor:
      - name: Furnace Reset
        value_template: "{{ value_json['datavalues']['relay1'] }}"

as that is the only way to get the state (either 0 or 1). Is there a way to get the toggle to work and also have the button reflect the state of the relay? Another thing to note is that the button, while supposed to be red backfround is dark grey.

onepointbrewing · June 26, 2023, 2:26am

You have not specified the entity for the tap action. The card does NOT automatically take the entity from the entity entry.

Does your PLC not support modbus/485?

Ive been using the Node-Red modbus integration and it is WAAAAY simpler to achieve. Dont try to use the HA integration, its slow and not too reliable.

Shakey · June 26, 2023, 2:32am

Yes it does support modus but I have never used it before. Truly wish the HA implementation (native) was more reliable than what you say.

onepointbrewing · June 26, 2023, 2:49am

I know this is OT but I am a node red newbie and I tried it just for the modbus part. Its worth the effort

Shakey · June 26, 2023, 11:55am

will do…thanks for the advice!

olympia · June 27, 2023, 9:49am

I have a good couple of binary motion sensors (with device class motion) within a custom button card.

I cannot figure why the the state of them is showing on/off instead of clear/detected. It looks like custom button card doesn’t respect the device class, but I see examples in this thread where the correct state string is being displayed. The very same binary sensors are correctly displayed as clear/detected on other cards.

What am I missing here?

petro · June 27, 2023, 1:30pm

Something broke a while back and it still hasn’t been fixed. So manual translations is what you have to do now.

olympia · June 27, 2023, 3:26pm

OK, I will do it manually with state_display then. Thank you!

Shakey · June 27, 2023, 9:30pm

Took your advice an am using node red. How do you loop back state to your switch?
Below is a picture of my two PLCs (x410 and x310). I can read the coil (relays) states no problem but when I create a switch, how do I get the initial state? I created a switch called X410Relay1 switch, but how can I get it to keep state?

After viewing some other examples online, I am trying to get the output state of relay 1 and run it through change to mimic a toggle switch when x410_relay_switch is pressed…

change has 2 rules…

but debug1 and 2 never turn true as they remain always false. Am I missing something here?

onepointbrewing · June 27, 2023, 11:57pm

Probably best you take this to a Node Red thread instead of here.

molly200 · July 4, 2023, 9:17am

Hi all,

I use a number of “button_card_templates” for multiple dashboards in storage mode.

Other than the HA yaml mode setup, is it possible to have the templates shared between dashboards without copying the code in every dashboard?

The " button_card_templates: !include button_card_templates.yaml" doesn’t work in the raw code and with the storage mode enabled.

Is there a viable solution to reduce the duplicated code?

Thanks