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.dynamicImportoption inabout:configfor 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.
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
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.
- 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.
