Untappd Card
An awesome card for untappd that brings your stats into homeassistant.
untappd-card
This card requires you to install and setup the following components:
1
- type: picture-elements
2
image: /local/cards/untappd.png
3
elements:
4
- type: state-icon
5
entity: sensor.untappd_last_checkin
6
style:
7
top: 18px
8
left: 8px
9
transform: none
10
- type: state-label
11
entity: sensor.untappd_beer
12
style:
13
top: 8%
14
left: 52px
15
transform: none
16
color: rgb(255, 255, 255)
17
font-family: Trebuchet MS
18
font-size: 90%
19
font-weight: bold
20
border-left-style: solid
21
border-color: Yellow
22
background-color: rgb(4, 4, 4, 0.6)
23
pointer-events: none
24
width: 263px
25
padding: 5px
26
border-top-right-radius: 5px
27
- type: state-icon
28
entity: sensor.untappd_last_badge
29
style:
30
top: 64px
31
left: 8px
32
transform: none
33
- type: state-label
34
entity: sensor.untappd_badge
35
style:
36
top: 63px
37
left: 52px
38
transform: none
39
color: rgb(255, 255, 255)
40
font-family: Trebuchet MS
41
font-size: 90%
42
font-weight: bold
43
border-left-style: solid
44
border-color: Orange
45
background-color: rgb(4, 4, 4, 0.6)
46
pointer-events: none
47
width: 263px
48
padding: 5px
49
border-bottom-right-radius: 5px
50
51
- type: state-icon
52
entity: sensor.untappd_checked
53
style:
54
bottom: 0px
55
left: 8px
56
transform: none
57
z-index: 2
58
- type: state-label
59
entity: sensor.untappd_checked
60
style:
61
bottom: 0px
62
left: 0px
63
transform: none
64
color: rgb(255, 255, 255)
65
-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
66
text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
67
font-family: Trebuchet MS
68
font-size: 90%
69
font-weight: bold
70
border-bottom-style: solid
71
border-color: LightSalmon
72
padding-left: 36px
73
padding-bottom: 8px
74
text-shadow: 2px 2px 2px black
75
76
- type: state-icon
77
entity: sensor.untappd_followings
78
style:
79
bottom: 0px
80
left: 78px
81
transform: none
82
z-index: 2
83
- type: state-label
84
entity: sensor.untappd_followings
85
style:
86
bottom: 0px
87
left: 74px
88
transform: none
89
color: rgb(255, 255, 255)
90
-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
91
text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
92
font-family: Trebuchet MS
93
font-size: 90%
94
font-weight: bold
95
border-bottom-style: solid
96
border-color: OrangeRed
97
padding-left: 36px
98
padding-bottom: 8px
99
text-shadow: 2px 2px 2px black
100
101
- type: state-icon
102
entity: sensor.untappd_total_badges
103
style:
104
bottom: 0px
105
left: 148px
106
transform: none
107
z-index: 2
108
- type: state-label
109
entity: sensor.untappd_total_badges
110
style:
111
bottom: 0px
112
left: 141px
113
transform: none
114
color: rgb(255, 255, 255)
115
-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
116
text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
117
font-family: Trebuchet MS
118
font-size: 90%
119
font-weight: bold
120
border-bottom-style: solid
121
border-color: FireBrick
122
padding-left: 36px
123
padding-bottom: 8px
124
text-shadow: 2px 2px 2px black
125
126
- type: state-icon
127
entity: sensor.untappd_total_beers
128
style:
129
bottom: 0px
130
left: 228px
131
transform: none
132
z-index: 2
133
- type: state-label
134
entity: sensor.untappd_total_beers
135
style:
136
bottom: 0px
137
left: 215px
138
transform: none
139
color: rgb(255, 255, 255)
140
-webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
141
text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
142
font-family: Trebuchet MS
143
font-size: 90%
144
font-weight: bold
145
border-bottom-style: solid
146
border-color: Maroon
147
padding-left: 36px
148
padding-bottom: 8px
149
text-shadow: 2px 2px 2px black
Copied!
And then some templating to get it too look the way it is on the picture, so here are the sensors
1
- platform: template
2
sensors:
3
untappd_badge:
4
value_template: "Recent Badge: {{ states.sensor.untappd_last_badge.attributes.badge }} (Level {{ states.sensor.untappd_last_badge.attributes.level }})"
5
6
- platform: template
7
sensors:
8
untappd_beer:
9
value_template: "Recent Beer: {{ states.sensor.untappd_last_checkin.attributes.beer }} ({{ states.sensor.untappd_last_checkin.attributes.abv }})"
10
11
- platform: template
12
sensors:
13
untappd_followings:
14
unit_of_measurement: followers
15
value_template: "{{ states.sensor.untappd_last_checkin.attributes.followings }}"
16
17
- platform: template
18
sensors:
19
untappd_checked:
20
unit_of_measurement: checkins
21
value_template: "{{ states.sensor.untappd_last_checkin.attributes.checkins }}"
22
23
- platform: template
24
sensors:
25
untappd_total_beers:
26
unit_of_measurement: beers
27
value_template: "{{ states.sensor.untappd_last_checkin.attributes.total_beers }}"
28
29
- platform: template
30
sensors:
31
untappd_total_badges:
32
unit_of_measurement: badges
33
value_template: "{{ states.sensor.untappd_last_checkin.attributes.total_badges }}"
Copied!
The icons are from loading.io and the background image isn't available for reuse so make your own.
Last modified 1yr ago
Copy link