You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
4.1 KiB
135 lines
4.1 KiB
<!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");
|
|
|
|
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);
|
|
}
|
|
|
|
|
|
function generateTimeline(jsonFiles)
|
|
{
|
|
console.log(jsonFiles);
|
|
}
|
|
|
|
|
|
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>
|