In last year’s bad weather I cobbled together a markdown card to show severe weather warnings from the UK Met Office. But I’m redoing my lovelace interface now and have taken the time to tidy it up. Posting in case it helps give anyone ideas. The icons change type and colour according to the type and severity of the warning(s).
(it’s just test data currently)
The top section is this custom card https://github.com/Yevgenium/lovelace-weather-card-chart. The bottom is a markdown card both are wrapped in a stack-in-card https://github.com/custom-cards/stack-in-card.
I use a simple flow in node-red to grab the RSS feed with any items, convert to JSON and write it to an attribute in a sensor. Then I parse it into a table in the markdown card. I’ve also styles the weather card a bit to make them work better together.
Node-red config
[{"id":"32ad5b17.730c84","type":"xml","z":"df31568f.39e0d8","name":"","property":"payload","attr":"","chr":"","x":610,"y":580,"wires":[["cfaf461c.029f98"]]},{"id":"96430af9.396928","type":"http request","z":"df31568f.39e0d8","name":"get warnings","method":"GET","ret":"txt","paytoqs":false,"url":"http://www.metoffice.gov.uk/public/data/PWSCache/WarningsRSS/Region/yh","tls":"","persist":false,"proxy":"","authType":"","x":410,"y":580,"wires":[["32ad5b17.730c84"]]},{"id":"fda8626.3c450a","type":"inject","z":"df31568f.39e0d8","name":"","topic":"","payload":"","payloadType":"date","repeat":"3600","crontab":"","once":true,"onceDelay":0.1,"x":210,"y":580,"wires":[["96430af9.396928"]]},{"id":"cfaf461c.029f98","type":"ha-entity","z":"df31568f.39e0d8","name":"weather_warnings","server":"cc436e5e.bbf7e","version":1,"debugenabled":false,"outputs":1,"entityType":"sensor","config":[{"property":"name","value":"weather_warnings"},{"property":"device_class","value":""},{"property":"icon","value":""},{"property":"unit_of_measurement","value":""}],"state":"","stateType":"date","attributes":[{"property":"items","value":"payload.rss.channel[0].item","valueType":"msg"}],"resend":true,"outputLocation":"","outputLocationType":"none","x":870,"y":580,"wires":[[]]},{"id":"cc436e5e.bbf7e","type":"server","z":"","name":"Home Assistant","legacy":false,"rejectUnauthorizedCerts":true,"ha_boolean":"y|yes|true|on|home|open","connectionDelay":true,"cacheJson":false}]
Lovelace config:
type: custom:stack-in-card
cards:
- type: custom:weather-card-chart
title: Weather
weather: weather.openweathermap
style: |
ha-card {
--iron-icon-width: 35px;
--iron-icon-height: 35px;
}
.attributes div {
text-align: left;
}
.main {
font-size: 20pt;
}
.main sup {
font-size: 12pt;
}
.main ha-icon {
--iron-icon-width: 55px;
--iron-icon-height: 55px;
}
- type: markdown
style: |
ha-card {
--iron-icon-width: 50px;
--iron-icon-height: 50px;
}
content: |
{% if state_attr('sensor.weather_warnings','items') != None %}
{% for item in state_attr('sensor.weather_warnings','items') %}
{% for type, icon in [('RAIN', 'weather-pouring'), ('THUNDERSTORMS', 'weather-lightning-rainy'),
('WIND', 'weather-windy'), ('SNOW', 'weather-snowy-heavy'),
('LIGHTNING', 'weather-lightning'), ('ICE', 'snowflake-alert'),
('FOG', 'weather-fog')] if type == item['metadata:warningType']|trim("[]'") %}
---
| | | |
| --- | --- | --- |
| <font color = {%- if 'Yellow' in item.description|trim("'[]'") %}'gold'
{%- elif 'Amber' in item.description|trim("'[]'") %}'darkorange'
{%- else %}'firebrick'
{%- endif %}><ha-icon icon={{ "'mdi:" + icon + "'" }}></ha-icon></font> | | {{ item.description|trim("'[]'") }} |
{% endfor %}
{% endfor %}
{% endif %}
Hopefully, this will be of some use to people when the winter weather comes back.
