Lovelace: Button card

Mkipz · August 18, 2020, 9:59pm

Hi,

after updating to 0.114 my tap_action doesnt work anymore, i have a call-server as action that needs to run a script when i hit on the button but nothing happens. When i go back to 0.112.3 it works fine, any idea why?

You can find my code below.

          - type: custom:button-card
            icon: mdi:fan
            name: 'Low'
            tap_action:
              action: call-service
              service: script.woonkamer_fan_min
            state:
              - operator: template
                value: >
                    [[[ if (states['sensor.woonkamer_fan_speed'].state == 'Min') return 'on' ; ]]]
                spin: true

KTibow · August 18, 2020, 10:00pm

Does your script work on 0.114?

VMCosco · August 19, 2020, 1:58pm

@RomRider Should I move this issue to the stack-in-card thread since it seems to be related to that?

Mkipz · August 20, 2020, 8:02pm

Uh checked everything except that, stupid me. So yes its not an issue with button card but the script stopped working.

claudiovillani58 · August 20, 2020, 10:08pm

Good evening I need a lot of help, I saw the realization of LbDAB that I am attaching I tried to understand how to load the files on my home assistant but without success is there anyone who can help me? I would like to accomplish such a thing on one page. On the LbDab wiki page there are files and what you need but not a technical explanation of how they should be loaded and what makes me even more doubtful is the location of these files in the home assistant.

Rondom · August 20, 2020, 10:15pm

Hi guys.

I am trying to get the same function as lovelace-multiple-entity-row but I only want to use button-card.
I have the overall design almost done now and now I am stuck.
overview
I want the area in the th /th to be a link to the entity is that possible? So if i press Min i want this area up:
min

Is that possible?

Code:

     - type: horizontal-stack
       cards:
        - type: "custom:button-card"
          entity: sensor.outdoor_temperature
          name: Outdoor
          icon: >
            [[[
              if (entity.state >=24) return 'mdi:thermometer-high';
              if (entity.state >22 && entity.state < 20) return 'mdi:thermometer';
              else return 'mdi:thermometer-low';
            ]]]
          tap_action: 
            action: none
          show_name: true
          show_state: false
          show_label: true
          layout: icon_label
          template: multi
          label: >
            [[[
            var temp1 = states['sensor.outdoor_temperature'].state + " °C";
            var temp2 = states['sensor.outdoor_temp_max'].state + " °C";
            var temp3 = states['sensor.outdoor_temp_min'].state + " °C";
            return    '<table style="border-collapse: collapse; height:50px; margin-top: 0px; margin-bottom: 0px; vertical-align: middle">' + 
                        '<tr>' +
                          '<th style="font-weight: normal; min-width:70px; font-size:10px; border: 1px solid black; height:50px">' + "Min" + '<br>' + temp3 + '</th>' +
                          '<th style="font-weight: normal; min-width:70px; font-size:10px; border: 1px solid black; height:50px">' + "Max" + '<br>' + temp2 + '</th>' +
                          '<th style="font-weight: normal; min-width:70px; font-size:10px; border: 1px solid black; height:50px">' + "Current" + '<br>' + temp1 + '</th>' +
                        '</tr>' +
                      '</table>'
            ]]]
          styles:
            grid:
            - grid-template-areas: '"i n l" "i n l" "i n l"'
            - grid-template-columns: 15% 25% 60%

KTibow · August 21, 2020, 1:19am

You should just do a tap action for the whole card. You could also do it with a, on-click, card-tools, and more-info.

Rondom · August 21, 2020, 9:12am

Ehh yes I know that but that is not what I want.
I just want the boxes inside the border to be a button not the whole card.

Because I want each box to be a link to a different sensor so I cant use the whole card as a button.

I was thinking of you could made a custom invisible area over it or just embed a link in the html-code of some sort…

Mariusthvdb · August 21, 2020, 9:16am

HI,

please tell me what younger using for the Power card top right of your image? Is that Bar card? would you share that little config please? thanks!

reste_narquois · August 21, 2020, 9:34am

He’s actually referring to the setup of another user (LbDab):

Mariusthvdb · August 21, 2020, 9:36am

I see. sorry, and thanks. ~~Not much info there~~

edit

Found it, all there. thanks for the pointer

reste_narquois · August 21, 2020, 9:37am

I think you can find the code you’re after in lovelace/main.yaml

KTibow · August 21, 2020, 1:47pm

Can’t you use use a horizontal stack and use a separate button card for each one?

claudiovillani58 · August 21, 2020, 2:42pm

Mariusthvdb I’m not the one who designed this beautiful card but as rste_narquois said it was the LbDab user from whom I would have liked to have some more details on the location of the files tracked in GitHub see the link that put you rste_narquois

gabrielmiranda · August 21, 2020, 7:38pm

I am not using the stack-in-card and I have the same error.

Rondom · August 21, 2020, 8:04pm

I had that before but I want everything in one area now to get a cleaner look

KTibow · August 21, 2020, 8:06pm

You can keep anything in one area if you adjust the margins, how does it look like if you just do it?

Rondom · August 21, 2020, 8:09pm

Yes that is true… Maybe that is the way i need to go if I cant fix it with some custom are over the other or embed a link in the th section.
that should make it more customizable for the future also

macmanroy · August 22, 2020, 7:33pm

I’ve been trying to use the navigation path action to change the url hash value along with the state-switch card in order to make a user independent tab menu, It works but i’d like to have the button colour change depending on the url hash value. I’ve tried using a javascript template with if (window.location.hash === “value”) which works but only updates the colour after the page is manually reloaded.

So my question, is it possible to recheck a template value when a button is pressed?

Thanks

Mariusthvdb · August 22, 2020, 8:29pm

that’s exactly what I do:

the active button is highlighted when on that page (window location)

this is the first button in the horizontal stack:

  - type: custom:stack-in-card
    mode: horizontal
    keep:
      background: true
    cards:

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:home
        tap_action:
          action: navigate
          navigation_path: /lovelace/home
        variables:
           path: home
        styles:
          icon:
            - color: >
                [[[
                  return (states['sensor.count_alerts_notifying'].state > 0)
                  ? 'red': 'green';
                ]]]
        state:
          - operator: template
            value: >
              [[[ return (states['sensor.count_alerts_notifying'].state > 0) ]]]
            spin: true

and the button_template handles the background etc:

button_shortcut_menu:
  variables:
    view: >
      [[[ return window.location.pathname.split('/').slice(-1) ]]]
  size: 25px
  styles:
    icon:
      - color: var(--secondary-text-color)
    card:
      - background: >
          [[[ return variables.view == variables.path
              ? 'var(--secondary-background-color)' : 'var(--card-background-color)';
          ]]]

hope this is what you are looking for?
To answer your question: no further need for rechecking, it simply colors per button press