Global

Members

(constant) atob_func

atob function in all environments

Source:

(constant) btoa_func

btoa function in all environments

Source:

source_dir

Location of JSROOT scripts

Source:

Automatically detected and used to load other scripts or modules

version

version id and date

Source:

Produced by concatenation of version_id and version_date Like '7.0.0 14/04/2022'

version_date

version date

Source:

Release date in format day/month/year like '14/04/2022'

version_id

version id

Source:

For the JSROOT release the string in format 'major.minor.patch' like '7.0.0'

Methods

(protected) addDrawFunc(args)

Register draw function for the class

Source:

List of supported draw options could be provided, separated with ';'

Parameters:
Name Type Description
args object

arguments

Properties
Name Type Attributes Description
name string | regexp

class name or regexp pattern
func function <optional>

draw function
draw function <optional>

async function to load draw function
class function <optional>

async function to load painter class with static draw function
direct boolean <optional>

if true, function is just Redraw() method of ObjectPainter
opt string <optional>

list of supported draw options (separated with semicolon) like 'col;scat;'
icon string <optional>

icon name shown for the class in hierarchy browser
draw_field string <optional>

draw only data member from object, like fHistogram

addUserStreamer()

Add custom streamer

Source:

build(obj, optopt) → {object}

Build three.js model for given geometry object

Source:
Example
import { build } from './path_to_jsroot/modules/geom/TGeoPainter.mjs';
let obj3d = build(obj);
// this is three.js object and can be now inserted in the scene
Parameters:
Name Type Attributes Description
obj Object

TGeo-related object
opt Object <optional>

options

Properties
Name Type Attributes Default Description
vislevel Number <optional>

visibility level like TGeoManager, when not specified - show all
numnodes Number <optional>
 1000

maximal number of visible nodes
numfaces Number <optional>
 100000

approx maximal number of created triangles
doubleside boolean <optional>
 false

use double-side material
wireframe boolean <optional>
 false

show wireframe for created shapes
dflt_colors boolean <optional>
 false

use default ROOT colors
Returns:

Object3D with created model

Type
object

(async) buildGUI(gui_element, gui_kind) → {Promise}

Build main GUI

Source:

Used in many HTML files to create JSROOT GUI elements

Example
import { buildGUI } from '/path_to_jsroot/modules/gui.mjs';
buildGUI('guiDiv');
Parameters:
Name Type Description
gui_element String

id of the <div> element
gui_kind String

either 'online', 'nobrowser', 'draw'
Returns:

with HierarchyPainter instance

Type
Promise

cleanup(dom)

Safely remove all drawings from specified element

Source:
Example
cleanup('drawing');
cleanup(document.querySelector('#drawing'));
Parameters:
Name Type Description
dom string | object

id or DOM element

closeMenu(menunameopt)

Close previousely created and shown JSROOT menu

Source:
Parameters:
Name Type Attributes Description
menuname string <optional>

optional menu name

(async) connectWebWindow(arg) → {Promise}

Method used to initialize connection to web window.

Source:
Parameters:
Name Type Description
arg object

arguments

Properties
Name Type Attributes Default Description
socket_kind string <optional>

kind of connection longpoll|websocket, detected automatically from URL
credits number <optional>
 10

number of packets which can be send to server without acknowledge
receiver object

instance of receiver for websocket events, allows to initiate connection immediately
first_recv string <optional>

required prefix in the first message from RWebWindow, remain part of message will be returned in handle.first_msg
href string <optional>

URL to RWebWindow, using window.location.href by default
Returns:

for ready-to-use WebWindowHandle instance

Type
Promise

create(typename)

Create some ROOT classes

Source:

Supported classes: TObject, TNamed, TList, TAxis, TLine, TText, TLatex, TPad, TCanvas

Example
import { create } from 'path_to_jsroot/modules/core.mjs';
let obj = create('TNamed');
obj.fName = 'name';
obj.fTitle = 'title';
Parameters:
Name Type Description
typename string

ROOT class name

createHistogram(typename, nbinsx, nbinsyopt, nbinszopt) → {Object}

Create histogram object of specified type

Source:
Example
let h1 = createHistogram('TH1I', 20);
h1.fName = 'Hist1';
h1.fTitle = 'Histogram title';
h1.fXaxis.fTitle = 'xaxis';
h1.fYaxis.fTitle = 'yaxis';
h1.fXaxis.fLabelSize = 0.02;
Parameters:
Name Type Attributes Description
typename string

histogram typename like 'TH1I' or 'TH2F'
nbinsx number

number of bins on X-axis
nbinsy number <optional>

number of bins on Y-axis (for 2D/3D histograms)
nbinsz number <optional>

number of bins on Z-axis (for 3D histograms)
Returns:

created histogram object

Type
Object

createMenu(evntopt, handleropt, menunameopt)

Create JSROOT menu

Source:

See JSRootMenu class for detailed list of methods

Example
import { createMenu } from 'path_to_jsroot/modules/gui/menu.mjs';
let menu = await createMenu());
menu.add('First', () => console.log('Click first'));
let flag = true;
menu.addchk(flag, 'Checked', arg => console.log(`Now flag is ${arg}`));
menu.show();
Parameters:
Name Type Attributes Description
evnt object <optional>

event object like mouse context menu event
handler object <optional>

object with handling function, in this case one not need to bind function
menuname string <optional>

optional menu name

createTGraph(npoints, xptsopt, yptsopt)

Creates TGraph object

Source:
Parameters:
Name Type Attributes Description
npoints number

number of points in TGraph
xpts array <optional>

array with X coordinates
ypts array <optional>

array with Y coordinates

createTHStack()

Creates THStack object

Source:

As arguments one could specify any number of histograms objects

Example
let nbinsx = 20;
let h1 = createHistogram('TH1F', nbinsx);
let h2 = createHistogram('TH1F', nbinsx);
let h3 = createHistogram('TH1F', nbinsx);
let stack = createTHStack(h1, h2, h3);

createTMultiGraph()

Creates TMultiGraph object

Source:

As arguments one could specify any number of TGraph objects

Example
let gr1 = createTGraph(100);
let gr2 = createTGraph(100);
let gr3 = createTGraph(100);
let mgr = createTMultiGraph(gr1, gr2, gr3);

createTPolyLine(npoints, use_int32opt)

Creates TPolyLine object

Source:
Parameters:
Name Type Attributes Description
npoints number

number of points
use_int32 boolean <optional>

use Int32Array type for points, default is Float32Array

decodeUrl(urlopt) → {Object}

decodes URL options after '?' mark

Source:

Following options supported ?opt1&opt2=3

Example
let d = decodeUrl('any?opt1&op2=3');
console.log(`Has opt1 ${d.has('opt1')}`);     // true
console.log(`Get opt1 ${d.get('opt1')}`);     // ''
console.log(`Get opt2 ${d.get('opt2')}`);     // '3'
console.log(`Get opt3 ${d.get('opt3','-')}`); // '-'
Parameters:
Name Type Attributes Description
url string <optional>

URL string with options, document.URL will be used when not specified
Returns:

with .has(opt) and .get(opt,dflt) methods

Type
Object

(async) draw(dom, obj, opt) → {Promise}

Draw object in specified HTML element with given draw options.

Source:

An extensive list of support draw options can be found on examples page

Example
let file = await openFile('https://root.cern/js/files/hsimple.root');
let obj = await file.readObject('hpxpy;1');
await draw('drawing', obj, 'colz;logx;gridx;gridy');
Parameters:
Name Type Description
dom string | object

id of div element to draw or directly DOMElement
obj object

object to draw, object type should be registered before with addDrawFunc
opt string

draw options separated by space, comma or semicolon
Returns:

with painter object

Type
Promise

drawingJSON(dom) → {string}

Save object, drawn in specified element, as JSON.

Source:

Normally it is TCanvas object with list of primitives

Parameters:
Name Type Description
dom string | object

id of top div element or directly DOMElement
Returns:

produced JSON string

Type
string

(async) ensureRCanvas(painter, frame_kind) → {Promise}

Ensure RCanvas and RFrame for the painter object

Source:

Assigns DOM, creates and draw RCanvas and RFrame if necessary, add painter to pad list of painters

Parameters:
Name Type Description
painter Object

painter object to process
frame_kind string | boolean

false for no frame or '3d' for special 3D mode
Returns:

for ready

Type
Promise

(async) ensureTCanvas(painter, frame_kind)

Ensure TCanvas and TFrame for the painter object

Source:

Assign dom, creates TCanvas if necessary, add to list of pad painters

Parameters:
Name Type Description
painter Object

painter object to process
frame_kind string | boolean

false for no frame or '3d' for special 3D mode

(async) httpRequest(url, kind, post_dataopt) → {Promise}

Submit asynchronoues http request

Source:

Following requests kind can be specified:

  • 'bin' - abstract binary data, result as string
  • 'buf' - abstract binary data, result as ArrayBuffer (default)
  • 'text' - returns req.responseText
  • 'object' - returns parse(req.responseText)
  • 'multi' - returns correctly parsed multi.json request
  • 'xml' - returns req.responseXML
  • 'head' - returns request itself, uses 'HEAD' request method
  • 'post' - creates post request, submits req.send(post_data)
  • 'postbuf' - creates post request, expectes binary data as response
Example
httpRequest('https://root.cern/js/files/thstack.json.gz', 'object')
      .then(obj => console.log(`Get object of type ${obj._typename}`))
      .catch(err => console.error(err.message));
Parameters:
Name Type Attributes Description
url string

URL for the request
kind string

kind of requested data
post_data string <optional>

data submitted with post kind of request
Returns:

Promise for requested data, result type depends from the kind

Type
Promise

isBatchMode()

Indicates if running in batch mode

Source:

isNodeJs()

Indicates if running inside Node.js

Source:

(async) loadScript(url) → {Promise}

Load script or CSS file into the browser

Source:
Parameters:
Name Type Description
url String

script or css file URL (or array, in this case they all loaded secuentially)
Returns:
Type
Promise

(async) makeSVG(args) → {Promise}

Create SVG image for provided object.

Source:

Function especially useful in Node.js environment to generate images for supported ROOT classes

Parameters:
Name Type Description
args object

contains different settings

Properties
Name Type Attributes Default Description
object object

object for the drawing
option string <optional>

draw options
width number <optional>
 1200

image width
height number <optional>
 800

image height
Returns:

with svg code

Type
Promise

openFile(arg) → {object}

Open ROOT file for reading

Source:

Generic method to open ROOT file for reading Following kind of arguments can be provided:

  • string with file URL (see example). In node.js environment local file like 'file://hsimple.root' can be specified
  • File instance which let read local files from browser
  • ArrayBuffer instance with complete file content
  • FileProxy let access arbitrary files via tiny proxy API
Example
import { openFile } from '/path_to_jsroot/modules/io.mjs';
let f = await openFile('https://root.cern/js/files/hsimple.root');
console.log(`Open file ${f.getFileName()}`);
Parameters:
Name Type Description
arg string | object

argument for file open like url, see details
Returns:
  • Promise with TFile instance when file is opened
Type
object

parse(json) → {object}

Should be used to parse JSON string produced with TBufferJSON class

Source:

Replace all references inside object like { "$ref": "1" }

Parameters:
Name Type Description
json object | string

object where references will be replaced
Returns:

parsed object

Type
object

parseMulti(json) → {Array}

Parse response from multi.json request

Source:

Method should be used to parse JSON code, produced by multi.json request of THttpServer

Parameters:
Name Type Description
json string

string to parse
Returns:

array of parsed elements

Type
Array

produceRenderOrder(toplevel, origin, method)

Set rendering order for created hierarchy

Source:

depending from provided method sort differently objects

Parameters:
Name Type Description
toplevel

top element
origin

camera position used to provide sorting
method

name of sorting method like 'pnt', 'ray', 'size', 'dflt'

reconstructObject(class_name, obj_rawdata, sinfo_rawdata) → {object}

Reconstruct ROOT object from binary buffer

Source:

Method can be used to reconstruct ROOT objects from binary buffer which can be requested from running THttpServer, using root.bin request To decode data, one has to request streamer infos data after object data as it shown in example.

Method provided for convenience only to see how binary IO works. It is strongly recommended to use root.json request to get data directly in JSON format

Example
import { httpRequest } from 'http://localhost:8080/jsrootsys/modules/core.mjs';
import { reconstructObject } from 'http://localhost:8080/jsrootsys/modules/io.mjs';

let obj_data = await httpRequest('http://localhost:8080/Files/job1.root/hpx/root.bin', 'buf');
let si_data = await httpRequest('http://localhost:8080/StreamerInfo/root.bin', 'buf');
let histo = await reconstructObject('TH1F', obj_data, si_data);
console.log(`Get histogram with title = ${histo.fTitle}`);

// request same data via root.json request
httpRequest('http://localhost:8080/Files/job1.root/hpx/root.json', 'object')
           .then(histo => console.log(`Get histogram with title = ${histo.fTitle}`));
Parameters:
Name Type Description
class_name string

Class name of the object
obj_rawdata binary

data of object root.bin request
sinfo_rawdata binary

data of streamer info root.bin request
Returns:
  • created JavaScript object
Type
object

(async) redraw(dom, obj, opt) → {Promise}

Redraw object in specified HTML element with given draw options.

Source:

If drawing was not done before, it will be performed with draw. Otherwise drawing content will be updated

Parameters:
Name Type Description
dom string | object

id of div element to draw or directly DOMElement
obj object

object to draw, object type should be registered before with addDrawFunc
opt string

draw options
Returns:

with painter object

Type
Promise

(protected) registerForResize(handle, delayopt)

Register handle to react on window resize

Source:

function used to react on browser window resize event While many resize events could come in short time, resize will be handled with delay after last resize event

Parameters:
Name Type Attributes Description
handle object | string

can be function or object with checkResize function or dom where painting was done
delay number <optional>

one could specify delay after which resize event will be handled

resize(dom, arg)

Check resize of drawn element

Source:

As first argument dom one should use same argument as for the drawing As second argument, one could specify 'true' value to force redrawing of the element even after minimal resize Or one just supply object with exact sizes like { width:300, height:200, force:true };

Example
resize('drawing', { width: 500, height: 200 });
resize(document.querySelector('#drawing'), true);
Parameters:
Name Type Description
dom string | object

id or DOM element
arg boolean | object

options on how to resize

setBatchMode()

Set batch mode

Source:

setDefaultDrawOpt()

Set default draw option for provided class

Source:

toJSON(obj, spacingopt) → {string}

Method converts JavaScript object into ROOT-like JSON

Source:

Produced JSON can be used in parse() again When performed properly, JSON can be used in TBufferJSON::fromJSON() method to read data back with C++

Parameters:
Name Type Attributes Description
obj object

JavaScript object to convert
spacing number <optional>

optional line spacing in JSON
Returns:

produced JSON code

Type
string

(async) treeDraw(args) → {Promise}

implementation of TTree::Draw

Source:
Parameters:
Name Type Description
args object | string

different setting or simply draw expression

Properties
Name Type Attributes Default Description
expr string

draw expression
cut string <optional>

cut expression (also can be part of 'expr' after '::')
drawopt string <optional>

draw options for result histogram
firstentry number <optional>
 0

first entry to process
numentries number <optional>

number of entries to process, all by default
branch object <optional>

TBranch object from TTree itself for the direct drawing
progress function <optional>

function called during histogram accumulation with argument { obj: draw_object, opt: draw_options }
Returns:

with object like { obj: draw_object, opt: draw_options }

Type
Promise

(async) treeProcess(tree, selector, argsopt) → {Promise}

Process selector for the tree

Source:

function similar to the TTree::Process

Parameters:
Name Type Attributes Description
tree object

instance of TTree class
selector object

instance of TSelector class
args object <optional>

different arguments

Properties
Name Type Attributes Description
firstentry number <optional>

first entry to process, 0 when not specified
numentries number <optional>

number of entries to process, all when not specified
Returns:

with TSelector instance

Type
Promise