Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
doc:marker_visualization:datavisclient [2014/02/21 10:07] – created stefesdoc:marker_visualization:datavisclient [2014/02/25 09:33] (current) – removed admin
Line 1: Line 1:
-===== Data Visualization CLient ===== 
-The Data Visualization Client listens to a given ros topic for data_vis_msgs and displays them as a chart. Currently donut charts and bar charts are supported. 
- 
-=== Example === 
-This simple web site subscribes to the topic 'data_vis_msgs' and adds diagrams to the div 'chart'. 
-<code html> 
-<!DOCTYPE html> 
-<head> 
-  <meta charset="utf-8"> 
- 
-  <script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script> 
-  <script type="text/javascript" src="http://cdn.robotwebtools.org/ColladaAnimationCompress/current/ColladaLoader2.min.js"></script> 
-  <script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script> 
-  <script type="text/javascript" src="DonutChart.js"></script> 
-  <script type="text/javascript" src="BarChart.js"></script> 
-  <script type="text/javascript" src="DataVisClient.js"></script> 
-  <script src="http://d3js.org/d3.v3.min.js"></script> 
- 
-  <script type="text/javascript" type="text/javascript"> 
-    function init() { 
- 
-      var ros = new ROSLIB.Ros({ 
-        url : 'ws://localhost:9090' 
-      }); 
- 
-      var options = { 
-        ros: ros, 
-        containerId: '#chart', 
-        topic: 'data_vis_msgs' 
-      }; 
-      var dataVisClient = new DataVisClient(options); 
-    } 
-  </script> 
-</head> 
-<style> 
-</style> 
- 
-<body onload="init()"> 
- 
-<div id="top"> 
-<h1>DataVis Demo</h1> 
-<div id="chart"> 
- 
-</div> 
-</div> 
-</body> 
-</code> 
-Make sure DonutChart.js, BarChart.js and DataVisClient.js are in the same directory as the html file and you run 
-  $ roslaunch knowrob_vis knowrob_vis.launch 
-on your localhost. By now messages can be published to the same topic like this: 
-  $ rostopic pub /data_vis_msgs data_vis_msgs/DataVis ' 
-    { 
-      id: "idstring", 
-      type: 0, 
-      title: "some title", 
-      xlabel: "x", 
-      ylabel: "y", 
-      { 
-        value1: ["a","b","c"], 
-        value2: ["3","8","5"] 
-      } 
-    } 
-  ' 
-Type 0 means donut chart, type 1 bar chart. To update data in a already existing diagram simply publish the message again with the same id and new data in value1 and value2. The chart will update immediately. 
- 
-To remove a chart, publish a message with its id and an empty array for value2.