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!

3 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: