nervetattoo / banner-card

A fluffy banner card for Home Assistant 🥰
MIT License
609 stars 57 forks source link

Custom images for icons in headers #106

Open fabiendostie opened 3 years ago

fabiendostie commented 3 years ago

hello, first of all thank you for this wonderful add-on! I like it a lot, my girlfriend too!!

I have two issues: 1- I see that its possible to use images as "icons" in the header, but I can't seem to be able to find the way to actually do it... could someone please help me with the \ escape thing? I don't understand how or where to put my .png or .svg files to be able to use them.

2- I have successfully set a switch for a light that calls on a script to dim the lights but it doesn't react like it's supposed to or at least how I was expecting. I am pretty sure it's because I had to use "tap_action" instead of just "action" for it to actually work. I am not well versed in js or coding in general, learning fast but still quite noob and i would really appreciate the help.

heres the code for the light entity switch in question:

type: 'custom:banner-card'
background: 'radial-gradient(#286a84,#212527)'
heading: Bureau
row_size: 4
entities:
  - entity: light.70207438b4e62d384747
    name: Lumieres Soir
    tap_action:
      action: call-service
      service: script.turn_on
      icon: 'mdi:moon-rising-crescent'
      service_data:
        entity_id: script.dim_office_light

thanks

conradhagemans commented 3 years ago

You can insert an image using the escape codes from UNICODE. For example "\U0001F5A5" in:

heading:
  - "\U0001F5A5 Hal"

See for other examples: UNICODE

fabiendostie commented 3 years ago

sorry for the late reply but I never got the notification for your answer. I was referring to actual images in .png format like in the examples used here on his GitHub ie: https://github.com/nervetattoo/banner-card/blob/master/screenshots/living-room.png i can't figure out where to put my images how to call them: i tried /local/grphx/whatever.png that dont work for me. If you could please enlighten me i would greatly appreciate it. I use it a lot for my wife's cellphone lovelace view, it's cute and she like's it!

thank you

dgooglr commented 3 years ago

sorry for the late reply but I never got the notification for your answer. I was referring to actual images in .png format like in the examples used here on his GitHub ie: https://github.com/nervetattoo/banner-card/blob/master/screenshots/living-room.png i can't figure out where to put my images how to call them: i tried /local/grphx/whatever.png that dont work for me. If you could please enlighten me i would greatly appreciate it. I use it a lot for my wife's cellphone lovelace view, it's cute and she like's it!

thank you

Did you figure this out?

PrzemekSkw commented 2 years ago

Hello, @conradhagemans I find that sofa image with unicode U+1F6CB so I add this like this: /U0001F6CB but is black small icon. Can I add it with colors? https://unicode-table.com/pl/1F6CB/

Edit. OK, I find that site https://emojipedia.org/ where I just copy and paste images :D Can You tell me is it possible to add some spaces between that images I added? Zrzut ekranu z 2021-11-30 09-45-25

Zrzut ekranu z 2021-11-30 09-45-35

Regards.