Fitbit - timer - how to show current time on application

Question

I'm trying to use my fitbit to help know how far into my gym I am more easily. Making this more simple so the solution is easier for people to help with.

I'm using a fitbit and some basic JS.

Using the clock API I can create a timer, but not trigger one with a button.

i.e., this does the job.

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";

import { display } from "display";

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

// Get a handle on the <text> element
const ClockLabel = document.getElementById("timeLabel");
const Timer= document.getElementById("timerLabel");
const myButton = document.getElementById("button-1");
myButton.text = "button";

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  var Timing = 4*60*60
   let today = evt.date;
  var diff = Timing - ((today - start)/1000 |0);
  let hours  = (diff / 3600) | 0;
  let minutes = ((diff - (hours*3600)) / 60) | 0;
  let seconds = diff - (hours * 3600) - (minutes * 60)| 0;

  console.log("hours:"+hours+", minutes:"+minutes+", seconds:"+seconds);


  let hours = today.getHours();
  let minutes = today.getMinutes();
  let seconds = today.getSeconds();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  ClockLabel.text = `${hours}:${minutes}:${seconds}`;
}

However when firing from a button, it doesn't work whatsoever.

myButton.addEventListener("click", (evt) => {
  var start = Date.now()
//also this doesn't work let today = evt.date;

  myButton.text = "Started";
  
  
  var Timing = 4*60*60;
  var diff = Timing - ((Date.now() - start)/1000 |0);
  let hours  = (diff / 3600) | 0;
  let minutes = ((diff - (hours*3600)) / 60) | 0;
  let seconds = diff - (hours * 3600) - (minutes * 60)| 0;

  console.log("hours:"+hours+", minutes:"+minutes+", seconds:"+seconds);
    ClockLabel.text = `${hours}:${minutes}:${seconds}`;

});

This draws me to the conclusion that using this function is probably a better way forward.

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
      'hours': (seconds / 3600)|0,
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};



export default CountDownTimer;

Answer 1

Based on your Question: how to show current time on application?... for the most part, your code looks fine.

To get the current time, its the normal js date ref from FitBit

IMHO you have a couple options 1) using the tick event API or 2) use sample clock app from Fitbit Studio and customize it with your code.

In the end, I added some custom code at the last to help you update the format/display/labels, please adapt it to your needs..

option 1 Tick Event Approach: For e.g. option with clock face to get the current time you need to use the date API or the the tick event which contains the date object as the picture, it also saves you battery life!

---

option 2 Modify Sample Approach: Take the sample getting started app and modify it ref sample to help you and the below sample

           1. Recommended: you can follow the sample https://dev.fitbit.com/getting-started/

           2. There are three files you can peek/update/play around 

           3. Move your crunching code here -> Apps>index.js

           4. Plan/put on the UI/Face   ->         Resource>index.gui

           5. Modify styles via css, font etc. here  -> Resource>styles.css


  let day = today.getDate(); // and the get the time from there. or tick event

---

Now your format your time issue

this below code also has some boilerplate to wire up and help you with the display please modify as per your needs

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";

//import { me as appbit } from "appbit";
import { display } from "display";
//import * as messaging from "messaging";

// Update/Display the text, get a handle on the <text> element
const timeLabel = document.getElementById("timeLabel");
const dateLabel = document.getElementById("dateLabel");

// just threw this in for your ** Medication.. you need to configure/add it
// const MedicationReminder = document.getElementById("MedicationLabel");


clock.granularity = "seconds";
// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();

if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}

let minutes = util.zeroPad(today.getMinutes());
let seconds = util.zeroPad(today.getSeconds());

let day = util.zeroPad(today.getDate());
let month = util.zeroPad(today.getMonth() + 1);
let year = today.getFullYear();

// update like so
timeLabel.text = `${hours}:${minutes}:${seconds}` ;


  function setDateDisplay(obj, d, m, y, format) {
  
  let date;
  if(format) {
    date = `${m}/${d}/${y}`;
  }
  else {
    date = `${d}/${m}/${y}`;
  }
  
  obj.text = date;
  settings.USDateFormat = format;
  }