Newsfeed in marquee

curious · February 2, 2021, 6:29pm

I have newsitems from a rss-feed in listcard. Because that takes a lot of space on my frontpage, I would like to have those news-items as a marquee (when that is possible).
I don’t know how to fill the template. Perhaps someone does ?
This is the code for the marquee :

type: custom:button-card
        name: >
            [[[return `<div style='display: flex;display: -webkit-flex;'>
               <div>Ha&nbspRpi4 alerts:&nbsp;</div>
               <marquee>
               <span style='color: red;'>
               news1: ${states['sensor.nunieuws'].state},&nbsp
               news2: {{state_attr('sensor.nunieuws', 'title')}},&nbsp
               </span>
               <span style='color: var(--primary-color);'> 
               System alerts: ${states['sensor.nunieuws'].state}&nbsp</span>
               <span style='color: green;'>
               Summary - ${states['sensor.nunieuws'].state},&nbsp
               Daily - ${states['sensor.nunieuws'].state}&nbsp
               Hourly - ${states['sensor.nunieuws'].state}
               </span>
               </marquee>`]]]

renespit · January 19, 2024, 9:57am

I think the best way is to use feedparser GitHub - custom-components/feedparser: 📰 RSS Feed Integration
Put something like this in your configuration.yaml:

sensor:
  - platform: feedparser
    name: Nu News Feed
    feed_url: 'https://www.nu.nl/rss/Algemeen'
    date_format: '%a, %d %b %Y %H:%M:%S %Z'
    scan_interval:
      minutes: 6
    inclusions:
      - title
      - link
    exclusions:
      - description
      - image
      - pubDate      
      - language

After a restart you can add a buttoncard to your view:

type: custom:button-card
card_mod:
  style: !include /config/lovelace/css/v2.0/card/rss/minimal.css
name: >
    [[[return `
        <marquee scrollamount=25 style="text-transform: uppercase; font-family: 'Lucida Console', 'Courier New', monospace; font-size: 72px; font-weight: bold; width: 100%; background-color: var(--app-header-background-color); vertical-align: middle;">



          <span style="background-color: var(--app-header-background-color); color: lightblue; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.telegraaf_news_feed'].attributes.entries[0].title }&nbsp;
          </span>

          <span style="background-color: var(--app-header-background-color); color: yellow; vertical-align: middle; text-transform: uppercase;">
            Temperatuur&nbsp;${ states['weather.buienradar'].attributes.temperature }${ states['weather.buienradar'].attributes.temperature_unit }&nbsp;
          </span>                

          <span style="background-color: var(--app-header-background-color); color: lightblue; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.nos_news_feed'].attributes.entries[0].title }&nbsp;
          </span>               

          <span style="background-color: var(--app-header-background-color); color: orange; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.telegraaf_news_feed'].attributes.entries[1].title }&nbsp;
          </span>

          <span style="background-color: var(--app-header-background-color); color: yellow; vertical-align: middle; text-transform: uppercase;">
            Temperatuur morgen, 
            max&nbsp;${ states['weather.buienradar'].attributes.forecast[0].temperature }${ states['weather.buienradar'].attributes.temperature_unit }&nbsp;
            min&nbsp;${ states['weather.buienradar'].attributes.forecast[0].templow     }${ states['weather.buienradar'].attributes.temperature_unit }&nbsp;
          </span>                    

          <span style="background-color: var(--app-header-background-color); color: orange; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.nos_news_feed'].attributes.entries[1].title }&nbsp;
          </span>                

          <span style="background-color: var(--app-header-background-color); color: yellow; vertical-align: middle; text-transform: uppercase;">
            Woonkamer temperatuur&nbsp;${ states['climate.nefit'].attributes.current_temperature }${ states['weather.buienradar'].attributes.temperature_unit }&nbsp;
            Ingestelde temperatuur&nbsp;${ states['climate.nefit'].attributes.temperature }${ states['weather.buienradar'].attributes.temperature_unit }&nbsp;
          </span>                

          <span style="background-color: var(--app-header-background-color); color: lightblue; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.telegraaf_news_feed'].attributes.entries[2].title }&nbsp;
          </span>

          <span style="background-color: var(--app-header-background-color); color: yellow; vertical-align: middle; text-transform: uppercase;">
            Energie productie vandaag&nbsp;${ states['sensor.envoy_122323024158_today_s_energy_production'].state }Wh&nbsp;
          </span>    

          <span style="background-color: var(--app-header-background-color); color: lightblue; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.nos_news_feed'].attributes.entries[2].title }&nbsp;
          </span>                

          <span style="background-color: var(--app-header-background-color); color: orange; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.telegraaf_news_feed'].attributes.entries[3].title }&nbsp;
          </span>

          <span style="background-color: var(--app-header-background-color); color: yellow; vertical-align: middle; text-transform: uppercase;">
            Energieprijs gemiddeld&nbsp;${ states['sensor.energyzero_today_energy_average_price'].state }${ states['sensor.energyzero_today_energy_average_price'].attributes.unit_of_measurement }&nbsp;
            energieprijs nu&nbsp;${ states['sensor.energyzero_today_energy_current_hour_price'].state }${ states['sensor.energyzero_today_energy_average_price'].attributes.unit_of_measurement }&nbsp;
            energieprijs maximaal vandaag&nbsp;${ states['sensor.energyzero_today_energy_max_price'].state }${ states['sensor.energyzero_today_energy_average_price'].attributes.unit_of_measurement }&nbsp;                      
          </span>                   

          <span style="background-color: var(--app-header-background-color); color: lightblue; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.nos_news_feed'].attributes.entries[3].title }&nbsp;
          </span>                

          <span style="background-color: var(--app-header-background-color); color: orange; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.telegraaf_news_feed'].attributes.entries[4].title }&nbsp;
          </span>

          <span style="background-color: var(--app-header-background-color); color: lightblue; vertical-align: middle; text-transform: uppercase;">
            &nbsp;${ states['sensor.nos_news_feed'].attributes.entries[4].title }&nbsp;
          </span>                

        <\marquee>
    `]]]

Note I have added more then 1 rss-news-feeds to my configuration.yaml.

curious · January 24, 2024, 8:03pm

Hi Renespit,

Did not expect an answer anymore, but after three years there it is Appreciate it !!
Is it possible to share the CSS-file too ? I am not very experienced with css.
Thanks in advance