Variable in custom button card

Configuration Frontend
1

Could anyone please help on the below greeting message using button card as marquee is not supported (based on what I read) in template card.

type: custom:button-card
entity: "[[[ return \"person.\" + user.name.toLowerCase(); ]]]"
show_entity_picture: true
name: | 
    [[[ 
    var time=now().hour;
    if (time >= 18) return "Good Evening "+ user.name + "!"; 
    else if return (time >= 12) return "Good Afternoon "+ user.name + "!"; 
    else if return (time >= 5) return "Good Morning "+ user.name + "!";
    else return "Hello "+ user.name + "!"; 
    ]]]
styles:
  grid:
    - grid-template-areas: "\"i\" \"n\""
  icon:
    - width: 70px
  img_cell:
    - border-radius: 155px
    - width: 90px
    - height: 70px
  card:
    - margin: 0
    - border-radius: 20px
    - padding: 5px 295px 5px 1px
  name:
    - font-weight: normal
    - font-size: 25px
2

Start with fixing an indentation.

4

Apologies, My mistake and pasted the code wrongly. Obviously I checked for the Indentation before reaching out. Updated the original post with the code. Hope that has right identation as I am not much into coding

5

So, what difficulties to you have with this code?
(away from a PC, just interesting)

6

It throws an error for this :arrow_up: I am still playing with the user.nameportion

type: custom:button-card
entity: "[[[ return \"person.\" + user.name.toLowerCase(); ]]]"
show_entity_picture: true
size: 4em
name: |
  [[[
   let Time =  new Date().getHours();
    if (Time < 13) return "Good Morning " + user.name + "!"; 
    if (Time < 18) return "Good Afternoon " + user.name + "!"; ; 
    if (Time < 24) return "Good  Evening " + user.name + "!"; 
   ]]]
styles:
  card:
    - margin: 0
    - border-radius: 20px
    - padding: 15px 295px 15px 1px
  name:
    - font-weight: 300
    - font-size: 15px

image
image788×244 24.4 KB

1 Like
7

I see, “now()” from jinja cannot be used in js.
Nice avatar, Jay673 )

1 Like
8

Thanks much, I was able to include greet text. I am looking to control the card size and the placement of the entity image to either left or right. How can I achieve that? Seems the entity image is aligned to center and if I reduce the width of the card, that also shifts the image.

type: custom:button-card
entity: "[[[ return \"person.\" + user.name.toLowerCase(); ]]]"
show_entity_picture: true
show_name: false
size: 3em
name: ""
styles:
  card:
    - margin: 0
    - border-radius: 10px
    - width: 16em
    - padding: 1px 100px 25px 35px
  name:
    - font-weight: 300
    - font-size: 10px
  custom_fields:
    greet:
      - position: absolute
      - align-self: left
      - left: "-35%"
      - top: 28%
      - bottom: 28%
      - right: 0%
      - color: null
custom_fields:
  greet: |
    [[[
     let Time =  new Date().getHours();
      if (Time < 13) return "Good Morning " + user.name + "!"; 
      if (Time < 18) return "Good Afternoon " + user.name + "!"; ; 
      if (Time < 24) return "Good  Evening " + user.name + "!"; 
     ]]]
9

like this?

image
image764×234 28.4 KB

type: custom:button-card
entity: "[[[ return \"person.\" + user.name.toLowerCase(); ]]]"
show_entity_picture: true
size: 4em
name: |
  [[[
   let Time =  new Date().getHours();
    if (Time < 13) return "Good Morning " + user.name + "!"; 
    if (Time < 18) return "Good Afternoon " + user.name + "!"; ; 
    if (Time < 24) return "Good  Evening " + user.name + "!"; 
   ]]]
styles:
  card:
    - border-radius: 20px
    - border: 1.5px solid red
    - background: grey
  name:
    - font-weight: 300
    - font-size: 25px
    - margin-left: -80px
  entity_picture:
    - border-radius: 50%
    - border: 1.5px solid red
  grid:
        - position: relative
        - grid-template-areas: '"i n"'
        - grid-template-columns: 30% 70%
1 Like
11

This works great. Basically I am trying to get a 7 column grid card. But if I specify the width in the card, it takes different width on different phones or devices. Below is the code I am trying with.

square: false
type: grid
grid_options:
  columns: 7
  rows: auto
cards:
  - type: custom:button-card
    entity: "[[[ return \"person.\" + user.name.toLowerCase(); ]]]"
    show_entity_picture: true
    show_name: false
    size: 2.5em
    name: ""
    styles:
      card:
        - border-radius: 10px
        - width: 225px
        - height: 3.4em
      grid:
        - position: relative
        - grid-template-areas: "\"i n\""
        - grid-template-columns: 30% 70%
      entity_picture:
        - border-radius: 64%
12

On what dash view are you trying to achieve 7 columns?

13

I was trying to use the sections available on dashboard. Ii started working fine now isomehow. Thanks much for all the help