Share the love
Search…
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:
1
- type: picture-elements
2
image: /local/banners/vacation.jpg
3
elements:
4
- type: state-label
5
entity: sensor.time
6
style:
7
top: 8%
8
left: 10%
9
color: rgb(249, 251, 255)
10
text-shadow: 2px 2px DarkSlateGrey
11
font-family: Trebuchet MS
12
font-weight: bold
13
pointer-events: none
14
text-rendering: optimizeLegibility
15
-moz-osx-font-smoothing: grayscale
16
font-smoothing: antialiased
17
-webkit-font-smoothing: antialiased
18
​
19
- type: state-icon
20
entity: sensor.outside_temp
21
style:
22
top: 7.5%
23
left: 82%
24
pointer-events: none
25
max-width: 24px
26
max-height: 24px
27
color: rgb(249, 251, 255)
28
- type: state-label
29
entity: sensor.outside_temp
30
style:
31
top: 8%
32
left: 90%
33
font-weight: bold
34
color: rgb(249, 251, 255)
35
font-family: Trebuchet MS
36
text-shadow: 2px 2px DarkSlateGrey
37
text-rendering: optimizeLegibility
38
-moz-osx-font-smoothing: grayscale
39
font-smoothing: antialiased
40
-webkit-font-smoothing: antialiased
41
​
42
- type: state-label
43
entity: sensor.time_of_day
44
style:
45
top: 40%
46
left: 50%
47
color: rgb(249, 251, 255)
48
font-size: 250%
49
pointer-events: none
50
text-shadow: 2px 2px DarkSlateGrey
51
font-family: Trebuchet MS
52
font-style: oblique
53
font-weight: 400
54
text-rendering: optimizeLegibility
55
-moz-osx-font-smoothing: grayscale
56
font-smoothing: antialiased
57
-webkit-font-smoothing: antialiased
58
​
59
- type: state-label
60
entity: sensor.outside_alerts
61
style:
62
top: 52%
63
left: 50%
64
color: rgb(249, 251, 255)
65
font-family: Trebuchet MS
66
font-style: oblique
67
text-shadow: 2px 2px DarkSlateGrey
68
font-size: 120%
69
pointer-events: none
70
font-weight: 400
71
text-rendering: optimizeLegibility
72
-moz-osx-font-smoothing: grayscale
73
font-smoothing: antialiased
74
-webkit-font-smoothing: antialiased
75
​
76
- type: state-label
77
entity: sensor.greeter_card_info
78
style:
79
top: 82%
80
left: 0%
81
color: rgb(255, 255, 255)
82
transform: none
83
font-family: Trebuchet MS
84
text-shadow: 2px 2px black
85
font-size: 90%
86
pointer-events: none
87
font-weight: bold
88
border-left-style: solid
89
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
90
border-color: rgb(34, 154, 210)
91
background-color: rgb(54, 65, 78)
92
opacity: 0.8
Copied!
Here are the package with sensors
Please change the following states on the follwing sensors
- greeter_card_info
- time_of_day
1
states('yourawesome_device_tracker')
2
as_timestamp(states.calendar.your_awesome_mail.attributes.start_time)
3
states.calendar.your_awesome_mail.attributes.message
4
change User to wanted name
Copied!
1
- platform: time_date
2
display_options:
3
- 'time'
4
​
5
- platform: template
6
sensors:
7
time_of_day:
8
value_template: >
9
{% set current_hour = strptime(states('sensor.time'), "%H:%M").hour %}
10
{% if current_hour < 12 %}
11
Good Morning, User
12
{% elif 12 <= current_hour < 18 %}
13
Good Afternoon, User
14
{% elif 18 <= current_hour < 23 %}
15
Good Evening, User
16
{% else %}
17
Good Night, User
18
{% endif %}
19
​
20
- platform: template
21
sensors:
22
greeter_card_info:
23
value_template: >
24
Current Location: {{ states('yourawesome_device_tracker') }}
25
​
26
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 }}
27
​
28
- platform: command_line
29
name: "Outside: Alerts"
30
icon: alert-outline
31
command: "/home/.homeassistant/homeassistant/includes/script/shell/check-weather.sh"
32
scan_interval: 180
33
​
34
- platform: template
35
sensors:
36
outside_temp:
37
friendly_name: "Outside Temperature"
38
unit_of_measurement: '°C'
39
value_template: "{{ states.weather.yweather.attributes.temperature }}"
40
icon_template: >
41
{% if is_state("weather.yweather", "sunny") -%}
42
mdi:weather-sunny
43
{% elif is_state('weather.yweather', 'clear-night') -%}
44
mdi:weather-night
45
{% elif is_state('weather.yweather', 'rain') -%}
46
mdi:weather-rainy
47
{% elif is_state('weather.yweather', 'snow') -%}
48
mdi:weather-snowy
49
{% elif is_state('weather.yweather', 'sleet') -%}
50
mdi:weather-snowy-rainy
51
{% elif is_state('weather.yweather', 'wind') -%}
52
mdi:weather-windy-variant
53
{% elif is_state('weather.yweather', 'fog') -%}
54
mdi:weather-fog
55
{% elif is_state('weather.yweather', 'cloudy') -%}
56
mdi:weather-cloudy
57
{% elif is_state('weather.yweather', 'partly-cloudy-day') -%}
58
mdi:weather-partlycloudy
59
{% elif is_state('weather.yweather', 'hail') -%}
60
mdi:weather-hail
61
{% elif is_state('weather.yweather', 'thunderstorm') -%}
62
mdi:weather-lightning
63
{% else %}
64
mdi:help-circle
65
{% endif %}
66
​
67
entity_picture_template: >
68
{% if is_state("weather.yweather", "sunny") -%}
69
/local/weather_icons/static/sunny.svg
70
{% elif is_state('weather.yweather', 'clear-night') -%}
71
/local/weather_icons/static/clear-night.svg
72
{% elif is_state('weather.yweather', 'rain') -%}
73
/local/weather_icons/static/rain.svg
74
{% elif is_state('weather.yweather', 'snow') -%}
75
/local/weather_icons/static/snow.svg
76
{% elif is_state('weather.yweather', 'sleet') -%}
77
/local/weather_icons/static/sleet.svg
78
{% elif is_state('weather.yweather', 'wind') -%}
79
/local/weather_icons/static/wind.svg
80
{% elif is_state('weather.yweather', 'fog') -%}
81
/local/weather_icons/static/fog.svg
82
{% elif is_state('weather.yweather', 'cloudy') -%}
83
/local/weather_icons/static/cloudy.svg
84
{% elif is_state('weather.yweather', 'partly-cloudy-day') -%}
85
/local/weather_icons/static/partly-cloudy-day.svg
86
{% elif is_state('weather.yweather', 'hail') -%}
87
/local/weather_icons/static/hail.svg
88
{% elif is_state('weather.yweather', 'thunderstorm') -%}
89
/local/weather_icons/static/thunderstorm.svg
90
{% else %}
91
/local/weather_icons/static/help.svg
92
{% endif %}
Copied!
Here is the bash script for Accuweather change the url to your city
1
#!/bin/bash
2
SET_AGENT="Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0"
3
SET_URL="https://www.accuweather.com/en/se/boras/315908/minute-weather-forecast/315908"
4
​
5
weather_alert () {
6
​
7
curl -A "$SET_AGENT" -s $SET_URL |\
8
perl -wne 'print if /<div class="mc-summary/ .. /<\/div>/' |\
9
perl -wne 'print if /<p>/ .. /<\/p>/' |\
10
sed 's/<\/p>//' | sed 's/<p>//' | grep -oE "[A-Z].*"
11
}
12
​
13
weather_alert
Copied!
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.
Copy link