Lovelace: Home Feed Card

Edit - 18/04/2019: Now with added custom_updater!

No new features added in this update, but you can now use custom_updater to keep it up to date with any new updates.
To implement this has required the name of the file to be changed from home-feed-card.js to lovelace-home-feed-card.js, so bear this in mind if you are updating manually.

Edit - 30/05/2019: Performance improvements, please read carefully if you have issues with Firefox

The latest version does a couple of things in a different way:

  • It uses a different way of importing the Moment module, it was previously relying on this being loaded as a resource in the Lovelace configuration. It now uses dynamic imports. Firefox versions < 66 don’t support these by default and you may need to set the javascript.options.dynamicImport option in about:config for it to work.
  • It now uses different way of monitoring notification changes. The old method was using WebSocket subscriptions which, at least on my system, had a tendency to cause “client exceeded max pending messages” errors in the log. It now monitors the notification icon badge count. It may sometimes take longer for new/updated notifications to appear on the feed, but it is less prone to errors.

HomeFeedCard

I wanted a card which displayed persistent notifications more prominently, along with calendar events and other entities. So, here is the Home Feed Card:

If you are using custom_updater you can add it like this:

resources:
  - url: /customcards/github/gadgetchnnel/lovelace-home-feed-card.js?track=true
    type: js

Alternatively, you need to add all the files under config folder/www/custom-lovelace/home-feed-card and add it to the resources like this:

resources:
  - url: /local/custom-lovelace/home-feed-card/lovelace-home-feed-card.js?v=0.0.0
    type: js

You can then use it like this:

Configuration

type: 'custom:home-feed-card'
  title: Home Feed
  show_empty: false
  calendars:
    - calendar.home_calendar
    - calendar.work_calendar
  id_filter: ^home_feed_.*
  entities:
      - sensor.next_alarm_time
      - entity: sensor.bin_collection
        name: Next Bin Collection

Example

calendars (optional)

This is a list of calendar entities you want events to display for in your feed.

id_filter (optional)

This is a regular expression for filtering persistent notifications by notification id. In the example above, “^home_feed_.*” will result in only notifications with ids starting with home_feed_ from being displayed.

entities (optional)

A list of entities to display on the feed. For sensors with a device_class of “timestamp” the message text is the entity name and the time is the state of the sensor. For all other entities the message text is in the format “entity name @ state” and the time is the last modified time of the entity.

show_empty (optional, defaults to true)

Whether to show the card if there are no items to show

Sort order of items

Items are displayed so that, the further in the past or future an event is, the further down the list it will appear. This hopefully keeps the more relevant ones at the top.

Multi-item Entities

Entities can made to appear as multiple items in your feed if they contain a list of objects as an attribute. For example, the Reddit sensor has attributes like this:

{
  "posts": [
    {
      "title": "Post title",
      "created": 0000000000,
      "body": "Post body!",
      "score": 00,
      "comms_num": 00,
      "url": "https://www.reddit.com/r/*****",
      "id": "******"
    },
    {
      "title": "Another Post title",
      "created": 0000000000,
      "body": "Another Post body!",
      "score": 00,
      "comms_num": 00,
      "url": "https://www.reddit.com/r/*****",
      "id": "******"
    }]
}

To add multi-item entities for this the following format would be used:

type: 'custom:home-feed-card'
  title: Home Feed
  show_empty: false
  calendars:
    - calendar.home_calendar
    - calendar.work_calendar
  id_filter: ^home_feed_.*
  entities:
     - entity: sensor.reddit_<name>
        multiple_items: true
        list_attribute: posts
        timestamp_property: created
        max_items: 5
        content_template: '{{title}}'

multiple_items (required)

This must be true to identify the entity as a multi-item entity

list_attribute (required)

The attribute on the entity which holds the list of items which should be included in the feed

timestamp_property (required)

The property on the object which has the posted time. The property can be either a string in ISO format or a Unix timestamp

max_items (optional, defaults to 5)

The maximum number of items to display for this entity

content_template (required)

This controls the message text which is displayed for each item. Any property on the object can be included as part of the text by using the format {{propertyname}}

Basic example, template generating text:

‘{{title}}’ -> ‘Post title’

Advanced example, template generating Markdown:

‘[{{title}}]({{url}})’ -> “[Post title](https://www.reddit.com/r/…)”
This would be rendered as Post title

Note: To avoid excessive requests to retrieve calendar events and notifications, this card caches data via localStorage. Notifications will always be kept up to date, since WebSocket subscriptions are used to keep these refreshed but calendar events will only be updated every 15 minutes.

Edit: Have updated this now to eliminate the hardcoded URLs for the icon images. (now obsolete, current version doesn’t use images for icons and uses the mdi icons).
Have now improved formatting, and added show_empty option.

** Edit 12/03/2019: A couple of changes have now been made.

  1. It will now pick up the icon of an entity if that is defined, rather than just using hard-coded icons
  2. It is now possible to generate multiple items from a single entity. I have only tested this with the new Reddit sensor introduced in 0.89 but it should work with any entity which has an attribute which is a list of objects.
7 Likes

Thank you for this :smiley:

Working perfectly !

is there a way to make the image path relative to where you store the js file? all of my cards are stored in another folder inside /www already so it would be inconvenient for me to bury the icons in another folder three deep.

all of my other cards are referenced by /local/lovelace/cards.js and that will be where i put your card file also. I will probably end up putting the icons in another folder I already have for icons (/www/icons/home-feed-card/) and I will update your code in my config appropriately.

It would be nice to maintain some kind of standard structure for custom components, tho.

I’ve updated it now so it picks up the location of the script, but it still looks for an images folder relative to the script location. I’ll try to come up with a better way of doing this. I may add an additional config setting (something like icon_path) to allow the default location to be overridden.

1 Like

thanks for that.

I think that making it a configurable path would be a good solution.

i was looking at the new code and was wondering if the path at line 316 also needs changed but was an oversight or it’s ok the way it is? i got installed but haven’t tried it in my lovelace config yet either way.

Thank you @Steven_Rollason, very nice card ! I have installed and it works overall, but I am confused with the customization options :

  1. how does the id_filter work ? Is it supposed to stay as is or can be changed to only show sensors for example, and is the syntax “^sensor.*” then ?
  2. in the snip you have pasted, it looks like there is an option to X out a notification ? The X does not show in my card
  3. Icons are missing in the entities I have setup, but likely related to the comment @finity is making
  4. The card visibly flickers every 3 seconds or so, presumably when it refreshes.

Thanks for your advice, I hope this helps, and once again, thank you for your work !

I’m having the same problems with the icons. I even tried to revert it back to the hard coded path (/local/lovelace/images/) and it still won’t display at least the persistent notification icon. I haven’t tried the others yet.

Also another feature request would be a “hide_if_empty: true” option since I’ll probably only ever use it for persistent notifications and it will be empty more often than not.

I’ve fixed the issue with the hardcoded image path at line 316

The id_filter is for just for filtering persistent notifications, which are the same ones that appear when you click on the notification bell on the top bar in the UI. For example, if you wanted just the invalid authentication notifications to be included then you would have something line “^http-login$”
If you remove that setting all persistent notifications would be displayed in the feed.

The X should show for persistent notifications, since these can be dismissed, but not for things such as sensors or calendar events.

Thanks for the clarification

The latest version of this now uses the built-in mdi icons in Home Assistant for the icons rather than images and so should no longer have the problems with fixed image paths.

Yes, it’s working much better now. I’m no longer getting the flickering that was occurring before and the icons are showing up.

The icons are a little off line from the rest of the text but that’s not too big of a deal.

Also could you force the dismiss button for the persistent notification to follow the theme? right now it’s a dark purple which makes it difficult to see with a dark theme. Here is an example of those two things I mentioned:

ex

The only other thing that I would like to see is some way to not show the card if there is nothing to display. I mentioned it above but I didn’t know if you missed it or not.

Thanks for your work on this. I really don’t like that the persistent notification pop-up group was removed from lovelace.

The colour of the dismiss button was due to the icon being wrapped in a link, which applying a blue colour. I have uploaded a new version with this and the other styling issues fixed. This also now included a show_empty option which defaults to true which controls whether the card shows if there is nothing to display.

1 Like

Everything looks good as far as styling is concerned, so thanks for that.

there is still an issue with the “show_empty:” tho.

If the “show_empty: false” is set then if a notification comes in the card doesn’t automatically show itself again until you hit either the refresh button in either the lovelace menu or in the browser itself.

it will, however, auto hide itself if you hit the dismiss button in the notification pane or the x button in the card, so that part works correctly.

This should now be fixed in the latest version. The card should now re-appear once a notification comes through.

1 Like

I just tried it and it seems to be working exactly as expected. Thanks again. Very useful.

I have now applied a couple of changes to this:

  • It will now pick up the icon of an entity if that is defined, rather than just using hard-coded icons
  • It is now possible to generate multiple items from a single entity. I have only tested this with the new Reddit sensor introduced in 0.89 but it should work with any entity which has an attribute which is a list of objects.

Do you have any plans to add custom_updater support?

I’ve just pushed up a fix to this for a couple of issues:

  1. Timestamps for all day calendar events gave an “invalid date” error. Have also made changes here which should work with more calendar types (such as CalDav).
  2. The update to Home Assistant 0.90 affected the way that this card subscribes to updates to notifications. The card could subscribe to the notifications but could not tell if it had already done so, causing it to repeatedly subscribe which would eventually result in “Client exceeded max pending messages” errors in the log.