I did an update to his list-card allowing the folder integration (file_list) to be handled by the List Card as well as any json sensor. Iāve also enabled copy/paste functionality, changed the formatting, added a sort options and a few other things. I submitted a PR to Iantrich but he is MIA at the moment so for anyone who wants.
I asked before and no one replied. I would like to take my chance again. Is there anyway for the list card to show its content on a horizantal line ?
Try calendarEvent_EventDates (maybe with all lowercase?)
1 Like
Thatās what I ended up doing. Ran the parser in Python and saw the correct headers that way.
list-card:
How can I construct a link to use in the add_link object?
The RSS feed gives me an id (stored in tv_show_id), which together with a base URL can point to the correct address. The base URL is always the same, just the id changes.
Example:
base URL: https://www.imdb.com/title/
Content of tv_show_id: tt12637874
Then the properly constructed URL would be https://www.imdb.com/title/tt12637874
Any idea how to do that? Some Jinja2 templating magic?
Thanks, Thomas
Is there a solution to the problem? How do I define the path to the image URL?
<enclosure url=" url of the image " type="image/jpg"/>`Vorformatierter Text`
or
entries:
- links:
- rel: alternate
type: text/html
href: >-
https://dyn.pa.com/r/?domain=3&th=BUY_SHIPPING
- type: image/jpeg
href: https://mn.com/images/I/71vxL._SL300_.jpg
rel: enclosure
type: custom:list-card
entity: sensor.price_drop_notifier
title: Engineering Feed
feed_attribute: entries
columns:
- title: ''
type: image
add_link: link
postfix: '.jpg'
field: 'links[1].href'
- title: Title
field: published
Alternatively: flex-table-card
type: custom:flex-table-card
title: false
entities:
include: sensor.price_drop_notifier
columns:
- name: Artikel
data: entries
modify: '''<img src="'' + x.links[1].href + ''"style="width: 100%">'''
- name: ''
data: entries
modify: x.published
- name: Gute Nachricht !
data: entries
modify: x.summary
Alright, Iām really hoping someone could help me out. Iām trying to add a news ticker that will scroll along the bottom of my dashboard. I am thinking long term, it will be used to display important devices that have failed or are offline when they need to be online. But for now, throwing in a RSS feed is what I am trying to do.
Iāve made progress. Iāve been able to get 1 news article in, plus the weather forecast. I just canāt figure out a way to get more than one article showing.
Hereās my YAML so far. I am using helpers for some of the sections, and feedparser for the main news article.
Does anyone know how I can have multiple news articles scroll through??
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<span class="ticker__item">[[ sensor.google_news_attributes_title ]]</span>
<span class="ticker__item">[[input_text.newsitem_title]]</span>
<span class="ticker__item">[[input_text.newsitem_description]]</span>
<span class="ticker__item">Today's High: [[sensor.toronto_island_temperature]]Ā°C</span>
<span class="ticker__item">[[sensor.toronto_island_summary]]</span>
<span class="ticker__item">I am Section 3</span>
<span class="ticker__item">Sun elevation: [[sun.sun.attributes.elevation]]</span>
</div>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
font-family: tahoma;
font-size: 1.6rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 2.5rem;
background-color: black;
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
.ticker {
display: inline-block;
height: 2.5rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 50s;
&__item {
display: inline-block;
color: white;
}
}
}
.ticker__item:before {
content: " Ā» ";
}
.ticker__item:after {
margin-right: 10px;
}
</style>
So I figured a way to achieve what I was looking for. I simply designed it to show 20 news articles, so you can choose how many you want in your news ticker.
If anyone else would like the YAML of how I did it, here it is:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<span class="ticker__item">[[ sensor.google_news_attributes ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_2 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_3 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_4 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_5 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_6 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_7 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_8 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_9 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_10 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_11 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_12 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_13 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_14 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_15 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_16 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_17 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_18 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_19 ]]</span>
<span class="ticker__item">Today's High: [[sensor.toronto_island_temperature]]Ā°C</span>
<span class="ticker__item">[[sensor.toronto_island_summary]]</span>
</div>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-75%, 0, 0);
}
}
.ticker-wrap {
font-family: tahoma;
font-size: 1.6rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 2.5rem;
background-color: black;
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
.ticker {
display: inline-block;
height: 2.5rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 110s;
&__item {
display: inline-block;
color: white;
}
}
}
.ticker__item:before {
content: " Ā»Ā» ";
color: yellow;
font-size: 30px;
}
.ticker__item:after {
margin-right: 10px;
}
</style>
Hereās what I have in my config:
sensor:
- platform: feedparser
name: Google News # <-- name your RSS feed as this will be the main sensor used to get attributes (articles)
feed_url: https://www.google.ca/alerts/feeds/00028625660956993271/15040452229692133315 # <--insert your RSS feed URL
date_format: "%a, %d %b %Y %H:%M:%S %Z"
scan_interval:
minutes: 15
inclusions:
- title
exclusions:
- platform: template
sensors:
google_news_attributes_0:
friendly_name: "Google News Content 0"
value_template: >
{{ states.sensor.google_news.attributes.entries[0].title }}
- platform: template
sensors:
google_news_attributes_1:
friendly_name: "Google News Content 1"
value_template: >
{{ states.sensor.google_news.attributes.entries[1].title }}
- platform: template
sensors:
google_news_attributes_2:
friendly_name: "Google News Content 2"
value_template: >
{{ states.sensor.google_news.attributes.entries[2].title }}
- platform: template
sensors:
google_news_attributes_3:
friendly_name: "Google News Content 3"
value_template: >
{{ states.sensor.google_news.attributes.entries[3].title }}
- platform: template
sensors:
google_news_attributes_4:
friendly_name: "Google News Content 4"
value_template: >
{{ states.sensor.google_news.attributes.entries[4].title }}
- platform: template
sensors:
google_news_attributes_5:
friendly_name: "Google News Content 5"
value_template: >
{{ states.sensor.google_news.attributes.entries[5].title }}
- platform: template
sensors:
google_news_attributes_6:
friendly_name: "Google News Content 6"
value_template: >
{{ states.sensor.google_news.attributes.entries[6].title }}
- platform: template
sensors:
google_news_attributes_7:
friendly_name: "Google News Content 7"
value_template: >
{{ states.sensor.google_news.attributes.entries[7].title }}
- platform: template
sensors:
google_news_attributes_8:
friendly_name: "Google News Content 8"
value_template: >
{{ states.sensor.google_news.attributes.entries[8].title }}
- platform: template
sensors:
google_news_attributes_9:
friendly_name: "Google News Content 9"
value_template: >
{{ states.sensor.google_news.attributes.entries[9].title }}
- platform: template
sensors:
google_news_attributes_10:
friendly_name: "Google News Content 10"
value_template: >
{{ states.sensor.google_news.attributes.entries[10].title }}
- platform: template
sensors:
google_news_attributes_11:
friendly_name: "Google News Content 11"
value_template: >
{{ states.sensor.google_news.attributes.entries[11].title }}
- platform: template
sensors:
google_news_attributes_12:
friendly_name: "Google News Content 12"
value_template: >
{{ states.sensor.google_news.attributes.entries[12].title }}
- platform: template
sensors:
google_news_attributes_13:
friendly_name: "Google News Content 13"
value_template: >
{{ states.sensor.google_news.attributes.entries[13].title }}
- platform: template
sensors:
google_news_attributes_14:
friendly_name: "Google News Content 14"
value_template: >
{{ states.sensor.google_news.attributes.entries[14].title }}
- platform: template
sensors:
google_news_attributes_15:
friendly_name: "Google News Content 15"
value_template: >
{{ states.sensor.google_news.attributes.entries[15].title }}
- platform: template
sensors:
google_news_attributes_16:
friendly_name: "Google News Content 16"
value_template: >
{{ states.sensor.google_news.attributes.entries[16].title }}
- platform: template
sensors:
google_news_attributes_17:
friendly_name: "Google News Content 17"
value_template: >
{{ states.sensor.google_news.attributes.entries[17].title }}
- platform: template
sensors:
google_news_attributes_18:
friendly_name: "Google News Content 18"
value_template: >
{{ states.sensor.google_news.attributes.entries[18].title }}
- platform: template
sensors:
google_news_attributes_19:
friendly_name: "Google News Content 19"
value_template: >
{{ states.sensor.google_news.attributes.entries[19].title }}
1 Like
Hereās a screen print:
2 Likes
Anyone knows the name of like the second background color of the next item?
When I use background transparent the background of the second item stays there Iād like no background at all
When custom configuration like this refers to putting it in your config, does that mean mean the configuration.yml?
Yes it does.
1 Like
I have the config in my configuration.yml, but now what card type do I use to display it properly?
Iām getting this odd error as though its not reading the yml properlyā¦ that I cannot figure out:
You need the Lovelace Html Card.
Also, since I posted this, I have added one line of code to force it to be full width at the bottom of the screenā¦
z-index: 99;
In the ha-card section:
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
1 Like
I just installed the Lovelace HTML card and tried to create the card again, then reloaded HA.
But I still get the same error as noted above when putting the yml in the manual card type, still complains about no card type configured.
When I paste in your card yml:
I see this erroneous error as though its not reading the yml correctly and duplicates characters or is missing characters each time I try. Iāve confirmed what Iām pasting in as well as correct and does not have typos:
I tried this from the HA app and webuiā¦
paste your whole yaml for the card here so we can verify your formattingā¦
Use ``` before and after it to keep the formatting.
Also, maybe try and reboot has first to see if that solves the problem. Did you reboot after you added your config info?
Hereās the paste of the yml for the card:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<span class="ticker__item">[[ sensor.google_news_attributes ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_2 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_3 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_4 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_5 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_6 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_7 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_8 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_9 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_10 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_11 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_12 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_13 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_14 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_15 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_16 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_17 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_18 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_19 ]]</span>
<span class="ticker__item">[[ sensor.google_news_attributes_20 ]]</span>
<span class="ticker__item">Today's High: [[sensor.toronto_island_temperature]]Ā°C</span>
<span class="ticker__item">[[sensor.toronto_island_summary]]</span>
</div>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
z-index: 99;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-75%, 0, 0);
}
}
.ticker-wrap {
font-family: tahoma;
font-size: 1.6rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 2.5rem;
background-color: black;
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
.ticker {
display: inline-block;
height: 2.5rem;
line-height: 2.5rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 110s;
&__item {
display: inline-block;
color: white;
}
}
}
.ticker__item:before {
content: " Ā»Ā» ";
color: yellow;
font-size: 30px;
}
.ticker__item:after {
margin-right: 10px;
}
</style>
Hmmm weird, I am not getting that error message, but I am getting " Cannot read properties of undefined (reading āattributesā)". I canāt figure out why because everything is defined, AND it has worked in my dashboard ever since I posted my comment. Iāve since tweaked it a bit.
So in your config file, you have a section that says -platform: feedparser for Google News? Then you have the section for the sensors. Right?
If you want to send me a DM, I can help you directly so we arenāt spamming the thread. 
***EDIT: @Gurulee, hey, delete this line from your card yaml:
<span class="ticker__item">[[ sensor.google_news_attributes_20 ]]</span>
That is, unless youāve defined it in your yaml. It was in my original yaml by mistake. Once I do that, I donāt get any errors with the card yaml.
1 Like