Differences

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

Link to this comparison view

Next revision		Previous revision
doc:chart_visualization [2014/02/25 09:32] – created admindoc:chart_visualization [2015/11/25 08:50] (current) – [Visualization in the rowser] admin
Line 1: Line 1:
 ====== Chart visualization ====== ====== Chart visualization ======
 +~~NOTOC~~
 +\\
 +^ This page describes the 'catkinized' version of KnowRob that uses the [[http://wiki.ros.org/catkin/|catkin buildsystem]] and the pure Java-based [[http://wiki.ros.org/rosjava|rosjava]]. The older version, which was based on the rosbuild buildsystem and rosjava_jni, used a [[http://wiki.ros.org/mod_vis|local visualization canvas implemented in Java]].^
 +\\
  
 +The chart 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.
  
-===== Publishing diagram messages ===== 
  
-Preliminary documentation:+===== Creating charts from KnowRob ===== 
 + 
 +The following predicates start the  publisher that sends updates to the diagram canvas and create a new diagram with the given values. The //add_diagram// predicate is the most generic one that gives full control over all parameters. In contrast, the //add_piechart// and //add_barchart// predicates have fewer parameters and use default values for e.g. the size of the diagrams. 
   $ rosrun rosprolog rosprolog knowrob_vis   $ rosrun rosprolog rosprolog knowrob_vis
   ?- diagram_canvas.   ?- diagram_canvas.
-  ?- add_diagram(id, title, type, xlabel, ylabel, [[[a,b],['1','2']],[[a,b],['1','2']],[[a,b],['1','2']]]).+   
 +  % Long version: 
 +  ?- add_diagram(diagram_id,  
 +                'Diagram title',  
 +                 piechart,  
 +                'Label for x-axis',  
 +                'Label for y-axis',  
 +                300, 300, '12px',  
 +                [[[a,b,c,d],['21','32','12','45']]]). 
 +   
 +  % Shorter versions: default parameters for piecharts and barcharts 
 +  ?- add_piechart(piechart_id, 'Piechart title', [[[a,b,c,d],['21','32','12','45']]]). 
 +  ?- add_barchart(barchart_id, 'Barchart title', [[[a,b,c,d],['21','32','12','45']]]).
  
-This publishes the following message on the topic 'data_vis_msgs':+These three queries will create the following charts: 
 +{{ :doc:diagram-examples.png?nolink |}} 
 + 
 + 
 +===== Behind the scenes: Communication via ROS topics ===== 
 + 
 +The predicates mentioned above publish messages in the following format on the topic //data_vis_msgs//. This topic is forwarded via a websocket by the //rosbridge// server, and a //roslibjs// listener included in the web page receives and visualizes the messages. 
 + 
 +<code yaml>
   id: id   id: id
   type: 0   type: 0
Line 15: Line 42:
   xlabel: xlabel   xlabel: xlabel
   ylabel: ylabel   ylabel: ylabel
 +  width: 210
 +  height: 210
 +  fontsize: 12px
   values:    values: 
     -      - 
Line 22: Line 52:
       value1: ['a', 'b']       value1: ['a', 'b']
       value2: ['1', '2']       value2: ['1', '2']
-    -  +</code> 
-      value1: ['a', 'b'] + 
-      value2: ['1', '2']+Type 0 means donut chart, type 1 is a 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 used (it has been made an array to support other kinds of diagrams in the future, for example multiple timelines). 
 + 
 +For testing purposes, messages can be published to the topic using the rostopic tool 
 +  $ rostopic pub /data_vis_msgs data_vis_msgs/DataVis ' 
 +    { 
 +      id: "arbitrary_id_string", 
 +      type: 0, 
 +      title: "some title", 
 +      xlabel: "x", 
 +      ylabel: "y", 
 +      width: 300, 
 +      height: 300, 
 +      fontsize: '14px', 
 +      values: [{ 
 +        value1: ["a","b","c"], 
 +        value2: ["3","8","5"] 
 +      }] 
 +    } 
 +  ' 
 + 
 +===== Visualization in the browser ===== 
 + 
 +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">
  
-An example of the receiving side can be found [[http://www.knowrob.org/doc/marker_visualization/datavisclient|here]].+</div> 
 +</div> 
 +</body> 
 +</code>
  
 +Make sure DonutChart.js, BarChart.js and DataVisClient.js are located in the same directory as the html file and you run
 +  $ roslaunch knowrob_vis knowrob_vis.launch
 +on your localhost. Now you can publish messages using [[http://knowrob.org/doc/chart_visualization#publishing_messages_from_knowrob|prolog queries]] or the [[http://knowrob.org/doc/chart_visualization#publishing_messages_via_rostopic|rostopic tool]] and watch the corresponding diagram appear.