Lovelace: Button card

Jens_Wymeersch · January 1, 2021, 7:38pm

Dear all,

I’m still trying to create a universal remote control. I’m progressing quite well but got stuck today with an Unexpected token in JSON error.
Basically, I want the power-on button to go from blue to grey based on the state of the television (blue if the TV is on and grey for off). Secondly, the command of the button card needs to be power_off (in case the tv is on) and power_on when it is off.
Here is my code

                        - svc_name: >
                              [[[
                                  if (states['media_player.master_tv'].state == 'ON')
                                    return 'media_player.turn_off';
                                  return 'media_player.turn_on';
                               ]]]

Please note I’m using the uncluttering templates together with the custom button card

parautenbach · January 2, 2021, 5:12am

Where does svc_name come from?

Jens_Wymeersch · January 2, 2021, 5:43am

Hi Pieter,
Thank you for your question. It refers to a cluttering card template which you find here

decluttering_templates:
  Remote_button:
    default: null
    card:
      type: 'custom:button-card'
      entity: '[[entity]]'
      name: '[[name]]'
      show_name: '[[name_show]]'
      aspect_ratio: 7/3
      icon: '[[icon_symbol]]'
      show_icon: '[[icon_show]]'
      tap_action:
        action: call-service
        service: '[[svc_name]]'
        service_data: '[[svc_data]]'
      styles:
        card:
          - border-radius: 20px
          - border: solid 2px var(--primary-color)
          - font-size: 11px
          - text-shadow: none
          - padding: 5px 5px
          - margin: 0px 0px
        name:
          - font-weight: bold
          - font-size: '[[name_size]]'
          - color: '[[name_color]]'
          - align-self: middle
          - justify-self: middle
          - padding-bottom: 4px
        icon:
          - width: '[[icon_width]]'
          - color: '[[icon_color]]'

parautenbach · January 2, 2021, 5:58am

I can’t see where the JSON error would be coming from. Is it from your original post? Does your debug console in your browser indicate that the problem is in that section and does it tell you which token is the problematic one?

As an alternative, how about using the button card’s state options to display the card correctly and then just use media player.toggle?

Jens_Wymeersch · January 2, 2021, 6:15am

Thanks for the toggle idea. This sorts out one of the problems. This is the error message i’m getting

And here is the code associated to it

                          - icon_color: |
                              [[[
                                 if (states[media_player.master_tv].state == "ON")
                                   return "rgb(5, 147, 255)";
                                 return "rgba(85, 85, 86, 0.4)";
                              ]]]

Do you have some more information on the state option ? I could create a new template based on your recommendations.

RomRider · January 2, 2021, 11:40am

Do you know that you have template support for button-card also? It will be better than using decluttering-card on top of it.

Also your issue is probably related to how a multi-line string is passed to decluttering-card. You have to use > instead of | for it to work.

                          - icon_color: > ### was |
                              [[[
                                 if (states['media_player.master_tv'].state == "ON")
                                   return "rgb(5, 147, 255)";
                                 return "rgba(85, 85, 86, 0.4)";
                              ]]]

parautenbach · January 2, 2021, 1:32pm

What RomRider said is what I meant. See the button card’s templating docs. You can use templates to control the state — e.g. icon state, among others.

Jens_Wymeersch · January 2, 2021, 3:00pm

Hello, thank you for your reply. I used “>” but it changes automatically to what you see.

RomRider · January 2, 2021, 3:03pm

Then, there’s nothing I can do for you:

Either you’ll have to switch to yaml mode (I assume it is converted by the UI editor of HA)
Or you use button-card templates

Jens_Wymeersch · January 2, 2021, 3:13pm

@RomRider I’ll give it a try. I have another more pressing issue which you might be able to help.

This is the view where I’m at

I want on the top, when you push for example FireTV that it not only switches to the FireTV remote (using switch card) for that but also that a command is being send to the LG to change the HDMI. Or when the TV isn’t on yet, when i press LG, that the powerOn command is getting done.
I’ve been messing around with the input_select but don’t find enough information to be able to do this.

  Title_button:
    default: null
    card:
      type: 'custom:button-card'
      entity: '[[entity]]'
      name: '[[name]]'
      show_name: '[[name_show]]'
      aspect_ratio: 7/3
      show_entity_picture: '[[picture_show]]'
      entity_picture: '[[picture_link]]'
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: '[[name]]'
      styles:
        card:
          - background-color: |
              [[[
                if (states['input_select.remote'].state == '[[name]]')
                  return "rgba(5, 147, 255, 0.5)";
                return "rgba(0, 0, 0, 0)";
              ]]]    
          - border-radius: 20px
          - border: solid 2px var(--primary-color)
          - font-size: 11px
          - text-shadow: none
          - padding: 5px 5px
          - margin: 0px 0px
        entity_picture:
          - height: '[[pic_height_perc]]'
          - width: '[[pic_width_perc]]'

and then i use a switch card

          - type: 'custom:state-switch'
            entity: input_select.remote
            states:
              LG:
                type: vertical-stack
                cards:

Finally, is there still a point to the uncluttering card ?

RomRider · January 2, 2021, 3:44pm

This should all be done using scripts and automation. This logic shouldn’t reside in the frontend.

decluttering-card is useful for anything else than button-card as you can’t template other cards.

Jens_Wymeersch · January 2, 2021, 4:01pm

Thank you ! I already was thinking in that direction but I’m stick with the use input.select as a trigger for my automation.

RomRider · January 2, 2021, 4:07pm

This should give you an idea

  - alias: "Shield started from HA"
    max_exceeded: silent
    initial_state: true
    trigger:
      platform: state
      entity_id: input_select.living_room_harmony
      to: 'Shield'
    action:
      service: script.turn_on
      entity_id: script.harmony_shield

Jens_Wymeersch · January 2, 2021, 7:29pm

@RomRider Thank you for building these amazing button cards. I got the automations done in NodeRed with some help from the community and my universal remote control is almost finished. I couldn’t have done this without your hard work on the custom button cards.

valsergi · January 3, 2021, 6:53pm

With the latest version, some shadows have appeared in my custom buttons inside the main button that I can’t remove, someone helps me, thank you!

I leave a screenshot of what I mean, it is what is around each icon … thanks!

RomRider · January 3, 2021, 11:34pm

Share your config if you want some help

jhauxwell · January 4, 2021, 10:37pm

Hello,

I apologise if this is classed as cross-posting, I hadn’t realised until now that this had a thread of its own.

Im stuck pretty much at the start.

I used HACS to install, no problems. I added the resource in the Lovelace dashboards/Resources tab.

Then in the UI, I paste a simple button from the instructions using the ‘Raw configuration editor’ and get this in the UI when I save and exit the editor:

As far as I understand I do not need to do anything in ui-lovelace.yaml as I’m doing it all in the UI…but perhaps I’ve totally misunderstood - happy to be told that this is the case!

Thanks,
Joel.

RomRider · January 5, 2021, 12:24am

Did you reload the resources from the top left menu and refresh your page (at least twice)?

jhauxwell · January 5, 2021, 7:39am

Hello,

This is possibly the missed step!
I’ve had a good look around - where should I find the ‘reload resources’ option?

Thanks,
Joel.

RomRider · January 5, 2021, 8:48am

From the top left 3 dot menu while you are looking at your dashboard (where you also have acces to the editor)