Fitbit Card

This card requires you to install and setup the following components:
​Fitbit​
This card requires you to install and setup the following custom cards:
​circle-sensor-card​
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.
Picture-elements cards - Previous
3D Floorplan Card
Next - Picture-elements cards
Greeter Card
Last modified 1yr ago
Copy link