Untappd Card

untappd-card
This card requires you to install and setup the following components:
​Untapped​
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.
Picture-elements cards - Previous
Temperature glance
Next - Picture-elements cards
Xiaomi Vacuum Card
Last modified 1yr ago
Copy link