Greeter Card
A simple greeter card that changes the welcome message based on time of day, it also uses weather from minutecast with animated icons.
greeter-card
This card requires you to install and setup the following components:
- type: picture-elements
image: /local/banners/vacation.jpg
elements:
- type: state-label
entity: sensor.time
style:
top: 8%
left: 10%
color: rgb(249, 251, 255)
text-shadow: 2px 2px DarkSlateGrey
font-family: Trebuchet MS
font-weight: bold
pointer-events: none
text-rendering: optimizeLegibility
-moz-osx-font-smoothing: grayscale
font-smoothing: antialiased
-webkit-font-smoothing: antialiased
- type: state-icon
entity: sensor.outside_temp
style:
top: 7.5%
left: 82%
pointer-events: none
max-width: 24px
max-height: 24px
color: rgb(249, 251, 255)
- type: state-label
entity: sensor.outside_temp
style:
top: 8%
left: 90%
font-weight: bold
color: rgb(249, 251, 255)
font-family: Trebuchet MS
text-shadow: 2px 2px DarkSlateGrey
text-rendering: optimizeLegibility
-moz-osx-font-smoothing: grayscale
font-smoothing: antialiased
-webkit-font-smoothing: antialiased
- type: state-label
entity: sensor.time_of_day
style:
top: 40%
left: 50%
color: rgb(249, 251, 255)
font-size: 250%
pointer-events: none
text-shadow: 2px 2px DarkSlateGrey
font-family: Trebuchet MS
font-style: oblique
font-weight: 400
text-rendering: optimizeLegibility
-moz-osx-font-smoothing: grayscale
font-smoothing: antialiased
-webkit-font-smoothing: antialiased
- type: state-label
entity: sensor.outside_alerts
style:
top: 52%
left: 50%
color: rgb(249, 251, 255)
font-family: Trebuchet MS
font-style: oblique
text-shadow: 2px 2px DarkSlateGrey
font-size: 120%
pointer-events: none
font-weight: 400
text-rendering: optimizeLegibility
-moz-osx-font-smoothing: grayscale
font-smoothing: antialiased
-webkit-font-smoothing: antialiased
- type: state-label
entity: sensor.greeter_card_info
style:
top: 82%
left: 0%
color: rgb(255, 255, 255)
transform: none
font-family: Trebuchet MS
text-shadow: 2px 2px black
font-size: 90%
pointer-events: none
font-weight: bold
border-left-style: solid
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
border-color: rgb(34, 154, 210)
background-color: rgb(54, 65, 78)
opacity: 0.8
Here are the package with sensors
Please change the following states on the follwing sensors
- greeter_card_info
- time_of_day
states('yourawesome_device_tracker')
as_timestamp(states.calendar.your_awesome_mail.attributes.start_time)
states.calendar.your_awesome_mail.attributes.message
change User to wanted name
- platform: time_date
display_options:
- 'time'
- platform: template
sensors:
time_of_day:
value_template: >
{% set current_hour = strptime(states('sensor.time'), "%H:%M").hour %}
{% if current_hour < 12 %}
Good Morning, User
{% elif 12 <= current_hour < 18 %}
Good Afternoon, User
{% elif 18 <= current_hour < 23 %}
Good Evening, User
{% else %}
Good Night, User
{% endif %}
- platform: template
sensors:
greeter_card_info:
value_template: >
Current Location: {{ states('yourawesome_device_tracker') }}
Next Event: {{ as_timestamp(states.calendar.your_awesome_mail.attributes.start_time) | timestamp_custom('%Y/%m/%d at %H:%M') }} - {{ states.calendar.your_awesome_mail.attributes.message }}
- platform: command_line
name: "Outside: Alerts"
icon: alert-outline
command: "/home/.homeassistant/homeassistant/includes/script/shell/check-weather.sh"
scan_interval: 180
- platform: template
sensors:
outside_temp:
friendly_name: "Outside Temperature"
unit_of_measurement: '°C'
value_template: "{{ states.weather.yweather.attributes.temperature }}"
icon_template: >
{% if is_state("weather.yweather", "sunny") -%}
mdi:weather-sunny
{% elif is_state('weather.yweather', 'clear-night') -%}
mdi:weather-night
{% elif is_state('weather.yweather', 'rain') -%}
mdi:weather-rainy
{% elif is_state('weather.yweather', 'snow') -%}
mdi:weather-snowy
{% elif is_state('weather.yweather', 'sleet') -%}
mdi:weather-snowy-rainy
{% elif is_state('weather.yweather', 'wind') -%}
mdi:weather-windy-variant
{% elif is_state('weather.yweather', 'fog') -%}
mdi:weather-fog
{% elif is_state('weather.yweather', 'cloudy') -%}
mdi:weather-cloudy
{% elif is_state('weather.yweather', 'partly-cloudy-day') -%}
mdi:weather-partlycloudy
{% elif is_state('weather.yweather', 'hail') -%}
mdi:weather-hail
{% elif is_state('weather.yweather', 'thunderstorm') -%}
mdi:weather-lightning
{% else %}
mdi:help-circle
{% endif %}
entity_picture_template: >
{% if is_state("weather.yweather", "sunny") -%}
/local/weather_icons/static/sunny.svg
{% elif is_state('weather.yweather', 'clear-night') -%}
/local/weather_icons/static/clear-night.svg
{% elif is_state('weather.yweather', 'rain') -%}
/local/weather_icons/static/rain.svg
{% elif is_state('weather.yweather', 'snow') -%}
/local/weather_icons/static/snow.svg
{% elif is_state('weather.yweather', 'sleet') -%}
/local/weather_icons/static/sleet.svg
{% elif is_state('weather.yweather', 'wind') -%}
/local/weather_icons/static/wind.svg
{% elif is_state('weather.yweather', 'fog') -%}
/local/weather_icons/static/fog.svg
{% elif is_state('weather.yweather', 'cloudy') -%}
/local/weather_icons/static/cloudy.svg
{% elif is_state('weather.yweather', 'partly-cloudy-day') -%}
/local/weather_icons/static/partly-cloudy-day.svg
{% elif is_state('weather.yweather', 'hail') -%}
/local/weather_icons/static/hail.svg
{% elif is_state('weather.yweather', 'thunderstorm') -%}
/local/weather_icons/static/thunderstorm.svg
{% else %}
/local/weather_icons/static/help.svg
{% endif %}
Here is the bash script for Accuweather change the url to your city
#!/bin/bash
SET_AGENT="Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0"
SET_URL="https://www.accuweather.com/en/se/boras/315908/minute-weather-forecast/315908"
weather_alert () {
curl -A "$SET_AGENT" -s $SET_URL |\
perl -wne 'print if /<div class="mc-summary/ .. /<\/div>/' |\
perl -wne 'print if /<p>/ .. /<\/p>/' |\
sed 's/<\/p>//' | sed 's/<p>//' | grep -oE "[A-Z].*"
}
weather_alert
Additional tips:
This package can use more customize-able input like https://philhawthorne.com/making-home-assistants-presence-detection-not-so-binary/ that will make the location status messages appear more dynamic. To animate the icons used for temperature use this icon pack https://www.amcharts.com and put it in your WWW directory in Homeassistant.