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

[Thediabeticway (Dave)]

The link to * 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.

is no longer working!

[Thediabeticway (Dave)]

@CaptainSweatpants

Dexcom Custom Component

I use a R2 ikoolcore so far its been great no lag

[nickrout]

Read the thread. Post 28:

Frontend Panel for Diabetics using a Dexcom CGM

The suggestion of statistics wasn’t in response to you @stevemann The code for the custom component is archived because it is now an official ha integration. The original coder is now the codeowner with ha. I hope he has not gone AWOL - I have three days left on my Freestyle, then trialling dexcom!

[Thediabeticway (Dave)]

Ya, I already have it with Dexcom G6 IN THERE AS WELL I was thinking it was something else with the link not working! I also have Nightscout in Ha just now trying again to see if I can get Sensor Age expired, would really like it to tell me each day how long I have left on my Dexcoms sensor!

I also noticed a bug last night and ended up with high readings due to the Lovelace Card
Add a mini Graph card!

It seems to have kept at my same readings at 6.3mmols for 2 hours and I was 10.5mmols when I looked at the Graph it was correct but Dexcom reading wasn’t!
I looked at Nightscouts and that was also ok at 10.5mmols so I did a right-click and refresh the page and it updated.

I was talking to a Amazon developer at the time and he said it was due to my monitor being an old one and the re-fresh rate is doing it, but I can’t see it doing this for two hours.

I think maybe a few seconds delay or a minute or 2 but not two hours It has been ok today on keeping the correct readings. Been checking it but a little concerned on it now! Hope too I don’t need a new Monitor

How do I get a bigger Blood reading in the Picture element?
seems to be very small!

[Thediabeticway (Dave)]

I have mine in Ha but I seem to have got mine in a different way than you have, would be interesting to know why mine is a different look than yours.

I added mine in the configuration.yaml as well as the Nightscout

I’m also trying to work out how to make a Picture Electment Sensor bigger! as I added Blood Sensor to the image but no clue on how to make it bigger!

[nickrout]

You have been around here long enough to know that you should post your configuration if you want help.

[Thediabeticway (Dave)]

I don t know what you mean I might have been around a long while but does not mean I know everything! I do have lots of other things to figure in! I’m no programmer. Just a person who help build Utube and Amazon for the web!

I have tried to explain where the issues lies and its not an Automation this!
It has to do with me adding an iframe (some how) in the lovelace, picture Element.

As this is what you say in your first post. That you was lazy not to do it

( You could create a picture-element card here instead with overlaying colors for warning levels if you wanted too — i was lazy.)

I did not see any method for this or configuration so I took a guess on how to do it.

So I will start with Nightscout first:

The configuration.yaml
Which you will see you can get both MG and Mmols
dont ask how I figured this but I di dno one told me!
I’m no programmer

I also get an error string to use a SugarTV Card
It has been added but gives a error and nothing comes up!

The Tvcard I have now just figured what I had missed by changing it with my own Dexcom Entity ( My Dyslexia is again missing it)

I just need to figure out now how to make it fit into place as no matter how I try to make the image lower it will not fit correctly! I mess with columns but it made no difference!

It would still not fit.

As you can see too I’m stressed and high readings! looks like more insulin and a cycle!

[nickrout]

@Thediabeticway

( You could create a picture-element card here instead with overlaying colors for warning levels if you wanted too — i was lazy.)

I did not say that. Don’t quote someone else and claim it was me.

@Thediabeticway

I also get an error string to use a SugarTV Card
It has been added but gives a error and nothing comes up!

Your picture does not show an error. It tells you that the sugartv card does not have a visual editor. That is not an error.

@Thediabeticway

Just a person who help build Utube and Amazon for the web!

Really?

[Thediabeticway (Dave)]

Thanks for this, how can I make the readings fit. I’m using Dwain Dashboard.
and I can’t seem to get it from going off the screen or too much to the right.

This is what I have so far!

It looks ok in Mobile!

I might need to ask in Dwains Dashboard for help on this.