/
index.html
111 lines (102 loc) · 4.11 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
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
<!doctype html>
<html ng-app="digitalReadChart">
<head>
<title>Introduction to Charts</title>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<script src="/static/bonescript.js"></script>
<script src="/static/angular.min.js"></script>
<script src="/static/d3.min.js"></script>
<script src="/static/nv.d3.js"></script>
<script src="/static/angular-nvd3.min.js"></script>
<link rel="stylesheet" href="/static/nv.d3.css">
</head>
<body>
<script>
angular
.module('digitalReadChart', ['nvd3'])
.controller('MainCtrl', function($scope){
$scope.options = {
chart:{
type: 'lineChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d){ return d.x;},
y: function(d){ return d.y;},
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Time (min)',
tickFormat: function(d){
return d3.format('0.2f')(d)
},
},
yDomain: [0,1],
yAxis:{
axisLabel: 'State (on/off)',
tickFormat: function(d){
return d == 1 && 'on' || 'off'
},
axisLabelDistance: -10,
tickValues: [0,1]
}
},
title:{
enable: false,
}
};
$scope.data = [{
values: [],
key: 'Pin state',
color: '#ff7f0e'
}];
$scope.address = window.location.host;
$scope.pin = 'P9_11';
$scope.refresh_rate = 1000;
$scope.startTime = new Date().getTime();
$scope.refresh = function(){
$scope.b.digitalRead($scope.pin, $scope.updateGraph);
setTimeout($scope.refresh, $scope.refresh_rate);
}
$scope.updateGraph = function(state){
var nowTime = new Date().getTime()
$scope.$apply(function(){
$scope.data[0].values.push({x: (nowTime - $scope.startTime)/60000, y: state.value})
})
console.log('x.value = ' + state.value);
console.log('x.err = ' + state.err);
}
$scope.setupBonescript = function (){
var handlers = {};
handlers.callback = function(){console.log('callback')};
handlers.initialized = setupInterface;
handlers.connecting = function(){console.log('connecting')};
handlers.connect_failed = function(){console.log('connect_failed')};
handlers.reconnect_failed = function(){console.log('reconnect_failed')};
handlers.disconnect = function(){console.log('disconnect')};
handlers.connect = function(){console.log('connect')};
handlers.reconnect = function(){console.log('reconnect')};
handlers.reconnecting = function(){console.log('reconnecting')};
setTargetAddress($scope.address,handlers)
function setupInterface(){
console.log('initialized')
$scope.b = require('bonescript');
$scope.b.pinMode($scope.pin, $scope.b.INPUT);
$scope.refresh()
}
}
});
</script>
<div ng-controller='MainCtrl'>
<label for="address">Address:</label><input name="address" ng-model="address" type="text"/>
<label for="pin">Pin:</label><input name="pin" ng-model="pin" type="text"/>
<label for="refresh_rate">Refresh rate (ms):</label><input name="refresh_rate" ng-model="refresh_rate" type="text"/>
<button ng-click="setupBonescript()">Start</button>
<nvd3 options="options" data="data"></nvd3>
</div>
</body>
</html>