Love the new Meteoalarm - how do I put the alert in a card?

fribse · July 31, 2019, 10:21am

And the result is looking good:
I had to pull out the colour and type via two new sensors, as I couldn’t get the jinja split to work directly in the lovelace ui.
meteoalarm
I couldn’t make it change the background with the sensor value, but it looks great with just changing the text.

card:
  content: >
    # <font color=[[ sensor.meteo_colour ]]>[[
    binary_sensor.meteoalarm.attributes.headline ]] </font>

    <table>
      <tbody>
        <tr>
          <td><b>Alvorlighed</b></td>
          <td><font color=[[ sensor.meteo_colour ]]> [[
    binary_sensor.meteoalarm.attributes.severity ]]</font></td>
        </tr><tr>
        <td><b>Type</b></td>
        <td><font color= #4caf50>[[ sensor.meteo_type ]]</font></td>
        </tr><tr>
        <td><b>Beskrivelse</b></td>
        <td><font color= #4caf50>[[
    binary_sensor.meteoalarm.attributes.description ]]</font></td>
        </tr><tr>
        <td><b>Start</b></td>
        <td><font color= #4caf50>[[
    binary_sensor.meteoalarm.attributes.onset ]]</font></td>
        </tr><tr>
        <td><b>Slut</b></td>
        <td><font color= #4caf50> [[
    binary_sensor.meteoalarm.attributes.expires ]]</font></td>
        </tr>
      </tbody>
    </table>
  type: markdown
conditions:
  - entity: binary_sensor.meteoalarm
    state: 'on'
type: conditional

Now I need to improve the automation, as we went from yellow to orange here in denmark, with a new warning, and the warning was never sent out via the automation, as that checks for ‘off’.
So I will store the ‘description’ in a variable, and have the automation check against that instead I think, if I can make it work.

Yoinkz · August 5, 2019, 1:07pm

Looks good! I will try your lovelace conf out and wait for another weather incident

fribse · August 5, 2019, 2:05pm

I found out that using a table is not good if you want the card to be invisible when there is no alerts, so I’ve changed the card to:

card:
  content: >
    # <font color=[[ sensor.meteo_colour ]]>[[
    binary_sensor.meteoalarm.attributes.headline ]]
    </font><br/><b>Alvorlighed</b> <font color=[[ sensor.meteo_colour ]]> [[
    binary_sensor.meteoalarm.attributes.severity ]]</font><br/><b>Type</b> <font
    color= #4caf50>[[ sensor.meteo_type ]]</font><br/><b>Beskrivelse</b> <font
    color= #4caf50>[[ binary_sensor.meteoalarm.attributes.description
    ]]</font><br/> <b>Start</b> <font color= #4caf50>[[
    binary_sensor.meteoalarm.attributes.onset ]]</font><br/><b>Slut</b> <font
    color= #4caf50> [[ binary_sensor.meteoalarm.attributes.expires ]]</font>
  type: markdown
conditions:
  - entity: binary_sensor.meteoalarm
    state: 'on'
type: conditional

It isn’t as pretty, but now it’s invisible when no alert is active.
I’ve also changed the automation to simply react on ‘state change’, and not just from off to something else. I did add a condition that it shouldn’t change to off, but that doesn’t seem to work for me yet (I got a ‘none’ alert when the latest alert timed out).

Mariusthvdb · August 5, 2019, 3:46pm

yes,
have something alike:

  - type: custom:vertical-stack-in-card
    cards:
      - type: entities
        title: Weeralarm
        show_header_toggle: false
        entities:
          - binary_sensor.meteoalarm_brabant
          - sensor.weer_alarm
      - type: markdown
        content: >
          <font color= grey> Info:  [[ binary_sensor.meteoalarm_brabant.attributes.attribution ]] </font>
      - type: conditional
        conditions:
          - entity: binary_sensor.meteoalarm_brabant
            state: 'on'
        card:
          type: markdown
          content: >
            # <font color= grey> Weer Alarm Brabant:  [[ binary_sensor.meteoalarm_brabant.state ]] </font>

            ___

            **Alarm code**

            <font color= [[ sensor.weer_alarm.state ]]> - [[ sensor.weer_alarm.state ]] </font>

            <font color= [[ sensor.weer_alarm.state ]]> - [[ binary_sensor.meteoalarm_brabant.attributes.awareness_level ]] </font>

            <font color= [[ sensor.weer_alarm.state ]]> - [[ binary_sensor.meteoalarm_brabant.attributes.awareness_type ]] </font>

            **Headline**

            <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.headline ]] </font>

            **Event**

            <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.event ]] </font>

            **Status**

            <font color= #4caf50> - [[ binary_sensor.meteoalarm_brabant.attributes.description ]] </font>

            ___

showing this in no-alert state:

if an alert is on, all fields are populated.
could template the font colors also, but this works for now.

KeesG60 · August 18, 2019, 9:35am

Hey guys,

I really like the way you configured the Meteoalarm sensor to show in a card and like to do it myself
I’m very new to all this and don’t now how you made those template_sensors?
How did you extract those attributes into a new sensor?
Could one of you show me how to start?

Thanx

Mariusthvdb · August 18, 2019, 3:51pm

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.

KeesG60 · August 18, 2019, 5:42pm

Thanks for showing me your config. I got something to do again.

maurizio53 · October 19, 2019, 9:38am

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

Hey Marius,
Are you still using this?

Mariusthvdb · February 15, 2020, 10:46pm

You mean this?

Yoinkz · February 15, 2020, 11:39pm

Yes exactly.
Can you posted the latest lovelace code?

fribse · February 16, 2020, 7:56am

I posted this a little while ago.

Mariusthvdb · February 17, 2020, 9:27am

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:

Schermafbeelding 2020-02-17 om 10.26.49
if an alert is on, displayed in my alert setup.

maurizio53 · February 17, 2020, 11:17am

Will you share also this card button?

Mariusthvdb · February 18, 2020, 3:34pm

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) ]]]

Yoinkz · February 19, 2020, 8:56pm

What is this sensor.weer_alarm I only have the one for meteoalarm?

Mariusthvdb · February 19, 2020, 9:43pm

well yes, I made that all myself, so you wouldn’t have it… It’s a template sensor to build the color and parameter coding for the button. Its built around the severity:

state_attr('binary_sensor.meteoalarm_brabant','severity')

and deduced from the meteoalarm website clicking on the colored legenda

dinth · November 17, 2021, 7:37pm

Hi Klogg. Have you managed to fix this problem and get Meteo working for London?

klogg · November 17, 2021, 11:00pm

No I didn’t.
I use the Met Office now.

dinth · November 18, 2021, 6:43pm

Is this integration still working?
I have tried East of Anglia - tried setting district to ‘East of Anglia’, ‘East-of-Anglia’, ‘East%20of%20Anglia’ and it never works.