Global

Members

(constant) version

version id and date

Description:
Source:

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

(constant) version_date

version date

Description:

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

Source:

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

(constant) version_id

version id

Description:

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

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

Description:

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

Source:
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 'https://root.cern/js/latest/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
instancing Number <optional>
 -1

<0 disable use of InstancedMesh, =0 only for large geometries, >0 enforce usage of InstancedMesh
doubleside boolean <optional>
 false

use double-side material
wireframe boolean <optional>
 false

show wireframe for created shapes
transparency boolean <optional>
 0

make nodes transparent
dflt_colors boolean <optional>
 false

use default ROOT colors
set_names boolean <optional>
 true

set names to all Object3D instances
set_origin boolean <optional>
 false

set TGeoNode/TGeoVolume as Object3D.userData
Returns:

Object3D with created model

Type
object

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

Build main GUI

Description:

  • Used in many HTML files to create JSROOT GUI elements

Source:
Example
import { buildGUI } from 'https://root.cern/js/latest/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
import { cleanup } from 'https://root.cern/js/latest/modules/base/ObjectPainter.mjs';
cleanup('drawing');
cleanup(document.querySelector('#drawing'));
Parameters:
Name Type Description
dom string | object

id or DOM element

closeMenu(menunameopt)

Close previously 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

convertDate()

Convert Date object into string used configured time zone

Description:

  • Time zone stored in settings.TimeZone

Source:

create(typename)

Create some ROOT classes

Description:

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

Source:
Example
import { create } from 'https://root.cern/js/latest/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
import { createHistogram } from 'https://root.cern/js/latest/modules/core.mjs';
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

Description:
Source:
Example
import { createMenu } from 'https://root.cern/js/latest/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

Description:

  • As arguments one could specify any number of histograms objects

Source:
Example
import { createHistogram, createTHStack } from 'https://root.cern/js/latest/modules/core.mjs';
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

Description:

  • As arguments one could specify any number of TGraph objects

Source:
Example
import { createTGraph, createTMultiGraph } from 'https://root.cern/js/latest/modules/core.mjs';
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

Description:

  • Following options supported ?opt1&opt2=3

Source:
Example
import { decodeUrl } from 'https://root.cern/js/latest/modules/core.mjs';
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.

Description:

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

Source:
Example
import { openFile } from 'https://root.cern/js/latest/modules/io.mjs';
import { draw } from 'https://root.cern/js/latest/modules/draw.mjs';
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.

Description:

  • Normally it is TCanvas object with list of primitives

Source:
Parameters:
Name Type Description
dom string | object

id of top div element or directly DOMElement
Returns:

produced JSON string

Type
string

(async) ensureTCanvas(painter, frame_kind)

Ensure TCanvas and TFrame for the painter object

Description:

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

Source:
Parameters:
Name Type Description
painter Object

painter object to process
frame_kind string | boolean

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

getTDatime()

Convert ROOT TDatime object into Date

Description:

  • Always use UTC to avoid any variation between timezones

Source:

graph2DTooltip()

Function handles tooltips in the mesh

Source:

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

Submit asynchronous http request

Description:

  • 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, expects binary data as response
Source:
Example
import { httpRequest } from 'https://root.cern/js/latest/modules/core.mjs';
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) loadModules(arg) → {Promise}

Load ES6 modules

Source:
Parameters:
Name Type Description
arg String

single URL or array of URLs
Returns:
Type
Promise

(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 sequentially)
Returns:
Type
Promise

(async) makeImage(args) → {Promise}

Create SVG/PNG/JPEG image for provided object.

Description:

  • Function especially useful in Node.js environment to generate images for supported ROOT classes, but also can be used from web browser

Source:
Example
// how makeImage can be used in node.js
import { openFile, makeImage } from 'jsroot';
let file = await openFile('https://root.cern/js/files/hsimple.root');
let object = await file.readObject('hpxpy;1');
let png64 = await makeImage({ format: 'png', object, option: 'colz', width: 1200, height: 800 });
let pngbuf = await makeImage({ format: 'png', as_buffer: true, object, option: 'colz', width: 1200, height: 800 });
Parameters:
Name Type Description
args object

function settings

Properties
Name Type Attributes Default Description
object object

object for the drawing
format string <optional>
 'svg'

image format like 'svg' (default), 'png' or 'jpeg'
option string <optional>
 ''

draw options
width number <optional>
 1200

image width
height number <optional>
 800

image height
as_buffer boolean <optional>
 false

returns image as Buffer instance, can store directly to file
use_canvas_size boolean <optional>
 false

if configured used size stored in TCanvas object
Returns:

with image code - svg as is, png/jpeg as base64 string or buffer (if as_buffer) specified

Type
Promise

(async) makeSVG(args) → {Promise}

Create SVG image for provided object.

Description:

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

Source:
Example
// how makeSVG can be used in node.js
import { openFile, makeSVG } from 'jsroot';
let file = await openFile('https://root.cern/js/files/hsimple.root');
let object = await file.readObject('hpxpy;1');
let svg = await makeSVG({ object, option: 'lego2,pal50', width: 1200, height: 800 });
Parameters:
Name Type Description
args object

function 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
use_canvas_size boolean <optional>
 false

if configured used size stored in TCanvas object
Returns:

with svg code

Type
Promise

openFile(arg) → {object}

Open ROOT file for reading

Description:

  • 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
Source:
Example
import { openFile } from 'https://root.cern/js/latest/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

Description:

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

Source:
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

Description:

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

Source:
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

Description:

  • depending from provided method sort differently objects

Source:
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

Description:

  • 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

Source:
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.

Description:

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

Source:
Example
import { openFile } from 'https://root.cern/js/latest/modules/io.mjs';
import { draw, redraw } from 'https://root.cern/js/latest/modules/draw.mjs';
let file = await openFile('https://root.cern/js/files/hsimple.root');
let obj = await file.readObject('hpxpy;1');
await draw('drawing', obj, 'colz');
let cnt = 0;
setInterval(() => {
   obj.fTitle = `Next iteration ${cnt++}`;
   redraw('drawing', obj, 'colz');
}, 1000);
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

Description:

  • 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

Source:
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

Description:

  • 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 };

Source:
Example
import { resize } from 'https://root.cern/js/latest/modules/base/ObjectPainter.mjs';
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

setDefaultDrawOpt()

Set default draw option for provided class

Source:
Example
import { setDefaultDrawOpt } from 'https://root.cern/js/latest/modules/draw.mjs';
  setDefaultDrawOpt('TH1', 'text');
  setDefaultDrawOpt('TH2', 'col');

setHistogramTitle()

Set histogram title

Description:

  • Title may include axes titles, provided with ';' symbol like "Title;x;y;z"

Source:

toJSON(obj, spacingopt) → {string}

Method converts JavaScript object into ROOT-like JSON

Description:

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

Source:
Example
import { openFile, draw, toJSON } from 'https://root.cern/js/latest/modules/main.mjs';
let file = await openFile('https://root.cern/js/files/hsimple.root');
let obj = await file.readObject('hpxpy;1');
obj.fTitle = 'New histogram title';
let json = toJSON(obj);
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 obj argument
Returns:

with produced object

Type
Promise

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

Process selector for the tree

Description:

  • function similar to the TTree::Process

Source:
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