Java Script ROOT Bertrand Bellenot CERN Sergey Linev

Java. Script ROOT Bertrand Bellenot (CERN) Sergey Linev (GSI)

JSRoot. IO project • Original project from Bertrand Bellenot o was presented at the ROOT workshop 2013 • ROOT I/O in Java. Script o reading ROOT objects using streamer infos • many exceptions due to custom streamers o source for the project name - JSRoot. IO • Graphic with d 3. js, three. js and j. Query. js • Navigating the ROOT files content and displaying objects in modern web browsers Java. Script ROOT, ROOT Workshop 16. 09. 2015 2

JSRoot. IO screenshots Java. Script ROOT, ROOT Workshop 16. 09. 2015 3

JSRoot. IO and http server • Could one use JSRoot. IO with online ROOT application? • In general yes, but many hidden problems and caveats: o difficulty with fixed HTML design o lack of objects update o flexible API was missing • There was an intermediate solution with many workarounds until a decision was taken to redesign JSRoot. IO completely Java. Script ROOT, ROOT Workshop 16. 09. 2015 4

Java. Script ROOT • Preserve old functionality, including look-and-feel • Redesign was focused on: o o o modularity clear API more interactive features more supported classes support of user classes • Project was renamed to JSROOT o binary ROOT files reading is an optional part of the project Java. Script ROOT, ROOT Workshop 16. 09. 2015 5

How to use JSROOT? • As before, for interactive browsing of ROOT files o o open JSROOT web page https: //root. cern. ch/js/dev/ load file(s) from web show content of the files display objects from the files Java. Script ROOT, ROOT Workshop 16. 09. 2015 6

User interface file loading layout selection file content Java. Script ROOT, ROOT Workshop 16. 09. 2015 7

Different layouts grid collapsible tabs simple Java. Script ROOT, ROOT Workshop 16. 09. 2015 8

Context menu with draw options Java. Script ROOT, ROOT Workshop 16. 09. 2015 9

Context menu for drawn object Java. Script ROOT, ROOT Workshop 16. 09. 2015 10

Informative tooltips Java. Script ROOT, ROOT Workshop 16. 09. 2015 11

Intuitive zooming Java. Script ROOT, ROOT Workshop 16. 09. 2015 12

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 JSROOT o o copy your ROOT file on web server and send link to the file open main page https: //root. cern. ch/js/dev/ enter file name (like https: //root. cern. ch/js/files/hsimple. root) find and draw histogram or canvas • Same actions repeat many times again o interactive not always mean better o are there alternatives? • Solution - use JSROOT UI with URL parameters! Java. Script ROOT, ROOT Workshop 16. 09. 2015 13

URL parameters in JSROOT file(s) json item(s) opt(s) layout nobrowser mathjax interactive load optimize – name of file(s) to open – name of json file to open – item name(s) to display – drawing option for the item(s) – layout for drawings like grid or tabs – do not display objects hierarchy – enable usage of Math. Jax. js – enable/disable interactive features – name of extra Java. Script to load – drawing optimization (0: off, 1: large histos, 2: always) Java. Script ROOT, ROOT Workshop 16. 09. 2015 14

URL: open file https: //root. cern. ch/js/dev/? file=. . /files/graph. root Java. Script ROOT, ROOT Workshop 16. 09. 2015 15

URL: display canvas from file https: //root. cern. ch/js/dev/? file=. . /files/graph. root&item=exclusion; 1&nobrowser Java. Script ROOT, ROOT Workshop 16. 09. 2015 16

URL: display several items https: //root. cern. ch/js/dev/? file=. . /files/hsimple. root&layout=grid 2 x 2& items=[hpx; 1, hpxpy; 1, hprof; 1, Streamer. Info]&opts=[hist, colz, e 1, any] http: //bit. ly/1 EBp 349 Java. Script ROOT, ROOT Workshop 16. 09. 2015 17

URL: display histograms from different files https: //root. cern. ch/js/dev/? layout=grid 1 x 3&path=. . /files/&files=[temp 44. root, temp 35. root, temp 28. root ]&items=[temp 44. root/Histograms/TDC_C 100/Ch 3/TDC_C 100_Ch 3_Rising. Ref; 1, temp 35. root/_same _, temp 28. root/_same_]&opts=[autozoom, autozoom] http: //bit. ly/1 L 5 cvy. J Java. Script ROOT, ROOT Workshop 16. 09. 2015 18

I/O improvements • Make logic closer to original ROOT I/O o introduce JSROOT. TBuffer class o always use checksum to verify content • Handle all custom streamers in central place o all kind of ROOT collections o TCanvas, TObj. String, TStreamer. . . classes o make it easier to support user classes with custom streamers • support ROOT 4, ROOT 5 and ROOT 6 binary files • support servers without byte range selection o let read files from local file system • I/O fully independent from graphics o vice versa is also true Java. Script ROOT, ROOT Workshop 16. 09. 2015 19

I/O example • Reading an object from a ROOT file in Java. Script: var filename = “https: //root. cern. ch/js/files/hsimple. root"; new JSROOT. TFile(filename, function(file) { if (file) file. Read. Object("hpxpy; 1", function(obj) { console. log(“object name “ + obj. f. Name); } } Java. Script ROOT, ROOT Workshop 16. 09. 2015 20

I/O from different web servers • JSROOT can access files from any web server o server should enable CORS headers • CORS – Cross-Origin Resource Sharing o in simple case for Apache: • Header set Access-Control-Allow-Origin "*" • Copy JSROOT sources to server with files o source can be found in ROOT distribution o or copied from https: //github. com/linev/jsroot o no special settings of web server required • Take only index. htm from JSROOT • Use JSROOT and read files from local file system o like file: ///home/user/jsroot/index. htm? file=test. root o very useful for debugging Java. Script ROOT, ROOT Workshop 16. 09. 2015 21

Graphics improvements • Full code reorganization • Introduce painter classes o somehow similar to original ROOT • Make several SVG layers o axis, main drawing, labels o easier to overlap many objects later • • Comfort zooming and stat box update Context menu for additional functionality Significant performance increase Use of Math. Jax. js Java. Script ROOT, ROOT Workshop 16. 09. 2015 22

Supported ROOT classes • histograms: o TH 1, TH 2, TH 3, TProfile • graphs: o TGraph, TCut. G, TGraph. Errors, TGraph. Bent. Errors • superposition: o THStack, TMulti. Graph • functions: o TF 1 • text: o TLatex, TMath. Text, TPave. Stats, TPave. Label • containers: o TCanvas, TPad Java. Script ROOT, ROOT Workshop 16. 09. 2015 23

Modularity • Code divided on several modules o core, 2 d, 3 d, io, gui • Modules loaded when required o in simple case only three JSROOT scripts are loaded instead of 10 before o could be specified when loading central JSROOT script <script type="text/javascript"src="https: //root. cern. ch/js/3. 7/scripts/JSRoot. Core. js? 2 d&io"></script> • One could use require. js (optional) • Minified version of scripts are provided Java. Script ROOT, ROOT Workshop 16. 09. 2015 24

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 Java. Script ROOT, ROOT Workshop 16. 09. 2015 25

Use in other HTML pages • Load required functionality: <script type="text/javascript" src="https: //root. cern. ch/js/3. 7/scripts/JSRoot. Core. js? 2 d&io"></script> • Provide place for drawing object: <div id="drawing" style="width: 800 px; height: 600 px"></div> • Retrieve object and call: JSROOT. draw(“drawing”, obj, “colz”); Java. Script ROOT, ROOT Workshop 16. 09. 2015 26

Display object from ROOT file var filename = “https: //root. cern. ch/js/files/hsimple. root"; new JSROOT. TFile(filename, function(file) { file. Read. Object("hpxpy; 1", function(obj) { JSROOT. draw("drawing", obj, "colz"); }); • See https: //root. cern. ch/js/dev/demo/example_file. htm Java. Script ROOT, ROOT Workshop 16. 09. 2015 27

Display object from JSON file • TBuffer. JSON can create JSON representation o no need for ROOT I/O in Java. Script o more details in the THttp. Server presentation on Friday JSROOT. New. Http. Request("hpx. json", "object", function(obj) { JSROOT. draw("drawing", obj, "hist"); }). send(); • See https: //root. cern. ch/js/dev/demo/example_json. htm Java. Script ROOT, ROOT Workshop 16. 09. 2015 28

Update drawing from JSON var cnt = 0; set. Interval(update. GUI, 2000); . . . function update. GUI() { var addr = "root" + (cnt++ % 20) + ". json"; JSROOT. New. Http. Request(addr, "object", function(histo) { JSROOT. redraw("drawing", obj, "hist"); }). send(); } • See https: //root. cern. ch/js/dev/demo. htm Java. Script ROOT, ROOT Workshop 16. 09. 2015 29

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 class o Java. Script code (~70 lines) • http: //jsroot. gsi. de/dev/demo/ellipse. js o Canvas from ROOT reference • http: //jsroot. gsi. de/dev/index. htm? file=. . /files/ellipse. root &item=c 1; 1&load=demo/ellipse. js • More examples in go 4 framework o see Joern talk on Friday Java. Script ROOT, ROOT Workshop 16. 09. 2015 30

TEllipse example ROOT canvas Java. Script ROOT, ROOT Workshop JSROOT canvas 16. 09. 2015 31

ellipse. js draw. Ellipse = function(divid, obj, opt) { var painter = new JSROOT. TObject. Painter(obj); painter. ellipse = obj; painter. Set. Div. Id(divid); painter['Redraw'] = ellipse. Painting; painter. Redraw(); // actual drawing } return painter. Drawing. Ready(); // register draw function to JSROOT. add. Draw. Func({ name: "TEllipse", func: draw. Ellipse }); Java. Script ROOT, ROOT Workshop 16. 09. 2015 32

ellipse. js ellipse. Painting = function() { var lineatt = JSROOT. Painter. create. Att. Line(this. ellipse ); var fillatt = this. create. Att. Fill(this. ellipse); // (re)create svg: g container for ellipse drawing this. Recreate. Draw. G(true); var x = this. Pad. To. Svg("x", this. ellipse. f. X 1); var y = this. Pad. To. Svg("y", this. ellipse. f. Y 1); var rx = this. Pad. To. Svg("x", this. ellipse. f. X 1 + this. ellipse. f. R 1) - x ; var ry = y - this. Pad. To. Svg("y", this. ellipse. f. Y 1 + this. ellipse. f. R 2); // 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. . . Java. Script ROOT, ROOT Workshop 16. 09. 2015 33

Useful links • Developers repository o https: //github. com/linev/jsroot • Latest stable version in ROOT o $ROOTSYS/etc/http • Latest versions with documentation and examples: o https: //root. cern. ch/js/ o http: //jsroot. gsi. de/ Java. Script ROOT, ROOT Workshop 16. 09. 2015 34

Conclusion Java. Script 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 Java. Script ROOT, ROOT Workshop 16. 09. 2015 35