Created a fitbit heart rate sensor viewer.

5 years ago · 465bc823d7
--- a/fitbitVisualizer.html
+++ b/fitbitVisualizer.html
@ -0,0 +1,138 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="lib/moment.min.js"></script>
    <link href="vis/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
    <script src="vis/vis.js"></script>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <div id="heartRateGraph"></div>

 <body>
    <div class="container">
        <div class="row">
            <div class="col-4 shadow-lg p-3 bg-white rounded">
                <input type="file" id="files" name="files[]" multiple />
                <output id="list"></output>
            </div>
        </div>

        <div class="row">
        </div>
    </div>
 </body>


 <footer>
    <script>

        function generateHeartRateGraph(jsonFiles)
        {
            /*
            var container = document.getElementById('heartRateGraph');
            var items = [
                {x: '2014-06-11', y: 10},
                {x: '2014-06-12', y: 25},
                {x: '2014-06-13', y: 30},
                {x: '2014-06-14', y: 10},
                {x: '2014-06-15', y: 15},
                {x: '2014-06-16', y: 30}
            ];

            var dataset = new vis.DataSet(items);
            var options = {
                start: '2014-06-10',
                end: '2014-06-18'
            };
            var graph2d = new vis.Graph2d(container, dataset, options);
 */

            console.log(jsonFiles);

            var items = [];

            for(var i = 0; i < jsonFiles.length; i++)
            {
                console.log(jsonFiles[i].length);
                for(var j = 0; j < jsonFiles[i].length; j++)
                {
                    //console.log(jsonFiles[i][j]);
                    items.push({y:jsonFiles[i][j].value.bpm, x:jsonFiles[i][j].dateTime})

                }
            }

            var dataset = new vis.DataSet(items);
            var options = {
                dataAxis: {
                    showMinorLabels: true,
                    left: {
                        title: {
                            text: "Heart Rate"
                        }
                    }
                }
            };
            var container = document.getElementById("heartRateGraph");
            var graph2d = new vis.Graph2d(container, dataset, options);

            console.log(items);
        }


        function handleFileSelect(evt)
        {
            var files = evt.target.files; // FileList object

            // files is a FileList of File objects. List some properties.
            var output = [];

            var promises = [];

            for (var i = 0, f; f = files[i]; i++)
            {
                output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                    f.size, ' bytes, last modified: ',
                    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                    '</li>');

                promises.push(new Promise((resolve, reject)=>
                {
                    var reader = new FileReader();

                    reader.onload = function(e)
                    {
                        resolve(JSON.parse(reader.result));
                    };

                    reader.onerror= function(e)
                    {
                        reject(e);
                    };

                    reader.readAsBinaryString(files[i]);
                    //console.log(f);

                }));
            }
            document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';


            Promise.all(promises).then((data)=>
            {
                generateHeartRateGraph(data);
            }).catch((error)=>
            {
                console.log(error);
                console.log("Unable to Load Data");
            })
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>
 </footer>

 </html>
--- a/lib/jquery-3.3.1.min.js
+++ b/lib/jquery-3.3.1.min.js
--- a/lib/moment.min.js
+++ b/lib/moment.min.js
--- a/vis/img/network/acceptDeleteIcon.png
+++ b/vis/img/network/acceptDeleteIcon.png
--- a/vis/img/network/addNodeIcon.png
+++ b/vis/img/network/addNodeIcon.png
--- a/vis/img/network/backIcon.png
+++ b/vis/img/network/backIcon.png
--- a/vis/img/network/connectIcon.png
+++ b/vis/img/network/connectIcon.png
--- a/vis/img/network/cross.png
+++ b/vis/img/network/cross.png
--- a/vis/img/network/cross2.png
+++ b/vis/img/network/cross2.png
--- a/vis/img/network/deleteIcon.png
+++ b/vis/img/network/deleteIcon.png
--- a/vis/img/network/downArrow.png
+++ b/vis/img/network/downArrow.png
--- a/vis/img/network/editIcon.png
+++ b/vis/img/network/editIcon.png
--- a/vis/img/network/leftArrow.png
+++ b/vis/img/network/leftArrow.png
--- a/vis/img/network/minus.png
+++ b/vis/img/network/minus.png
--- a/vis/img/network/plus.png
+++ b/vis/img/network/plus.png
--- a/vis/img/network/rightArrow.png
+++ b/vis/img/network/rightArrow.png
--- a/vis/img/network/upArrow.png
+++ b/vis/img/network/upArrow.png
--- a/vis/img/network/zoomExtends.png
+++ b/vis/img/network/zoomExtends.png
--- a/vis/vis-graph3d.min.js
+++ b/vis/vis-graph3d.min.js
--- a/vis/vis-network.min.css
+++ b/vis/vis-network.min.css
--- a/vis/vis-network.min.js
+++ b/vis/vis-network.min.js
--- a/vis/vis-timeline-graph2d.min.css
+++ b/vis/vis-timeline-graph2d.min.css
--- a/vis/vis-timeline-graph2d.min.js
+++ b/vis/vis-timeline-graph2d.min.js
--- a/vis/vis.css
+++ b/vis/vis.css
--- a/vis/vis.js
+++ b/vis/vis.js
--- a/vis/vis.js.map
+++ b/vis/vis.js.map
--- a/vis/vis.map
+++ b/vis/vis.map
--- a/vis/vis.min.css
+++ b/vis/vis.min.css
--- a/vis/vis.min.js
+++ b/vis/vis.min.js