HI,
there aren’t many template sensors really, the binary_sensor has attributes, and those are displayed using the code in the card using Markdown.
In my card, I use the sensor.weer_alarm, which is a template sensor:
weer_alarm:
friendly_name: Weeralarm
value_template: >
{% if is_state('binary_sensor.meteoalarm_brabant','on') %}
{% set code = state_attr('binary_sensor.meteoalarm_brabant','awareness_level').split(';')[1] %}
{{code|title}}
{% else %} Green
{% endif %}
icon_template: >
{% if is_state('binary_sensor.meteoalarm_brabant','on') %}
{% set code = state_attr('binary_sensor.meteoalarm_brabant','awareness_level').split(';')[0] %}
{% else %} {% set code = '0' %}
{% endif %}
{{'mdi:numeric-' + code + '-box'}}
I customize both sensors using:
homeassistant:
customize:
sensor.weer_alarm:
templates:
icon_color: >
return state;
binary_sensor.meteoalarm_brabant:
friendly_name: Meteoalarm Brabant
templates:
icon_color: >
return entities['sensor.weer_alarm'].state;
the above customizations need custom-ui .
1 Like
KeesG60
August 18, 2019, 5:42pm
23
Thanks for showing me your config. I got something to do again.
maurizio53
October 19, 2019, 9:38am
24
I followed your indications and coded those templates regarding my needs and i get this:
Actually there is no alarm, but how to change the word ‘undefined’ in something else? And where is the related icon?
My template is:
- platform: template
sensors:
severita_meteo_abruzzo:
friendly_name: Allarme Meteo Abruzzo
value_template: >
{% if is_state('binary_sensor.allarme_meteo_abruzzo','on') %}
{% set param = state_attr('binary_sensor.allarme_meteo_abruzzo','severity') %}
{% if param == 'Moderate' %} Yellow
{% elif param == 'Severe' %} Orange
{% elif param == 'Dangerous' %} Red
{% else %} White
{% endif %}
{% else %} Grey
{% endif %}
icon_template: >
{% set state = states('sensor.allarme_meteo_abruzzo') %}
{% if state == 'Yellow' %} {% set code = '2' %}
{% elif state == 'Orange' %} {% set code = '3' %}
{% elif state == 'Red' %} {% set code = '4' %}
{% else %} {% set code = '0' %}
{% endif %}
{{'mdi:numeric-' + code + '-box'}}
Yoinkz
February 15, 2020, 10:39pm
25
Hey Marius,
Yoinkz
February 15, 2020, 11:39pm
27
Mariusthvdb:
You mean this?
Yes exactly.
fribse
February 16, 2020, 7:56am
28
I posted this a little while ago.
this is what I use:
type: conditional
conditions:
- state: 'on'
entity: binary_sensor.meteoalarm_brabant
card:
type: custom:vertical-stack-in-card
cards:
- type: entities
title: Weeralarm
show_header_toggle: false
theme: meteoalarm
entities:
- binary_sensor.meteoalarm_brabant
- sensor.weer_alarm
card:
type: markdown
content: >
<font color= grey> {{state_attr('binary_sensor.meteoalarm_brabant','attribution')}} </font>
- type: markdown
content: >
<font color= green> **Alarm code**</font>
<font color= grey> - {{states('sensor.weer_alarm')}} </font>
<font color= grey> - Urgency: {{state_attr('binary_sensor.meteoalarm_brabant','urgency')}} </font>
<font color= grey> - Level: {{state_attr('binary_sensor.meteoalarm_brabant','awareness_level')}} </font>
<font color= grey> - Type: {{state_attr('binary_sensor.meteoalarm_brabant','awareness_type')}} </font>
<font color= grey> - Severity: {{state_attr('binary_sensor.meteoalarm_brabant','severity')}} </font>
<font color= grey> - Certainty: {{state_attr('binary_sensor.meteoalarm_brabant','certainty')}} </font>
<font color= green> **Event**</font>
<font color= grey> - {{state_attr('binary_sensor.meteoalarm_brabant','event')}} </font>
<font color= green> **Headline**</font>
<font color= grey> - {{state_attr('binary_sensor.meteoalarm_brabant','headline')}} </font>
<font color= green> **Status**</font>
<font color= grey> - {{state_attr('binary_sensor.meteoalarm_brabant','description')}} </font>
- type: picture
image: /local/weather/meteo_alarm/meteo_alarm_banner.jpg
tap_action:
action: url
url_path: http://meteoalarm.eu/ne_NL/0/0/NL013-Noord-Brabant.html
and I use this button:
1 Like
maurizio53
February 17, 2020, 11:17am
30
Will you share also this card button?
sure, here you go (please note the icon template is probably not perfect yet. This is because the possible states are somewhat different from the list on meteoalarm.eu. Since I havent seen all of them happen yet… I am not sure about all of them. If an icon doesn’t show, check the state of the sensor, and adapt accordingly)
Note2: I had a button with icons for the Type, Level and Sev at first, but took these out because I liked it better without icons. If you want these back in, simply swap the commented bit for the current setup
type: custom:button-card
template: button_body
entity: 'binary_sensor.meteoalarm_brabant'
aspect_ratio: 1/1
name: Meteo alarm
icon: >
[[[ var icon = entity.attributes.headline.split(' ')[0];
var weather = {'Fog':'fog',
'Wind':'windy',
'Snow-ice':'snowy-heavy',
'Thunderstorm':'lightning',
'Rain':'pouring',
'Rain-Flood':'home-flood'};
var climate = {'Extreme high temperature':'thermometer-chevron-up',
'Extreme low temperature':'thermometer-chevron-down',
'Coastal Event':'waves',
'Forestfire':'camp-fire',
'Avalanches':'snowflake-alert',
'Rain-Flood':'home-flood',
'Flooding':'home-flood'};
return weather[icon] ? 'mdi:weather-' + weather[icon] :
climate[icon] ? 'mdi:' + climate[icon] :'mdi:alert';]]]
show_state: false
tap_action:
action: more-info
hold_action:
action: navigate
navigation_path: weer_klimaat
styles:
card:
- padding: 5px
- font-size: 10px
- color: white
- background: 'rgb(16,55,115)'
grid:
- grid-template-areas: '"i alert" "n n" "type type" "level level" "severity severity"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- margin: none
icon:
- color: >
[[[ return entity.attributes.awareness_level.split(' ')[1].slice(0,-1) ]]]
- width: 70%
- margin-top: -5%
custom_fields:
alert:
- padding: 5px
- align-self: start
- justify-self: end
- --text-color-sensor: >
[[[ var param = entity.attributes.severity;
if (param == 'Safe') return 'green';
if (param == 'Moderate') return 'yellow';
if (param =='Severe') return 'orange';
if (param == 'High') return 'red';
return 'grey'; ]]]
type:
# - padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: >
[[[ return entity.attributes.awareness_level.split(' ')[1].slice(0,-1) ]]]
level:
# - padding-bottom: 2px
- align-self: middle
- justify-self: start
- text-transform: capitalize
- --text-color-sensor: >
[[[ return entity.attributes.awareness_level.split(' ')[1].slice(0,-1) ]]]
severity:
- align-self: middle
- justify-self: start
- --text-color-sensor: >
[[[ var param = entity.attributes.severity;
if (param == 'Safe') return 'green';
if (param == 'Moderate') return 'yellow';
if (param =='Severe') return 'orange';
if (param == 'High') return 'red';
return 'grey'; ]]]
custom_fields:
alert: >
[[[
return `<span>Alert:<span style='color: var(--text-color-sensor);'>${entity.attributes.awareness_level.split(';')[0]} </span></span>`
]]]
type: >
[[[
return `<span>Type: <span style='color: var(--text-color-sensor);'>${entity.attributes.awareness_type.split(';')[0]}: ${entity.attributes.headline.split(' ')[0]}</span></span>`
]]]
level: >
[[[
return `<span>Level: <span style='color: var(--text-color-sensor);'>${entity.attributes.awareness_level.split(' ')[1].slice(0,-1)}</span></span>`
]]]
severity: >
[[[
return `<span>Sev: <span style='color: var(--text-color-sensor);'>${entity.attributes.severity}</span></span>`
]]]
# alert: >
# [[[
# return `<ha-icon
# icon='mdi:alert'
# style='width: 12px; height: 12px;'>
# </ha-icon><span>Alert:<span style='color: var(--text-color-sensor);'>${entity.attributes.awareness_level.split(';')[0]} </span></span>`
# ]]]
# type: >
# [[[
# return `<ha-icon
# icon='mdi:comment-alert'
# style='width: 12px; height: 12px;'>
# </ha-icon><span>Type: <span style='color: var(--text-color-sensor);'>${entity.attributes.awareness_type.split(';')[0]}: ${entity.attributes.headline.split(' ')[0]}</span></span>`
# ]]]
# level: >
# [[[
# return `<ha-icon
# icon=${'mdi:numeric-' + entity.attributes.awareness_level.split(';')[0] + '-box'}
# style='width: 12px; height: 12px;'>
# </ha-icon><span>Level: <span style='color: var(--text-color-sensor);'>${entity.attributes.awareness_level.split(' ')[1].slice(0,-1)}</span></span>`
# ]]]
# severity: >
# [[[
# return `<ha-icon
# icon='mdi:alert'
# style='width: 12px; height: 12px;'>
# </ha-icon><span>Sev: <span style='color: var(--text-color-sensor);'>${entity.attributes.severity}</span></span>`
# ]]]
# - --color-name: >
# [[[function capitalizeFirstLetter(string) {
# return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
# }
# var id = entity.attributes.awareness_level.split(' ')[1].slice(0,-1);
# return capitalizeFirstLetter(id) ]]]
2 Likes
Yoinkz
February 19, 2020, 8:56pm
32
Mariusthvdb:
What is this sensor.weer_alarm I only have the one for meteoalarm?
well yes, I made that all myself, so you wouldn’t have it…
state_attr('binary_sensor.meteoalarm_brabant','severity')
and deduced from the meteoalarm website clicking on the colored legenda
dinth
November 17, 2021, 7:37pm
34
Hi Klogg. Have you managed to fix this problem and get Meteo working for London?
klogg
November 17, 2021, 11:00pm
35
No I didn’t.
dinth
November 18, 2021, 6:43pm
36
Is this integration still working?
It’s a template sensor to build the color and parameter coding for the button. Its built around the severity: