<html>
<head>
<!-- http://jquery.com -->
<script src="./jquery.min.js"></script>
<!-- http://www.flotcharts.org -->
<script src="./jquery.flot.min.js" type="text/javascript"></script>
<script src="./jquery.flot.time.js" type="text/javascript"></script>
<!-- https://github.com/shokai/linda-base -->
<script src="http://rpi.local:5000/rocketio/linda.js"></script>
<script>
var space_name= "myhome";
var tuple= ["sensor"];
var linda= new Linda();
var ts= new linda.TupleSpace(space_name);
var data= [];
var data2= [];
$(function() {
//linda
linda.io.on("connect", function() {
ts.watch(tuple, function(_tuple) {
log(_tuple)
});
});
linda.io.on("disconnect", function() {
});
var log= function(msg) {
if(msg[1] == 'light')
data.push([(new Date()).getTime(), msg[2]]);
else if(msg[1] == 'temperature')
data2.push([(new Date()).getTime(), msg[2]]);
}
//flot
var container= $("#placeholder");
var maximum= container.outerWidth() / 2 || 300;
function getData(_data) {
while(_data.length > maximum) {
_data= _data.slice(1);
}
return _data;
}
series= [{
data: getData(data),
label: "light",
lines: {
fill: false,
}
}, {
data: getData(data2),
label: "temp.",
yaxis: 2,
lines: {
fill: false,
}
}];
var plot= $.plot(container, series, {
grid: {
borderWidth: 1,
minBorderMargin: 20,
labelMargin: 10,
backgroundColor: {
colors: ["#fff", "#e4f4f4"]
},
margin: {
top: 8,
bottom: 20,
left: 20
},
markings: function(axes) {
var markings= [];
var xaxis= axes.xaxis;
for(var x= Math.floor(xaxis.min); x < xaxis.max; x+= xaxis.tickSize * 2) {
markings.push({
xaxis: {
from: x,
to: x + xaxis.tickSize
},
color: "rgba(232, 232, 255, 0.2)"
});
}
return markings;
}
},
xaxis: {
mode: "time",
timezone: "browser",
timeformat: "%H:%M:%S",
ticks: 8,
},
yaxes: [{
tickFormatter: function(val, axis){return val.toFixed(1)},
}, {
tickFormatter: function(val, axis){return val.toFixed(1)},
}],
legend: {
show: true,
position: "sw",
}
});
setInterval(function updateSeries() {
series[0].data= getData(data);
series[1].data= getData(data2);
plot.setData(series);
plot.setupGrid();
plot.draw();
}, 1000);
});
</script>
</head>
<body>
<div id="container">
<div id="placeholder" style="width:800px;height:300px;"></div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿