JavaScript ROOT

Bertrand Bellenot (CERN)Sergey Linev (GSI)

JavaScript ROOT, ROOT Workshop 2

JSRootIO project

• Original project from Bertrand Bellenoto was presented at the ROOT workshop 2013

• ROOT I/O in JavaScripto reading ROOT objects using streamer infos

• many exceptions due to custom streamerso source for the project name - JSRootIO

• Graphic with d3.js, three.js and jQuery.js

• Navigating the ROOT files content and displaying objects in modern web browsers

16.09.2015

JavaScript ROOT, ROOT Workshop 3

JSRootIO screenshots

16.09.2015

JavaScript ROOT, ROOT Workshop 4

JSRootIO and http server

• Could one use JSRootIO with online ROOT application?

• In general yes, but many hidden problems and caveats:o difficulty with fixed HTML designo lack of objects updateo flexible API was missing

• There was an intermediate solution with many workarounds until a decision was taken to redesign JSRootIO completely

16.09.2015

JavaScript ROOT, ROOT Workshop 5

JavaScript ROOT

• Preserve old functionality, including look-and-feel

• Redesign was focused on:o modularityo clear APIo more interactive featureso more supported classeso support of user classes

• Project was renamed to JSROOTo binary ROOT files reading is an optional part of the project

16.09.2015

JavaScript ROOT, ROOT Workshop 6

How to use JSROOT?

• As before, for interactive browsing of ROOT fileso open JSROOT web page https://root.cern.ch/js/dev/o load file(s) from webo show content of the fileso display objects from the files

16.09.2015

User interface

16.09.2015JavaScript ROOT, ROOT Workshop 7

layout selectio

n

file content

file loading

Different layouts

16.09.2015JavaScript ROOT, ROOT Workshop 8

grid collapsible

tabs simple

Context menu with draw options

16.09.2015JavaScript ROOT, ROOT Workshop 9

Context menu for drawn object

16.09.2015JavaScript ROOT, ROOT Workshop 10

Informative tooltips

16.09.2015JavaScript ROOT, ROOT Workshop 11

Intuitive zooming

16.09.2015JavaScript ROOT, ROOT Workshop 12

JavaScript ROOT, ROOT Workshop 13

How to share results?• Before

o create and send PNG image (static)o or create and send ROOT file with canvas (interactive)

• one requires ROOT installed everywhere

• With JSROOTo copy your ROOT file on web server and send link to the fileo open main page https://root.cern.ch/js/dev/o enter file name (like https://root.cern.ch/js/files/hsimple.root)o find and draw histogram or canvas

• Same actions repeat many times again o interactive not always mean bettero are there alternatives?

• Solution - use JSROOT UI with URL parameters!16.09.2015

JavaScript ROOT, ROOT Workshop 14

URL parameters in JSROOT file(s) – name of file(s) to open

json – name of json file to open

item(s) – item name(s) to display

opt(s) – drawing option for the item(s)

layout – layout for drawings like grid or tabs

nobrowser – do not display objects hierarchy

mathjax – enable usage of MathJax.js

interactive – enable/disable interactive features

load – name of extra JavaScript to load

optimize – drawing optimization (0: off,1: large histos, 2:

always)16.09.2015

JavaScript ROOT, ROOT Workshop 15

URL: open filehttps://root.cern.ch/js/dev/?file=../files/graph.root

16.09.2015

JavaScript ROOT, ROOT Workshop 16

URL: display canvas from file

https://root.cern.ch/js/dev/?file=../files/graph.root&item=exclusion;1&nobrowser

16.09.2015

JavaScript ROOT, ROOT Workshop 17

URL: display several itemshttps://root.cern.ch/js/dev/?file=../files/hsimple.root&layout=grid2x2&items=[hpx;1,hpxpy;1,hprof;1,StreamerInfo]&opts=[hist,colz,e1,any]

http://bit.ly/1EBp349

16.09.2015

JavaScript ROOT, ROOT Workshop 18

URL: display histograms from

different fileshttps://root.cern.ch/js/dev/?layout=grid1x3&path=../files/&files=[temp44.root,temp35.root,temp28.root]&items=[temp44.root/Histograms/TDC_C100/Ch3/TDC_C100_Ch3_RisingRef;1,temp35.root/_same_,temp28.root/_same_]&opts=[autozoom,autozoom,autozoom]

http://bit.ly/1L5cvyJ16.09.2015

JavaScript ROOT, ROOT Workshop 19

I/O improvements• Make logic closer to original ROOT I/O

o introduce JSROOT.TBuffer classo always use checksum to verify content

• Handle all custom streamers in central placeo all kind of ROOT collectionso TCanvas, TObjString, TStreamer... classeso make it easier to support user classes with custom streamers

• support ROOT4, ROOT5 and ROOT6 binary files

• support servers without byte range selectiono let read files from local file system

• I/O fully independent from graphicso vice versa is also true

16.09.2015

JavaScript ROOT, ROOT Workshop 20

I/O example

• Reading an object from a ROOT file in JavaScript:

var filename = “https://root.cern.ch/js/files/hsimple.root";new JSROOT.TFile(filename, function(file) { if (file) file.ReadObject("hpxpy;1", function(obj) { console.log(“object name “ + obj.fName); }}

16.09.2015

JavaScript ROOT, ROOT Workshop 21

I/O from different web servers

• JSROOT can access files from any web servero server should enable CORS headers

• CORS – Cross-Origin Resource Sharingo in simple case for Apache:

• Header set Access-Control-Allow-Origin "*"

• Copy JSROOT sources to server with fileso source can be found in ROOT distributiono or copied from https://github.com/linev/jsrooto no special settings of web server required

• Take only index.htm from JSROOT

• Use JSROOT and read files from local file systemo like file:///home/user/jsroot/index.htm?file=test.rooto very useful for debugging

16.09.2015

JavaScript ROOT, ROOT Workshop 22

Graphics improvements

• Full code reorganization• Introduce painter classes

o somehow similar to original ROOT

• Make several SVG layerso axis, main drawing, labelso easier to overlap many objects later

• Comfort zooming and stat box update• Context menu for additional functionality• Significant performance increase• Use of MathJax.js

16.09.2015

JavaScript ROOT, ROOT Workshop 23

Supported ROOT classes

• histograms:o TH1, TH2, TH3, TProfile

• graphs:o TGraph, TCutG, TGraphErrors, TGraphBentErrors

• superposition:o THStack, TMultiGraph

• functions:o TF1

• text:o TLatex, TMathText, TPaveText, TPaveStats, TPaveLabel

• containers:o TCanvas, TPad

16.09.2015

JavaScript ROOT, ROOT Workshop 24

Modularity

• Code divided on several moduleso core, 2d, 3d, io, gui

• Modules loaded when requiredo in simple case only three JSROOT scripts are loaded instead of 10

beforeo could be specified when loading central JSROOT script

<script type="text/javascript"src="https://root.cern.ch/js/3.7/scripts/JSRootCore.js?2d&io"></script>

• One could use require.js (optional)

• Minified version of scripts are provided

16.09.2015

JavaScript ROOT, ROOT Workshop 25

Use in other HTML pages

• Simplest solution - <iframe> tag

...

<iframe width="800" height="500" src="https://root.cern.ch/js/3.7/?file=../files/hsimple.root&item=hpx;1&nobrowser"></iframe>...

• Not the first choice when many objects should be shown on the same page

16.09.2015

JavaScript ROOT, ROOT Workshop 26

Use in other HTML pages

• Load required functionality:

<script type="text/javascript" src="https://root.cern.ch/js/3.7/scripts/JSRootCore.js?2d&io"></script>

• Provide place for drawing object:

<div id="drawing" style="width:800px; height:600px"></div>

• Retrieve object and call:

JSROOT.draw(“drawing”, obj, “colz”);16.09.2015

JavaScript ROOT, ROOT Workshop 27

Display object from ROOT file

var filename = “https://root.cern.ch/js/files/hsimple.root";new JSROOT.TFile(filename, function(file) { file.ReadObject("hpxpy;1", function(obj) { JSROOT.draw("drawing", obj, "colz"); }); });

• See https://root.cern.ch/js/dev/demo/example_file.htm

16.09.2015

JavaScript ROOT, ROOT Workshop 28

Display object from JSON file

• TBufferJSON can create JSON representationo no need for ROOT I/O in JavaScripto more details in the THttpServer presentation on Friday

JSROOT.NewHttpRequest("hpx.json", "object", function(obj) { JSROOT.draw("drawing", obj, "hist"); }).send();

• See https://root.cern.ch/js/dev/demo/example_json.htm

16.09.2015

JavaScript ROOT, ROOT Workshop 29

Update drawing from JSON

var cnt = 0;setInterval(updateGUI, 2000);...function updateGUI() { var addr = "root" + (cnt++ % 20) + ".json"; JSROOT.NewHttpRequest(addr, "object", function(histo) { JSROOT.redraw("drawing", obj, "hist"); }).send();}

• See https://root.cern.ch/js/dev/demo/demo.htm

16.09.2015

JavaScript ROOT, ROOT Workshop 30

Support of user classes

• One needs to implement and register a drawing function

• Load the script together with JSROOT• If necessary, provide a custom streamer for it

• Example with TEllipse classo JavaScript code (~70 lines)

• http://jsroot.gsi.de/dev/demo/ellipse.jso Canvas from ROOT reference

• http://jsroot.gsi.de/dev/index.htm?file=../files/ellipse.root&item=c1;1&load=demo/ellipse.js

• More examples in go4 frameworko see Joern talk on Friday

16.09.2015

TEllipse example

16.09.2015JavaScript ROOT, ROOT Workshop 31

JSROOT canvasROOT canvas

ellipse.jsdrawEllipse = function(divid, obj, opt) { var painter = new JSROOT.TObjectPainter(obj); painter.ellipse = obj; painter.SetDivId(divid); painter['Redraw'] = ellipsePainting; painter.Redraw(); // actual drawing

return painter.DrawingReady(); }

// register draw function to JSROOTJSROOT.addDrawFunc({ name: "TEllipse", func:drawEllipse });

16.09.2015JavaScript ROOT, ROOT Workshop 32

ellipse.jsellipsePainting = function() { var lineatt = JSROOT.Painter.createAttLine(this.ellipse); var fillatt = this.createAttFill(this.ellipse);

// (re)create svg:g container for ellipse drawing this.RecreateDrawG(true);

var x = this.PadToSvg("x", this.ellipse.fX1); var y = this.PadToSvg("y", this.ellipse.fY1); var rx = this.PadToSvg("x", this.ellipse.fX1 + this.ellipse.fR1) - x; var ry = y - this.PadToSvg("y", this.ellipse.fY1 + this.ellipse.fR2);

// only simple case shown, using svg:ellipse this.draw_g .append("svg:ellipse") .attr("cx", x).attr("cy", y) .attr("rx", rx).attr("ry", ry) .call(lineatt.func).call(fillatt.func) .append("svg:title").text('svg ellipse');

// more complex drawing with svg:path ...}

16.09.2015JavaScript ROOT, ROOT Workshop 33

JavaScript ROOT, ROOT Workshop 34

Useful links

• Developers repositoryo https://github.com/linev/jsroot

• Latest stable version in ROOTo $ROOTSYS/etc/http

• Latest versions with documentation and examples:o https://root.cern.ch/js/o http://jsroot.gsi.de/

16.09.2015

JavaScript ROOT, ROOT Workshop 35

Conclusion

JavaScript ROOT provides:

• Display for popular ROOT classes in web browsers

• Objects I/O from binary and JSON ROOT files

• Flexible API for usage in other projects

16.09.2015