had some iterations on this, never got around to finishing it, so here’s one more try. Main challenge:
make the marquee scroll, using a speed and translateX percentage , depending on the length of the marquee string. the space for the string is 36 characters.
type: custom:button-card
entity: sensor.marquee_alerts
variables:
marquee: >
[[[ return entity.attributes.marquee; ]]]
length: >
[[[ return Math.round(entity.attributes.marquee.length); ]]]
time: >
[[[ return variables.length/15 + 's'; ]]]
styles:
custom_fields:
marquee:
- --scroll-time: >
[[[ return variables.time; ]]]
custom_fields:
marquee: >
[[[ return `<p>${variables.marquee}</p>`; ]]]
extra_styles: |
p {
animation: scroll var(--scroll-time) linear infinite;
animation-delay: 1s;
/*animation-direction: reverse;*/
}
@keyframes scroll {
0% { transform: translateX(95%); }
100% { transform: translateX(-700%); }
}
In the settings above this works nicely for a very long string
but, if the string is only short, those numbers are incorrect, making speed and cost of all the long wait for the next run (-700%…) useless.
meanwhile, my good old marquee element does it better (it just takes the string, and scrolls it in the available space continuously), albeit not as fluently
cut is short: how to get a variable value inside
@keyframes scroll {
0% { transform: translateX(90%); }
100% { transform: translateX('-' + ${var(--trans-x)} + '%' ); }
}
or
@keyframes scroll {
0% { transform: translateX(90%); }
100% { transform: "translateX( -" + var(--trans-x) + "% )"; }
}
nothing works so far
and lets assume the length/space would do it
making that 344%
(which actually is quite alright if I enter that verbosely)
Bingo (I think)
can do this
custom_fields:
marquee:
- --trans-x: >
[[[ return '-' + 100*(variables.length/36) + '%' ; ]]]
and add that inside the keyframes:
@keyframes scroll {
0% { transform: translateX(90%); }
100% { transform: translateX( var(--trans-x) ); }
}
now need something like that for the scroll speed, which shouldn’t be as difficult to figure out, as it mostly is a personal preference, not as much a measurement to ‘fit exactly’ as the translateX is
guess I will start testing that using
- --scroll-time: >
[[[ return 20*variables.length/100 + 's'; ]]]
)
