Lovelace: Button card

yoni3210 · August 7, 2019, 8:46am

tried the following :

i used the templates and this is what i get :

code:
i comment the custom fields:

        cards:
          - type: "horizontal-stack"
            cards:
              - template: button
                type: "custom:button-card"
                styles:
                  img_cell:
                    - margin: none
                    - align-items: flex-end
                  icon:
                    - width: 100%
                    - border-radius: 10px
                  grid:
                    - grid-template-areas: '"icn temp" "n n" "i i"'
                    - grid-template-columns: 1fr 1fr
                    - grid-template-rows: 1fr 1fr 3fr
                  name:
                    - padding-top: 4px
                # custom_fields:
                  # temp: >
                    # [[[
                        # return `<ha-icon icon='mdi:motion-sensor' style='width: 12px; height: 12px; color: yellow;'></ha-icon>
                        # <span>${states['switch.meye_cam2_motion'].state}</span>`
                        # ]]]
                  # icn: >
                    # [[[
                        # if (states['binary_sensor.motion_cam_out'].state == 'on') return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: lime; animation: blink 2s ease infinite;'></ha-icon></div>";
                        # else return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: deepskyblue;'></ha-icon></div>";
                        # ]]]
                entity: camera.camera_wyze
                show_entity_picture: "true"
              - template: button
                type: "custom:button-card"
                styles:
                  img_cell:
                    - margin: none
                    - align-items: flex-end
                  icon:
                    - width: 100%
                    - border-radius: 10px
                  grid:
                    - grid-template-areas: '"icn temp" "n n" "i i"'
                    - grid-template-columns: 1fr 1fr
                    - grid-template-rows: 1fr 1fr 3fr
                  name:
                    - padding-top: 4px
                # custom_fields:
                  # temp: >
                    # [[[
                        # return `<ha-icon icon='mdi:motion-sensor' style='width: 12px; height: 12px; color: yellow;'></ha-icon>
                        # <span>${states['switch.meye_cam2_motion'].state}</span>`
                        # ]]]
                  # icn: >
                    # [[[
                        # if (states['binary_sensor.motion_cam_out'].state == 'on') return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: lime; animation: blink 2s ease infinite;'></ha-icon></div>";
                        # else return "<div style='text-align: start;'><ha-icon icon='mdi:cctv' style='color: deepskyblue;'></ha-icon></div>";
                        # ]]]
                entity: camera.camera_wyze
                show_entity_picture: "true"
type or paste code here

When i click on them i can see the steam without issue…

any idea why i can’t get the picture ?

klogg · August 7, 2019, 9:36am

EDIT: I think I can do this using custom fields…

From the docs it appears that the state cannot be templated.
Is there any other way, when the state is a number, to have it formatted.
e.g.
34087 displayed as 34,087

I’m no javascript expert (not even close ) but I’ve found that this could work if templating were possible.

entity.state.toLocaleString('en')

mcfrojd · August 7, 2019, 1:10pm

Anyone that can help me format to the new template format?

This one worked before:

                label_template: > 
                  return '<span style="font-weight: bold;">Stuga 1: </span>'+ (states['calendar.stuga1'].state === 'off'
                  ? '<span style="color: #00FF00; font-weight: bold;">LEDIG</span>'
                  : '<span style="color: #FF0000; font-weight: bold;">UTHYRD</span>')
                  + '<br />'
                  + '<br />'
                  + '<span style="font-weight: bold;">Ankomst: </span>' + states['sensor.stuga1ankomst'].state + '<br />'+ '<br />'
                  + '<span style="font-weight: bold;">Avresa: </span>' + states['sensor.stuga1avresa'].state + '<br />'+ '<br />'
                  + '<span style="font-weight: bold;">Gäst: </span>' + states['sensor.stuga1beskrivning'].state

Mariusthvdb · August 7, 2019, 3:24pm

have you tried:

label: > 
  [[[
    return '<span style="font-weight: bold;">Stuga 1: </span>'+ (states['calendar.stuga1'].state === 'off'
         ? '<span style="color: #00FF00; font-weight: bold;">LEDIG</span>'
         : '<span style="color: #FF0000; font-weight: bold;">UTHYRD</span>')
         + '<br />'
         + '<br />'
         + '<span style="font-weight: bold;">Ankomst: </span>' + states['sensor.stuga1ankomst'].state + '<br />'+ '<br />'
         + '<span style="font-weight: bold;">Avresa: </span>' + states['sensor.stuga1avresa'].state + '<br />'+ '<br />'
         + '<span style="font-weight: bold;">Gäst: </span>' + states['sensor.stuga1beskrivning'].state
  ]]]

mcfrojd · August 8, 2019, 1:00pm

Yes tried that one, but it gives this.

Screenshot_Grantek_2019-08-08%2014_58_30

Mariusthvdb · August 8, 2019, 1:13pm

no, thats not what you want

~~if you look here, you can see how I did something like that without the html coding, direct in the markdown~~

~~maybe that helps.~~
sorry that was for a markdown card, not a button card. forget my post please.

iantrich · August 8, 2019, 3:23pm

That works for me, are you sure you are on the latest version?

LbDab · August 8, 2019, 4:11pm

RomRider:

          - colorstyle: "[[[
              if (states['sensor.dsl_dl']) {
                if (states['sensor.dsl_dl'].state < 20) return 'red';
                else return 'lime';
              } ]]]"

Thanks it is working.

mcfrojd · August 8, 2019, 4:24pm

Sorry, your example worked fine, i must have missed some indentations.

Corey_Maxim · August 8, 2019, 5:12pm

First I want to say I love this card! It makes up about 96% of my entire UI.

I do have a question if you can answer it.

I used your original weather card and modified it to use Animated icons. My question is there a way I could implement a custom sensor to get a value if sun.sun is above or below horizon so I can match up icons in the evening because now if it’s a partly cloudy night I get partly cloudy with the sun so it doesn’t quite matchup.

I’m looking for a better icon set that I haven’t found yet but I love this weather card thanks for the inspiration.

On a off topic question, has your future forecast really off of what actually happens? It seems like the current weather is pretty close. Very strange, I’ll have to look into the api and see if I set it up wrong.
Weather Button Card

`

iantrich · August 8, 2019, 5:40pm

Sure you could have an outer check for below/above horizon and then use the different icon set should you find it.

I don’t follow your second question.

iantrich · August 8, 2019, 5:41pm

Doh, we had that originally but I put a semicolon on the first line…

Corey_Maxim · August 8, 2019, 6:11pm

No worries, I probably didn’t describe it well enough. I seem to be 10 degrees below what actually happens. So if tomorrow says it will be 80 it actually is closer to 90 or 95 most of the time. How accurate is your future forecast when you tap on the card. I guess is a better way to ask.

iantrich · August 8, 2019, 6:41pm

I have noticed that sometimes the days don’t display correctly and are off by one.

RomRider · August 9, 2019, 3:19pm

Clear your browser cache, you’re not using the latest version.

Yes, with custom fields and that would be as easy as: entity.state / 1000

yoni3210 · August 9, 2019, 3:21pm

someone has an idea how to help ?

wmaker · August 9, 2019, 10:25pm

Just recently started trying out this card, looks very powerful! Thanks!
I’m wanting to use this card’s Configuration Template, and do a few overrides in the entity’s config.
In particular I wanted to change icons based on the state of the entity within the entity’s configuration, but no luck.

I came up with a simple test that, rather than change the icon, instead simply change the spin state of the icon.

The Config template:

button_card_templates:
  bc_template_test:
    state:
      - value: 'on'
        spin: true

The entity config:

  - title: test
    cards:
      - type: custom:button-card
        template: bc_template_test
        name: test
        entity: light.br30_1
        state:
          - value: 'on'
            spin: false

The result is when I turn the light ‘on’ the icon spins.
I was expecting the entity config’s spin state to override the template’s spin state which would have been to not spin. Any suggestions?

Corey_Maxim · August 10, 2019, 12:54am

Absolutely, there’s a lot of improvements that can be made, especially with the am/pm variance (I haven’t figured that out yet) I set this as a template while testing it so you could remove the weather: if not needed. let me know if you make any improvements.

  weather:
    color: rgb(0,0,0)
    color_type: label-card
    aspect_ratio: 2/1
    show_entity_picture: true
    layout: icon_name
    show_name: true
    tap_action:
      action: more-info
      haptic: heavy
    show_state: false
    show_label: true
    styles:
      grid:
        - grid-template-areas: '"n i" "s i" "l i"'
        - grid-template-columns: 1fr 50%
      card:
        - border-radius: 5px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
        - background-color: rgb(0,0,0)
        - box-shadow: 1px 1px 12px 2px rgb(255,0,0)
      icon:
        - height: 120px
        - width: 120px
        - justify-self: center
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 10px
      label:
        - padding: 7px
        - font-size: 20px
        - font-weight: bold
        - font-family: Helvetica
        - color: rgb(255,255,255)
    entity: weather.dark_sky
    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("en-US", options).split(",")[1];
      var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
      var sunset_time = sunset_date.toLocaleDateString("en-US", options).split(",")[1];
      return '<div align="left">' +
                '<div style="font-weight: normal; font-size: 15px; margin-top: 10px;">' +
                  '<ha-icon icon="mdi:weather-sunset-up" style="width: 15px; color: #f4e842; padding-bottom: 0px;"></ha-icon> ' +
                  sunrise_time +
                '</div>' +
                '<div style="font-weight: normal; font-size: 15px; margin-top: -10px;">' +
                  '<ha-icon icon="mdi:weather-sunset-down" style="width: 15px; color: #f4e842; padding-bottom: -5px;"></ha-icon> ' +
                  sunset_time +
                '</div>' +
              '</div>';
    name_template: > 
      var degree = 45;
      var angle = entity.attributes.wind_bearing + 22.5;
      var direction = (angle >= 0 * degree && angle < 1 * degree) ? "N" :
        (angle >= 1 * degree && angle < 2 * degree) ? "NE" : 
        (angle >= 2 * degree && angle < 3 * degree) ? "E" :
        (angle >= 3 * degree && angle < 4 * degree) ? "SE" :
        (angle >= 4 * degree && angle < 5 * degree) ? "S" :
        (angle >= 5 * degree && angle < 6 * degree) ? "W" :
        (angle >= 6 * degree && angle < 7 * degree) ? "NW" : "N";
      return '<div align="start" style="padding-top: 20px;">' +
              '<div style="font-size: 20px;">' + entity.attributes.temperature + '°F</div>' +
              '<div style="font-size: 10px;">High ' + entity.attributes.forecast[0].temperature + '°F <br>Low ' + entity.attributes.forecast[0].templow + '°F </div>' +
              '</div>' +
              '</div>' +
            '</div>';
    icon: mdi:weather-sunny
    state:
      - value: clear-night
        entity_picture: /local/icons/weather_icons/animated/night.svg
      - value: cloudy
        entity_picture: /local/icons/weather_icons/animated/cloudy.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px purple
          icon:
            - color: purple
      - value: overcast
        entity_picture: /local/icons/weather_icons/animated/cloudy.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px purple
          icon:
            - color: purple
      - value: fog
        entity_picture: /local/icons/weather_icons/animated/cloudy.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px purple
          icon:
            - color: purple
      - value: hail
        entity_picture: /local/icons/weather_icons/animated/rainy-7.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px white
          icon:
            - color: white
      - value: lightning
        entity_picture: /local/icons/weather_icons/animated/thunder.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: lightning-rainy
        entity_picture: /local/icons/weather_icons/animated/thunder.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: partlycloudy
        entity_picture: /local/icons/weather_icons/partlycloundynight.png
      - value: pouring
        icon: mdi:weather-pouring
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: rainy
        entity_picture: /local/icons/weather_icons/animated/rainy-7.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: snowy
        entity_picture: /local/icons/weather_icons/animated/snowy-6.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px white
          icon:
            - color: white
      - value: snowy-rainy
        entity_picture: /local/icons/weather_icons/animated/snowy-6.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px white
          icon:
            - color: white
      - value: sunny
        entity_picture: /local/icons/weather_icons/animated/day.svg
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px yellow
          icon:
            - color: yellow
      - value: windy
        entity_picture: /local/icons/weather_icons/animated/cloudy.svg
      - value: windy-variant
        entity_picture: /local/icons/weather_icons/animated/cloudy.svg

LbDab · August 10, 2019, 6:20am

Try this for your setup, it’s simplified version without any templates needed:

https://gist.githubusercontent.com/LbDab/c81df70487b687c44d23a1d9c1ba68bc/raw/55a59d7e5865601c316c57647126965df9a273a8/camera-button

Post screenshot if not working.

RomRider · August 10, 2019, 6:47am

That requires to merge state by id

That is not using the latest version of button-card