Finally made my first marquee (on a custom: button-card)

Share your Projects!
1

marquee alerts

After @mayker showed me the way and @ludeeus added his to Custom Header template showcase and discussion I had a lot of trial and tribulations…

finally made it to this today, and, whilst still simple, and open to a lot of improvement, I am quite happy with the result so far. Glad to share and give some back now!

this is the code:

type: conditional
conditions:
  - entity: binary_sensor.alerts #package package_hassio_pi4_system
    state: 'on'
card:
  type: custom:button-card
  name: >
    [[[return `<div style='display: flex;display: -webkit-flex;'>
       <div>Ha&nbspRpi4 alerts:&nbsp;</div>
       <marquee>
       <span style='color: red;'>
       Inside temperature: ${states['sensor.temperatuur_living'].state},&nbsp
       Outside temperature: ${states['sensor.temp_current'].state},&nbsp
       </span>
       <span style='color: var(--primary-color);'> 
       System alerts: ${states['sensor.marquee_alerts'].state}&nbsp</span>
       <span style='color: green;'>
       Summary - ${states['sensor.dark_sky_summary'].state},&nbsp
       Daily - ${states['sensor.dark_sky_daily_summary'].state}&nbsp
       Hourly - ${states['sensor.dark_sky_hourly_summary'].state}
       </span>
       </marquee>`]]]

next up the list is replacing the hard coded variable sensors in the card it self to card variables so I can easily change things. also the colors need to be using builtin colors like var(–primary–color) etc.

Please let me know if you can use this, and how to build on it!

4 Likes
2

Thanks for sharing this!! It’s really helped to solve some problems of too much text to display in a small area for me.

Here’s a simplified version for anyone who just wants to show some text:

      - type: custom:button-card
        name: >
          [[[return `<marquee>"Hello World!"<\marquee>`]]]
1 Like
3

I tried your example for a scrolling marquee and it works great however it only scrolls once. Is there a way to make this continually scroll, so once it scrolls off on the left it begins again on the right?

***edit - nvm, I re-copied and pasted the code again and it began scrolling correctly. Thx

4

Hmmmm,
I can display static text using marquee inside custom button, but sensor template does not play the ball.

- type: custom:button-card
              name: >
                [[[return `<div style='display: flex;display: -webkit-flex;'><marquee direction='up'> Summary - ${states['sensor.dark_sky_summary'].state} </marquee>`]]]
              style:
5

Thank you so much for this code. HA really needs a marquee card of some sort but this worked perfectly after simply changing the entities to my own similar types.

I am hoping that I’ll be able to use a group (helper) of binary senors as the input for the alerts. The Button Card does support that feature so I will see if I can get there from here. I am by no means a coder.

6

sure, you’re most welcome :wink:

however, I had forgotten about this post, and it hs evolved since then…
I just updated the newer version here which migrates away from the ‘deprecated’ html marquee tag to the modern CSS translateX() technique

It was rather complex compare to the html marquee which just works, because the length and available space need to be aligned.
Since the length of my Marquee string is dynamic, that was not straightforward…

Hop over to the other post and see how I did that

Marking this as solved as I don’t want to advocate the deprecated Marquee, but offer the css as solution :wink: