xDrip+ Car HUD

Adding a Heads up Display page

Nightscout Car HUD (Head up Display) Page

Today I was challenged to build a HUD (Heads up Display) app/page to allow NightScout CGM values to be projected from a mobile or tablet onto a car’s windscreen.

Thankfully there is a nifty CSS trick on webpage coding that allows the entire webpage to be flipped, horizontally, vertically or both.

As such I was able to take the existing code from the NightScout bgclock.html page which you can see at https://your_site.herokuapp.com/bgclock.html or https://your_site.azurewebsites.net/bgclock.html and flip it and change some colours of the fonts etc to create this simple and effective tool.

This can be achieved in just a few easy steps…

These instructions assume you’re a github fork to host your azure or heroku app with.
YOU MUST ALSO BE RUNNING THE LATEST VERSION OF NIGHTSCOUT V 10.3 OR NEWER

  1. CREATING THE WEBPAGE ON GITHUB
      1. Head to https://github.com/ and if you’re not already, login to your account
      2. From the left hand box under Repositories select the location where you forked NightScout to. This will probably be yourusername/cgm-remote-monitor
      3. In the files & folders list, select the folder called Views
      4. Click Create New File (above the current file list on the right hand side)
      5. Add the name hud.html as the file name
      6. Paste the entire code below, into the edit new file box
        CLICK HERE TO VIEW CODE IN A NEW TAB
      7. Click the Commit New File button at the bottom of the page

     

  2. ADD THE NEW PAGE TO THE APP
    1. Head to https://github.com/ and if you’re not already, login to your account
    2. From the left hand box under Repositories select the location where you forked NightScout to. This will probably be yourusername/cgm-remote-monitor
    3. In the files & folders list, select the file called app.js
    4. Click the little pencil in the top right to Edit this file
    5. Scroll down to ~line 68 where is says var appPages = {
    6. below this add a new line with the code below on
      CLICK TO VIEW CODE
      "/hud.html":"hud.html",
    7. Click the Commit Changes button at the bottom of the page
  3. REDEPLOY YOUR SITE
    1. HEROKU USERS
      1. If your site is hosted on HEROKU, head to https://heroku.com/ and login to your account
      2. Click on the name of your github installation
      3. Select the Deploy tab from the top menu
      4. Scroll down to Deployment Method
      5. Select GitHub
        NOTE : IF GITHUB IS ALREADY SELECTED WITH A TICK IN THE BOX AND IT SAYS “CONNECTED” SKIP TO SECTION 11
      6. Select the Connect to GitHub button
      7. You will then need to authenticate with GitHub, if you have not already done so before. Once complete it should take you back to the Heroku Site
      8. Scroll down to the bottom and under Connect to GitHub select YOURUSERNAME from the list of repositories
      9. now type the name you gave your github NightScout fork (again this will probably be cgm-remote-monitor)
      10. Select Search & it should appear below with the option to click connect. Click connect here.
      11. Finally, under Manual deploy select master from the dropdown list of branches & select the Deploy Branch button.
        NOTE : THIS WILL TAKE A FEW MINUTES TO RUN & WILL SAY “Your app was successfully deployed” ONCE COMPLETE
        (in future you can use this same method to redeploy your NightScout site from GitHub any time you make a change there)
  4. GETTING THAT PAGE IN FULL SCREEN
    1. IOS USERS
      1. Open up Safari from the Home Screen. In Safari, open up the website you wish to store as a bookmark on your home screen:
        https://your_site.herokuapp.com/hud.html or https://your_site.azurewebsites.net/hud.html
      2. Click on the “Action” button as shown below:
      3. In the opening pop-up menu select the “Add To Home Screen” option.
      4. Change the bookmark name so that it suits you. Once you’re done, click the “Add” button.
      5. Your iOS device will now return to the home screen, and you’ll see your website bookmark’s icon next to your apps:
    2. ANDROID USERS
      1. Download & Install an app called One Page Web Browser from google play store.
        https://play.google.com/store/apps/details?id=cz.mivazlin.onepagewebbrowser
      2.  Open the App
      3. Press the 3 Dots in the top right
      4. Select Settings
      5. Change the Homepage to
        https://your_site.herokuapp.com/hud.html or https://your_site.azurewebsites.net/hud.html
      6. Head back using the back arrow at the top left

CONGRATULATIONS

Your Heads up Display should now be working
Simply place your phone on the dashboard of your car & read the time and your blood glucose on your windscreen like the image at the top of this page.

It’s probably best to keep your brightness on full when you’re using this so it’s easier to see, especially in the day time !

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: