-
Notifications
You must be signed in to change notification settings - Fork 1
/
circle.html
115 lines (94 loc) · 3.6 KB
/
circle.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8">
<title></title>
<script src="http://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="container">
<ul class="box" id="astronaut-list"></ul>
<h2>Happy chart</h2>
<div id="happy-chart"></div>
<h2>Surprised chart</h2>
<div id="surprised-chart"></div>
<h2>Sad chart</h2>
<div id="sad-chart"></div>
<h2>Angry chart</h2>
<div id="angry-chart"></div>
</div>
<script src="script.js"></script>
<script>
/* ------------------
initialise
------------------ */
var circleChart1 = emotionalHealth.circlechart();
var circleChart2 = emotionalHealth.circlechart();
var circleChart3 = emotionalHealth.circlechart();
var circleChart4 = emotionalHealth.circlechart();
d3.select('#happy-chart').append('svg').attr('width', 960).attr('height', 200).call(circleChart1);
d3.select('#surprised-chart').append('svg').attr('width', 960).attr('height', 200).call(circleChart2);
d3.select('#sad-chart').append('svg').attr('width', 960).attr('height', 200).call(circleChart3);
d3.select('#angry-chart').append('svg').attr('width', 960).attr('height', 200).call(circleChart4);
/* ------------------
load & draw data
------------------ */
// Firebaseへのコネクション
var Refs = new Firebase('https://y1dzhuuj.firebaseio.com/');
var astronauts = {};
var connections = {};
function drawEmotions(data) {
circleChart1.drawData( data, "happy", "#FFF01F" );
circleChart2.drawData( data, "surprised", "#FFA63F" );
circleChart3.drawData( data, "sad", "#1FC2FF" );
circleChart4.drawData( data, "angry", "#FF7F96" );
}
function update(astronaut_key) {
var AstronautsQuery = Refs.child('astronauts/' + astronaut_key).limit(30);
AstronautsQuery.once('value', function(_dataSnapShot){
var value = _dataSnapShot.val();
var data = [];
// dataの形式はArrayにする必要がある
for (emotion_key in value.history) {
if (Date.now() - value.history[emotion_key].timestamp < 60 * 1000) {
console.log(Date.now() - value.history[emotion_key].timestamp);
data.push(value.history[emotion_key]);
}
}
drawEmotions(data);
// すでに存在するデータを取得する
Refs.child('astronauts/' + astronaut_key + '/history').on('child_added', function(_dataSnapShot){
var value = _dataSnapShot.val();
data.push(value);
drawEmotions(data);
});
});
}
function resetEmotions(){
d3.select('#happy-chart').html("");
d3.select('#surprised-chart').html("");
d3.select('#sad-chart').html("");
d3.select('#angry-chart').html("");
}
// いま、顔認識をしているユーザーを表示
Refs.child('connections').on('value', function(_dataSnapShot){
var connections = _dataSnapShot.val();
console.log(connections);
for (astronaut_key in connections) {
$astronaut = $('<li/>', {
text: astronaut_key
});
$('#astronaut-list').append($astronaut);
}
});
$('#astronaut-list').on('click', function(e) {
var astronaut_key = $(e.target).html();
// resetEmotions();
update(astronaut_key);
});
</script>
</body>
</html>