Creating an analog Fitbit Ionic Clockface (Part 2)

Okay, now we have our basic analog clockface let’s add some other stats to make it funky!

Click on resources/index.gui. This is the first one we need to update.

Add the following near the bottom before the svg end tag so it looks like this:

  <text id="heartrateText" class="heartrateText">BPM</text>
  <text id="stepsText" class="stepsText">STP</text>
  <text id="caloriesText" class="caloriesText">CAL</text>
  <text id="elevationText" class="elevationText">ELV</text>
  <text id="heartrateValue" class="heartrateValue">???</text>
  <text id="stepsValue" class="stepsValue">???,???</text>
  <text id="caloriesValue" class="caloriesValue">??,???</text>
  <text id="elevationValue" class="elevationValue">??</text> 
</svg>

This will add the text to the screen with some default text for the values.

Note that the order of elements in index.gui is a layer (Z-level) order. So, if you add an image then text under it here and in the same x/y in your CSS, the text will appear on top of the image.

Now, let’s give it some parameters such as where to draw it and what it looks like. Click on resources/styles.css and add the following to the end:

#heartrateText {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: end;
  x: 348;
  y: 55;  
  fill: yellow;
}

#stepsText {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: start;
  x: 0;
  y: 55;
  fill: yellow;
}

#caloriesText {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: start;
  x: 0;
  y: 215;
  fill: yellow;
}

#elevationText {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: start;
  x: 308;
  y: 205;
  fill: yellow;
}

#heartrateValue {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: end;
  x: 348;
  y: 25;  
  fill: white;
}

#stepsValue {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: start;
  x: 0;
  y: 25;
  fill: white;
}

#caloriesValue {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: start;
  x: 0;
  y: 245;
  fill: white;
}

#elevationValue {
  font-size: 32;
  font-family: Seville-Condensed;
  text-length: 32;
  text-anchor: end;
  x: 348;
  y: 245;
  fill: white;
}

Obviously, you don’t need to set all of these parameters, but I’m including them here so you can get a good idea of all the options.

So now we’ve told the app that we have text and where to put it and what it looks like. Next, we need to update it when something happens.  Click on app/index.js:

At the top, we need to import bindings to other, existing modules:

// Import useful data
import { HeartRateSensor } from "heart-rate";
import { today } from "user-activity";
import document from "document";

Under the existing text clock.granularity add the following:

// Set up variables - get references to document elements
let hrtValue = document.getElementById("heartrateValue");
let stpValue = document.getElementById("stepsValue");
let calValue = document.getElementById("caloriesValue");
let elvValue = document.getElementById("elevationValue");

Under that, we need to set up getting and updating the Heart Rate Sensor:

// Create new HR Sensor handle
let hrm = new HeartRateSensor();
// When the value changes, update text
hrm.onreading = function() {
  // Peek the current sensor values
  hrtValue.text = hrm.heartRate || 0;

  // Stop monitoring the sensor
  hrm.stop();
}

Next, we have a function to call every half second to update steps, calories burned, heartrate and the elevation (which is for stairs climbed):

// Update calories, altitude, steps and heartrate
function updateText() {
  // Update Steps taken
  stpValue.text = today.adjusted.steps || 0;
  // Update Calories burned
  calValue.text = today.adjusted.calories || 0;
  // Update Altitude walked
  elvValue.text = today.adjusted["elevationGain"] || 0;
  // Update Heart Rate
  hrm.start();  
}

Lastly, set the updateText() function to happen every 500ms:

// Update text every second
setInterval(updateText, 1000);

The finished product is at the top of this page.

As you can see it works a treat! And I even went for a walk uphill in the sprinkling rain to get the Elevation value to change. See what I do for you people? 😉

Here’s the full code for app/index.js:

import clock from "clock";

// Import useful data
import { HeartRateSensor } from "heart-rate";
import { today } from "user-activity";
import document from "document";

// Update the clock every minute
clock.granularity = "seconds";

// Set up variables - get references to document elements
let hrtValue = document.getElementById("heartrateValue");
let stpValue = document.getElementById("stepsValue");
let calValue = document.getElementById("caloriesValue");
let elvValue = document.getElementById("elevationValue");

// Create new HR Sensor handle
let hrm = new HeartRateSensor();
// When the value changes, update text
hrm.onreading = function() {
  // Peek the current sensor values
  hrtValue.text = hrm.heartRate || 0;

  // Stop monitoring the sensor
  hrm.stop();
}

// Update calories, altitude, steps and heartrate
function updateText() {
  // Update Steps taken
  stpValue.text = today.adjusted.steps || 0;
  // Update Calories burned
  calValue.text = today.adjusted.calories || 0;
  // Update Altitude walked
  elvValue.text = today.adjusted["elevationGain"] || 0;
  // Update Heart Rate
  hrm.start();  
}

// Update text every second
setInterval(updateText, 1000);

I hope you’re enjoying these tutorials! 🙂

(Visited 1,798 times, 1 visits today)

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