Lovelace: Button card

Share your Projects! Dashboards & Frontend
3508

Same, your indentation is off. After a |, >, >-, … All the next lines needs to be indented by 2 spaces in yaml (see how the syntax highlighting is different from your post)

        - box-shadow: >-
            [[[
              let shadow_color = "var(--ha-card-box-shadow)";
              if (states[variables.var_hubentity].state && states[variables.var_hubentity].state === 'on') {
                shadow_color = "3px 3px 5px 4px #2f5f7f";
              }
              return(shadow_color);
            ]]]
3509

Ok, I’m not sure how you are getting that bad indentation. It actually is indented 2 spaces. When I look at what I posted right above your reply, the syntax highlighting looks correct and the indenting is correct also. Here it is again copied directly from my editor:

        - box-shadow: >-
          [[[
            let shadow_color = "var(--ha-card-box-shadow)";
            if (states[variables.var_hubentity].state && states[variables.var_hubentity].state === 'on') {
              shadow_color = "3px 3px 5px 4px #2f5f7f";
            }
            return(shadow_color);
          ]]]

Are you saying the javascript needs to be at the same indentation as the brackets? I’ve tried that and it doesn’t resolve the same error.

3511

Don’t you see the difference?
False:

- box-shadow: >-
  [[[

Correct:

- box-shadow: >-
    [[[
# ^^ 2 spaces here (and all the following lines of the same block of text)
3512

All right. I get it now. I was indenting 2 spaces from the ‘-’, not from box-shadow. That fixed it. Thank you so much. I’ve been using yaml a lot this past year mostly with Ansible, but it still tricks me sometimes. :upside_down_face:

1 Like
3513

Thanks so much, i didnt know you could add the template option to an existing template. This makes things a lot easier to manage going forward. I really appreciate your help.

3514

it’s all there

3515

Trying to display a icon + value of an entity but cant figure out the code. Tried to modify the examples with no luck. :frowning:

device_button_2:
  layout: icon_name_state2nd
  show_label: true
  size: 50%
  double_tap_action:
    action: toggle
  styles:
    grid:
      - grid-template-areas: '"i n ." "i n s" "i n l"'
      - grid-template-columns: 20% 30% 1fr
      - grid-template-rows: min-content min-content min-content
    card:
      - background-color: var(--dwains-theme-primary)
      - border-radius: 5px
      - margin-bottom: 10px
    icon:
      - color: var(--dwains-theme-accent)
    img_cell:
      - width: 45px
      - height: 45px
      - background: var(--dwains-theme-background)
      - color: white
      - border-radius: 100%
    name:
      - color: var(--dwains-theme-names)
      - justify-self: start
      - font-size: 16px
      - align-self: center
    state:
      - justify-self: end
      - align-self: center
      - font-size: 14px
      - color: var(--dwains-theme-names)
      - text-align: right
      - margin-right: 20px
      - text-transform: capitalize

    label:
      - justify-self: end
      - align-self: center
      - font-size: 12px
      - color: var(--dwains-theme-grey)
      - text-align: right
      - margin-right: 20px
      - text-transform: capitalize

************

        - type: custom:button-card
          template: device_button_2
          entity: sensor.orjan_vacuum_status
          icon: mdi:robot-vacuum
          show_state: true
          aspect_ratio: 4.5/1
          name: Örjan
          label: >
            [[[
              return `<ha-icon
                icon="fas:battery-three-quarters"
                style="width: 20px; height: 20px; ">
                </ha-icon><span>${states['sensor.orjan_vacuum_battery_level'].state}%</span>`              
            ]]]
          styles:
            custom_fields:
              main_brush: 
                - position: absolute
                - left: 15%
                - top: 70%
                - height: 20px
                - width: 20px
              side_brush: 
                - position: absolute
                - left: 35%
                - top: 70%
                - height: 20px
                - width: 20px
              filter: 
                - position: absolute
                - left: 55%
                - top: 70%
                - height: 20px
                - width: 20px
              sensor: 
                - position: absolute
                - left: 75%
                - top: 70%
                - height: 20px
                - width: 20px
          custom_fields:
            main_brush: >
              [[[
                return `<ha-icon
                  icon="fas:broom"
                  style="width: 20px; height: 20px; ">
                  </ha-icon><span>${states['sensor.orjan_vacuum_main_brush_left'].state}</span>` 
              ]]]
            side_brush: >
              [[[
                return `<ha-icon
                  icon="fas:broom"
                  style="width: 20px; height: 20px; ">
                  </ha-icon><span>${states['sensor.orjan_vacuum_side_brush_left'].state}</span>` 
              ]]]
            filter: >
              [[[
                return `<ha-icon
                  icon="mdi:air-filter"
                  style="width: 20px; height: 20px; ">
                  </ha-icon><span>${states['sensor.orjan_vacuum_filter_left'].state}</span>` 
              ]]]
            sensor: >
              [[[
                return `<ha-icon
                  icon="mdi:leak"
                  style="width: 20px; height: 20px; ">
                  </ha-icon><span>${states['sensor.orjan_vacuum_sensor_dirty_left'].state}</span>` 
              ]]]

What am I doing wrong, the only thing shown is the icon?
image

3516

The complete card config will help. The text is there but it’s not displayed because outside of the button. I supposed you’ve not properly set the grid styles/element style.

3517

Your right, updated my post.

3518

if you defined custom elements in your button you have to place them in the grid, else the result will be random (what you see):
You’ll have to modify those values mainly:

      - grid-template-areas: '"i n ." "i n s" "i n l"'
      - grid-template-columns: 20% 30% 1fr
      - grid-template-rows: min-content min-content min-content

See the raspberry PI button here for the example

1 Like
3519

I think people just don’t understand the grid-template-areas when it’s a single line. People should read this and it will instantly click. at least it did for me way back when.

https://www.w3schools.com/css/css_grid.asp

specifically the take away being:

this

- grid-template-areas: "i n s" "i n s" "i n l"

is equal to this

"i n s"
"i n s"
"i n l"

which displays this

image
image642×665 9.73 KB

14 Likes
3520

Great explanation :blush:
Would you mind doing a PR in the README.md on the repo to add something like this?

3 Likes
3521

Ohh I see, i thought that the custom fields was displayed ontop of the grid since I can position the icons from absolute position regardless of the grid. I will give it a try. Thanks for the explanation.

3522

So they appear in the grid unless you use the following attribute. But then you need to specify the position.

    - position: absolute
    - top: 50%
    - right: 5%

keep in mind that the position is based on the the edge. If you want it based on the center of mass you need to transform it

    - transform: translate(-50%, -50%)
2 Likes
3523

Can someone help me please:

I want to use a templated name. I want to show the relative time since last changed of a state (if on) and a text (if off). I’m trying this, but its not working (sorry, not expert of javascript):

color_type: icon
name: |
  [[[
    if (switch.gosund2_switch.state = 'on') { return "Pumpe an seit " + relative_time(states.switch.gosund2_switch.last_changed) } else { return "Pumpe aus" };
  ]]]
template: button-card-headers
type: 'custom:button-card'
3524

Nor am I and I’m only responding as I saw this immedialtly after you posted it and if it helps, good. If not sorry for wasting your time.

So, I don’t think you need the curly brackets and there might be one too few semi-colons…
Try this (reformatted to the way I recognise - like I said I’m no Javascript expert),

if (switch.gosund2_switch.state = 'on')
   return "Pumpe an seit " + relative_time(states.switch.gosund2_switch.last_changed);
else return "Pumpe aus";
3525

Thank you my friend, but also this isn’t working …
Still appreciate your time !

I think the problem is the variable … I don’t know if I can call states “on-the-fly” with this method.

3526

Ok, I’m drawn in to help on a subject I’m ill-equiped to help with :wink:
Try this:

var state = states['switch.gosund2_switch'].state;
if (state == 'on')
   return "Pumpe an seit " + states['switch.gosund2_switch'].last_changed;
else return "Pumpe aus";

Note the == instead of =
I took out relative_time as I have no idea if it is valid Javascript and if not what the equivalent would be.

I have found the w3schools good as a starting point to look things up.

1 Like
3527

Ok buddy, yes this is coding the trick. At the same time I found out this is also doing magic:

name: |
  [[[
    if (states['switch.gosund2_switch'].state === 'on') { return "Pumpe an seit " + states['relative_time(states.switch.gosund2_switch.last_changed)'] } else { return "Pumpe aus" };
  ]]]

Only the relative_time is the problem now. Your code is showing me the whole date (2020 - 04 - 16 with time) … I want just to show the minutes. Just for understanding: I have a pump and want to show how long it is running in minutes … :smiley:

3528

Not sure if this was answered before…but anyone knows if haptic feedback/vibration can be enabled on Android (Chrome)?