未加星标

Create an interactive interface using your Fitbit’s data

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

In this experiment is created an interactive interface that displays real-time heart―rate and sleep tracking data from a Fitbit Charge HR.

Introduction

In this article we will explore how you can use your Fitbit data to create an interactive interface from scratch. Fitbit is an activity trackers, wireless-enabled wearable technology devices that measure data such as the number of steps walked, heart rate, quality of sleep, steps climbed, and other personal metrics, the model used is Charge HR (i.e. heart rate). You can see a quick demo of the final result in the embedded codepen below. The technologies used are HTML, CSS, javascript (jQuery), SVG, the OAuth 2.0 protocol and some RESTful calls in order to retrieve the Fitbit raw data. We will discuss first the general concept, the why and the hows. This article is focused on the front―end part while the resting back-end implementation is let to a future implementation. The sole scope is to build a final working prototype. The experiment interface is intended to be used in a real web site once tested and completed.

Interface
Create an interactive interface using your Fitbit’s data
The interface is composed by two elements, the heart―rate module and the sleep module. In the heart―rate module will be displayed the average heart―rate and the heart graph. In the sleep module will be displayed the daily hours slept per night of the last week and the average hours slept. In image below is shown the prototype of the desired final result. In order to create the heart icon, the heart graph and the sleep graph, SVG images are our perfect choice. This image format allow us to make animations by changing it’s attributes/points/shapes in a very easy way through JavaScript or CSS. For animating the heart icon, the simplest way of doing it is through CSS3 (i.e. @keyframes and it’s animation features). To simulate the heart beat we can increase and then decrease the width and height of the heart icon at a fixed period of time. Lastly we can simply change the animation speed time at runtime (i.e. the animation-duration CSS3 property). Let’s make some math: the data that Fitbit provides are heart beats per minute (hbpm). For example 60 hbpm is read as 60 heart beats in 1 minute, that means that in one second our heart icon should make an animation (i.e. animation-duration:1s; ). You may already noticed that we are not interested in the hbpm, but in how many seconds it takes to make a heart beat (per second heart beat). In short we divide 60 seconds by the number of hbpm (e.g. 60s / 80hbpm = 0,75s , animation-duration:0,75s; ). The last modules and icons are updated and animated through JavaScript. Code & Logic

We briefly explain the JavaScript code necessary to create the animations, fetch, display the data and so on. The code can be found in the codepen at the introduction section example above. As explained previously, the back-end part is not explained in this article, for the moment we provide the raw data received in JSON format using the Fitbit APIs. The jQuery library is used in order to manipulate the DOM. The JavaScript code is structured two modules, the basic pattern used are Iterator and Module pattern.

OAuth 2.0 & Fitbit Charge HR

The data that is normally collected from your Fitbit tracker can’t be accessed directly from your device (that’s sad). First you need to connected to your mobile device or computer, then you need an internet connection and then the data is send to Fitbit central server. Luckily Fitbit provides some APIs for the developers which you can use to get the desired data. In order to use the Fitbit APIs (e.g. https://api.fitbit.com/1/user/3WZ68J/activities/heart/date/2016-06-18/1d/1sec/time/00:00/23:59.json ), you first need to register as a developer at https://dev.fitbit.com , then get a token and an authorisation code in order to be able to use and get the data. Once you have the application name, token and secret code you can make a request using the OAuth protocol to get the data. The OAuth protocol is used for the API usage grant, not for the authentication. If you would like to know more about the protocol you are invited to look at the official RFC or documentation. Usually an user stays at average from 5 seconds to max 10 minutes on a website (the range changes based on the type of the website), there is no need to get all intraday heart rate data, we just grab once a day the yesterday data or the last available data. Instead of making API calls at every single HTTP request make just one call a day and get the yesterday data. You also need a token to make a request, I’ve made a year token (though that’s a bad security practice) for the moment to not worry about updating the token.

Conclusion

It would be nice to have real time data, unfortunately that is not possibile due to the fact that the data first need to go through a central server and there is now direct way to fetch the data from the device directly. Future implementation of the back-end fetch data is not yet implemented and may lead to new challenges. The heart rate data could also be used as seed for some random animation or functions.

Last modified date: 05/10/2016

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJavaCSSjQueryCSS3RESTHTML
分页:12
转载请注明
本文标题:Create an interactive interface using your Fitbit’s data
本站链接:http://www.codesec.net/view/479758.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(53)