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:
​circle-sensor-card​
ui-lovelace.yaml
ui-lovelace.yaml
  - type: picture-elements
    image: /local/lovelace/icons/fitbit.png
    elements:
    - type: custom:circle-sensor-card
      entity: sensor.weight_loss
      max: 65
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: loss
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      style:
        top: 5%
        left: 80%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.fitbit_steps
      max: 10000
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: steps
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        10000: '#0BDF0E'
      style:
        top: 70%
        left: 5%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.floors
      max: 10
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: floors
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        10: '#0BDF0E'
      style:
        top: 70%
        left: 24%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.distance
      max: 10
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: miles
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        10: '#0BDF0E'
      style:
        top: 70%
        left: 43%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.fitbit_calories
      max: 3000
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: cals
      shadow: true
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        3000: '#0BDF0E'
      style:
        top: 70%
        left: 62%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.fitbit_minutes_active
      max: 30
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: active
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        30: '#0BDF0E'
      style:
        top: 70%
        left: 80%
        width: 4em
        height: 4em
        transform: none
    - type: custom:hui-markdown-card
      content: >
        Ian
      style:
        top: 6%
        left: 1%
        font-size: 18px
        color: white
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
        "--paper-card-background-color": none
        "--paper-material-elevation-1_-_box-shadow": none
        "--shadow-elevation-2dp_-_box-shadow": none
        transform: translate(0%,-50%)
    - type: state-icon
      entity: sensor.weight
      title: Weight
      style:
        left: 3%
        top: 7%
        "--iron-icon-fill-color": '#09C7E8'
        transform: none
    - type: state-label
      entity: sensor.weight
      title: Weight
      style:
        left: 12%
        top: 8%
        color: white
        transform: none
    - type: state-icon
      entity: sensor.bmi
      title: BMI
      style:
        left: 31%
        top: 7%
        "--iron-icon-fill-color": '#09C7E8'
        transform: none
    - type: state-label
      entity: sensor.bmi
      title: BMI
      style:
        left: 40%
        top: 8%
        color: white
        transform: none
    - type: state-icon
      entity: sensor.body_fat
      title: Body Fat
      style:
        left: 59%
        top: 7%
        "--iron-icon-fill-color": '#09C7E8'
        transform: none
    - type: state-label
      entity: sensor.body_fat
      title: Body Fat
      style:
        left: 67%
        top: 8%
        color: white
        transform: none
    - type: image
      entity: sensor.ionic_battery
      title: Ionic Battery
      image: /local/lovelace/icons/battery_full.png
      state_image:
        "High": /local/lovelace/icons/battery_high.png
        "Medium": /local/lovelace/icons/battery_medium.png
        "Low": /local/lovelace/icons/battery_low.png
      style:
        left: 12%
        top: 1%
        transform: none
        width: 24px
        height: 24px
    - type: state-icon
      entity: sensor.resting_heart_rate
      title: Resting HR
      style:
        left: 3%
        top: 21%
        "--iron-icon-fill-color": red
        transform: none
    - type: state-label
      entity: sensor.resting_heart_rate
      title: Resting HR
      style:
        left: 12%
        top: 22%
        color: white
        transform: none
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.
sensor:
  - platform: template
    sensors:
      fitbit_steps:
        friendly_name: 'Steps'
        value_template: >
          {{ states.sensor.steps.state | replace(",","") }}
        unit_of_measurement: 'steps'
      fitbit_calories:
        friendly_name: 'Calories'
        value_template: >
          {{ states.sensor.calories.state | replace(",","") }}
        unit_of_measurement: 'calories'
      weight_loss:
        friendly_name: 'Weight Loss'
        value_template: "{{ '%.1f' | format(245.0 - (states.sensor.weight.state | float)) }}"
        unit_of_measurement: 'lbs'
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 updated 1 year ago