Fitbit Card
A great way to display your Fitbit stats.
This card requires you to install and setup the following components:
Fitbit
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 max value in the circle-sensor-card for sensor.weight_loss along with any other goal values for other things like steps/distance/calories
    sensor.resting_heart_rate and sensor.ionic_battery are dependent on the Fitbit device you use and may not be available to you.
Last modified 1yr ago
Copy link