So I’ve been piecing this all together from other sources, and I have most of it sorted out with a couple quirks. I’ve got an interface which shows up to 5 active alerts from the National Weather Service. When there are alerts, these cards show up, and the first three look perfect, like this…
The alert title, with total alert number to the right, and the alert text below it…
The issue is that alert #4 looks like this…
And the fifth looks like this…
I’m not sure why the title (yellow) are showing differently from the others, and the 4th alert header isn’t bold like the others… If anyone can give a clue, I’d appreciate it. The code I have is…
type: vertical-stack
cards:
- type: markdown
content: '**NATIONAL WEATHER SERVICE ALERTS**'
theme: Vintage Dark Bungalow
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.nws_alerts
name: First Active Alert
icon: mdi:numeric-1-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >
# {% if state_attr('sensor.nws_alerts' , 'title') != None and
state_attr('sensor.nws_alerts', 'title').split(' - ')[0] is defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[0] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[0] }}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
card:
type: entities
entities:
- entity: sensor.nws_alerts
name: Second Active Alert
icon: mdi:numeric-2-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts' , 'title').split(' - ')[1] is
defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[1] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[1] }}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
- entity: sensor.nws_alerts
state_not: '2'
card:
type: entities
entities:
- entity: sensor.nws_alerts
name: Third Active Alert
icon: mdi:numeric-3-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts', 'title').split(' - ')[2] is
defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[2] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[2]
}}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
- entity: sensor.nws_alerts
state_not: '2'
- entity: sensor.nws_alerts
state_not: '3'
card:
type: entity
entity: sensor.nws_alerts
theme: Vintage Bungalow Alerts
name: Fourth Active Alert
icon: mdi:numeric-4-circle-outline
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts', 'title').split(' - ')[3] is
defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[3] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[3] }}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
- entity: sensor.nws_alerts
state_not: '2'
- entity: sensor.nws_alerts
state_not: '3'
- entity: sensor.nws_alerts
state_not: '4'
card:
type: entity
entity: sensor.nws_alerts
theme: Vintage Bungalow Alerts
name: Fifth Active Alert
icon: mdi:numeric-5-circle-outline
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts','title').split(' - ')[4] is defined
%}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[4] }}
{{ state_attr('sensor.nws_alerts','display_desc').split('\n\n-\n\n')[4] }}
{% else %}
No Additional Alerts
{% endif %}
finity
December 23, 2022, 4:09pm
2
Look at the differences between the config of the card type embedded in the conditional card for alerts 1 thru 3 and for alerts 4 & 5.
you have this for 4 (& 5…):
type: entity
entity: sensor.nws_alerts
theme: Vintage Bungalow Alerts
name: Fourth Active Alert
icon: mdi:numeric-4-circle-outline
and it should be this to match the others:
type: entities
entities:
- entity: sensor.nws_alerts
name: Fourth Active Alert
icon: mdi:numeric-3-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
And you also have an indentation error on the 4th alert:
it should be:
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts', 'title').split(' - ')[3] is defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[3] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[3] }}
{% else %}
No Additional Alerts
{% endif %}
Thanks, I’ll try that.
I just copied and pasted this from various sources on the web, and was working on doing it without the reliance on all the custom cards those things used… So basically, I’ve tinkered and managed to make it this far with it still “working”. This is the first time I’ve actually got five active alerts at once to test it, so I’m trying to fix it quick. Not much time to tinker. LOL
Thanks again!
finity
December 23, 2022, 9:29pm
4
it looks like most of it came directly from my examples at the NWS Alerts github repo with just a few modifications. Namely the changes to the header card that you are having issues with.
Yeah, probably true. Me and a friend were tinkering with this because we both wanted the same thing. He sent me the code he had working, which he probably pulled from there. I wanted to strip the custom cards which he used…
For anyone who wants it, this is the working code which lists up to the first 5 alerts. What I did was create a conditional card which shows a markdown card if the NWS Alerts integration isn’t “0”. The markdown card is a message to view the active alerts, click this link… The link is to a subview dashboard with this code pasted in listing active alerts.
type: vertical-stack
cards:
- type: markdown
content: '**NATIONAL WEATHER SERVICE ALERTS**'
theme: Vintage Dark Bungalow
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.nws_alerts
name: First Active Alert
icon: mdi:numeric-1-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >
# {% if state_attr('sensor.nws_alerts' , 'title') != None and
state_attr('sensor.nws_alerts', 'title').split(' - ')[0] is defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[0] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[0] }}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
card:
type: entities
entities:
- entity: sensor.nws_alerts
name: Second Active Alert
icon: mdi:numeric-2-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts' , 'title').split(' - ')[1] is
defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[1] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[1] }}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
- entity: sensor.nws_alerts
state_not: '2'
card:
type: entities
entities:
- entity: sensor.nws_alerts
name: Third Active Alert
icon: mdi:numeric-3-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts', 'title').split(' - ')[2] is
defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[2] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[2]
}}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
- entity: sensor.nws_alerts
state_not: '2'
- entity: sensor.nws_alerts
state_not: '3'
card:
type: entities
entities:
- entity: sensor.nws_alerts
name: Fourth Active Alert
icon: mdi:numeric-4-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts', 'title').split(' - ')[3] is
defined %}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[3] }}
{{ state_attr('sensor.nws_alerts', 'display_desc').split('\n\n-\n\n')[3]
}}
{% else %}
No Additional Alerts
{% endif %}
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
- entity: sensor.nws_alerts
state_not: '1'
- entity: sensor.nws_alerts
state_not: '2'
- entity: sensor.nws_alerts
state_not: '3'
- entity: sensor.nws_alerts
state_not: '4'
card:
type: entities
entities:
- entity: sensor.nws_alerts
name: Fifth Active Alert
icon: mdi:numeric-5-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
- type: markdown
content: >-
# {% if state_attr('sensor.nws_alerts','title').split(' - ')[4] is defined
%}
## {{ states.sensor.nws_alerts.attributes.title.split(' - ')[4] }}
{{ state_attr('sensor.nws_alerts','display_desc').split('\n\n-\n\n')[4] }}
{% else %}
No Additional Alerts
{% endif %}
finity
December 23, 2022, 10:41pm
6
Looking at the code more I see that the first (and only) horizontal stack card use isn’t needed since you only have one card in the stack.
You can remove that horizontal stack and just use the entities card in it and it should have the same look.
I tested it and saw no difference.
What I see in the visual editor is it’s a stack card, with 11 cards in it…?
No big deal to me. It’s just a grouping to me in case I add other cards to the dashboard. It’s all working great now, and I appreciate the help. I was actually up to 7 alerts a little while ago. Pretty unusual situation, but I might keep tinkering to add the ability to go even higher than 5. But for now, five is pretty reasonable. It’s not common to be higher than that.
finity
December 24, 2022, 12:22pm
8
the vertical-stack card has 11 cards in it.
the horizontal-stack only has 1 card in it - an entities card with the sensor.nws_alerts as the only entity.
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.nws_alerts
name: First Active Alert
icon: mdi:numeric-1-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
this is functionally equivalent:
- type: entities
entities:
- entity: sensor.nws_alerts
name: First Active Alert
icon: mdi:numeric-1-circle-outline
show_header_toggle: false
theme: Vintage Bungalow Alerts
I agree.
That’s why I only added 5 in my set-up as well.
If there’s more than 5 then it’s not really helping to see them all. It just clutters things and overwhelms the view.
1 Like
I updated my card with the changes… I have no alerts right now, but will see how it looks the next time the snow comes.
Have a great holiday, and thanks again…
1 Like
