clungzta/d3_ros.html

## d3_ros.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.x.axis path {
  display: none;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
</style>

<script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script type="text/javascript" src="js/cbuffer.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>

<!-- Load c3.css -->
<link href="css/c3.min.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="js/c3.min.js"></script>

<head>
<script type="text/javascript" type="text/javascript">
  // Connecting to ROS
  // -----------------
  var ros = new ROSLIB.Ros({
    url : 'ws://localhost:9090'
  });

  var listener = new ROSLIB.Topic({
    ros : ros,
    name : '/phone1/android/barometric_pressure',
    messageType : 'sensor_msgs/FluidPressure'
  });

  Graph = {};
  Graph.pointCircBuff = CBuffer(10);
  Graph.topic = listener
  Graph.yField = "fluid_pressure"

  ros.on('connection', function() {
    console.log('Connected to websocket server.');
  });
  ros.on('error', function(error) {
    console.log('Error connecting to websocket server: ', error);
  });
  ros.on('close', function() {
    console.log('Connection to websocket server closed.');
  });
  Graph.topic.subscribe(function(message) {
	console.log(message.header.stamp.secs + (message.header.stamp.nsecs * 0.000000001))

	point = {
		x : message.header.stamp.secs + (message.header.stamp.nsecs * 0.000000001),
		y: message[Graph.yField]
	}

    Graph.pointCircBuff.push(point);

    xArray = ['x']
    yArray = [Graph.yField]

	for (var i = 0; i < Graph.pointCircBuff.data.length; i += 5) {
		xArray.push(Graph.pointCircBuff.data[i].x)
		yArray.push(Graph.pointCircBuff.data[i].y)
	}

    var chart = c3.generate({
		data: {
			x: 'x',
			columns: [xArray, yArray]
		},
	transition: {
        duration: 10
    }
	});
  });

</script>
</head>

<body>
<div id='chart'>
  <svg style='height:500px'> </svg>
</div>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font: 10px sans-serif;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.x.axis path {
	display: none;
	}
	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}
	</style>

	<script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
	<script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
	<script type="text/javascript" src="js/cbuffer.js"></script>
	<script src="//d3js.org/d3.v3.min.js"></script>

	<!-- Load c3.css -->
	<link href="css/c3.min.css" rel="stylesheet" type="text/css">

	<!-- Load d3.js and c3.js -->
	<script src="js/c3.min.js"></script>

	<head>
	<script type="text/javascript" type="text/javascript">
	// Connecting to ROS
	// -----------------
	var ros = new ROSLIB.Ros({
	url : 'ws://localhost:9090'
	});

	var listener = new ROSLIB.Topic({
	ros : ros,
	name : '/phone1/android/barometric_pressure',
	messageType : 'sensor_msgs/FluidPressure'
	});

	Graph = {};
	Graph.pointCircBuff = CBuffer(10);
	Graph.topic = listener
	Graph.yField = "fluid_pressure"

	ros.on('connection', function() {
	console.log('Connected to websocket server.');
	});
	ros.on('error', function(error) {
	console.log('Error connecting to websocket server: ', error);
	});
	ros.on('close', function() {
	console.log('Connection to websocket server closed.');
	});
	Graph.topic.subscribe(function(message) {
	console.log(message.header.stamp.secs + (message.header.stamp.nsecs * 0.000000001))

	point = {
	x : message.header.stamp.secs + (message.header.stamp.nsecs * 0.000000001),
	y: message[Graph.yField]
	}

	Graph.pointCircBuff.push(point);

	xArray = ['x']
	yArray = [Graph.yField]

	for (var i = 0; i < Graph.pointCircBuff.data.length; i += 5) {
	xArray.push(Graph.pointCircBuff.data[i].x)
	yArray.push(Graph.pointCircBuff.data[i].y)
	}

	var chart = c3.generate({
	data: {
	x: 'x',
	columns: [xArray, yArray]
	},
	transition: {
	duration: 10
	}
	});
	});

	</script>
	</head>

	<body>
	<div id='chart'>
	<svg style='height:500px'> </svg>
	</div>
	</body>