|
115
|
1 <html>
|
|
|
2 <head>
|
|
|
3 </head>
|
|
|
4 <body>
|
|
|
5 theater motion sensor history:
|
|
|
6 <div id="chart_div" style="width: 900px; height: 250px;"></div>
|
|
|
7 max age: <input type="range" name="maxAge" min="10" max="300" value="180">
|
|
|
8 <div id="status"></div>
|
|
|
9 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
|
|
10 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
|
11 <script type="text/javascript">
|
|
|
12 google.load("visualization", "1", {packages:["corechart"]});
|
|
|
13
|
|
|
14 var latestData = null;
|
|
|
15 var chart = null;
|
|
|
16
|
|
|
17 function loop() {
|
|
|
18 getNewPoints();
|
|
|
19 setTimeout(function () { webkitRequestAnimationFrame(loop); }, 1200);
|
|
|
20 }
|
|
|
21 google.setOnLoadCallback(function () {
|
|
|
22 chart = new google.visualization.LineChart(document.getElementById('chart_div'))
|
|
|
23 loop();
|
|
|
24 });
|
|
|
25
|
|
|
26 function getValue(subj, pred, trig) {
|
|
|
27 var groups = trig.match('<'+subj+'> <'+pred+'> "(.*?)"');
|
|
|
28 if (groups == null) {
|
|
|
29 return null;
|
|
|
30 }
|
|
|
31 return groups[1];
|
|
|
32 }
|
|
|
33
|
|
|
34 function getNewPoints() {
|
|
|
35 $("#status").text("get graph...");
|
|
|
36 $.ajax({
|
|
|
37 url: "graph",
|
|
|
38 success: function(data) {
|
|
|
39 $("#status").text("");
|
|
|
40 var pointsJson = getValue(
|
|
|
41 "http://projects.bigasterisk.com/device/theaterDoorOutsideMotion",
|
|
|
42 "http://projects.bigasterisk.com/room/history",
|
|
|
43 data);
|
|
|
44 var realPoints = [];
|
|
|
45 if (pointsJson != null) {
|
|
|
46 realPoints = JSON.parse(pointsJson);
|
|
|
47 }
|
|
|
48 var steppedPoints = new google.visualization.DataTable();
|
|
|
49 steppedPoints.addColumn('number', 't');
|
|
|
50 steppedPoints.addColumn('number', 'value');
|
|
|
51
|
|
|
52 var prev = null;
|
|
|
53 realPoints.forEach(function(r) {
|
|
|
54 if (prev) {
|
|
|
55 steppedPoints.addRows([[r[0], prev[1]]]);
|
|
|
56 }
|
|
|
57 steppedPoints.addRows([[r[0], r[1]]]);
|
|
|
58 prev = r;
|
|
|
59 });
|
|
|
60 latestData = steppedPoints;
|
|
|
61 redraw();
|
|
|
62 }
|
|
|
63 });
|
|
|
64 }
|
|
|
65 $("input[name=maxAge]").change(redraw);
|
|
|
66
|
|
|
67 function redraw() {
|
|
|
68 // https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options
|
|
|
69 var options = {
|
|
|
70 title: 'theaterDoorOutsideMotion',
|
|
|
71 legend: {
|
|
|
72 position: "none",
|
|
|
73 },
|
|
|
74 lineWidth: .5,
|
|
|
75 hAxis: {
|
|
|
76 title: "seconds ago",
|
|
|
77 viewWindow: {
|
|
|
78 min: -$("input[name=maxAge]").val(),
|
|
|
79 max: 0
|
|
|
80 },
|
|
|
81 gridlines: { count: -1 }
|
|
|
82 },
|
|
|
83 vAxis: {
|
|
|
84 baseline: -999,
|
|
|
85 title: "motion sensed",
|
|
|
86 viewWindow: {
|
|
|
87 min: -.5,
|
|
|
88 max: 1.5,
|
|
|
89 }
|
|
|
90 }
|
|
|
91 };
|
|
|
92
|
|
|
93 chart.draw(latestData, options);
|
|
|
94 }
|
|
|
95
|
|
|
96 </script>
|
|
|
97 </body>
|
|
|
98 </html>
|
