Quote of the Day Lovelace Card

Hi all,

I’ve been studying programming as a hobby and have been studying the custom cards and components shared on this forum. Funny enough, those were the best resources to learn and develop my own components and cards! Here is one of a few cards I created.

Quote of the Day Card

quote
Download from Github and follow the instructions on the readme.md

Quote of the Day card uses the Feed Parser Sensor to pull quotes from the Brainyquotes.com RSS feed and display them on a nice card.

Updates

  • 4/21/2019 - Fixed header size based on quote length. Added ability to display more than one quote, randomly, with fade effect.

Credits

5 Likes

very nice, thank you. I added it, but it seems to go behind other cards and doesnt display

That’s odd, can you tell me more about your Home Assistant version and web browser you’re using? Does your Feed Parser sensor show the author and quotes correctly?

Did you also save the bg.jpg file and place in the \config\www directory?

Thank you. Home assistant 0.82.1 in docker with chrome browser. Feed parser is correct.
only difference is that you reccomend putting the card and jpg in /config/www. I have a custom lovelace folder. So all goes to /config/www/custom_lovelace.
I did modify the respective path for the jpg in your card.

Do you use many custom Lovelace cards? Maybe the CSS in my card is conflicting with others. I will try and rename some things to be more specific so they don’t conflict with other card’s CSS.

Yes, Im now using lovelace full time, including some custom cards from here.

thank you

I’ve updated my card to fix the display of lengthy quotes and added the ability to display more than one quote, though it’s random and I can’t control the refresh time. If someone has a suggestion to improve this, let me know :slight_smile:

can someone help please, followed all the instructions and installed feeder and card from HACS, added the relevant lines to config and ui-lovelace, but nothing showing up on page ? and I have noticed the following error in has;

https://m5vy0q1qa99jivkkf41rlxuukcgns11m.ui.nabu.casa/community_plugin/quote-of-the-day-card/quote-of-the-day-card.js:174:30 Uncaught TypeError: Cannot read property 'length' of undefined

This card us only working with Feedparser v0.5 or earlier. Later versions of Feedparser store the data as objects instead if dictionary format, and the card can’t read it. I’ll update the card eventually, once I figure out how to view Feedparser objects…

Thank you for getting back to me.

If you define quoteList like this:

const quoteList = config.feed_attribute ? hass.states[config.entity].attributes[config.feed_attribute] : hass.states[config.entity].attributes;

and define feed_attribute: entries in your configuration, it should work with the latest version of Feedparser

Thanks. I will test it out this weekend and update the code.

I added your fix in the latest release. Thanks for the help!

working great now - great job people !!

on a side note is it possible to adjust card height ?

I’ve followed - I think - the instruction - but the result I’m getting is following -> screen.
What I’m doing wrong?
The only change - there was no file ‘bg.jpg’, so I’ve downloaded other and renamed it…
In the ‘raw config editor’ I have:

resources:
  - type: js
    url: /local/quote-of-the-day-card.js
  - entity: sensor.quote_of_the_day
    feed_attribute: entries
    type: 'custom:quote-of-the-day-card'

Screen:

O.K. Working…
The code must be in ‘manual card’…

This is very good for quote of the day

Howdy

So I have it working fine. I have added my own RSS feed, and that works fine. I am trying to change the background image, and no matter what I do it, it will not change. I have edited the js file. and changed it to images/background.jpg and it still comes back with the same image. I have tried it on different dashboards, cleared cache, and rebooted the site a few time.

Any suggestions? Thanks

Can you share the exact configuration you’re using? If the image is stored on /config/www/images/background.jpg, then then configuration should look like this:

type: 'custom:quote-of-the-day-card'
entity: sensor.quote_of_the_day
feed_attribute: entries
image: /local/images/background.jpg
1 Like

I kept doing it in the js file, not on the card itself… That did the trick! Thanks!