Lovelace: Button card

devastator · April 29, 2020, 9:18pm

You sir, are a genius !

jumper · April 30, 2020, 1:05am

So, I’m tearing my little remaining hair out.
A button-card template that’s been working fine suddenly stopped working after, I think perhaps, upgrading the HassIO OS to 3.13, and having added browser_mod. Its like the javascript engine went bonkers. (Browser_mod is not involved in this view, or !include file and another button-card template works fine). Before I roll it all back and see, maybe y’all have some insights that I’m missing.

Calling like this (trying with and without the triggers_update and even before upgrading button-card to 3.3x):

              - type: custom:button-card
                triggers_update: all
                template: hourly_weather_button
                entity: sensor.outdoor_icon_1h

And a shortened template snippet:

  icon: >
    [[[
      switch(entity.state) {
        case 'clear-night':
          return 'mdi:weather-night';
          break;
other cases:...
        default:
          return 'mdi:icalendar-question';
         }
    ]]]

The error returned is that the entity object is not defined. If I remove the quotes from the mdi returns (like normal), the error raised is that of an unexpected ‘:’ Maybe its me.

This template is about 300 lines of mostly javascript that makes a generic hourly dark-sky weather forecast “button.” I’s been working fine for months, till now.
Thoughts? I can post more code…
OK, this also produces an ‘entity’ not defined as if the entity object is not available:

  styles:
    icon:
      - height: 60%
      - color: >
          [[[
           if ( states[entity].state == 'clear-day' ) {
             return "orange";
             }
           else {
             return "grey";
             }
          ]]]

petro · April 30, 2020, 1:58am

Your second template is wrong, entity is an object not an entity_id string.

Your first template looks good. Don’t remove the quotes. First place I would look is in your dev tools states page and verify that your sensor still exists.

jumper · April 30, 2020, 5:26am

Whoa, started to reply, then looked at states. The whole lot of the darksky sensors have gone missing. Holy #@*%! (I’d been playing with […] to try to get it working. Sorry, my bad example.

Sock · April 30, 2020, 10:54am

This worked great, thanks!

Now I just need to figure out what causes the color_rgb attribute to disappear from the bulb sometimes.

RomRider · April 30, 2020, 11:51am

It depends on your integration that is generating the light. Usually it’s not available while off, or might take some time to appear after being on.

jumper · April 30, 2020, 2:53pm

Firewall / certificate issue. I couldn’t hit the darksky api. Thanks for pointing me to states.

devastator · April 30, 2020, 6:07pm

Could you post your config for the fan ?

Zkaning · April 30, 2020, 8:01pm

Why dont the first header card follow the height when the second header does?
How can I get the first header to adjust the height?

First header:

color: 'rgb(44, 109, 214, 0.6)'
color_type: label-card
name: VARDAGSRUM
styles:
  card:
    - height: 10px
type: 'custom:button-card'

Second header:

cards:
  - color: 'rgb(44, 109, 214, 0.6)'
    color_type: label-card
    name: INGÅNG / GROVKÖK
    styles:
      card:
        - height: 20px
    type: 'custom:button-card'
  - color: 'rgb(44, 109, 214, 0.6)'
    color_type: label-card
    name: KÖK
    styles:
      card:
        - height: 20px
    type: 'custom:button-card'
type: horizontal-stack

devastator · April 30, 2020, 9:06pm

Thanks for sharing this !

However, i always get a complete fill circle drawn, no matter the brightness:
afbeelding

Copypasted your code, but modified the style a bit:

  custom_fields:
    info:
      - top: 5px
      - right: 5px
      - width: 35px
      - position: absolute
      - letter-spacing: 0.03vw

RomRider · April 30, 2020, 9:33pm

Try with - height: 10px !important

jumper · April 30, 2020, 9:51pm

Here’s a cool little something you can do with custom:button-card, picture-elements card, and the lovelace-gen custom_component. Thanks @thomasloven for lovelace-gen.

Javascript macros, and, the ability to place button-cards at x-y % locations on the screen. It made my floorplan setup manageable.

Here is an extract of the the fans-specific macro and usage.

# Fans                        x%,    y%, widthpx, heightpx, border,  background
{{ fan_button('switch.fan1',  21.6, 57.8,   41,     41,    'solid', 'silver') }}
{{ fan_button('switch.fan2',  47.4, 22.4,   60,     60,    'none',  'transparent') }}
{{ fan_button('switch.fan3',  37.8, 39.0,   33,     33,    'none',  'white') }}

and the code:

# lovelace_gen
id: floor_plan
title: Floor Plan
panel: true
cards:
  - type: picture-elements
    image: !file /local/images/FloorPlan.svg
    elements:
      {% macro fan_button(entity, x, y, width, height, border, background) -%}
      - entity: {{entity}}
        type: custom:button-card
        style: { left: {{x}}%, top: {{y}}% }
        show_name: false
        show_label: false
        show_entity_picture: true
        styles:
          card:
            - width:            {{ width }}px
            - height:           {{ height }}px
            - background-color: {{ background }}
            - border-style:     {{ border }}
            - border-width: 1.2px
            - color: 'black'
        state:
          - value: 'on'
            spin: true
            entity_picture: /local/images/FanRed.png
          - value: 'off'
            entity_picture: /local/images/FanBlack.png
            spin: false
      {%- endmacro %}

Honza · May 1, 2020, 12:28am

I have the same issue as you, and I have not been able to solve it.

I tried !important,
I tried using card-mod

Nothing, seems to help. Something is happening to the scale the height of the card. And the longer you will make the top row (i.e. add more buttons), the higher the header will grown.

Honza · May 1, 2020, 12:44am

@RomRider Can you share “header_icon_end” or “header_icon_middle” template? Curious how you are doing the alignments? Thank you!!

@Zkaning BTW custom:vertical-stack-in-card as RomRider showed above looks promising since that appears to retain its height. But I’m still playing with it to get the right effect. I’ll share when I find a solution

RomRider · May 1, 2020, 1:43am

Then it’s probably the padding of the card. Try with padding: 0px

Honza · May 1, 2020, 2:08am

Haha, padding: 0px WORKS!!!

THANK YOU RomRider

So my last remaining issue is how to position 2+ button cards within vertical-stack-in-card. Say i want a title at the left (thats easy) and icon on the far right (that i cant seem to solve). I can force the title button card width to push the icon button to the far right. But i’m hoping there is more of pragmatic way of doing it

Syrius · May 1, 2020, 2:44am

I copied the code direct from the GH link and my circles correctly draw based on the brightness.

maybe try on a test button stack first? i see your style changes (same as what i use) are for 4 button horizontal stack vs the original code which is suited for 3 buttons

devastator · May 1, 2020, 5:50am

Yeah, this is on a test button. Even on a 3 wide stack it doesn’t render a circle in chrome, firefox and android. Mmmm

Syrius · May 1, 2020, 6:06am

sent you a PM

Zkaning · May 1, 2020, 6:35am

Thanks for the tip but did not help. Can it be a bug?