Reading ROOT files in (almost) any browser

 Use XMLHttpRequest JavaScript class to perform the HTTP HEAD and GET requests  This class is highly browser dependent:  On IE, the binary data is in its responseBody data member (VBScript format), and has to be converted into a JavaScript string  On other browsers, the data can be in response, mozResponse, mozResponseArrayBuffer, or responseText...  Thanks to Ioannis Charalampidis, who kindly provided a working cross-browser solution

 Using HTTP byte range (available in HTTP/1.1) to download a buffer (and not more) only when user want to display an object (e.g. TH1F)  Apparently, some browsers don’t support this feature yet (e.g. Opera), but major ones do (IE, Firefox, Safari, Chrome)  This saves (potentially large) data transfer and memory usage

 JavaScript has very little support for raw binary data  Avoid to use the “available soon” ArrayBuffers: ped_arrays/ArrayBuffer ped_arrays/ArrayBuffer  So the binary data is stored in a JavaScript string. Accessing a single byte is easy: byte = string.charCodeAt(index);

 The keys are not compressed  They contain basic information on the object they describe  First step was quite easy, starting from already working code written by Axel  Formatting the keys has been done with a JavaScript tree menu (

This is a screenshot of the HTML display showing the file header and the list of keys contained in hsimple.root The hpx key is open, showing the information describing the TH1F object in the file

 Finding a working implementation of zlib in JavaScript was not easy, but finally found a working version of zlib’s inflate function (didn’t check for lzma yet)  Then R__unzip and R__unzip_header have been implemented in JavaScript, using rawinflate.js for the decompression

Screenshot of an inflated buffer as represented in the html test page (here the StreamerInfo). One can clearly see the strings (e.g. Class name and description)

 A TStreamerInfo object describes a persistent version of a class.TStreamerInfo  A ROOT file contains the list of TStreamerInfo objects for all the class versions written to this file.ROOTTStreamerInfo  A TStreamerInfo is a list of TStreamerElement objects (one per data member or base class).TStreamerInfoTStreamerElement

 Most of the development has been achieved by running in parallel the JavaScript debugger and the Visual Studio debugger  After very valuable help from Philippe, the streamer info finally released (almost) all its secrets and is now partially displayed in the test web page

Screenshot of a decoded streamer info structure, as represented in the html test page (only relevant information is displayed)

 For the time being, the object’s streamers are hard-coded and will have to be updated with class version changes  Actually (partially) supported classes are TH1, TH2, TProfile (not displayed yet), and TGraph  A JavaScript charting library (HighCharts) is used to display the histograms and graphs (

Displaying a TH1F with its attributes (e.g. fill color) from fillrandom.root

Displaying a TH2F (scatter plot only) from hsimple.root

Displaying a simple TGraph

 Offering a very simple API to the user:  Could be internally complex (but powerful): f = new JSROOTIO.RootFile(url); histo = f.ReadHistogram(histo_name); if (typeof(histo) != 'undefined') displayHistogram(histo); clRef = streamerInfo.ReadClass(str, o); histo = eval('new JSROOTIO.' + clRef['name'] + '()'); if (typeof histo != 'undefined' && typeof histo.Streamer == 'function') histo.Streamer(str, o);

 Apparently Opera doesn't support byte range HTTP requests, but we can live with(out) it  Safari has several issues (bug report should be filled soon)  Doesn’t work on Android (not yet)...

 Make it working on Android  Directory handling inside files  Implement dynamic streamers (automatically generated from the streamer info)  Support as many browsers as possible  Graphics side: Implement THistPainter?