Lovelace: Button card

RomRider · July 27, 2019, 12:57am

                  - <<: *custom_button_cerradura
                    entity: switch.cerradura
                    name: Cerradura
                    label: >
                      [[[ return ' '
                      + (states['switch.cerradura'].state === 'on'
                          ? '<span style="color: #FF0000;">Abierta</span>'
                          : '<span style="color: #00FF00;">Cerrada</span>') ]]]

And

          - <<: *custom_button_tracker
            entity: device_tracker.life360_jorge
            entity_picture: /local/jorge.png
            label: >
              [[[ return states['device_tracker.life360_jorge'].attributes.battery + '% de bateria' ]]]

By reading the changelog, you’d have figured that out by yourself… I included an before and after…

pollinolas · July 27, 2019, 12:59am

first thank you very much,second please believe me if i tell u that i read i tried it,but i so bad for all this,thanks again and sorry
now i can sleep quiet,thank you very much
Now that I see it done with my own examples I feel very ridiculous

VDRainer · July 27, 2019, 7:33am

Sorry if i missed something in the docs, but shouldn’t this work?

                state:
                  - value: 0
                    operator: '>'
                    color: var(--my-orange)
                    styles:
                      card:
                        - box-shadow: 0px 0px 10px 3px var(--my-orange)

RomRider · July 27, 2019, 7:38am

Sorry, there’s a bug when the value is 0 (or when a field with template support has 0 as its value)… A fix is ready for the next release. Just waiting a bit to see if something else pops up
https://github.com/custom-cards/button-card/pull/203

VDRainer · July 27, 2019, 7:58am

The following tap_action doesn’t work anymore
Console:

                tap_action:
                  action: call-service
                  service: browser_mod.command
                  service_data:
                    command: popup
                    title: Persistent Notifications
                    style:
                      border-radius: 15px
                      width: 500px
                      background: rgba(38, 49, 55, 0.8)
                      color: var(--my-orange)
                    card:
                      type: custom:home-feed-card
                      #title: Home Feed
                      show_empty: false
                      show_notification_title: true
                      style: |
                        ha-card {
                          background: transparent;
                        }
                    deviceID:
                      - this

klogg · July 27, 2019, 8:30am

I have a question
I don’t know if it belongs here or in the decluttering card…

How can I template several lines?

For example, I have this:

          - type: custom:decluttering-card
            template: standard_square_button
            variables:
              - entity: input_number.hall_max_temp
              - name: Hall <br> Max Temp
              - show_label: true
              - label: var date = states['input_datetime.hall_max_temp_date'].state; return date

and my decluttering card includes this:

      label: >
        [[[
          [[label]]
        ]]]

Which works but I’d prefer to have the label: declared over several lines for readability. In this particular case I want to add reformatting to the date so making the line of code even longer but I also have some quite long templates.

I’ve tried a few things e.g.

              - label: >
                  var date = states['input_datetime.hall_max_temp_date'].state;
                  return date

but none seemed to work…
Is this possible?

RomRider · July 27, 2019, 8:31am

Interesting! I’ll fix that, I know why… I didn’t even think there was a use case for objects in service_data parameters so I didn’t cover it

RomRider · July 27, 2019, 8:35am

Probably yes, I’ll have a look about the right format

woody4165 · July 27, 2019, 11:41am

Thanks for your work.

So this part

        label_template: >
          var options = { hour: 'numeric', minute: 'numeric' };
          var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
          var sunrise_time = sunrise_date.toLocaleDateString("it-IT", options).split(",")[1];
          var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
          var sunset_time = sunset_date.toLocaleDateString("it-IT", options).split(",")[1];
          return '<div align="left">' +
                    '<div style="font-weight: normal; font-size: 10px; margin-top: 0px;">' +
                      '<ha-icon icon="mdi:weather-sunset-up" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
                      sunrise_time +
                    '</div>' +
                    '<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
                      '<ha-icon icon="mdi:weather-sunset-down" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
                      sunset_time +
                    '</div>' +
                  '</div>';

should be changed as

        label: >
          [[[
          var options = { hour: 'numeric', minute: 'numeric' };
          var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
          var sunrise_time = sunrise_date.toLocaleDateString("it-IT", options).split(",")[1];
          var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
          var sunset_time = sunset_date.toLocaleDateString("it-IT", options).split(",")[1];
          return '<div align="left">' +
                    '<div style="font-weight: normal; font-size: 10px; margin-top: 0px;">' +
                      '<ha-icon icon="mdi:weather-sunset-up" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
                      sunrise_time +
                    '</div>' +
                    '<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
                      '<ha-icon icon="mdi:weather-sunset-down" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
                      sunset_time +
                    '</div>' +
                  '</div>';
          ]]]

anf this

                name_template: >
                  return 'CPU: ' + entity.state + '%';

into this

                name: >
                  [[[ return 'CPU: ' + entity.state + '%'; ]]]

Is it correct ?

Thanks

RomRider · July 27, 2019, 11:51am

That’s exactly what you should do!

RomRider · July 27, 2019, 12:29pm

Please read the 2.0.0 changelog first, if you didn’t do it.

Version 2.0.2
BUGFIXES

If a field with template support had the number 0 as a value, the field’s value would be transformed into undefined
When in an *_action the service_data field contained parameters which where objects or booleans, an error was thrown and the action wouldn’t execute.

@VDRainer, that’s for both of your issues.

RomRider · July 27, 2019, 12:48pm

That’s how you should do it:

Template:

test_templates:
  card:
    type: custom:button-card
    entity: input_select.test_input_select
    show_label: true
    label: '[[label]]'

Card:

- type: custom:decluttering-card
  template: test_templates
  variables:
    - label: >
        [[[
        var test = entity.state;
        return test;
        ]]]

VDRainer · July 27, 2019, 12:49pm

Thanks @RomRider, but the e.trim is not a function error is still there and the tap_action does nothing.
The state with value 0 works, so could be no cache issue i think.

RomRider · July 27, 2019, 12:52pm

Argh… I didn’t see it had also an array in deviceID… I’ll fix it right away… Very sorry…

klogg · July 27, 2019, 1:02pm

Doesn’t seem to work for me:

          - type: custom:decluttering-card
            template: standard_square_button
            variables:
              - entity: input_number.hall_max_temp
              - name: Hall <br> Max Temp
              - show_label: true
              - label: >
                  [[[
                  var date = states['input_datetime.hall_max_temp_date'].state;
                  return date;
                  ]]]

Error from the card:

Unexpected token in JSON at position 233
{
  "type": "custom:decluttering-card",
  "template": "standard_square_button",
  "variables": [
    {
      "entity": "input_number.hall_min_temp"
    },
    {
      "name": "Hall <br> Min Temp"
    },
    {
      "show_label": true
    },
    {
      "label": "[[[ var date = states['input_datetime.hall_min_temp_date'].state; return date; ]]]\n"
    }
  ]
}

RomRider · July 27, 2019, 1:05pm

What is your template?

RomRider · July 27, 2019, 1:28pm

Fixed in 2.0.2 which is released.

klogg · July 27, 2019, 1:45pm

Do you want the whole template? It is huge…
The relevant bit is I originally posted but adjusted to look like your example…

  standard_square_button:
    default:
   ...Loads of default values defined here...
      - show_label: false
   ...Loads more defaults defined here...
      - label: '&nbsp;'
  ...yet more defaults defined here...
    card:
      type: custom:button-card
      entity: '[[entity]]'
      name: '[[name]]'
      lock: '[[lock]]'
      size: '[[size]]'
      aspect_ratio: '[[aspect_ratio]]'
      label: '[[label]]'

  ...more card values and lots of styles and states

Happy to post it all if you need it.

RomRider · July 27, 2019, 1:50pm

Okay, I’ve managed to reproduce, I’ll have a look, probably needs a new decluttering card release.

RomRider · July 27, 2019, 1:59pm

Found the solution: it should be >- and not only >

- type: custom:decluttering-card
  template: test_templates
  variables:
    - label: >-
        [[[
        var test = entity.state;
        return test;
        ]]]