|
|
- <!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">
- <label>Heart Rate JSON Files</label>
- <input type="file" id="files" name="files[]" multiple />
- <output id="list"></output>
- </div>
- <div class="col-4 shadow-lg p-3 bg-white rounded">
- <label>Activity Files</label>
- <input type="file" id="actFiles" name="files[]" multiple />
- <output id="actList"></output>
- </div>
- </div>
-
- <div class="row">
- </div>
- </div>
- </body>
-
-
- <footer>
- <script>
-
- function generateHeartRateGraph(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++)
- {
- var localTime = new Date(jsonFiles[i][j].dateTime);
- items.push({y:jsonFiles[i][j].value.bpm, x:localTime.setHours(localTime.getHours() - 4)});
- }
- }
- console.log("Finished Loading Heart Rate Data Into Graph");
- console.log(items);
- 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);
- graph2d.on('rangechanged', graphMoved);
- graphsOnPage.push(graph2d);
- }
-
-
- function generateTimeline(jsonFiles)
- {
- var items = [];
-
- for(var i = 0; i < jsonFiles.length; i++)
- {
- for(var j = 0; j < jsonFiles[i].length; j++)
- {
- if(jsonFiles[i][j].hasOwnProperty("dateOfSleep"))
- {
- var startT = new Date(jsonFiles[i][j].startTime);
- var finishT = new Date(jsonFiles[i][j].endTime);
- items.push({content: "Sleep",
- start:startT, end:finishT, group:0});
- }
- else
- {
- var localTime = new Date(jsonFiles[i][j].startTime);
- var timeAdjusted = localTime.setHours(localTime.getHours() - 4);
- var timeFinish = localTime.setMilliseconds(localTime.getMilliseconds() + jsonFiles[i][j].activeDuration);
- items.push({content: jsonFiles[i][j].activityName,
- start:timeAdjusted, end:timeFinish, group:0});
- }
- }
- }
- console.log("Finished Loading Heart Rate Data Into Graph");
-
- var dataset = new vis.DataSet(items);
- var options =
- {
- margin:
- {
- item:20,
- axis:40
- },
- showCurrentTime: false
- };
-
- var grpups = new vis.DataSet([
- {id: 0, content:"Activity", value:0}
- ]);
-
- var container = document.getElementById("heartRateGraph");
- var graph2d = new vis.Timeline(container, dataset, options);
- graph2d.setGroups(grpups);
- graph2d.on('rangechanged', graphMoved);
- graphsOnPage.push(graph2d);
- }
-
- var graphsOnPage = [];
-
-
- function graphMoved(moveEvent)
- {
- graphsOnPage.forEach((g)=>
- {
- g.setWindow(moveEvent.start, moveEvent.end);
- })
- }
-
- function fetchFilesAsJSONArray(evt)
- {
- return new Promise((res, rej)=>
- {
- var files = evt.target.files; // FileList object
-
- var promises = [];
-
- for (var i = 0, f; f = files[i]; i++)
- {
- 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]);
- }));
- }
- Promise.all(promises).then((data)=>
- {
- res(data);
- }).catch((error)=>
- {
- console.log(error);
- console.log("Unable to Load Data");
- rej(error);
- })
- });
- }
-
-
- function handleFileSelect(evt)
- {
- fetchFilesAsJSONArray(evt).then((data)=>
- {
- generateHeartRateGraph(data);
- })
- }
- document.getElementById('files').addEventListener('change', handleFileSelect, false);
-
-
- function handleFileSelectEvents(evt)
- {
- fetchFilesAsJSONArray(evt).then((data)=>
- {
- generateTimeline(data);
- })
- }
- document.getElementById('actFiles').addEventListener('change', handleFileSelectEvents, false);
- </script>
- </footer>
-
- </html>
|
