-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
72 lines (63 loc) · 1.71 KB
/
index.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Technical Rockstarsオフィスの玄関の明るさ</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<script src="http://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<script src="chart.js"></script>
<script>
window.addEventListener('load', function () {
var milkcocoa = new MilkCocoa("{your-app-id}.mlkcca.com");
var datastore = [];
var chart = new createChart();
chart.setSvg("svgchart");
chart.init();
milkcocoa.dataStore('ambient').stream().size(100).next(function(err, datas) {
datastore = datas.map(function(d) {
return {
timestamp : d.timestamp,
value : d.value.v
}
});
chart.setDatas(datastore);
chart.initialDraw();
});
milkcocoa.dataStore('ambient').on('push', function(pushed) {
datastore.push({
timestamp : pushed.timestamp,
value : pushed.value.v
});
datastore.shift();
chart.setDatas(datastore);
chart.updateDraw();
});
});
</script>
<style>
html, body{
background-color: #222;
}
.chart {
width: 1040px;
height: 420px;
}
.domain{
stroke-width: 1px;
stroke: #f2f2ff;
}
text{
font-size: 11px;
fill: #efefef;
}
path{
fill: none;
stroke: #FFF5C9;
}
</style>
</head>
<body>
<p style="text-align: center; color: #fff; font-size: 13px;">こちらはTechnical Rockstarsオフィスの玄関の玄関の明るさになります。Milkcocoaを用いて、リアルタイムに更新されます。<br>消灯時2〜5、点灯時に12〜15くらいです。周りの灯りの影響で中間値を刻むときもあります。</p>
<div id="svgchart" style="margin: 0 auto; width: 1040px;"></div>
</body>
</html>