/
weight.js
130 lines (99 loc) · 3.17 KB
/
weight.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
(function (exports) {
var newUserTemplate = _.template(document.getElementById("new-user-template").innerHTML);
var welcomeUserTemplate = _.template(document.getElementById("welcome-user-template").innerHTML)
var template = _.template(document.getElementById("weight-template").innerHTML);
var bufferSize = 20;
var precision = 0.01;
var utils = smartMirror.utils;
var api = smartMirror.api;
var request = null;
function average (average, measurement, i, measurements) {
return average + (measurement / measurements.length);
}
exports.weightWidget = function () {
var self = this;
var prevMeasurements = [];
var weight = 0;
this.classList.add("weight-widget");
function onData (data) {
var avgMeasurement = _.reduce(prevMeasurements, average, 0);
var deviation = Math.abs(weight - avgMeasurement);
weight = utils.totalWeight(data);
if (prevMeasurements.length >= bufferSize) {
if (deviation < precision) {
balanceBoard.off("data", onData);
request = api.login(weight);
request.success(handleLogin);
}
}
prevMeasurements.push(weight);
prevMeasurements = prevMeasurements.slice(-bufferSize);
render();
}
function handleLogin (data) {
if (data.status === "not_found") {
$('.weight-content', self).html(newUserTemplate({qrURL: data.qr_code}));
} else {
$('.weight-content', self).html(welcomeUserTemplate({name: data.name}));
drawChart(data.history);
}
self.classList.add("show-content");
}
function drawChart (progress) {
var padding = 20;
var width = 375;
var height = 250;
var chart = d3.select("#chart");
progress = progress.sort(function (a, b) {return a.day - b.day}).slice(-14);
var xRange = d3.scale.linear()
.range([0, width])
.domain([
d3.min(progress, function(d) {return d.day;}),
d3.max(progress, function(d) {return d.day;})
]);
var yRange = d3.scale.linear()
.range([0, height - 2*padding])
.domain([
d3.min(progress, function(d) {return d.weight;}),
d3.max(progress, function(d) {return d.weight;})
]);
var lineFunc = d3.svg.line()
.x(function(d) {
return xRange(d.day);
})
.y(function(d) {
return height -padding*2 - yRange(d.weight);
})
.interpolate('basis');
var path = chart
.append('svg:g')
.attr('transform', 'translate(0, '+ padding +')')
.append('svg:path')
.attr('d', lineFunc(progress))
.attr('stroke', 'white')
.attr('stroke-width', 2)
.attr('fill', 'none');
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(1000)
.ease("basis-open")
.attr("stroke-dashoffset", 0);
}
function render () {
self.innerHTML = template({weight: weight});
}
render();
setTimeout(function () {
balanceBoard.on("data", onData);
}, 500);
return function () {
if (request) {request.abort();}
self.classList.remove("show-content");
self.classList.remove("weight-widget")
balanceBoard.off("data", onData);
};
}
}(window.smartMirror || (window.smartMirror = {})));