api.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <!-- As template three.js web site was used -->
      <meta charset="utf-8">
      <title>JavaScript ROOT API examples</title>
      <link rel="shortcut icon" href="./img/RootIcon.ico">
      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
      <meta property="og:title" content="JSROOT API examples"/>
      <meta property="og:type" content="website"/>
      <meta property="og:description" content="Web page shows URL syntax and JSROOT API usage"/>
      <meta property="og:image" content="../files/img/th2.png"/>
      <meta property="og:image:type" content="image/png" />
      <meta property="og:image:width" content="200" />
      <meta property="og:image:height" content="150" />

      <style>
         :root {
            color-scheme: light dark;

            --background-color: #fff;
            --secondary-background-color: #f7f7f7;

            --color-blue: #049EF4;
            --text-color: #444;
            --secondary-text-color: #9e9e9e;

            --font-size: 16px;
            --line-height: 26px;

            --border-style: 1px solid #E8E8E8;
            --header-height: 48px;
            --panel-width: 280px;
            --panel-padding: 16px;
            --icon-size: 20px;

            --expand-button-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwMDAwMCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMyAxOGgxOHYtMkgzdjJ6bTAtNWgxOHYtMkgzdjJ6bTAtN3YyaDE4VjZIM3oiLz4KPC9zdmc+Cg==");
         }

         @media (prefers-color-scheme: dark) {

            :root {
               --background-color: #222;
               --secondary-background-color: #2e2e2e;

               --text-color: #bbb;
               --secondary-text-color: #666;

               --border-style: 1px solid #444;
            }

         }

         * {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
         }

         html, body {
            height: 100%;
         }

         html {
            font-size: calc(var(--font-size) - 1px);
            line-height: calc(var(--line-height) - 1px);
         }

         body {
            font-family: 'Verdana, Geneva, sans-serif', monospace;
            margin: 0px;
            color: var(--text-color);
            background-color: var(--background-color);
         }

         a {
            text-decoration: none;
         }

         h1 {
            font-size: 18px;
            line-height: 24px;
            font-weight: 500;
         }

         h2 {
            padding: 0;
            margin: 16px 0;
            font-size: calc(var(--font-size) - 1px);
            line-height: var(--line-height);
            font-weight: 500;
            color: var(--color-blue);
         }

         h1 a {
            color: var(--color-blue);
         }

         #header {
            display: flex;
            height: var(--header-height);
            border-bottom: var(--border-style);
            align-items: center;
         }
         #header h1 {
            padding-left: var(--panel-padding);
            flex: 1;
            display: flex;
            align-items: center;
            color: var(--color-blue);
         }
         #header #version {
            border: 1px solid var(--color-blue);
            color: var(--color-blue);
            border-radius: 4px;
            line-height: 16px;
            padding: 0px 2px;
            margin-left: 6px;
            font-size: .9rem;
         }

         #panel {
            position: fixed;
            z-index: 100;
            left: 0px;
            width: var(--panel-width);
            height: 100%;
            overflow: auto;
            border-right: var(--border-style);
            display: flex;
            flex-direction: column;
            transition: 0s 0s height;
         }

         #panel #expandButton {
            width: 48px;
            height: 48px;
            margin-right: 4px;
            margin-left: 4px;
            display: none;
            cursor: pointer;
            background-color: var(--text-color);
            background-size: var(--icon-size);
            -webkit-mask-image: var(--expand-button-image);
            -webkit-mask-position: 50% 50%;
            -webkit-mask-repeat: no-repeat;
            mask-image: var(--expand-button-image);
            mask-position: 50% 50%;
            mask-repeat: no-repeat;
         }

         #contentWrapper {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
         }

         #panel #content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding: 0 var(--panel-padding) var(--panel-padding) var(--panel-padding);
         }

         #panel #content ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px 0 20px 0;
         }

         #panel #content ul li {
            margin: 1px 0;
         }

         #panel #content h2:not(.hidden) {
            margin-top: 16px;
            border-top: none;
            padding-top: 0;
         }

         #panel #content h2:not(.hidden) ~ h2 {
            margin-top: 32px;
            border-top: var(--border-style);
            padding-top: 12px;
         }

         #panel #content a {
            position: relative;
            color: var(--text-color);
         }

         #panel #content a:hover,
         #panel #content a:hover .spacer,
         #panel #content .selected {
            color: var(--color-blue);
         }

         #panel #content .selected {
            text-decoration: underline;
         }

         #panel #content .hidden {
            display: none !important;
         }

         #panel #content.minimal .card {
            background-color: transparent;
            margin-bottom: 4px;
         }

         #panel #content.minimal .cover {
            display: none;
         }

         #panel #content.minimal .title {
            padding: 0;
         }

         body.home #panel #content h2 {
            margin-bottom: 2px;
            padding-bottom: 0px;
            margin-top: 18px;
            border-top: none;
            padding-top: 6px;
         }

         #viewer {
            padding-left: var(--panel-width);
            position: relative;
            border: 0px;
            left: 0px;
            right: 0px;
            height: 100%;
            overflow: hidden;
         }

         #apiviewer {
            position: relative;
            border: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
         }

         #srcviewer {
            position: relative;
            border: 0px;
            width: 100%;
            height: 100%;
            overflow: auto;
         }

         @media all and ( min-width: 1700px ) {
            :root {
               --panel-width: 280px;
               --font-size: 18px;
               --line-height: 28px;
               --header-height: 56px;
               --icon-size: 24px;
            }
         }

         /* mobile */

         @media all and ( max-width: 640px ) {

            :root {
               --header-height: 56px;
               --icon-size: 24px;
            }

            #panel #expandButton {
               display: block;
            }
            #panel {
               position: absolute;
               left: 0px;
               top: 0px;
               width: 100%;
               right: 0px;
               z-index: 1000;
               overflow-x: hidden;
               transition: 0s 0s height;
               border: none;
               height: var(--header-height);
               transition: 0s 0.2s height;
            }
            #panel.open {
               height: 100%;
               transition: 0s 0s height;
            }

            #panelScrim {
               pointer-events: none;
               background-color: rgba(0,0,0,0);
               position: absolute;
               inset: 0px;
               z-index: 1000;
               pointer-events: none;
               transition: .2s background-color;
            }
            #panel.open #panelScrim {
               pointer-events: auto;
               background-color: rgba(0,0,0,0.4);
            }

            #contentWrapper {
               position: absolute;
               right: 0;
               top: 0;
               bottom: 0;
               background: var(--background-color);
               box-shadow: 0 0 8px rgba(0,0,0,.1);
               width: calc(100vw - 60px);
               max-width: 360px;
               z-index: 10000;
               transition: .25s transform;
               overflow-x: hidden;
               margin-right: -380px;
               line-height: 2rem;
            }
            #panel.open #contentWrapper {
               transform: translate3d(-380px, 0 ,0);
            }
            #viewer {
               padding-left: 0;
               padding-top: var(--header-height);
            }
         }

      </style>
   </head>

   <body class="home">
      <div id="panel" class="open">
        <div id="header">
           <h1><div><a href="https://root.cern/js/">JSROOT</a></div><a id="version" href="http://github.com/root-project/jsroot/releases">dev</a></h1>
           <div id="expandButton"></div>
        </div>
        <div id="panelScrim"></div>
        <div id="contentWrapper">
           <div id="content">
           </div>
        </div>
      </div>

      <div id="viewer">
         <iframe id="apiviewer"></iframe>
         <div id="srcviewer" style="display: none"></div>
      </div>
   </body>

   <script type="module">
      import { httpRequest, version, version_id, source_dir } from './modules/core.mjs';

      let jsroot_path = './', filepath = '../files/';

      document.getElementById('version').innerHTML = version_id != 'dev' ? version_id : version;
      document.getElementById('version').title = `${version}, ${source_dir}`;

      document.getElementById('expandButton').addEventListener('click', event => {
         document.getElementById('panel').classList.toggle('open');
         event.preventDefault();
      });

      document.getElementById('panelScrim').onclick = event => {
         event.preventDefault();
         document.getElementById('panel').classList.toggle('open');
      };

      if ((window.location.host.indexOf('jsroot.gsi.de') < 0) &&
          (window.location.host.indexOf('root.cern') < 0)) {
             filepath = 'https://root.cern/js/files/';
          }

      if (window.location.protocol == 'file:') {
         jsroot_path = 'https://root.cern/js/dev/';
         filepath = 'https://root.cern/js/files/';
      }

      function GetGithubBrunch(is_test) {
          if (source_dir.indexOf('/dev/') > 0 && !is_test) return 'dev/';
          if (source_dir.indexOf('/v6/') > 0) return 'v6/';
          return 'master/';
       }

      let examples = {
         'URL syntax': [
           { name: 'Open file', url: '?file=' + filepath + 'hsimple.root', title: 'Open ROOT file with the JSROOT; `&file=<name>`' },
           { name: 'Display item', url: '?file=' + filepath + 'hsimple.root&item=hpxpy;1&opt=colz', title: 'Open ROOT file and display item; `&item=<name>&opt=<value>`' },
           { name: 'Enable status', url: '?status&file=' + filepath + 'hsimple.root&item=hpxpy;1&opt=colz', title: 'Show tooltip information in special status line; `&status`' },
           { name: 'Hide browser', url: '?nobrowser&file=' + filepath + 'hsimple.root&item=hprof;1', title: 'Hide browser - only display items, browser can be activated later; `&nobrowser`' },
           { name: 'Float browser', url: '?float&file=' + filepath + 'hsimple.root&item=ntuple;1&opt=px:pz', title: 'Display floating browser, which overlays objects drawings; `&float`' },
           { 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; `&layout=flex`', syn: 'url_syntax_tabs_layout', syn2: 'url_syntax_collapsible_layout' },
           { 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; `&layout=tabs`' },
           { 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; `&layout=grid2x2`' },
           { 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; `&layout=vert121`' },
           { 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; `&layout=horiz32_12`' },
           { name: 'Inspector', url: '?file=' + filepath + 'hsimple.root&item=hpx;1&opt=inspect', title: 'Show objects data memebers; `&opt=inspect`' },
           { name: 'Projection', url: '?nobrowser&file=' + filepath + 'hsimple.root&item=hpxpy;1&opt=col,projx3', title: 'Enable X projection with 3 bins, `&opt=projx3`' },
           { name: 'Images', url: '?path=' + filepath + '&layout=grid2x2&file=hsimple.root&items=[hpx;1,hpxpy;1,img:../files/img/ALICE.png,img:../files/img/ATLAS.png]&opts=[hist,colz,scale,center]', title: 'Example of adding images from the web server, `item=img:path/to/image.png`' },
           { name: 'Use JSON', url: '?nobrowser&json=https://jsroot.gsi.de/files/danilo6.json', title: 'Read and display data from JSON file, produced with TBufferJSON class; `&json=<filename>`' },
           { name: 'Superimpose', url: '?file=' + filepath + 'fillrandom.root&item=h1f;1+sqroot;1', title: 'Superimpose histogram and function; `&item=<name1>+<name2>`' },
           { name: 'Several files', url: '?layout=grid2x2&path=' + filepath + '&files=[hsimple.root,graph.root,ct.root]&items=[hsimple.root/[1],graph.root/[11],graph.root/[3],ct.root/[0]]&opts=[lego]', title: 'Open several files simultaneusely; `&files=[<filename1>,<filename2>,...]`' },
           { name: 'Superimpose 2 files', url: '?files=[' + filepath + 'hsimple.root,' + filepath + 'graph.root]&item=graph.root/Graph;1+hsimple.root/hprof;1', title: 'Superimpose items from two different files; `&item=<filename1>/<item1>+<filename2>/<item2>`' },
           { name: 'Superimpose 3 files', url: '?path=' + filepath + '&files=[temp44.root,temp35.root,temp28.root]&item=temp44.root/Histograms/TDC_C100/Ch1/TDC_C100_Ch1_RisingCalibr;1+temp35.root/_same_+temp28.root/_same_&opt=plc,nostat+plc+plc&tooltip=2', title: 'Superimpose same item from three different files; `&item=<filename1>/<item1>+<filename2>/<item2>+<filename3>/<item3>`' },
           { name: 'Use autozoom', url: '?layout=grid1x3&path=' + filepath + '&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]', title: 'Let display only non-empty bins of the histogram(s); `&opt=autozoom`' }
         ],
         'Custom HTML' : [
           { name: 'Read JSON', url: 'demo/read_json.htm', title: 'Custom web page to read and display object from JSON file', src: true },
           { name: 'Read ROOT file', url: 'demo/read_file.htm', title: 'Read and display object from ROOT file', src: true, syn: 'custom_html_async_read' },
           { name: 'Without id attr', url: 'demo/without_id.htm', title: 'Do not use explicit id attribute for traget HTML element', src: true },
           { name: 'Preload', url: 'demo/preload.htm', title: 'Load complete build/jsroot.js bundle in advance', src: true },
           { name: 'TH2', url: 'demo/th2.htm', title: 'Produce and draw ROOT TH2 histogram in JavaScript', src: true },
           { name: 'TH3', url: 'demo/th3.htm', title: 'Produce and draw ROOT TH3 histogram in JavaScript', src: true },
           { name: 'THStack', url: 'demo/thstack.htm', title: 'Produce and draw THStack', src: true },
           { name: 'TMultiGraph', url: 'demo/multigraph.htm', title: 'Produce and update TMultiGraph in JavaScript', src: true },
           { name: 'TLegend', url: 'demo/multigraph_legend.htm', title: 'Show and update TLegend with multi-graph', src: true },
           { name: 'TGeo', url: 'demo/read_geometry_tracks.htm', title: 'Example how to draw geometry with tracks', src: true },
           { name: 'TGeo with STL', url: 'demo/draw_geometry_stl.htm', title: 'Example how to to use THREE.STLLoader with TGeo painter', src: true },
           { name: 'Create image', url: 'demo/make_image.htm', title: 'Create SVG, PNG and JPEG images from ROOT objects', src: true },
           { name: 'Tooltip hanlder', url: 'demo/tooltip.htm', title: 'User handler function called when tooltip is shown, let build custom UI', src: true },
           { name: 'Tooltip lines', url: 'demo/tooltip_lines.htm', title: 'Provide custom information in tooltip text for TH2 and TGraph classes', src: true },
           { name: 'Update drawing', url: 'demo/update_draw.htm', title: 'Update drawing, reading 20 histograms in loop', src: true },
           { name: 'Update in grid', url: 'demo/update_draw.htm?layout=grid3x2', title: 'Update drawing on the grid layout', src: 'demo/update_draw.htm' },
           { name: 'Adopt colors', url: 'demo/adopt_colors.htm', title: 'Read set of ROOT colors before display of the object', src: true },
           { name: 'File hierarchy', url: 'demo/file_hierarchy.htm', title: 'Use HierarchyPainter to display file objects hierarchy', src: true },
           { name: 'File browser', url: 'demo/file_browser.htm', title: 'Use JSROOT layout for file objects hierarchy', src: true },
           { name: 'Context menu', url: 'demo/context_menu.htm', title: 'Custom context menu for TH2 histograms', src: true },
           { name: 'Zooming', url: 'demo/zoom_handler.htm', title: 'Redefine Zoom function to make synchronous zooming in other histogram', src: true },
           { name: 'User IO', url: `index.htm?file=${filepath}amore.root&item=moH1F_0;1&inject=../demo/amore.mjs`, title : 'Example of custom streamer and custom draw function (AMORE)', src: 'demo/amore.mjs' },
           { name: 'User class', url: 'index.htm?file=demo/custom/divhist.root&inject=demo/custom/divhist.js&item=DivHist', title : 'Example of draw function for custom user class', src: 'demo/custom/divhist.js' },
           { name: 'Store JSON', url: 'demo/store_json.htm', title: 'Store drawn objects into JSON, can be reused to display once again', src: true },
           { name: 'Geometry', url: 'demo/tgeo_build.htm', title: 'Example how one can create three.js model for TGeo object, using build() function from geom/TGeoPainter.mjs', src: 'demo/tgeo_build.htm' },
           { name: 'OpenUI5', url: 'demo/openui5/', title: 'Use of JSROOT graphics inside OpenUI5', src: 'demo/openui5/Readme.md' }
         ],
         'TTree': [
            { name: 'TSelector', url: 'demo/read_tree.htm', title: 'Simple example of reading TTree using TSelector class', src: true, syn: 'custom_html_read_tree' },
            { name: 'User class', url: 'index.htm?file=https://root.cern/files/markus.root&item=_Event;1/Refs&opt=dump&inject=demo/gaudi.js', title : 'Example of user custom streamer for reading TTree data (Gaudi)', src: 'demo/gaudi.js', syn: 'custom_html_user_tree' },
            { name: 'Extract tracks', url: 'index.htm?inject=../demo/alice_esd.mjs&files=[https://root.cern/files/alice_ESDgeometry.root,https://root.cern/files/alice_ESDs.root]&item=[[0]/Gentle;1,[1]/esdTree;1]&opt=[,extract_tracks$]', title : 'Extract tracks from the custom tree', src: 'demo/alice_esd.mjs' }
         ],
         'Node.js': [
            { name: 'Create SVG', title: 'Example how to read object from ROOT file and create SVG', src: 'demo/node/makesvg.js', srcload: 'github' },
            { name: 'Geometry SVG', title: 'Create of SVG file for geometry', src: 'demo/node/geomsvg.js', srcload: 'github' },
            { name: 'Images', title: 'Example of SVG, PNG, JPEG image creations with makeImage() function', src: 'demo/node/make_image.js', srcload: 'github' },
            { name: 'TTree draw', title: 'Example of TTree::Draw in node.js', src: 'demo/node/tree_draw.js', srcload: 'github' },
            { name: 'TTree dump', title: 'Example shows usage of TTree::Draw for values dump', src: 'demo/node/tree_dump.js', srcload: 'github' },
            { name: 'Selector', title: 'How to use TSelector class in node.js', src: 'demo/node/selector.js', srcload: 'github' },
            { name: 'Testing', title: 'JSROOT test suite with Node.js', src: 'https://github.com/linev/jsroot-test/', srcload: 'https://raw.githubusercontent.com/linev/jsroot-test/' + GetGithubBrunch(true) + 'test.js' }
          ],
         'httpserver.C' : [
           { link: 'https://github.com/root-project/root/blob/master/tutorials/http/httpserver.C' },
           { name: 'Default page', url: 'httpserver.C/', title : 'Default HTML page of running httpserver.C macro (snapshot)' },
           { name: 'Sub-folder', url: 'httpserver.C/Files/job1.root/', title : 'Browse server objects from sub-folder' },
           { name: 'Display item', url: 'httpserver.C/?item=Files/job1.root/hpxpy&opt=colz&monitoring=1000', title : 'Display histogram and enable monitoring (not updating while snapshot is used)' },
           { name: 'No browser (1)', url: 'httpserver.C/Files/job1.root/hpxpy/draw.htm?opt=colz', title : 'Display item without browser, using provided draw.htm page' },
           { name: 'No browser (2)', url: 'httpserver.C/?nobrowser&item=Files/job1.root/hpxpy&opt=colz', title : 'Display item without browser, using nobrowser option and normal UI' },
           { name: 'Produce PNG', url: 'httpserver.C/Files/job1.root/hpxpy/root.png', title : 'Use normal ROOT drawing to produce PNG image' },
           { name: 'Access object members', url: 'httpserver.C/?item=Canvases/c1/fPrimitives/hpx', title : 'Show histogram from TCanvas lists of primitives (all other objects not cached in this example)' },
           { name: 'Get object title', url: 'httpserver.C/Files/job1.root/hpxpy/exe.json?method=GetTitle', title : 'Access object methods with exe.json request' },
           { name: 'Tree player', url: 'httpserver.C/?item=Files/job1.root/ntuple', title : 'Custom UI to execute TTree::Draw on running application' },
           { name: 'Read file', url: 'httpserver.C/?file=../../files/hsimple.root&layout=grid2x2&items=[hsimple.root/hpx;1,hsimple.root/hpxpy;1,job1/Files/job1.root/hpx,job1/Files/job1.root/hpxpy]&opts=[hist,col,hist,col]', title : 'Show histograms from ROOT file and THttpServer' },
           { name: 'Superimpose', url: 'httpserver.C/?file=../../files/hsimple.root&item=[job1/Files/job1.root/hpx,hsimple.root/hpx;1]&opt=logy', title : 'Superimpose objects from ROOT file and online server' }
         ],
         'httpcontrol.C' : [
           { link: 'https://github.com/root-project/root/blob/master/tutorials/http/httpcontrol.C' },
           { name: 'Default page', url: 'httpcontrol.C/', title : 'Default HTML page of running httpscontrol.C macro (snapshot)' },
           { name: 'Text output', url: 'httpcontrol.C/?layout=simple&item=Debug&monitoring=0', title : 'Custom text output, using MathJax.js; also disable default monitoring' },
           { name: 'Text output (2)', url: 'httpcontrol.C/Debug/draw.htm', title : 'Custom text output without browser' }
         ],
         'Go4ExampleSimple' : [
           { link: 'https://github.com/linev/go4/tree/master/Go4ExampleSimple' },
           { name: 'Main page', url: 'Go4ExampleSimple/', title : 'Main page of running Go4ExampleSimple example (snapshot)' },
           { name: 'Without status line', url: 'Go4ExampleSimple/?nostatus', title : 'Suppress output of status line' },
           { name: 'Draw condition', url: 'Go4ExampleSimple/?nostatus&item=Conditions/cHis1', title : 'Show TGo4Condition values correspondent histogram' },
           { name: 'Edit condition', url: 'Go4ExampleSimple/?item=Conditions/cHis1&opt=editor', title : 'Editing condition values' },
           { name: 'Edit parameter', url: 'Go4ExampleSimple/?item=Parameters/Par1&opt=editor', title : 'Editing parameter values' },
           { name: 'Debug output', url: 'Go4ExampleSimple/?item=Status/Log', title : 'Show analysis log output' },
           { name: 'Draw picture', url: 'Go4ExampleSimple/?nostatus&item=Pictures/condSet', title : 'Show TGo4Picture, which fetch and draw many other objects' },
           { name: 'Processing rate', url: 'Go4ExampleSimple/?item=Status/EventsRate', title : 'Show analysis events processing rate as TGraph' },
           { name: 'Analysis configuration', url: 'Go4ExampleSimple/?item=Control/Analysis', title : 'Change analysis configurations' },
           { name: 'Terminal', url: 'Go4ExampleSimple/?item=Control/Terminal', title : 'Analysis terminal output plus several control elements' }
         ]
      };

      async function ProcessClick(durl) {
         let viewer = document.getElementById('apiviewer'),
             srcviewer = document.getElementById('srcviewer');
         viewer.style.display = '';
         srcviewer.style.display = 'none';
         srcviewer.innerHTML = '';

         if (durl.indexOf('http') == 0)
            viewer.src = durl;
         else
            viewer.src = jsroot_path + durl;
         viewer.focus();
      }

      function SetPageTitle(title) {
         let arr = document.getElementsByTagName('meta');
         for (let k = 0; k < arr.length; ++k) {
            let elem = arr[k];
            if (elem.getAttribute('property') == 'og:title')
               elem.setAttribute('content', title);
         }
       }

      function SetListener(elem, shortname, durl) {
          elem.addEventListener( 'click', event => {
             event.preventDefault();

             if (event.ctrlKey)
                return window.open(elem.href.replace('?nobrowser&', '?'), '_blank');

             window.location.hash = shortname;
             if (elem.title) SetPageTitle(elem.title);
             ProcessClick(durl).then(() => document.getElementById('panel').classList.toggle('open'));
          });
      }

      async function ProcessSourceClick(entry) {
         let srcload = entry.srcload || entry.src;
         if (srcload === 'github')
            srcload = 'https://raw.githubusercontent.com/root-project/jsroot/' + GetGithubBrunch() + entry.src;

         httpRequest(srcload, 'text').then(res => {
            let viewer = document.getElementById('apiviewer'),
                srcviewer = document.getElementById('srcviewer');
            viewer.href = '';
            viewer.innerHTML = '';
            viewer.style.display = 'none';
            srcviewer.style.display = 'block';
            srcviewer.innerHTML = '';

            let lines = res.split('\n');
            for (let k = 0; k < lines.length; ++k) {
               let pre = document.createElement('pre');
               pre.textContent = lines[k] || ' ';
               pre.style = 'margin: 0px;';
               srcviewer.appendChild(pre);
            }
            srcviewer.focus();
         }).catch(() => {
            console.error(`Cannot find ${srcload}`);
         });
      }

      function SetSourceListener(elem, shortname, entry) {
         elem.addEventListener( 'click', event => {
            event.preventDefault();

            if (event.ctrlKey)
                return window.open(elem.href, '_blank');

            window.location.hash = shortname;
            ProcessSourceClick(entry).then(() => document.getElementById('panel').classList.toggle('open'));
         });
      }

      function MakeShortName(name1, name2) {
         return name1.toLowerCase().replaceAll(/[ .]/g, '_') + '_' +
                name2.toLowerCase().replaceAll(/ \(3\)/g, '_3').replaceAll(/ \(2\)/g, '_2').replaceAll(/ \(1\)/g, '_1')
                                   .replaceAll(/[\(\)]/g, '').replaceAll(/[. ]/g, '_');
      }

      let content = document.getElementById('content');

      for (let key in examples) {

         let opts = examples[key],
             header = document.createElement('h2');
         if ('link' in opts[0]) {
            let ll = document.createElement('a');
            ll.textContent = key;
            ll.href = opts[0].link;
            ll.style.color = 'green';
            header.appendChild(ll);
         } else {
         	header.textContent = key;
         }

         content.appendChild( header );

         if (window.location.hash == '#' + key.toLowerCase())
             header.scrollIntoView();

         for (let n = 0; n < opts.length; ++n) {
            let entry = opts[n];

            if (!('name' in entry)) continue;

            let shortname = MakeShortName(key, entry.name);

            let url = entry.url, aaa = null;

            if (url) {
               aaa = document.createElement('a');
               aaa.textContent = entry.name;
               aaa.href = jsroot_path + url;
               if (entry.title) aaa.title = entry.title;
               content.appendChild(aaa);
               SetListener(aaa, shortname, url);
            }

            if (entry.src) {

               let srcurl = '', github = 'https://github.com/root-project/jsroot/blob/' + GetGithubBrunch();
               if (entry.src === true) {
                  srcurl = github + url;
                  entry.src = source_dir + url;
               } else if (entry.src.indexOf('http') === 0)
                  srcurl = entry.src;
               else
                  srcurl = github + entry.src;

               let saaa = document.createElement('a');

               if (url) {
                  saaa.textContent = ' (src)';
                  saaa.title = 'Click to see source of the example';
               } else {
                  saaa.textContent = entry.name;
                  saaa.title = entry.title;
               }

               saaa.href = srcurl;
               content.appendChild(saaa);
               SetSourceListener(saaa, shortname + '_src', entry);

               if ((window.location.hash == '#' + shortname + '_src') || (entry.syn && window.location.hash == '#' + entry.syn + '_src')) {
                  saaa.focus();
                  if (entry.title) SetPageTitle(entry.title);
                  ProcessSourceClick(entry).then(() => document.getElementById('panel').classList.toggle('open'));
               }
            }

            content.appendChild(document.createElement('br'));

            if ((window.location.hash == '#' + shortname) || (entry.syn && window.location.hash == '#' + entry.syn) || (entry.syn2 && window.location.hash == '#' + entry.syn2)) {
               if (aaa) aaa.focus();
               ProcessClick(url).then(() => document.getElementById('panel').classList.toggle('open'));
            }
         }
      }


   </script>

</html>