Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
doc:marker_visualization:datavisclient [2014/02/21 10:47] – style 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. Messages can now 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", 
-      values: [{ 
-        value1: ["a","b","c"], 
-        value2: ["3","8","5"] 
-      }] 
-    } 
-  ' 
-Type 0 means donut chart, type 1 bar chart. To update data in an 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. 
- 
-By now, only the first element of the 'values'-array is recognized.