Display-Feed Card by @appdevelopmentandsuch
Display-Feed-Card
requires a carefully constructed entity with a very specific format from your Home Assistant instance to display feed entries on your dashboard, otherwise it will not work as expected.- The entity you choose must have an
attribute
calledvalues
, which must be an array of objects in the form of:
{
id: "some-unique-string" ,
name: "My Sweet Project" ,
creator: "John Doe" ,
image: "some-image-to-project" ,
url: "some-link-to-project" ,
favico: "some-image-to-original-site" ,
}
or i.e.
attributes: {
values: [
{
id: "some-unique-string" ,
name: "My Sweet Project" ,
creator: "John Doe" ,
image: "some-image-to-project" ,
url: "some-link-to-project" ,
favico: "some-image-to-original-site" ,
},
{
id: "another-unique-string" ,
name: "My Awesome Project" ,
creator: "Jane Doe" ,
image: "another-image-to-project" ,
url: "another-link-to-project" ,
favico: "another-image-to-original-site" ,
}
]
}
- The best way I've discovered to do this so far is by using the Home Assistant Node Red add-on to facilitate the creation of the entity for the display-feed-card. I've attached a template below as a starting point for anyone interested in creating their own custom feed.
- At the end of the day, as long as you have an entity in your Home Assistant that matches the above template, you should have a feed going.
- Go to the
display-feed-card
release page, downloaddisplay-feed-card.js
,display-feed-card-[some_hash].js
, andeditor-[another_hash].js
and upload them to<config>/www/
on your Home Assistant instance. - In your Home Assistant instance, go to
Configuration -> Dashboards -> Resources
and add the following resource:/local/display-feed-card.js
- Restart your Home Assistant Server.
- Go to a Dashboard and add a
Display-Feed Card
. - Set the required information and enjoy!
Name | Type | Requirement | Description | Default | Example |
---|---|---|---|---|---|
type | string | Required | The type of card to be declared in Home Assistant | custom:display-feed-card |
|
entity | string | Required | The entity in your Home Assistant instance the feeds are coming from | sensor.display_feed |
|
shuffle | boolean | Optional | Shuffle the start order of the cards | false |
|
timer_interval | number | Optional | Duration in seconds between cycling through cards | 10 |
5 |
max_displayed | number | Optional | The number of cards to display at any given time, -1 for all cards |
-1 |
5 |
To use the Thingiverse API you must provide your own token, otherwise the Thingiverse section of the flow will not work. If you are unable to provide your own token, remove the link between the Map Thingiverse Output
and Join Outputs
, additionally modifying the Join Outputs
node by setting After a number of message parts
to 1
, otherwise the flow will never finish.
[{"id":"e05d1f8e42ad0c57","type":"tab","label":"Thingiverse Popular","disabled":false,"info":"","env":[]},{"id":"51999f2dee7f5872","type":"http request","z":"e05d1f8e42ad0c57","name":"Thingiverse Popular","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://api.thingiverse.com/search?sort=popular&access_token=[insert-your-token-here]","tls":"","persist":false,"proxy":"","authType":"","senderr":false,"x":380,"y":540,"wires":[["01986f5b79afc3ca"]]},{"id":"0c1ae426334daab2","type":"inject","z":"e05d1f8e42ad0c57","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":440,"wires":[["51999f2dee7f5872","a5b3e479350fb75e"]]},{"id":"01986f5b79afc3ca","type":"function","z":"e05d1f8e42ad0c57","name":"Map Thingiverse Output","func":"const output = { \n payload: msg.payload.hits.map(\n hit => ({\n id: hit.id,\n name: hit.name,\n creator: hit.creator.name,\n image: hit.thumbnail,\n url: hit.public_url,\n favico: \"https://thingiverse.com/favicon.ico\"\n })\n )\n};\n\nreturn output;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":810,"y":540,"wires":[["375cd9ce7f7cdf85"]]},{"id":"f6aef638ed364f11","type":"xml","z":"e05d1f8e42ad0c57","name":"Format Adafruit Feed","property":"payload","attr":"","chr":"","x":600,"y":220,"wires":[["272113f58edd5d24"]]},{"id":"a5b3e479350fb75e","type":"http request","z":"e05d1f8e42ad0c57","name":"Adafruit Learn","method":"GET","ret":"txt","paytoqs":"ignore","url":"https://learn.adafruit.com/feed","tls":"","persist":false,"proxy":"","authType":"","senderr":false,"x":340,"y":220,"wires":[["f6aef638ed364f11"]]},{"id":"1fe8d8a9555ca7f4","type":"ha-api","z":"e05d1f8e42ad0c57","name":"Create / Update Entity","server":"c7582449.270ae8","version":1,"debugenabled":false,"protocol":"http","method":"post","path":"/api/states/sensor.display_feed","data":"{ \"state\": \"OK\", \"attributes\": { \"values\": payload }}","dataType":"jsonata","responseType":"json","outputProperties":[{"property":"payload","propertyType":"msg","value":"","valueType":"results"}],"x":1500,"y":400,"wires":[[]]},{"id":"272113f58edd5d24","type":"function","z":"e05d1f8e42ad0c57","name":"Map Adafruit Output","func":"const getImgSrc = (content) => {\n const src = content.split(\"img src='\")[1]\n return src.substring(0, src.indexOf(\"'\"))\n}\n\nconst output = {\n payload: msg.payload.feed.entry.map(\n entry => ({\n id: entry.id[0],\n name: entry.title[0],\n creator: entry.author[0].name[0],\n image: getImgSrc(entry.content[0]._),\n url: entry.url[0],\n favico: \"https://adafruit.com/favicon.ico\"\n }))\n}\nreturn output;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":880,"y":220,"wires":[["375cd9ce7f7cdf85"]]},{"id":"375cd9ce7f7cdf85","type":"join","z":"e05d1f8e42ad0c57","name":"Join Outputs","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"num","reduceFixup":"","x":1090,"y":400,"wires":[["3b7342e9c56408a7"]]},{"id":"3b7342e9c56408a7","type":"function","z":"e05d1f8e42ad0c57","name":"Flatten Outputs","func":"const output = { payload: msg.payload.flat()}\nreturn output;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1280,"y":400,"wires":[["1fe8d8a9555ca7f4"]]},{"id":"c7582449.270ae8","type":"server","name":"Home Assistant","version":2,"addon":true,"rejectUnauthorizedCerts":true,"ha_boolean":"y|yes|true|on|home|open","connectionDelay":false,"cacheJson":true,"heartbeat":false,"heartbeatInterval":"30"}]