Lovelace: Button card

Share your Projects! Dashboards & Frontend
1769

Sounds nice.

1770

I donā€™t have payload_on or payload_off, I tried it but the component doesnā€™t support. Using a MQTT browser I noticed I have under stat prefix:

POWER2 = ON when cover is moving down
POWER1 = ON when cover is moving up
Both OFF when cover is stopped

Iā€™m using a Sonoff Dual R2 running a Tasmota fork by Stefan Bode, the code for defining the entity is:

  - platform: mqtt
    name: "janela"
    availability_topic: "tthome/tele/sonoff107/LWT"
    position_topic: tthome/stat/sonoff107/SHUTTER1
    command_topic: "tthome/cmnd/sonoff107/backlog"
    set_position_topic: "tthome/cmnd/sonoff107/shutterposition"
    payload_available: "Online"
    payload_not_available: "Offline"
    position_open: 100
    position_closed: 0
    payload_open: "SHUTTEROPEN"
    payload_close: "SHUTTERCLOSE"
    payload_stop: "SHUTTERSTOP"
    qos: 1
    retain: false
    optimistic: false
1771

I suppose the relevant topics then are:

tthome/stat/sonoff107/POWER1
tthome/stat/sonoff107/POWER2

I need to find a way to poll them in the states: section.

1772

You canā€™t poll mqtt. But your cover entity has a state that reflects what is happening on MQTT. I donā€™t really understand what is the problem here, @VDRainerā€™s solution should work fine.

1773

Create mqtt binary sensors for the two topics and use the states of them.

1774

I want to use the button card as an icon, without the surrounding border, the transparent background of the theme, how to configure the card? many thanks.

1775

Perfect! Thank you!

1776

Hey @kuuji,

I know this kind of defies the point, but is it possible to nest a horizontal stack inside of a regular card below typical entities etc?

thank you :slight_smile:

Linton

1777

You can use vertical-stack-in-card for that purpose

1778

Or use the ā€˜huiā€™ trick.

- type: entities
  entities:
    - type: custom:hui-horizontal-stack-card
      cards:
        - ...
3 Likes
1779

using this template on my buttons works fine, except for a state with more than 2 underscores (or capitals, I donā€™t know for sure)

entity_picture_template: >
          return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(' ','_') + '.png';

please see here for a separate post, didnā€™t want to obscure it too much.

js is correct ? (works everywhere in Tiles, and the rest of the Buttons), could it be the Button template interpreter?
thanks for having a look!

1780

Fantastic! Thank you very much, canā€™t wait to try it

1781

Unfortunately, no, your JS is not correct.
The replace function is taking a regexp, so the correct format for that to work is:

entity_picture_template: >
          return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(/ /g, '_') + '.png';

note the g, which means apply it as many time as possible, without it, itā€™s only done once which is the result you have with your current code.

> "Zwembad de Stok".replace(' ', '_')
'Zwembad_de Stok'
> "Zwembad de Stok".replace(/ /g, '_')
'Zwembad_de_Stok'

See here for more info: How to replace all occurrences of a string in JavaScript

1782

wow, thanks for your speed! ill change right away.

does this work for the toLowerCase also? it should endup like (name_)zwembad_de_stok

Still, it does work on the Tiles card, so maybe that has this built in?

1783

toLowerCase() is applied to the whole string.

> "Zwembad de Stok".toLowerCase().replace(' ', '_')
'zwembad_de stok'
> "Zwembad de Stok".toLowerCase().replace(/ /g, '_')
'zwembad_de_stok'

I donā€™t see how it can work. Other tiles are also using javascript, the same way this card is doing it. Itā€™s your browser interpreting javascript so itā€™s the same interpreter whatever the tile is.

1784

please let me ask where do you test this? Is an online javascript of your preference tester available

thanks again.

1785

I test it using node but you can run it from your browser console also:

image
image927Ɨ263 19.6 KB

1 Like
1786

o yes, Iā€™ve never known that.
Just imagine how many restarts this would have saved me, I canā€™t imagineā€¦ Once again youā€™re a life saver! canā€™t thanks you enough for thisā€¦

btw, the button works now :wink:

1 Like
1787

Hi everyone, I have been absent on this thread for a while as I was busy creating templates with the decluttering card.

I remember creating my first Homekit button design a while back just when @RomRider took over this repo, and it has only gotten better.

For the ones interested, I use two templates for ALL my buttons in my setup. The reason I use two is because I canā€™t seem to figure out how to template

label: ' '

and

label_template: >
  var bri = Math.round(entity.attributes.brightness / 2.55);
  return (bri ? bri : '0') + '%';

in a single template with the decluttering card.
But still only 2 templates for over 60 different buttons is awesome! Thnx @RomRider

Here is the code for my shorted down template:

switch_button_card:
  default:
    - size: 25%
    - lock: false
    - color: auto
    - background_color: var(--homekit-white)
    - variable: spin
    - spin: false
    - show_name: true
    - show_state: true
    - show_label: true
    - show_icon: true
    - show_last_changed: false
    - tap_action:
        action: toggle
        haptic: light
    - hold_action:
        action: more-info
        haptic: success
    - aspect_ratio: 1/1
    - margin-right: 60px
    - label: ' '
    - opacity: 0.4
    - off_icon_color: gray
    - off_name_color: gray
    - off_state_color: gray
  card:
    type: custom:button-card
    name: '[[name]]'
    icon: 'mdi:[[icon]]'
    size: '[[size]]'
    color: '[[color]]'
    lock: '[[lock]]'
    aspect_ratio: '[[aspect_ratio]]'
    entity: '[[entity]]'
    label: '[[label]]'
    show_name: '[[show_name]]'
    show_icon: '[[show_icon]]'
    show_state: '[[show_state]]'
    show_label: '[[show_label]]'
    show_last_changed: '[[show_last_changed]]'
    tap_action: '[[tap_action]]'
    hold_action: '[[hold_action]]'
    styles:
      card:
        - border-radius: 12px
        - --paper-card-background-color: '[[background_color]]'
      label:
        - color: gray
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
        - padding-left: 10px
        - color: gray
      grid:
        - grid-template-areas: '"i" "n" "s" "l"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
        - margin-right: '[[margin-right]]'
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - font-family: Helvetica 
        - font-size: 13px
    state:
      - value: "on" 
        '[[variable]]': '[[spin]]'  
        styles:
          name:
            - color: black
          state:
            - color: gray
          lock:
            - color: black
      - value: "off"
        styles:
          card:
            - opacity: '[[opacity]]'
          icon:
            - color: '[[off_icon_color]]'
          name:
            - color: '[[off_name_color]]'
          state:
            - color: '[[off_state_color]]'
          lock:
            - color: black

For my full setup you can check here https://github.com/jimz011/homeassistant

@iantrich I think you might be interested in this

2 Likes
1788

@kuuji is gone. @RomRider took over :wink: