Help with button-card with conditions using Java

Configuration Frontend
1

With help from the community I got this working with mushroom-card listed in the 1st code block.

I would like to make it work with the button-card, but not having any luck. I tried a couple of ways: the 2nd attempt is commented out:

      - type: custom:mushroom-template-card
        primary: Center
        icon: >-
          {% if
          is_state('binary_sensor.shellyplusi4_d4d4da7e242c_input_1_input','off')
          %}
            mdi:garage-variant
          {% elif
          is_state('binary_sensor.shellyplusi4_d4d4da7e242c_input_0_input','off')
          %}
            mdi:garage-open-variant
          {% else %}
            mdi:garage-alert-variant
          {% endif %}
        icon_color: >-
          {% if is_state('switch.shelly1p_center_rollup_switch_0', 'on') -%}
            blue
          {% elif
          is_state('binary_sensor.shellyplusi4_d4d4da7e242c_input_1_input','off')
          %}
            green
          {% elif
          is_state('binary_sensor.shellyplusi4_d4d4da7e242c_input_0_input','off')
          %}
            (220,220,0)
          {%- else -%}
            red
          {%- endif %}
        tap_action:
          action: toggle
        entity: switch.shelly1p_center_rollup_switch_0
        layout: vertical
        fill_container: false
        card_mod:
          style: |
            :host {
              --mush-icon-symbol-size: 1.00em;
            }

The one I’m trying to get working - started with color only. once that works I can add the icon mdi:

      - type: custom:button-card
        entity: switch.shelly1p_center_rollup_switch_0
        name: Center Copy
        template: vic_cbt
        styles:
          icon:
            - color: |
                {% if is_state('switch.shelly1p_center_rollup_switch_0', 'on') -%}
                  blue
                {% elif
                is_state('binary_sensor.shellyplusi4_d4d4da7e242c_input_1_input','off')
                %}
                  green
                {% elif
                is_state('binary_sensor.shellyplusi4_d4d4da7e242c_input_0_input','off')
                %}
                  (220,220,0)
                {%- else -%}
                  red
                {%- endif %}

#                [[[
#                  if (states['binary_sensor.shellyplusi4_d4d4da7e242c_input_1_input'])
#                  return pink;
#                  return red;
#                ]]]
2

Button-card uses, contrary to Mushroom-cards, Javascript as it’s template language. So your second attempt would be the one to go with. :slight_smile:

- type: custom:button-card
    entity: switch.shelly1p_center_rollup_switch_0
    name: Center Copy
    template: vic_cbt
    styles:
      icon:
        - color: >
            [[[
              if ( entity.state == 'on' )
                return 'blue';
              else if ( states['binary_sensor.shellyplusi4_d4d4da7e242c_input_1_input'].state == 'off' )
                return 'green';
              else if ( states['binary_sensor.shellyplusi4_d4d4da7e242c_input_0_input'].state == 'off')
                return 'rgb(220,220,0)';
              else
                return 'red';
            ]]]

If an entity is defined, you can the state with entity.state, otherwise you need to use the state object. :slight_smile:

Hope this helps.

EDIT: corrected the missing multi-line sign for yaml

1 Like
3

Thank you so much for helping, Patrick! I thought I needed java. I tried it once but didn’t have it.

There was a slight error, I needed to add the > after - color:

Here is my latest that works :blush::

      - type: custom:button-card
        entity: switch.shelly1p_center_rollup_switch_0
        name: CENTER
        template: vic_cbt
        show_state: false
        icon: |
          [[[
            if ( states['binary_sensor.shellyplusi4_d4d4da7e242c_input_1_input'].state == 'off' )
              return 'mdi:garage-variant';
            else if ( states['binary_sensor.shellyplusi4_d4d4da7e242c_input_0_input'].state == 'off' )
              return 'mdi:garage-open-variant';
            else
              return 'mdi:garage-alert-variant';
          ]]]
        styles:
          name:
            - font-size: 15px
            - font-weight: bold
            - color: black
          card:
            - height: 70px
          icon:
            - width: 55
            - height: 55
            - color: |
                [[[
                  if ( entity.state == 'on' )
                    return 'blue';
                  else if ( states['binary_sensor.shellyplusi4_d4d4da7e242c_input_1_input'].state == 'off' )
                    return 'green';
                  else if ( states['binary_sensor.shellyplusi4_d4d4da7e242c_input_0_input'].state == 'off' )
                    return 'rgb(220,220,0)';
                  else
                    return 'red';
                ]]]
        tap_action:
          action: toggle
        double_tap_action:
          action: more-info
        layout: vertical
        fill_container: false
1 Like
4

I’m sorry, must have accidentally deleted it. :slight_smile: Great it works and have fun with button-card, it is such an amazing card!