Scrolling/fading text in Lovelace, is it possible?

Feature Requests
1

Hi all fellow HA users/devs. I wonder if it would be possible to have a card that scrolls and/or fades text?

E.g. I’d like to have a small height card at the top of my setup to display some information (for example the amount of doors opened or if someone has their birthday). It would basically be something like a markdown card but with changing text. For example if there is a door open and a window, that it will fade or scroll to the next piece of text. Showing the amount of doors opened first and then fade to the amount of lights on and then fade to the amount of windows open etc etc.

I would like to create a glance notification which only shows text so no icons, just something simple and clean. Would this be possible? If no, could it be done? If yes would it be possible with existing cards (like the useful markdown card for example?).

Thanks for your input!

2

I don’t think this is going to be possible with existing cards, but it would be likely be possible by creating a custom card. I might see if I can pick this request up if nobody else does.

3

I found this but it does not work well :frowning: (the scrolling animation keeps resetting)


I hope someone will make something similar :slightly_smiling_face:
4

Custom Header allows for a Marquee, but a dedicated card would be even better… posted this before I arrived at this FR.

1 Like
5

Scrolling cards can also be achieved with swipe-card. Unfortunately I can’t post video’s here or I would have shown you how I make my notifications scroll.

I’ll post a link as soon as I have uploaded one on YT. But a dedicated card would indeed be amazing!

6

Ha that’s interesting, don’t use the swipe card yet :wink:

you can post animated gifs easily. create these with giphy capture (on a Mac)

7

by the way to answer your OP title:yes it is :wink:

8

Yes I saw what you guys have made and it is really cool. Not sure if I will implement it as I am happy with my current slider (which is also interactive, as in, I can scroll between notifications manually as well, and I can press it to show a different action/card).

But really cool! Thanks!

9

Yep you do remember to post that if you’re ready for it… :wink:

10

Yes I am currently finishing up the last pieces and some details that need attention, but after that it is time for documentation and github :stuck_out_tongue:.

In short I use conditional button-cards with a transparant background within a swipe card.

11

Since custom header is gone… (i used it with vertical marquee)
How can i achieve this?
Can this been done with markdown? (i actually want one line of text showing states from multiple sensors)

@jimz011

12

It might be possible with a markdown card though I do not know, I think an HTML card could do this easier in your case.

I still hold on to my previous post where I just use button-cards in a swipe-card and the swipe-card automatically switches between the cards (a markdown could be used instead of the button-card though)

You can find examples of my code here (warning probably not easy to find)

13

another option can be a marquee in a button-card. Ive posted this a long time ago in the button-card thread but here you go:

type: custom:button-card
template: button_summary_picture
size: 75%
entity: sensor.next_alarm
hold_action:
  action: navigate
  navigation_path: /lovelace/alarmclock
label: >

  [[[ var caption = 'Next:&nbsp';
      var alarm = states['sensor.next_alarm_day_only'].state;
     if (entity.state != 'Not set')
     return `<div style='display: flex;
                         padding: 0px 5px 0px 5px;
                         align-items: center;
                         background: transparent;'>
     <div>${caption}</div>
     <marquee>
     <span style='color: var(--primary-color);align-items: center;'>${alarm} at ${entity.state}</span>
     </marquee>`;
     return entity.state; ]]]

or even simpler:

type: custom:button-card
aspect_ratio: 12/1
name: >
  [[[return `<div style='display: flex;
                         padding: 0px 5px 0px 5px;
                         align-items: center;
                         background: transparent;'>
     <div>(${states['sensor.count_alerts_notifying'].state})&nbspHa&nbspRpi4 alerts:&nbsp;</div>
     <marquee>
     <span style='color: var(--primary-color);align-items: center;'>
     System alerts: ${states['sensor.marquee_alerts'].state}&nbsp</span>
     </marquee>`]]]

and have a sensor for the marquee:

sensor:

  - platform: template
    sensors:

      marquee_alerts:
        value_template: >
          {%- if is_state('binary_sensor.alerts','on') -%}
            {%- if is_state('binary_sensor.schimmel_alert','on') %} - Schimmel alert: {{states('sensor.schimmel_sensor')|float}}% / CO2: {{states('sensor.co2_living')}} ppm{%- endif -%}
            {%- if is_state('binary_sensor.meteoalarm_brabant','on') %} - MeteoAlarm: {{state_attr('binary_sensor.meteoalarm_brabant','awareness_level').split(';')[0]}} - {{state_attr('binary_sensor.meteoalarm_brabant','awareness_level').split(' ')[2]}} - {{state_attr('binary_sensor.meteoalarm_brabant','headline').split(' ')[0]}}{%- endif -%}
            {%- if is_state('binary_sensor.earthquakes_near_active','on') %} - Beware! Quakes near active: {{state_attr('sensor.earthquakes_near','list')}}{%- endif -%}
            {%- if is_state('persistent_notification.updater_notification','notifying')%} - Update: {{states('sensor.ha_available_version')}} available{%- endif -%}
            {%- if is_state('binary_sensor.espresso_needs_refill','on')%} - Espresso {{states('sensor.espresso')}}{%- endif -%}
            {%- if is_state('binary_sensor.hubs_offline','on')-%} - {{state_attr('sensor.hubs_offline','message')}}{%- endif -%}
            {%- if is_state('binary_sensor.critical_devices_offline','on')-%} - {{state_attr('sensor.critical_devices_offline','message')}}{%- endif -%}
            {%- if is_state('persistent_notification.trash_notification','notifying') -%} - {{states('sensor.trash_alert')}}{%- endif -%}
            {%- if is_state('binary_sensor.github_repo_has_update','on') -%} - {{state_attr('binary_sensor.github_repo_has_update','count')}} update: {{state_attr('binary_sensor.github_repo_has_update','updates')}}{%- endif -%}
            {%- if is_state('binary_sensor.diskstation_security_status','on') -%} - Diskstation not secure!{%- endif -%}
            {%- if is_state('binary_sensor.celebration_alerts','on') -%}
            {%- if is_state('binary_sensor.birthday_she','on')%} - SHE is vandaag jarig en {{state_attr('binary_sensor.birthday_she','years')}}jaar geworden{%- endif -%}
            {%- if is_state('binary_sensor.birthday_marijn','on')%} - Marijn is vandaag jarig en             {%- endif -%}
          {%- else -%} All clear
          {%- endif -%}

showing your multiple lines of text :wink:

14

Hi @Mariusthvdb
Thx for the headsup
The only problem is, that i dont like the idea of having a button …
I mean visually

I prefer, just a markdown text
Not sure if that could work

15

as far as I know it the markdown card doesnt support the marquee, ive been experimenting with this same idea before.

But concerning the button, not sure what your issue is with the button, but you can style a button to not have it look like a button :wink:
it’s just a card disguised as a button, if you have it look like a button.

16

ok , and how do i do that, to not have it look like a button…
Gonna try this marquee right away :slight_smile:

17

why dint you first try to make it, and then report back with you wishes to change it.
the options are endless… so seems most useful to begin and see what happens with the default settings

18

Getting an error for now

i copied your card type
and my sensor looks like

- platform: template
    sensors:
      marquee_alerts:
        value_template: >
          {%- if is_state('binary_sensor.alerts','on') -%}
            {{states('sensor.afval')}}
            {%- if is_state('binary_sensor.schimmel_alert','on') %} - Schimmel alert: {{states('sensor.schimmel_sensor')|float}}% / CO2: {{states('sensor.co2_living')}} ppm{%- endif -%}
          {%- else -%} All clear
          {%- endif -%}

I get an error

ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in 'return `<div style=‘display: flex; padding: 0px 5px 0px 5px; …’

19

I do hope you edited this to have some entities of your own? undefined means these are not on your system…
since this is a regular Jinja template, you can test it in the developers template editor, to be correct and useful

20

yeah i edited it:

- platform: template
    sensors:
      marquee_alerts:
        value_template: >
          {%- if is_state('binary_sensor.alerts','on') -%}
            {{states('sensor.afval')}}
            {%- if is_state('binary_sensor.det_inkom','on') %} - Detect in inkom{%- endif -%}
          {%- else -%} All clear
          {%- endif -%}

Still the same warning

Code for my dashboard

cards:
  - cards:
      - content: |
          <font size=6>{{ states('sensor.greeting') }}</font>
        style: |
          ha-card {
            margin-top: 5px;
            background-color: rgba(0, 0, 0, 0);
            font-size: 100%;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
             box-shadow: none;
             text-align: center;
           }
           h1, h3 {
             font-weight: 400 !important;
           }
        type: markdown
      - type: custom:button-card
        aspect_ratio: 12/1
        name: >
          [[[return `<div style='display: flex;
                                 padding: 0px 5px 0px 5px;
                                 align-items: center;
                                 background: transparent;'>
            <div>(${states['sensor.count_alerts_notifying'].state})&nbspHa&nbspRpi4 alerts:&nbsp;</div>
            <marquee>
            <span style='color: var(--primary-color);align-items: center;'>
            System alerts: ${states['sensor.marquee_alerts'].state}&nbsp</span>
            </marquee>`]]]  
    layout: horizontal
    max_columns: 3
    max_height: 128
    max_width: 350
    type: 'custom:layout-card'

IS the cause the “sensor.count_alerts_notifying”?
Cause i dont have that one, whats it for?
Does the marquee read notfications too?