Merge branch 'dev'

Author: linev

changes.md

@@ -1,5 +1,31 @@
 # JSROOT changelog
 
+## Changes in 5.1.0
+1. New 'float' browser kind overlays with objects drawing
+2. Browser can be enabled after drawing with 'nobrowser' mode
+3. One can hide browser or switch browser kind at any time
+4. New 'horizontal' and 'vertical' layouts for object display.
+   One could configure several frames, each divided on sub-frames.
+   Like display=horiz231 will create three horizontal frames, 
+   divided on 2,3 and 1 sub-frames.  
+5. One could enable status line where current tooltip info will be shown  
+6. Improve enlarge functionality - now works with all layouts
+7. Do not display all canvas tool buttons by default - provide toggle button instead 
+8. Let move TAxis title, its position now similar to ROOT graphics
+9. Support 'col0' option for TH2Poly class to suppress empty bins
+10. Implement for TH3 'box2', 'box3', 'glbox2', 'glcol' draw options
+11. Support more superscript/subscript letters in normal text output
+12. Correctly handle unzoom with logx/logy scales
+13. Let disable stamp parameter in file url with "-" sign at the end of file name
+14. Let use quotes in the URL parameters to protect complex arguments with special symbols
+15. Introduce direct streamers - like TBasket or TRef
+    Benefit - one can add custom streamers of such kind or reuse existing
+16. Handle TMatrixTSym classes in I/O  
+17. Correctly count TH3 statistic in TTree::Draw
+18. Recognize bower installation when "bower_components/jsroot/scripts" string
+    appears in the script path (#120)  
+
+
 ## Changes in 5.0.3
 1. Fix - prevent exception when discover HTML element position (#121)
 2. Fix - prevent I/O failure when server automatically gzip response (#119)
@@ -41,19 +67,19 @@
     - special handling of TBits
     - arbitrary math function from JavaScript Math class, some TMath:: function from ROOT
     - if branch is object, one could use methods "TMath::Abs(lep1_p4.X()+lep1_p4.Y())"
-    - interactive player to configure and execute draw expression  
+    - interactive player to configure and execute draw expression
 3. Full support of Float16_t and Double32_t types in I/O
-4. Drawing of RooPlot objects, I/O support for RooFit classes   
+4. Drawing of RooPlot objects, I/O support for RooFit classes
 5. Many improvements in object inspector
     - support of large lists; only first part is shown
     - support of large arrays; values group in decades
     - allow to call draw function for sub-elements in inspector
 6. Canvas or selected sub-pad can be enlarged when double-clicked outside frame (#116)
    Complete drawing will be expanded to the visible space.
-   Not available for flex, tabs and collapsible layouts.  
+   Not available for flex, tabs and collapsible layouts.
 7. Support reading of local ROOT files with HTML5 FileReader.
    Files can be selected only with interactive dialog.
-8. Combine "Ctrl" and "Shift" keys with mouse click on the items: 
+8. Combine "Ctrl" and "Shift" keys with mouse click on the items:
      - with Shift key typically object inspector will be activated
      - with Ctrl key alternative draw options will be used (like colz for TH2)
 9. Update libraries
@@ -77,19 +103,19 @@
 1. Support new JSON format, produced with newest TBufferJSON
    - object references stored as {"$ref":12}
    - pair objects for std::map marked with "$pair" : "pair<type1,type2>" data member
-   - old JSON format will be recognized automatically and supported as well 
+   - old JSON format will be recognized automatically and supported as well
 2. Fix - better selection of Y range for log scale
 3. Provide JSROOT.parse_multi function to correctly parse response of multi.json request,
-   support it in the JSROOT.NewHttpRequest method as well.  
+   support it in the JSROOT.NewHttpRequest method as well.
 4. Fix - correctly calculate integral for TH1
-5. Partially support new TFormula with complex C code inside 
+5. Partially support new TFormula with complex C code inside
 
 
 ## Changes in 4.8.0
 1. Many improvements in the I/O part 
    - support most of STL containers
    - support TMap and TClonesArray containers
-   - all kind of multidimensional arrays 
+   - all kind of multidimensional arrays
    - correct treatment of foreign classes
    - supports different versions of class in the same file
    - support members like ClassName* fField; //[fCnt]

demo/tooltip.htm

@@ -7,7 +7,7 @@
 
    <title>Use of tooltip callback in JSROOT</title>
 
-   <script src="../scripts/JSRootCore.js?2d&onload=startGUI" type="text/javascript"></script>
+   <script src="../scripts/JSRootCore.js" type="text/javascript"></script>
 
    <script type='text/javascript'>
 
@@ -34,34 +34,33 @@
          histo.fName = "generated";
          histo.fTitle = "Drawing " + cnt++;
 
-         var painter = JSROOT.redraw('object_draw', histo, "colz");
-
-         if (cnt==1) painter.ConfigureUserTooltipCallback(function(info) {
-            if (info==null) { 
-               // one could clear previous draw
-               // JSROOT.cleanup("tooltip_draw");
-               d3.select("#user_tooltip").html("No tooltip");
-               return;
-            } 
-            // set tooltip info
-            d3.select("#user_tooltip").html("object " + info.name + "  bin " + info.bin + "  cont " + info.cont);
-
-            var h1 = JSROOT.CreateTH1(20);
-            // copy content from TH2 to TH1
-            for (var n=0;n<20;n++)
-               h1.setBinContent(n+1, info.obj.getBinContent(n+1, info.biny));
-            h1.fName = "tooltip";
-            h1.fTitle = "Projection of biny=" + info.biny;
-            JSROOT.redraw("tooltip_draw", h1);
-     });
-
-      }
-
-      function startGUI() {
-         updateGUI();
-         setInterval(updateGUI, 3000); 
+         JSROOT.redraw('object_draw', histo, "colz", function(painter) {
+            // in callback call painter object is returned
+            if ((cnt!==1) || !painter) return;
+
+            painter.ConfigureUserTooltipCallback(function(info) {
+               
+               if (info==null)  
+                  return d3.select("#user_tooltip").html("No tooltip");
+                  
+               // set tooltip info
+               d3.select("#user_tooltip").html("object " + info.name + "  bin " + info.bin + "  cont " + info.cont);
+
+               var h1 = JSROOT.CreateTH1(20);
+               // copy content from TH2 to TH1
+               for (var n=0;n<20;n++)
+                  h1.setBinContent(n+1, info.obj.getBinContent(n+1, info.biny));
+               h1.fName = "tooltip";
+               h1.fTitle = "Projection of biny=" + info.biny;
+               JSROOT.redraw("tooltip_draw", h1);
+            });
+         });
       }
 
+      updateGUI();
+      
+      // update drawing every 3 sec
+      setInterval(updateGUI, 3000); 
 
    </script>
 

demo/update_draw.htm

@@ -41,11 +41,11 @@
 
             // redraw histogram at specified frame
             JSROOT.redraw(frame, histo, drawopt);
-          });
+         });
 
-          req.send(null);
+         req.send(null);
 
-          req.cnt = cnt++; // remember counter to find correct frame later
+         req.cnt = cnt++; // remember counter to find correct frame later
       }
 
       function startGUI() {

docs/JSROOT.md

@@ -7,12 +7,15 @@ It is the successor of the JSRootIO project.
 
 ## Installing JSROOT
 
-In most practical cases it is not necessary to install JSROOT on the local computer - it can be used directly from project web sites <https://root.cern/js/> and <http://jsroot.gsi.de/>. Developers repository for JSROOT code situated on <https://github.com/linev/jsroot/>.
+In most practical cases it is not necessary to install JSROOT - it can be used directly from project web sites <https://root.cern/js/> and <http://jsroot.gsi.de/>. 
 
-In rare cases one need to install JSROOT on separate web server - for such case one could use provided packages from <https://github.com/linev/jsroot/releases>. 
-
-One could use JSROOT directly from local file system. If source code was unpacked in `/home/user/jsroot/` subfolder, one could just open it in browser with <file:///home/user/jsroot/index.htm> address.
+When required, there are following alternatives to install JSROOT on other web servers:
 
+   - download and unpack [provided](https://github.com/linev/jsroot/releases) packages (recommended)
+   - use [bower](https://bower.io/) package manager and invoke `bower install jsroot`  
+   - clone master branch from [repository](https://github.com/linev/jsroot/)
+ 
+One could use JSROOT directly from local file system. If source code was unpacked/checked-out in `/home/user/jsroot/` subfolder, one could just open it in browser with <file:///home/user/jsroot/index.htm> address.
 
 
 ## Drawing objects in JSROOT
@@ -29,30 +32,47 @@ To automate files loading and objects drawing, one can provide number of URL par
 - opt - drawing option for the item
 - items - array of items name 
 - opts - array of drawing options for the items 
-- layout - can be 'simple', 'flex', 'collapsible', 'tabs' or 'gridNxM' where N and M integer values
-- nobrowser - do not display file browser
+- layout - can be 'simple', 'flex', 'collapsible', 'tabs', 'gridNxM', 'horizNMK', 'vertNMK'
+- browser - layout of the browser 'float', 'fix', 'no', 'off'  
+- nobrowser - do not display file browser (same as browser=no)
+- float - display floating browser (same as browser=float)
+- status - configure status line 'no' (default), 'off' (completely disable), 'size' 
 - load - name of extra JavaScript to load
 - optimize - drawing optimization 0:off, 1:only large histograms (default), 2:always
 - paltte - id of default color palette, 51..121 - new ROOT6 palette  (default 57)
 - interactive - enable/disable interactive functions 0-disable all, 1-enable all
 - noselect - hide file-selection part in the browser (only when file name is specified)
 - mathjax - use MathJax for latex output
-- style - name of TStyle object to define global JSROOT style 
+- style - name of TStyle object to define global JSROOT style
+- toolbar - show canvas tool buttons 'off', 'on' and 'popup'
 
 For instance:
 
 - <https://root.cern/js/latest/?file=../files/hsimple.root&item=hpx;1>
 - <https://root.cern/js/latest/?file=../files/hsimple.root&nobrowser&item=hpxpy;1&opt=colz>
 - <https://root.cern/js/latest/?file=../files/hsimple.root&noselect&layout=grid2x2&item=hprof;1>
 
+Following layouts are supported:
+
+  - simple - available space used for single object (default)
+  - [collapsible](https://root.cern/js/latest/api.htm#url_syntax_collapsible_layout) - fix-sized canvas group behind each other and can be collapsed individually
+  - [flex](https://root.cern/js/latest/api.htm#url_syntax_flexible_layout) - creates as many frames as necessary, each can be individually moved/enlarged
+  - [tabs](https://root.cern/js/latest/api.htm#url_syntax_tabs_layout) - tabs widget 
+  - [gridNxM](https://root.cern/js/latest/api.htm#url_syntax_grid_layout) - fixed-size grid with NxM frames
+  - gridiNxM - grid with NxM frames with possibility to adjust frames sizes 
+  - vertN - N frames sorted in vertical direction (like gridi1xN)
+  - horizN - N frames sorted in horizontal direction (like gridiNx1)
+  - [vert121](https://root.cern//js/latest/api.htm#url_syntax_veritcal_layout) - 3 frames sorted in vertical direction, second frame divided on two sub-frames
+  - [horiz32_12](https://root.cern//js/latest/api.htm#url_syntax_horizontal_layout) - 2 horizontal frames with 3 and 2 subframes, and 1/3 and 2/3 as relative size
+
 When specifying `files`, `items` or `opts` parameters, array of strings could be provided  like `files=['file1.root','file2.root']`.  One could skip quotes when specifying elements names `items=[file1.root/hpx,file2.root/hpy]` or `opts=['',colz]`. 
 
-Many examples of URL string usage can be found on [JSROOT examples](https://root.cern/js/latest/api.htm) page.   
+Many examples of URL string usage can be found on [JSROOT examples](https://root.cern/js/latest/api.htm) page.
 
 One can very easy integrate JSROOT graphic into arbitrary HTML pages using a __iframe__ tag:
 
     <iframe width="700" height="400" 
-            src="https://root.cern/js/latest/index.htm?nobrowser&file=../files/hsimple.root&item=hpxpy;1&opt=colz">
+            src="https://root.cern/js/latest/?nobrowser&file=../files/hsimple.root&item=hpxpy&opt=colz">
     </iframe>
 
 
@@ -238,6 +258,7 @@ Following parameters are supported:
   - "maxrange" - maximal number of ranges in single HTTP request 
   - "accum" - number of accumulated values before creating histogram
   - "htype" - last letter in histogram type like "I", "F", "D", "S", "L", "C"
+  - "hbins" - number of bins on each histogram axis 
   - "drawopt" - drawing option for produced histogram
 
 Example - [opt=event.fTracks[].fTriggerBits;entries:1000;first:200;maxrange:25](https://root.cern/js/latest/?file=https://root.cern/files/event/event_0.root&item=EventTree&opt=event.fTracks[].fTriggerBits;entries:1000;first:200;maxrange:25)
@@ -352,25 +373,23 @@ To enable CORS on Apache web server, hosting ROOT files, one should add followin
 
 More details about configuring of CORS headers can be found [here](https://developer.mozilla.org/en/http_access_control).
 
-Other solution - copy all JSROOT files to the location where the data files are located.
-In such case one could use the server with its default settings.
+Alternative - enable CORS requests in the browser. It can be easily done with [CORS Everywhere plugin](https://addons.mozilla.org/de/firefox/addon/cors-everywhere/) for the Firefox browser or [Allow CORS plugin](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) for the Chrome browser.
+
 
-A simple case is to copy only the top index.htm file on the server and specify the full path to JSRootCore.js script like:
+Next solution - install JSROOT on the server hosting ROOT files. In such configuration JSROOT does not issue CORS requests, therefore server and browsers can be used with their default settings. A simplified variant of such solution - copy only the top index.htm file from JSROOT package and specify the full path to JSRootCore.js script like:
 
     ...
     <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js?gui"></script>
     ...
 
-In such case one can also specify a custom files list:
+In the `<div>` element with "simpleGUI" id one can specify many custom parameters, which are allowed in the URL string:
 
     ...
-     <div id="simpleGUI" path="files/subdir" files="userfile1.root;subdir/usefile2.root">
+     <div id="simpleGUI" path="files/path" files="userfile1.root;subdir/usefile2.root">
        loading scripts ...
      </div>
     ...
 
-In such `<div>` element one could put most parameters which are allowed in the URL string (like item, file, opt and so on)
-
 
 ## Reading local ROOT files 
 
@@ -502,7 +521,14 @@ For instance, to load functionality with normal 2D graphics and binary ROOT file
 
     <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.min.js?2d&io"></script>
 
-One could use minified version of all scripts (as shown in example) - this reduce page loading time significantly. 
+One could use minified version of all scripts (as shown in example) - this reduce page loading time significantly.
+
+When JSROOT installed with bower package manager, one could re-use basic libraries like `d3.js` or `three.js` from bower itself. For that one should add `bower` into URL:   
+
+    <script type="text/javascript" src="vendor/jsroot/scripts/JSRootCore.js?bower&2d&io"></script>
+
+Bower support will be automatically enabled when script path conatin "bower_components/jsroot/" string.
+ 
 
 
 ### Use of JSON

docs/api.htm

@@ -137,12 +137,16 @@ <h1 id="version"><a href=".." style="color:green">JSROOT</a></h1>
          var examples = {
             'URL syntax': [
               { name: "Open file", url: "?file=" + filepath + "hsimple.root", title: "Open ROOT file with the JSROOT" },
-              { name: "Display item", url: "?file=" + filepath + "hsimple.root&item=hpxpy;1&opt=colz", title: "Open ROOT file and display item"  },
-              { name: "Hide browser", url: "?nobrowser&file=" + filepath + "hsimple.root&item=hprof;1", title: "Do not show file hierarchy - only display item"  },
+              { name: "Display item", url: "?file=" + filepath + "hsimple.root&item=hpxpy;1&opt=colz", title: "Open ROOT file and display item" },
+              { name: "Enable status", url: "?status&file=" + filepath + "hsimple.root&item=hpxpy;1&opt=colz", title: "Show tooltip information in special status line" },
+              { name: "Hide browser", url: "?nobrowser&file=" + filepath + "hsimple.root&item=hprof;1", title: "Hide browser - only display items, browser can be activated later" },
+              { name: "Float browser", url: "?float&file=" + filepath + "hsimple.root&item=ntuple;1&opt=px:pz", title: "Display floating browser, which overlays objects drawings" },
               { name: "Flexible layout", url: "?file=" + filepath + "hsimple.root&layout=flex&items=[hpx;1,hpxpy;1,hprof;1]&opts=[hist,colz,e1]", title: "Display several items with flexible layout" },
-              { name: "Grid layout", url: "?path=" + filepath + "&layout=grid2x2&files=[hsimple.root,glbox.root]&items=[hsimple.root/hpx;1,hsimple.root/hpxpy;1,hsimple.root/hprof;1,glbox.root/h31;1]&opt=[hist,lego,e1,box1]", title: "Example of grid layout with 2D and 3D drawings" },
+              { name: "Grid layout", url: "?path=" + filepath + "&layout=grid2x2&files=[hsimple.root,glbox.root]&items=[hsimple.root/hpx;1,hsimple.root/hpxpy;1,hsimple.root/hprof;1,glbox.root/h31;1]&opts=[hist,lego20,e1,box2]", title: "Example of grid layout with 2D and 3D drawings" },
               { name: "Tabs layout", url: "?file=" + filepath + "hsimple.root&layout=tabs&items=[hpx;1,hpxpy;1,hprof;1]&opts=[hist,colz,e1]", title: "Example of tabs layout" },
               { name: "Collapsible layout", url: "?file=" + filepath + "hsimple.root&layout=collapsible&items=[hpx;1,hpxpy;1,hprof;1]&opts=[hist,colz,e1]", title: "Example of collapsible layout (JSROOT roots)" },
+              { name: "Veritcal layout", url: "?file=" + filepath + "hsimple.root&layout=vert121&items=[hpx;1,hpxpy;1,ntuple;1,hprof;1]&opts=[hist,colz,px:pz,e1]", title: "Display several items in vertical layout" },
+              { name: "Horizontal layout", url: "?file=" + filepath + "hsimple.root&layout=horiz32_12&items=[ntuple,ntuple,ntuple,hpx,hpxpy]&opts=[px:py,px:pz,py:pz,hist,lego2]", title: "Display several items in horizontal layout, adjust size ratio" },
               { name: "Inspector", url: "?file=" + filepath + "hsimple.root&item=hpx;1&opt=inspect", title: "Show objects data memebers" },
               { name: "Use JSON", url: "?nobrowser&json=" + filepath + "danilo6.json", title: "Read and display data from JSON file, produced with TBufferJSON class"  },
               { name: "Superimpose", url: "?file=" + filepath + "fillrandom.root&item=h1f;1+sqroot;1", title: "Superimpose histogram and function" },