Frontend Panel for Diabetics using a Dexcom CGM

[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

[Typ1er (Jens)]

I use the Nightscout integration, where I have the smoothed values with the G7.
How do I reproduce the glucose trend, which is missing in Nigthscout?

[nickrout]

I don’t think you can get that in the nightscout integration, but you can with a rest sensor. I have posted how in another thread. I’m away from home, on holiday, so I’ll try to find the thread.

Edit see Using Continuous Glucose Monitor (CGM) Data - #60 by nickrout