Frontend Panel for Diabetics using a Dexcom CGM

[mhoogenbosch (Martijn Hoogenbosch)]

I guess the thing is, share needs to be enabled. I have this too, but my share invitation has expired. So no actual followers

[dapalma (Paul)]

Hi there. my name is Paul and this is my first post on this forum. I am also very new to Home Assistant - so pretty much a noob in this space. Have been playing with the Dexcom integration and have build a fairly straightforward dashboard so far. I really like this custom card and have been trying for a few days to incorporate it into my dashboard. Needless to say, been struggling quite a bit, but have slowly been able to chip away at most of the errors. I am hoping this is the last one, but just have not been able to get past it.

If I understand this error correctly, “‘input_number.dexcom_change’” needs to be defined. Or is this an entity that should be part of the Dexcom integration? At the moment this integration only has two entities (glucose value and glucose trend). is this perhaps a definition that needs to be included in the template.yaml file?

[tomx101 (Tomas)]

Hi dapalma,
Sorry for late response. I forgot to mention I use this helper to define change between readings. You can remove it from the config or create your own.

1. You will need to create a helper under Settings > Devices > Helpers. This is a input_number helper. My helper is called Dexcom Change.

2. Afterwards, create this automation:

alias: Glucose change helper
description: ""
trigger:
  - platform: state
    entity_id:
      - sensor.dexcom_YOURSENSOR_glucose_value
condition: []
action:
  - service: input_number.set_value
    data:
      value: >-
        {{ ((trigger.to_state.state | int) - (trigger.from_state.state | int))
        }}
    target:
      entity_id: input_number.dexcom_change
mode: single

[mck165]

Hi Tomas. I am just picking this back up now but I still can’t figure out where I am going wrong. I have the custom button card installed along with the icons. I am in lovelace and manually adding the code. I took a screenshot as I don’t know how to format the code here

[mck165]

this looks awesome. I tried to replicate but no luck:

[wiltodelta (Victor Kuznetsov)]

It looks like value_entity and trend_entity are incorrect.

[mck165]

thanks for the reply. i saw my error. is there a way to resize it? also, is there a way to adjust the time format? sorry i am a HA novice

[tomx101 (Tomas)]

Make sure you create all supporting templates in templates.yaml (or your config if you’re not splitting templates.yaml). The error above means you have not defined the sensor.dexcom_glucose_status (which is a template showing in range / out of range).

[mck165]

thanks I am trying to paste my template.yaml here but I am not sure how to format it. from what i can tell, everything looks to be correct

[mck165]

[tomx101 (Tomas)]

Everything looks good except the “- sensor:” part. Push that two empty spaces to the right.

Also, make sure you reference this file in your config.yaml. In your case, it should say:
template: !include templates.yaml

[nickrout]

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[mck165]

understood

[mck165]

With your help I was able to get rid of all of the errors. There are no errors now, but nothing is displaying on the dashboard. I have all of the icons in the www folder and my config.yaml references the template now. Below is the lovelace yaml

views:
  - title: Home
    cards:
      - type: custom:button-card
entity: sensor.dexcom_arianaeve2015_glucose_value
show_entity_picture: false
show_last_changed: false
show_icon: false
show_name: false
name: |
  [[[ 
     return `<span>${(states['sensor.dexcom_arianaeve2015_glucose_value'].state)} mg/dL</span>`
  ]]]
styles:
  card:
    - border-radius: 2%
    - padding: 2.5%
    - color: ivory
    - font-size: 12px
    - border-width: >
        [[[ if (states['sensor.dexcom_glucose_status'].state === 'In Range')
        return '0px';
            else return '2px';
        ]]]
    - border-color: >
        [[[ if (states['sensor.dexcom_glucose_status'].state === 'Very Low')
        return 'red';
            if (states['sensor.dexcom_glucose_status'].state === 'Low') return 'orange';
            if (states['sensor.dexcom_glucose_status'].state === 'High') return 'orange';
            if (states['sensor.dexcom_glucose_status'].state === 'Very High') return 'red';
            else return 'none';
        ]]]
  grid:
    - grid-template-areas: '"img img" "trend trend" "update update" "range range"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content
  img_cell:
    - justify-content: middle
    - align-items: start
    - margin: none
    - padding-bottom: 5px
  icon:
    - width: 15%
    - margin-top: 0%
    - color: red
    - padding-bottom: 0px
  custom_fields:
    state:
      - align-self: start
      - justify-self: end
      - font-size: 17px
      - padding-bottom: 5px
    update:
      - font-family: helvetica neue, helvetica, Arial
      - font-weight: 500
      - font-size: 15px
      - color: grey
      - align-self: middle
      - justify-content: middle
      - padding-bottom: 5px
      - margin-top: 0px
    trend:
      - font-family: helvetica neue, helvetica, Arial
      - color: rgba(255, 255, 255, 0.7)
      - font-size: 15px
      - font-weight: 300
      - text-align: center
      - padding-bottom: 5px
    range:
      - font-family: helvetica neue, helvetica, Arial
      - font-size: 15px
      - font-weight: 500
      - text-align: center
      - line-height: 30px
      - color: white
      - background-color: |
          [[[
            if ((states['sensor.dexcom_glucose_status'].state === 'Very Low'))
              return "red";
            if ((states['sensor.dexcom_glucose_status'].state === 'Low'))
              return "orange";
            if ((states['sensor.dexcom_glucose_status'].state === 'High'))
              return "orange";
            if ((states['sensor.dexcom_glucose_status'].state === 'Very High'))
              return "red";
            else
              return "none";
          ]]]
    img:
      - font-weight: bold
      - font-size: 15px
      - color: >
          [[[ if (states['sensor.dexcom_glucose_status'].state === 'In Range')
          return 'grey';
              if ((states['sensor.dexcom_glucose_status'].state === 'Low'))
          return "orange";
              if ((states['sensor.dexcom_glucose_status'].state === 'High'))
          return "orange";
              else return 'red';
          ]]]
      - align-self: middle
      - justify-content: middle
      - padding-bottom: 65px
custom_fields:
  trend: |
    [[[ if (states['input_number.dexcom_change'].state > 0)
          return `${(states['sensor.dexcom_arianaeve2015_glucose_trend'].state)} (+${Math.round(states['input_number.dexcom_change'].state)})`;
        return `${(states['sensor.dexcom_arianaeve2015_glucose_trend'].state)} (${Math.round(states['input_number.dexcom_change'].state)})`;
    ]]]
  update: |
    [[[ return `${(states['sensor.dexcom_last_update'].state)}`; ]]]
  range: |
    [[[

      if ((states['sensor.dexcom_glucose_status'].state === 'Very Low'))
        return "VERY LOW";
      if ((states['sensor.dexcom_glucose_status'].state === 'Low'))
        return "LOW";
      if ((states['sensor.dexcom_glucose_status'].state === 'High'))
        return "HIGH";
      if ((states['sensor.dexcom_glucose_status'].state === 'Very High'))
        return "VERY HIGH";
      if ((states['sensor.dexcom_glucose_status'].state === 'In Range'))
        return "IN RANGE";
      else
        return "N/A";
    ]]]
  img: |
    [[[
        if (states['sensor.dexcom_arianaeve2015_glucose_trend'].state == "steady")
          return `<img src=/local/icons/dexcom-steady.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">${(states['sensor.dexcom_glucose_value'].state)}</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
        if (states['sensor.dexcom_arianaeve2015_glucose_trend'].state == "rising slightly")
          return `<img src=/local/icons/dexcom-risingslightly.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">${(states['sensor.dexcom_glucose_value'].state)}</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
        if (states['sensor.dexcom_arianaeve2015_glucose_trend'].state == "falling slightly")
          return `<img src=/local/icons/dexcom-fallingslightly.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">${(states['sensor.dexcom_glucose_value'].state)}</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
        if (states['sensor.dexcom_arianaeve2015_glucose_trend'].state == "falling")
          return `<img src=/local/icons/dexcom-falling.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">${(states['sensor.dexcom_glucose_value'].state)}</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
        if (states['sensor.dexcom_arianaeve2015_glucose_trend'].state == "rising")
          return `<img src=/local/icons/dexcom-rising.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">${(states['sensor.dexcom_glucose_value'].state)}</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
        if (states['sensor.dexcom_arianaeve2015_glucose_trend'].state == "falling quickly")
          return `<img src=/local/icons/dexcom-fallingquickly1.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">${(states['sensor.dexcom_glucose_value'].state)}</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
        if (states['sensor.dexcom_arianaeve2015_glucose_trend'].state == "rising quickly")
          return `<img src=/local/icons/dexcom-risingquickly1.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">${(states['sensor.dexcom_glucose_value'].state)}</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
        return `<img src=/local/icons/dexcom-steady.png
          style="width: 170px; height: 170px; color: #00def;">
          </ha-icon><span style="font-size:30px; margin-top:-111px; display:block;">N/A</span><span style="font-size:13px; margin-top:0px; display:block;">mg/dL</span>`;
    ]]]
tap_action:
  action: none

[tomx101 (Tomas)]

@mck165

/local/icons/dexcom-steady.png

This looks fine to me. Are you sure the icons are in /www/icons folder? The path is e.g., www/icons/dexcom-steady.png. That’s the only potential issue I think of.

[mck165]

Thanks and Yes they are in the www. I will keep playing around with it

[wiltodelta (Victor Kuznetsov)]

Update to the latest version, it automatically uses local time settings.

[mck165]

awesome, thank you!

[Bart_Huitsing]

@Bart_Huitsing

type: custom:apexcharts-card
update_interval: 30min
header:
  show: true
  title: Dagelijkse Time-in-Range
  show_states: false
  colorize_states: true
experimental:
  color_threshold: true
graph_span: 1w
span:
  start: week
yaxis:
  - min: 25
    max: 100
apex_config:
  dataLabels:
    enabled: true
  plotOptions:
    bar:
      columnWidth: 60%
  fill:
    opacity: 0.6
  legend:
    show: true
  xaxis:
    type: datetime
    labels:
      datetimeFormatter:
        month: ddd
        day: ddd
  chart:
    height: 300px
  annotations:
    position: back
    yaxis:
      - 'y': 70
        y2: 100
        strokeDashArray: 3
        fillColor: green
        borderColor: '#00000000'
      - 'y': 70
        y2: 50
        strokeDashArray: 3
        fillColor: yellow
        borderColor: '#00000000'
series:
  - entity: sensor.bart_tir_1d
    stroke_width: 1
    type: column
    name: Deze week
    curve: stepline
    extend_to: now
    show:
      legend_value: false
    group_by:
      func: last
      duration: 1d
  - entity: sensor.bart_tir_1d
    stroke_width: 1
    type: column
    name: Vorige week
    curve: stepline
    extend_to: now
    offset: '-1week'
    show:
      legend_value: false
    group_by:
      func: median
      duration: 1d

Apologize for the (very) late reply. The Medtronic provides a TiR sensor. However, I think you could use the MeasureIt integration via HACS to do the same.

[teskanoo]

Thanks. Never too late… I did not know about the Measure It integration. Saved me an extra step in my calculations. I’ll try that out this weekend.

Cheers