Sliding text / value

Feature Requests
1

Would be great to implement a sliding text - if entity’s value is very long, it automatically slides left like we see in the TV news line

2

I think the technical term is “scrolling text”

1 Like
3

Sliding text = Marquee

HTML - Marquee Tag

and

The Marquee element (Obsolete)

The marquee effect is rarely ever seen in modern web UIs because, although considered a novelty back in the 90’s (along with the blink tag), it fell out of fashion because it was considered to be distracting (and often associated with annoying attention-seeking ads).

If you want to see how it looks in Home Assistant, the Ariela Android app offers it as an option. Wide text under a badge can scroll. Personally, I dislike the appearance of the marquee effect.

1 Like
4

I stand corrected :smiley:

As the current vote tally testifies

5

just to get back on this, the Custom Header allows one to do this:

vertical marquee

header_text: >-
  <style>
  flip {height:24px;overflow:hidden;}
  flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
  flip div:first-child {animation: show 10s linear infinite;}
  @keyframes show {
  0% {margin-top:-144px;}
  17% {margin-top:-96px;}
  33% {margin-top:-96px;}
  50% {margin-top:-48px;}
  67% {margin-top:-48px;}
  83% {margin-top:0px;}
  100% {margin-top:0px;}}
  </style>
  <div style='float: left'>Ha Rpi4:&nbsp;</div>
  <div id=flip><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  Daily -  {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
  Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  {{states('sensor.br_symbol')}}</div></div><div><div>

horizontal marquee:

        {% set alerts = namespace(active=[], color='var(--google-red-500)') %}
        {% if states('sensor.weatheralerts') | float != 0 %}
          {% for alert in state_attr('sensor.weatheralerts', 'alerts') %}
          {% set alerts.active = alerts.active + [alert['title']] %}
          {% endfor %}
        {% else %} {% set alerts.active = alerts.active + ['No active alerts'] %}
        {% endif %}
        {% set inside=states('sensor.temperatuur_living')%}
        {% set outside=states('sensor.temp_current')%} 
        {% set temp_color='var(--primary-text-color)'%} 
        {% set symbol='°C' %}
        <div style='display: flex;display: -webkit-flex;'>
        <div>Ha&nbspRpi4:&nbsp;</div>
        <marquee>
        <span style='color: {{ temp_color }}'>
        Inside temperature: {{ inside }}{{ symbol }},
        Outside temperature: {{ outside }}{{ symbol }},
        </span>
        <span style='color: {{ alerts.color }};'>
        Alerts: {{ alerts.active | join(' - ')}},
        </span>
        <span style='color: orange;'> 
        System alerts: {{states('sensor.marquee_alerts')}},
        </span>
        <span style='color: {{ temp_color }}'>
        Summary - {{states('sensor.dark_sky_summary')}},
        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
        </span>
        </marquee>

would be really nice if we could use this on a markdown card of sorts, but doing so now yields this:

19

with:

type: markdown
style: |
  ha-card {
  background: 'var(--paper-card-background-color)';
  }
content: >
  {% set inside=states('sensor.temperatuur_living')%}
  {% set outside=states('sensor.temp_current')%} 
  {% set temp_color='var(--primary-text-color)'%} 
  {% set symbol='°C' %}
  <div style='display: flex;display: -webkit-flex;'>
  <div>Ha&nbspRpi4:&nbsp;</div>
  <marquee>
  <span style='color: {{ temp_color }}'>
  Inside temperature: {{ inside }}{{ symbol }},
  Outside temperature: {{ outside }}{{ symbol }},
  </span>
  <span style='color: orange;'> 
  System alerts: {{states('sensor.marquee_alerts')}},
  </span>
  <span style='color: {{ temp_color }}'>
  Summary - {{states('sensor.dark_sky_summary')}},
  Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
  Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
  </span>
  </marquee>

might give the button card a try, but otherwise support this FR +1… You might do the yourself too, to give this some traction :wink:
Ill post a separate question on the community to ask where I might be able to put this marquee code in a card…

for the Custom Header, see Custom Header template showcase and discussion