Quote of the Day Lovelace Card

dwinnn · November 16, 2018, 11:07pm

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

Background image by Yannick Pulver via Unsplash
Feed Parser Sensor - For doing the hard work
All the Home Assistant custom components and cards out there. I learned from your examples.

juan11perez · November 18, 2018, 8:43am

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

dwinnn · November 18, 2018, 3:28pm

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?

juan11perez · November 18, 2018, 3:34pm

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.

dwinnn · November 18, 2018, 4:32pm

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.

juan11perez · November 18, 2018, 4:38pm

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

thank you

dwinnn · April 22, 2019, 6:23am

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

hardys · September 4, 2019, 10:51am

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

dwinnn · September 4, 2019, 1:52pm

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…

hardys · September 4, 2019, 2:59pm

Thank you for getting back to me.

k2v1n58 · September 6, 2019, 2:48pm

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

dwinnn · September 6, 2019, 8:55pm

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

dwinnn · September 10, 2019, 6:43am

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

hardys · September 10, 2019, 1:59pm

working great now - great job people !!

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

dariusz · November 15, 2019, 11:23am

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:

dariusz · November 15, 2019, 1:04pm

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

jakib123 · March 27, 2020, 7:18am

This is very good for quote of the day

rschneeweis30 · January 20, 2021, 8:35pm

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

dwinnn · January 22, 2021, 1:09am

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

rschneeweis30 · January 26, 2021, 2:58am

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