1. JavaScript ROOT Bertrand Bellenot (CERN) Sergey Linev (GSI)

2. JSRootIO project Original project from Bertrand Bellenot o was presented at the ROOT workshop 2013 ROOT I/O in JavaScript o reading ROOT objects using streamer infos many exceptions due to custom streamers o 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.2015JavaScript ROOT, ROOT Workshop2

3. JSRootIO screenshots 16.09.2015JavaScript ROOT, ROOT Workshop3

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 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 JSRootIO completely 16.09.2015JavaScript ROOT, ROOT Workshop4

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

6. How to use JSROOT? As before, for interactive browsing of ROOT files o open JSROOT web page https://root.cern.ch/js/dev/https://root.cern.ch/js/dev/ o load file(s) from web o show content of the files o display objects from the files 16.09.2015JavaScript ROOT, ROOT Workshop6

7. User interface 16.09.2015JavaScript ROOT, ROOT Workshop7 layout selection file content file loading

8. Different layouts 16.09.2015JavaScript ROOT, ROOT Workshop8 grid collapsible tabssimple

9. Context menu with draw options 16.09.2015JavaScript ROOT, ROOT Workshop9

10. Context menu for drawn object 16.09.2015JavaScript ROOT, ROOT Workshop10

11. Informative tooltips 16.09.2015JavaScript ROOT, ROOT Workshop11

12. Intuitive zooming 16.09.2015JavaScript ROOT, ROOT Workshop12

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 JSROOT o copy your ROOT file on web server and send link to the file o open main page https://root.cern.ch/js/dev/https://root.cern.ch/js/dev/ o enter file name (like https://root.cern.ch/js/files/hsimple.root)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 better o are there alternatives? Solution - use JSROOT UI with URL parameters! 16.09.2015JavaScript ROOT, ROOT Workshop13

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.2015JavaScript ROOT, ROOT Workshop14

15. URL: open file https://root.cern.ch/js/dev/? file =../files/graph.root 16.09.2015JavaScript ROOT, ROOT Workshop15

16. URL: display canvas from file https://root.cern.ch/js/dev/? file =../files/graph.root& item =exclusion;1& nobrowser 16.09.2015JavaScript ROOT, ROOT Workshop16

17. URL: display several items https://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.2015JavaScript ROOT, ROOT Workshop17

18. URL: display histograms from different files https://root.cern.ch/js/dev/? layout =grid1x3& path =../files/& files =[temp44.root,temp35.root,te mp28.root]& items =[temp44.root/Histograms/TDC_C100/Ch3/TDC_C100_Ch3_RisingRef;1,tem p35.root/_same_,temp28.root/_same_]& opts =[autozoom,autozoom,autozoom] http://bit.ly/1L5cvyJ 16.09.2015JavaScript ROOT, ROOT Workshop18

19. 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, TObjString, TStreamer... classes o make it easier to support user classes with custom streamers support ROOT4, ROOT5 and ROOT6 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 16.09.2015JavaScript ROOT, ROOT Workshop19

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.2015JavaScript ROOT, ROOT Workshop20

21. 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/jsroothttps://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.rootfile:///home/user/jsroot/index.htm?file=test.root o very useful for debugging 16.09.2015JavaScript ROOT, ROOT Workshop21

22. 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 MathJax.js 16.09.2015JavaScript ROOT, ROOT Workshop22

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.2015JavaScript ROOT, ROOT Workshop23

24. Modularity Code divided on several modules o core, 2d, 3d, 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 One could use require.js (optional) Minified version of scripts are provided 16.09.2015JavaScript ROOT, ROOT Workshop24

25. Use in other HTML pages Simplest solution - tag...... Not the first choice when many objects should be shown on the same page 16.09.2015JavaScript ROOT, ROOT Workshop25

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"> Provide place for drawing object: Retrieve object and call: JSROOT.draw(“drawing”, obj, “colz”); 16.09.2015JavaScript ROOT, ROOT Workshop26

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 https://root.cern.ch/js/dev/demo/example_file.htm 16.09.2015JavaScript ROOT, ROOT Workshop27

28. Display object from JSON file TBufferJSON can create JSON representation o no need for ROOT I/O in JavaScript o 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 https://root.cern.ch/js/dev/demo/example_json.htm 16.09.2015JavaScript ROOT, ROOT Workshop28

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.htmhttps://root.cern.ch/js/dev/demo/demo.htm 16.09.2015JavaScript ROOT, ROOT Workshop29

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 class o JavaScript 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 =c1;1& load =demo/ellipse.js http://jsroot.gsi.de/dev/index.htm? file =../files/ellipse.root & item =c1;1& load =demo/ellipse.js More examples in go4 framework o see Joern talk on Friday 16.09.2015JavaScript ROOT, ROOT Workshop30

31. TEllipse example 16.09.2015JavaScript ROOT, ROOT Workshop31 JSROOT canvas ROOT canvas

32. ellipse.js drawEllipse = 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 JSROOT JSROOT.addDrawFunc({ name: "TEllipse", func:drawEllipse }); 16.09.2015JavaScript ROOT, ROOT Workshop32

33. ellipse.js ellipsePainting = 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 Workshop33

34. Useful links Developers repository o https://github.com/linev/jsroot 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/ https://root.cern.ch/js/ o http://jsroot.gsi.de/ http://jsroot.gsi.de/ 16.09.2015JavaScript ROOT, ROOT Workshop34

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.2015JavaScript ROOT, ROOT Workshop35