| Sıra | DOSYA ADI | Format | Bağlantı |
|---|---|---|---|
| 01. | Classes Support Functions Examples | pptx | Sunumu İndir |
Transkript
JavaScript ROOThttps://root.cern.ch/js/Bertrand Bellenot (CERN)Sergey Linev (GSI)
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 browsers16.09.2015JavaScript ROOT, ROOT Workshop 2015 2
JSRootIO screenshots16.09.2015JavaScript ROOT, ROOT Workshop 2015 3
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 completely16.09.2015JavaScript ROOT, ROOT Workshop 2015 4
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 project16.09.2015JavaScript ROOT, ROOT Workshop 2015 5
Main featuresJavaScript ROOT provides:• Objects reading from binary and JSON ROOT files• Display for popular ROOT classes in web browsers• Flexible API for usage in other projects16.09.2015JavaScript ROOT, ROOT Workshop 2015 6
How to use JSROOT?• As before, for interactive browsing of ROOT fileso open JSROOT web page https://root.cern.ch/js/latest/o load file(s) from webo show content of the fileso display objects from the files16.09.2015JavaScript ROOT, ROOT Workshop 2015 7
User interface16.09.2015JavaScript ROOT, ROOT Workshop 2015 8layout selectionfile contentfile loading
Different layouts16.09.2015JavaScript ROOT, ROOT Workshop 2015 9grid collapsibletabs simple
Context menu with draw options16.09.2015JavaScript ROOT, ROOT Workshop 2015 10
Context menu for drawn object16.09.2015JavaScript ROOT, ROOT Workshop 2015 11
Informative tooltips16.09.2015JavaScript ROOT, ROOT Workshop 2015 12
Intuitive zooming16.09.2015JavaScript ROOT, ROOT Workshop 2015 13
How to share results?• Beforeo 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/latest/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.2015JavaScript ROOT, ROOT Workshop 2015 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 tabsnobrowser – do not display objects hierarchy mathjax – enable usage of MathJax.jsinteractive – 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 Workshop 2015 15
URL: open filehttps://root.cern.ch/js/latest/?file=../files/graph.root16.09.2015JavaScript ROOT, ROOT Workshop 2015 16
URL: display canvas from filehttps://root.cern.ch/js/latest/?file=../files/graph.root&item=exclusion;1&nobrowser16.09.2015JavaScript ROOT, ROOT Workshop 2015 17
URL: display several itemshttps://root.cern.ch/js/latest/?file=../files/hsimple.root&layout=grid2x2&items=[hpx;1,hpxpy;1,hprof;1,StreamerInfo]&opts=[hist,colz,e1,any]http://bit.ly/1EBp34916.09.2015JavaScript ROOT, ROOT Workshop 2015 18
URL: display histograms from different fileshttps://root.cern.ch/js/latest/?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.2015JavaScript ROOT, ROOT Workshop 2015 19
I/O improvements• Make logic closer to original ROOT I/Oo 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 files reading from other web servero CORS headers should be enabled on the servero one can read files from local file system• I/O fully independent from graphicso vice versa is also true16.09.2015JavaScript ROOT, ROOT Workshop 2015 20
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 objects• Comfort zooming and stat box update• Context menu for additional functionality• Significant performance increase• Use of MathJax.js for equation drawings16.09.2015JavaScript ROOT, ROOT Workshop 2015 23
Supported ROOT classes• histograms:o TH1, TH2, TH3, TProfile• graphs:o TGraph, TCutG, TGraphErrors, TGraphAssymErrors, TGraphBentErrors• superposition:o THStack, TMultiGraph• functions:o TF1• text:o TLatex, TMathText, TPaveText, TPaveStats, TPaveLabel• containers:o TCanvas, TPad16.09.2015JavaScript ROOT, ROOT Workshop 2015 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/latest/scripts/JSRootCore.js?2d&io\></script> • One could use require.js (optional) o example https://root.cern.ch/js/latest/demo/example_require.htm• Minified version of scripts are provided16.09.2015JavaScript ROOT, ROOT Workshop 2015 25
Use in other HTML pages• Simplest solution - <iframe> tag...<iframe width=\800\ height=\500\ src=\https://root.cern.ch/js/latest/?file=../files/hsimple.root&item=hpx;1&nobrowser\></iframe>...• Not the first choice when many objects should be shown on the same page16.09.2015JavaScript ROOT, ROOT Workshop 2015 26
Use in other HTML pages• Load required functionality:<script type=\text/javascript\ src=\https://root.cern.ch/js/latest/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.2015JavaScript ROOT, ROOT Workshop 2015 27
Display object from ROOT filevar 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/latest/demo/example_file.htm16.09.2015JavaScript ROOT, ROOT Workshop 2015 28
Display object from JSON file• TBufferJSON can create JSON representationo no need for binary ROOT I/O in JavaScripto more details in the THttpServer presentation on FridayJSROOT.NewHttpRequest(\hpx.json\, \object\, function(obj) { JSROOT.draw(\drawing\, obj, \hist\); }).send();• See https://root.cern.ch/js/latest/demo/example_json.htm16.09.2015JavaScript ROOT, ROOT Workshop 2015 29
Update drawing from JSONvar 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/latest/demo/demo.htm16.09.2015JavaScript ROOT, ROOT Workshop 2015 30
CERNBox integration16.09.2015JavaScript ROOT, ROOT Workshop 2015 31CERNBox provides a functionality analogous to DropboxTM or similar system, and is managed by CERN IT department (http://cernbox.web.cern.ch)It now integrates JSROOT, allowing to display ROOT files content
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 Friday16.09.2015JavaScript ROOT, ROOT Workshop 2015 32
TEllipse example16.09.2015JavaScript ROOT, ROOT Workshop 2015 33JSROOT canvasROOT canvas
Useful links• Developers repositoryo https://github.com/linev/jsroot• Latest stable version in ROOTo $ROOTSYS/etc/http• All versions with documentation and examples:o https://root.cern.ch/js/o http://jsroot.gsi.de/16.09.2015JavaScript ROOT, ROOT Workshop 2015 36
Classes Support Functions Examples
Yıl : 2020
Anahtar Kelimeler
Daha fazla görüntüle