JSROOTIO-SFT-20130408 - Indico

Transcript JSROOTIO-SFT-20130408 - Indico

Browsing ROOT histograms
on the Web
Bertrand Bellenot
SFT group meeting - April 08 2013
Bertrand Bellenot
CERN PH-SFT
CH-1211 Geneva 23
sftweb.cern.ch
root.cern.ch
1
Scope
• Not a replacement of ROOT:
• No tree analysis
• No fitting
• No editing
• Visualization only:
• Online monitoring
• Publication sites (Elsevier is going to use it)
•…
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
How does it works
• Simple HTML & JavaScript:
• Copy the ROOT file on any plain web server
• Data is transferred over the web
• Visualization happens on the client side
WEB SERVER
User’s selection request
ROOT Files
Compressed object
Client
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Reading objects, actual status
• One very nice feature of JavaScript is the
possibility to dynamically (at runtime) create
classes
• Allowed to implement dynamic streamers
(automatically generated from the streamer info)
• Allows to potentially read any object from a ROOT
file, as soon as we can read the streamer info of
its class
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Graphics
• A JavaScript library (d3.js) is used to display the
1D & 2D histograms and graphs (http://d3js.org/),
and is released under the BSD License
• Another library (three.js) is used for 3D graphics
(released under the MIT License)
• 3D graphics uses WebGL technology when
available (browser and platform dependent)
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Displaying objects
Traditional visualization of a local ROOT file in the ROOT browser
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Displaying objects (cont.)
JSROOTIO.js visualization of identical histogram
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
How to use it?
• Simply copy the ROOT file(s) anywhere on the
web
• Create a simple html page next to the files
• Only two lines have to be added in the <head>
<head>
<title>Read a ROOT file in JavaScript (Demonstration)</title>
<link rel="stylesheet" type="text/css" href="http://root.cern.ch/js/style/JSRootInterface.css" />
<script type="text/javascript" src="http://root.cern.ch/js/scripts/JSRootInterface.js"></script>
</head>
• Including css and js directly from the root web site
keeps you up to date with the latest version
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Simple html Example
• And a few lines in the <body>. Here is a complete
example:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Read a ROOT file in Javascript (Demonstration)</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href=“http://root.cern.ch/js/style/JSRootInterface.css" />
<script type="text/javascript" src="http://root.cern.ch/js/scripts/JSRootInterface.js"></script>
</head>
<body onload="BuildSimpleGUI()">
<div id="simpleGUI" files=“file_1.root;file_2.root;file_n.root;"></div>
</body>
</html>
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Custom streamers
• Lets take a custom container class containing a
user defined type:
mamespace MyNamespace {
typedef TString String_t;
class MyContainer {
protected:
String_t fContainerName;
TH1F
*fHistogram;
};
}
• How to stream the container class and display its
Histogram?
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Custom streamers (cont.)
• There are only three function to be defined in a
custom JavaScript file:
// function checking if the object is a known class
checkUserTypes = function(obj) {
if (obj['_typename'].match(/\bMyNamespace::MyContainer/))
return true;
return false;
}
// function streaming the user defined types
streamUserType = function(streamer, buf, o, obj, prop) {
if (streamer[prop]['typename'] == "MyNamespace::String_t") {
// String_t is a typedef of a std::string, which is equivalent to a TString
var so = JSROOTIO.ReadTString(str, o);
obj[prop] = so['str']; ret = so['off'];
}
return ret;
};
// Function drawing the graphical member
drawUserObject = function(obj, svg) {
if (obj['_typename'].match(/\bMyNamespace::MyContainer/))
SROOTPainter.drawHistogram1D(svg, null, obj['fHistogram'], null);
};
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Custom streamers (cont.)
• Concrete custom streamer example (from Alice):
checkUserTypes = function(obj) {
// function returning true if the object passed is known
if (obj['_typename'].match(/\bJSROOTIO.amore::core::MonitorObjectHisto/))
return true;
return false;
}
streamUserType = function(streamer, buf, o, obj, prop) {
// custom streamer for user specific types. 'streamer' is the object's streamer,
// ‘buf' is the buffer, 'o' is the current index (position) in the buffer,
// 'obj' is the object being read, 'prop' is the class member name (e.g. 'fName')
var ret = o;
if (streamer[prop]['typename'] == "amore::core::String_t") {
// String_t is a typedef of a std::string, which is equivalent to a TString
var so = JSROOTIO.ReadTString(str, o);
obj[prop] = so['str']; ret = so['off'];
}
// return the new index (after reading the string)
return ret;
};
drawUserObject = function(obj, svg) {
// custom draw function. Allow to draw any member of the 'obj' class
// into the 'svg' target
if (obj['_typename'].match(/\bJSROOTIO.amore::core::MonitorObjectHisto/))
if (obj['_typename'].match(/\bTH1/))
JSROOTPainter.drawHistogram1D(svg, null, obj['fVal'], null);
};
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Limitations
• Doesn’t work on Android prior to version 4.0
(doesn't allow byte range HTTP requests)
• Can only make HTTP requests to the domain it
was loaded from (i.e. cannot read files from
another domain)
• Doesn’t fully support LateX rendering
• iOS and IE don't support WebGL
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Availability
• The source code is available in svn:
http://root.cern.ch/svn/root/trunk/js/JSRootIO
• Remaining tasks
• Finalize the automatic streaming
• Add missing drawing options
• Add Latex support
• Feel free to try and to send feedback & requests
• There is a “development” test page available:
http://bellenot.web.cern.ch/bellenot/Public/Test/
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Reserve Slides
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Displaying objects (cont.)
Displaying a TH2, as “BOX” plot (default)
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Displaying objects (cont.)
Displaying the same TH2, as “LEGO” plot
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Displaying objects (cont.)
Displaying a simple TH3
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013
Displaying objects (cont.)
Displaying the content of a TCanvas
sftweb.cern.ch
root.cern.ch
SFT group meeting
8 April 2013

JSROOTIO-SFT-20130408 - Indico

Transcript JSROOTIO-SFT-20130408 - Indico

Directory