Custom buttons input and output

Share your Projects! Dashboards & Frontend
1

Hi all,

Pleae could somebody help me out.

I need to make a custom button, the button needs to change colour on a state of an input but when i press it, it needs to trigger an output.

i have an esp32 monitoring the outputs of an plc, those are my inputs and i have outputs from my esp32 to trigger the outputs on the plc.

example: input lounge light status
output lounge light switch

if the light is on the button must change green but i can press the button to turn off the light.

i’ve tried a few things, nothing has worked, this is my first time making a custom button.

if somebody could please help me out with a sample code, i would appreciated it.

thanks.

2

What custom button cards did you try, and why did they not fit your purpose?

3

Hi,

i tried the custom button-card.

i’m not saying it doesn’t fit my purpose, i’m not excatly a programmer. i copy other peoples code and try and modify it, but i’m not coming right.

4

See that basic example in the custom button-card documentation:

- type: 'custom:button-card'
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)
  state:
    - value: 'off'
      color: rgb(255, 0, 0)

With a template state operator (GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant) and javascript templates (GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant), you could set the color based upon the state of a different entity.

5

Hi Koying,

Thanks for your help, i configured it out, i wasn’t using ==, i feel like an idiot.

Would you by any chance know how to change the title font size? The last line.

type: horizontal-stack
cards:

  • aspect_ratio: null
    type: custom:button-card
    name: Bedroom
    icon: mdi:lightbulb
    hold_action:
    action: none
    show_state: false
    styles:
    card:
    - width: 70px
    - height: 70px
    - font-size: 14px
    icon:
    - height: 25px
    - color: |
    [[[
    if (states[“binary_sensor.node_main_house_main_bedroom_ligth_stat”].state == ‘on’) return ‘#FFFE91’
    ]]]
    tap_action:
    action: toggle
    entity: button.node_main_house_main_bedroom_light
  • type: custom:button-card
    name: Dresser
    icon: mdi:lightbulb
    hold_action:
    action: none
    show_state: false
    styles:
    card:
    - width: 70px
    - height: 70px
    - font-size: 14px
    icon:
    - height: 25px
    - color: |
    [[[
    if (states[“binary_sensor.node_main_house_main_bedroom_dresser_ligth_stat”].state == ‘on’) return ‘#FFFE91’
    ]]]
    tap_action:
    action: toggle
    entity: button.node_main_house_main_dresser_light
  • type: custom:button-card
    name: Bathroom
    icon: mdi:lightbulb
    hold_action:
    action: none
    show_state: false
    styles:
    card:
    - width: 70px
    - height: 70px
    - font-size: 14px
    icon:
    - height: 25px
    - color: |
    [[[
    if (states[“binary_sensor.node_main_house_main_bathroomligth_stat”].state == ‘on’) return ‘#FFFE91’
    ]]]
    tap_action:
    action: toggle
    entity: button.node_main_house_main_bathroom_light
    title: “------------ Main B/R -----------”