Share the love
Search…
Fitbit Card
A great way to display your Fitbit stats.
This card requires you to install and setup the following components:
This card requires you to install and setup the following custom cards:
ui-lovelace.yaml
1
- type: picture-elements
2
image: /local/lovelace/icons/fitbit.png
3
elements:
4
- type: custom:circle-sensor-card
5
entity: sensor.weight_loss
6
max: 65
7
min: 0
8
stroke_width: 15
9
gradient: true
10
fill: '#125054'
11
name: loss
12
units: ' '
13
font_style:
14
font-size: 1.1em
15
font-color: white
16
text-shadow: '2px 2px black'
17
style:
18
top: 5%
19
left: 80%
20
width: 4em
21
height: 4em
22
transform: none
23
- type: custom:circle-sensor-card
24
entity: sensor.fitbit_steps
25
max: 10000
26
min: 0
27
stroke_width: 15
28
gradient: true
29
fill: '#125054'
30
name: steps
31
units: ' '
32
font_style:
33
font-size: 1.1em
34
font-color: white
35
text-shadow: '2px 2px black'
36
color_stops:
37
1: '#09C7E8'
38
10000: '#0BDF0E'
39
style:
40
top: 70%
41
left: 5%
42
width: 4em
43
height: 4em
44
transform: none
45
- type: custom:circle-sensor-card
46
entity: sensor.floors
47
max: 10
48
min: 0
49
stroke_width: 15
50
gradient: true
51
fill: '#125054'
52
name: floors
53
units: ' '
54
font_style:
55
font-size: 1.1em
56
font-color: white
57
text-shadow: '2px 2px black'
58
color_stops:
59
1: '#09C7E8'
60
10: '#0BDF0E'
61
style:
62
top: 70%
63
left: 24%
64
width: 4em
65
height: 4em
66
transform: none
67
- type: custom:circle-sensor-card
68
entity: sensor.distance
69
max: 10
70
min: 0
71
stroke_width: 15
72
gradient: true
73
fill: '#125054'
74
name: miles
75
units: ' '
76
font_style:
77
font-size: 1.1em
78
font-color: white
79
text-shadow: '2px 2px black'
80
color_stops:
81
1: '#09C7E8'
82
10: '#0BDF0E'
83
style:
84
top: 70%
85
left: 43%
86
width: 4em
87
height: 4em
88
transform: none
89
- type: custom:circle-sensor-card
90
entity: sensor.fitbit_calories
91
max: 3000
92
min: 0
93
stroke_width: 15
94
gradient: true
95
fill: '#125054'
96
name: cals
97
shadow: true
98
units: ' '
99
font_style:
100
font-size: 1.1em
101
font-color: white
102
text-shadow: '2px 2px black'
103
color_stops:
104
1: '#09C7E8'
105
3000: '#0BDF0E'
106
style:
107
top: 70%
108
left: 62%
109
width: 4em
110
height: 4em
111
transform: none
112
- type: custom:circle-sensor-card
113
entity: sensor.fitbit_minutes_active
114
max: 30
115
min: 0
116
stroke_width: 15
117
gradient: true
118
fill: '#125054'
119
name: active
120
units: ' '
121
font_style:
122
font-size: 1.1em
123
font-color: white
124
text-shadow: '2px 2px black'
125
color_stops:
126
1: '#09C7E8'
127
30: '#0BDF0E'
128
style:
129
top: 70%
130
left: 80%
131
width: 4em
132
height: 4em
133
transform: none
134
- type: custom:hui-markdown-card
135
content: >
136
Ian
137
style:
138
top: 6%
139
left: 1%
140
font-size: 18px
141
color: white
142
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
143
"--paper-card-background-color": none
144
"--paper-material-elevation-1_-_box-shadow": none
145
"--shadow-elevation-2dp_-_box-shadow": none
146
transform: translate(0%,-50%)
147
- type: state-icon
148
entity: sensor.weight
149
title: Weight
150
style:
151
left: 3%
152
top: 7%
153
"--iron-icon-fill-color": '#09C7E8'
154
transform: none
155
- type: state-label
156
entity: sensor.weight
157
title: Weight
158
style:
159
left: 12%
160
top: 8%
161
color: white
162
transform: none
163
- type: state-icon
164
entity: sensor.bmi
165
title: BMI
166
style:
167
left: 31%
168
top: 7%
169
"--iron-icon-fill-color": '#09C7E8'
170
transform: none
171
- type: state-label
172
entity: sensor.bmi
173
title: BMI
174
style:
175
left: 40%
176
top: 8%
177
color: white
178
transform: none
179
- type: state-icon
180
entity: sensor.body_fat
181
title: Body Fat
182
style:
183
left: 59%
184
top: 7%
185
"--iron-icon-fill-color": '#09C7E8'
186
transform: none
187
- type: state-label
188
entity: sensor.body_fat
189
title: Body Fat
190
style:
191
left: 67%
192
top: 8%
193
color: white
194
transform: none
195
- type: image
196
entity: sensor.ionic_battery
197
title: Ionic Battery
198
image: /local/lovelace/icons/battery_full.png
199
state_image:
200
"High": /local/lovelace/icons/battery_high.png
201
"Medium": /local/lovelace/icons/battery_medium.png
202
"Low": /local/lovelace/icons/battery_low.png
203
style:
204
left: 12%
205
top: 1%
206
transform: none
207
width: 24px
208
height: 24px
209
- type: state-icon
210
entity: sensor.resting_heart_rate
211
title: Resting HR
212
style:
213
left: 3%
214
top: 21%
215
"--iron-icon-fill-color": red
216
transform: none
217
- type: state-label
218
entity: sensor.resting_heart_rate
219
title: Resting HR
220
style:
221
left: 12%
222
top: 22%
223
color: white
224
transform: none
Copied!
I had to create template sensors for steps and calories as the Fitbit sensor produces comma separated string values instead of numeric values. I also created a template sensor to track my weight loss.
1
sensor:
2
- platform: template
3
sensors:
4
fitbit_steps:
5
friendly_name: 'Steps'
6
value_template: >
7
{{ states.sensor.steps.state | replace(",","") }}
8
unit_of_measurement: 'steps'
9
fitbit_calories:
10
friendly_name: 'Calories'
11
value_template: >
12
{{ states.sensor.calories.state | replace(",","") }}
13
unit_of_measurement: 'calories'
14
weight_loss:
15
friendly_name: 'Weight Loss'
16
value_template: "{{ '%.1f' | format(245.0 - (states.sensor.weight.state | float)) }}"
17
unit_of_measurement: 'lbs'
Copied!
Additional tips:
- Be sure to change "Ian" in the markdown card to match the user's
- Change your starting weight in the template sensor
- Change your goal weight loss for the
maxvalue in thecircle-sensor-cardforsensor.weight_lossalong with any other goal values for other things like steps/distance/calories sensor.resting_heart_rateandsensor.ionic_batteryare dependent on the Fitbit device you use and may not be available to you.
Copy link