So, as a Type 1 Diabetic using a CGM device, I wanted a Lovelace panel to give me all the information i needed in a nice looking detailed layout — This is what I’ve come up with for myself.
This layout uses the following:
- Dexcom Custom Component This retrieves the BG/Trend data from your Dexcom CGM and creates 2 sensors; one for BG current value, and one for trend direction.
- Average Custom Component. Found here
- Custom: mini-graph-card
- Custom: text-element card
- A free Nightscout account setup through Heroku (Setup tutorial Here) This is not mandatory, but its what displays the middle colored box on the panel with BG Level and Trending direction within an iframe.You could create a picture-element card here instead with overlaying colors for warning levels if you wanted too — i was lazy.
- Here are the two images for the Sensor and Transmitter
- The Theme I’m using is “AMOLED Blue”. It’s in HACS
This panel uses only the 2 dexcom component sensors for all the graphs. The amount of time in the “CGM Graph (time)” is adjusted via the mini-card-graph attributes in Lovelace. Basically everything else is templated sensors.
The Sensor/Transmitter dates and days left are all calculated from the 2 input_datetime’s on the bottom right. I have them converted to 12HR time and date formatted Month Day, Year, but you can just change the timestamp_custom values in the config to suit your needs in displaying. Also, the glucose values are set to mmol/L. You can use whichever you prefer in the Dexcom Custom Component setup. Setup that custom component FIRST and confirm you’re receiving BG data.
Here is what you’ll need to setup (date & time = true)
- input_datetime.cgm_sensor_start
- input_datetime.cgm_trans_start
Ok… onto the code.
Config yaml (the sensor templates)
# Average out BG over 90 days (aka eAG value)
- platform: average
name: 'Glucose Avg 90d'
duration:
days: 90
entities:
- sensor.dexcom_glucose_value # This is from the Dexcom Custom Component. I Labeled it this
# Calculate HbA1C % based off 90 day BG averge sensor above
# NOTE: These calculations are based on HbA1C from mmol/L values.
# The math is different for MG/DL. If you cant figure it out, let me know and ill make a template
# for HbA1C based off MG/DL
- platform: template
sensors:
jons_hba1c_value:
entity_id: sensor.glucose_avg_90d
value_template: >
{% set a = ( states("sensor.glucose_avg_90d") | float + 2.59 ) %}
{% set a1c = (a / 1.59) %}
{{a1c}}
# Format the Date and Time of the dexcom sensor start to “January 1, 2000 // 1:00 AM” format.
- platform: template
sensors:
cgm_sensor_start:
friendly_name: "G6 Sensor Started: "
value_template: >
{{ state_attr('input_datetime.cgm_sensor_start', 'timestamp') | timestamp_custom('%B %-d, %Y')}} // {{state_attr('input_datetime.cgm_sensor_start', 'timestamp') | timestamp_custom('%-I:%M %p') }}
icon_template: >
mdi:leak
# Do the same formatting of the date and time for sensor expiry.
- platform: template
sensors:
cgm_sensor_expire:
friendly_name: "G6 Sensor Expires on: "
value_template: >
{{ (state_attr('input_datetime.cgm_sensor_start', 'timestamp') + 864000) | timestamp_custom('%B %-d, %Y')}} // {{state_attr('input_datetime.cgm_sensor_start', 'timestamp') | timestamp_custom('%-I:%M %p') }}
icon_template: >
mdi:leak-off
# The Dexcom G6 Sensors only last 10 days before it expires in the dexcom app.
# This sensor Counts Down from 10 days from the start date and displays it as “X Days” left.
# When you get down to 2 days remaining, it will change to “Tomorrow...” and then “TODAY!”
- platform: template
sensors:
cgm_sensor_expire_days:
friendly_name: "G6 Sensor Expires in: "
value_template: >
{% set days = (( as_timestamp(strptime(states.input_datetime.cgm_sensor_start.state, "%Y-%m-%dT%H:%M:%S")) + 864000 - as_timestamp(now()) )/ (3600*24)) | round(1) | int %}
{%- if days < 1 -%}
TODAY!
{%- else -%}
{%- if days < 2 -%}
Tomorrow...
{%- endif -%}
{%- if days > 1 -%}
{{ days }} Days
{%- endif -%}
{%- endif -%}
icon_template: >
mdi:leak-off
# These Sensor templates follow the same templates for the Transmitter start, expiry, and days left as the G6 Sensor templates above.
- platform: template
sensors:
cgm_trans_start:
friendly_name: "G6 Transmitter Started: "
value_template: >
{{ state_attr('input_datetime.cgm_trans_start', 'timestamp') | timestamp_custom('%B %-d, %Y')}} // {{state_attr('input_datetime.cgm_trans_start', 'timestamp') | timestamp_custom('%-I:%M %p') }}
icon_template: >
mdi:leak
# Format Expiry date/time
- platform: template
sensors:
cgm_trans_expire:
friendly_name: "G6 Transmitter Expires on: "
value_template: >
{{ (state_attr('input_datetime.cgm_trans_start', 'timestamp') + 7776000) | timestamp_custom('%B %-d, %Y')}} // {{state_attr('input_datetime.cgm_trans_start', 'timestamp') | timestamp_custom('%-I:%M %p') }}
icon_template: >
mdi:leak-off
# The Dexcom G6 Transmitters have a life of 90 days before they’re “expired” in the Dexcom App.
# This template Counts Down from 90 Days.
- platform: template
sensors:
cgm_trans_expire_days:
friendly_name: "G6 Transmitter Expires in: "
value_template: >
{% set days = (( as_timestamp(strptime(states.input_datetime.cgm_trans_start.state, "%Y-%m-%dT%H:%M:%S")) + 7776000 - as_timestamp(now()) )/ (3600*24)) | round(1) | int %}
{%- if days < 1 -%}
TODAY!
{%- else -%}
{%- if days < 2 -%}
Tomorrow...
{%- endif -%}
{%- if days > 1 -%}
{{ days }} Days
{%- endif -%}
{%- endif -%}
icon_template: >
mdi:leak-off
Here is the Lovelace yaml
If you are editing your frontend from within the Lovelace UI, you’ll have to adjust the YAML spacing here; otherwise you’ll just get yelled at by Lovelace and nothing will display. You can Paste this into the RAW Configuration Editor though.
Another side-note about the units and values here, remember, mine is setup for mmol/L standard, so the mini-graph colors reflect mmol/L numbers. If you use mg/dl, just change the values in the color_thresholds to mg/dl numbers. In my case, 2 (low) would be 36 mg, 5 - 10 (normal) would be 90 - 180 mg, and anything about 15 (High) is 270 mg.
- badges: []
cards:
- cards:
- color_thresholds:
- color: '#039BE5'
value: 2
- color: '#0DA035'
value: 5
- color: '#E0B400'
value: 10
- color: '#E45E65'
value: 15
detail: 1
entities:
- entity: sensor.jons_hba1c_value
show_fill: false
show_state: true
smoothing: true
hours_to_show: 2160
icon: 'mdi:water'
line_width: 3
name: HbA1C Avg - 90 days
show:
graph: line
type: 'custom:mini-graph-card'
unit: '%'
- color_thresholds:
- color: '#039BE5'
value: 2
- color: '#0DA035'
value: 5
- color: '#E0B400'
value: 10
- color: '#E45E65'
value: 15
detail: 1
entities:
- entity: sensor.glucose_avg_90d
show_fill: false
show_state: true
smoothing: true
hours_to_show: 2160
icon: 'mdi:water'
line_width: 3
name: eAG Avg - 90 days
show:
graph: line
type: 'custom:mini-graph-card'
unit: mmol/L
- aggregate_func: avg
animate: true
color_thresholds:
- color: '#039BE5'
value: 2
- color: '#0da035'
value: 5
- color: '#e0b400'
value: 10
- color: '#e45e65'
value: 15
entities:
- entity: sensor.dexcom_glucose_value
group_by: date
hours_to_show: 168
name: Avg CGM Value Per Day
show:
graph: bar
labels: true
state: true
type: 'custom:mini-graph-card'
- cards:
- cards:
- entity: sensor.dexcom_glucose_trend
name: Current Glucose Trend
type: entity
type: horizontal-stack
type: horizontal-stack
type: vertical-stack
- cards:
- aspect_ratio: 500x220
type: iframe
url: 'https://YOUR NIGHTSCOUT APP ID.herokuapp.com/clock/clock-color'
- elements:
- style:
bottom: 0
color: white
font-size: 16px
line-height: 27px
padding: 12px 10px
transform: initial
text: 'Expires:'
type: 'custom:text-element'
- style:
color: white
font-size: 16px
line-height: 27px
padding: 12px 10px
top: 0
transform: initial
text: 'Sensor Start Date:'
type: 'custom:text-element'
- entity: sensor.cgm_sensor_expire_days
style:
background-color: 'rgba(0, 0, 0, 0.0)'
bottom: 0
color: lightblue
font-size: 16px
left: 0
line-height: 32px
padding: 0 65px
pointer-events: none
transform: initial
width: 100%
type: state-label
- entity: sensor.cgm_sensor_start
style:
background-color: 'rgba(0, 0, 0, 0.0)'
color: lightblue
font-size: 15px
right: 0
line-height: 32px
padding: 2px 1px
top: 0
transform: initial
type: state-label
- entity: sensor.cgm_sensor_expire
style:
bottom: 0
color: lightblue
font-size: 15px
line-height: 32px
padding: 0px 1px
pointer-events: none
right: 0
transform: initial
type: state-label
image: /local/g6sensor.jpg
type: picture-elements
- cards:
- elements:
- style:
bottom: 0
color: white
font-size: 16px
line-height: 27px
padding: 12px 10px
transform: initial
text: 'Expires:'
type: 'custom:text-element'
- style:
color: white
font-size: 16px
line-height: 27px
padding: 12px 10px
top: 0
transform: initial
text: 'Transmitter Start Date:'
type: 'custom:text-element'
- entity: sensor.cgm_trans_expire_days
style:
background-color: 'rgba(0, 0, 0, 0.0)'
bottom: 0
color: lightblue
font-size: 16px
left: 0
line-height: 32px
padding: 0 65px
pointer-events: none
transform: initial
width: 100%
type: state-label
- entity: sensor.cgm_trans_start
style:
background-color: 'rgba(0, 0, 0, 0.0)'
color: lightblue
font-size: 15px
right: 0
line-height: 32px
padding: 2px 1px
top: 0
transform: initial
type: state-label
- entity: sensor.cgm_trans_expire
style:
bottom: 0
color: lightblue
font-size: 15px
line-height: 32px
padding: 0px 1px
pointer-events: none
right: 0
transform: initial
type: state-label
image: /local/g6transmitter.jpg
type: picture-elements
type: horizontal-stack
type: vertical-stack
- cards:
- animate: true
color_thresholds:
- color: '#039BE5'
value: 2
- color: '#0DA035'
value: 5
- color: '#E0B400'
value: 10
- color: '#E45E65'
value: 15
detail: 2
entities:
- entity: sensor.dexcom_glucose_value
show_fill: true
show_state: false
smoothing: true
hours_to_show: 12
line_width: 3
name: CGM Graph - 12 Hours
points_per_hour: 60
show:
graph: line
labels: true
type: 'custom:mini-graph-card'
unit: mmol/L
- animate: true
color_thresholds:
- color: '#c0392b'
value: 3
- color: '#08ff2d'
value: 5
- color: '#f7ff08'
value: 10
- color: '#ff3508'
value: 15
detail: 1
entities:
- sensor.dexcom_glucose_value
graph: line
hours_to_show: 36
line_width: 3
name: CGM Graph - 36 Hours
points_per_hour: 30
show:
labels: true
type: 'custom:mini-graph-card'
- animate: true
color_thresholds:
- color: '#c0392b'
value: 3
- color: '#08ff2d'
value: 5
- color: '#f7ff08'
value: 10
- color: '#ff3508'
value: 15
entities:
- sensor.dexcom_glucose_value
hours_to_show: 168
line_width: 3
name: CGM Graph - 7 Days
points_per_hour: 5
show:
labels: true
state: true
type: 'custom:mini-graph-card'
- cards:
- entities:
- entity: input_datetime.cgm_sensor_start
- entity: input_datetime.cgm_trans_start
show_header_toggle: false
type: entities
type: horizontal-stack
type: vertical-stack
icon: 'mdi:diabetes'
path: jon-cgm-data
title: Jon CGM Data
Be sure to pay attention to the entities in my code — specifically the sensor.dexcom_glucose_value, and sensor.dexcom_glucose_trend. These two are the sensors coming from the Dexcom Custom Component — Yours will be different depending on what you label them in hass. All the other entities are created through the config templates, and when first setting this up, I’d suggest leaving them named as is for now. Once every thing is working, then you could go back and change the sensor names.
- IMPORTANT -
As for the HbA1C % and eAG average; remember this does NOT replace getting your HbA1C level checked out via a proper lab blood test. These numbers are approximate based off the data received by your Dexcom CGM. Downtime, errors, etc etc will effect those values. Also, it takes an entire 90 days after starting these sensor templates to get even a remotely close percentage and value. The % and eAG value will bounce around until the 90 days of history data is collected. So remember, even after the 90 days, this is just to give you an idea; not a accurate result to make medical decisions based off.
I had a ton of help from this community setting all this up — I’m far from a templating expert. So if you’re running into errors i may not be the best person to ask. But ill try if anything isn’t working the way out should.
Enjoy.
