Members
(constant) atob_func
atob function in all environments
(constant) btoa_func
btoa function in all environments
source_dir
Location of JSROOT scripts
Automatically detected and used to load other scripts or modules
version
version id and date
Produced by concatenation of version_id
and version_date
Like '7.0.0 14/04/2022'
version_date
version date
Release date in format day/month/year like '14/04/2022'
version_id
version id
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
List of supported draw options could be provided, separated with ';'
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args |
object | arguments Properties
|
addUserStreamer()
Add custom streamer
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
|
Returns:
Object3D with created model
- Type
- object
(async) buildGUI(gui_element, gui_kind) → {Promise}
Build main GUI
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 |
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
|
Returns:
for ready-to-use WebWindowHandle
instance
- Type
- Promise
create(typename)
Create some ROOT classes
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
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
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
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
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
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
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.
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 |
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
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
isNodeJs()
Indicates if running inside Node.js
(async) loadScript(url) → {Promise}
Load script or CSS file into the browser
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.
Function especially useful in Node.js environment to generate images for supported ROOT classes
Parameters:
Name | Type | Description | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args |
object | contains different settings Properties
|
Returns:
with svg code
- Type
- Promise
openFile(arg) → {object}
Open ROOT file for reading
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
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
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
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.
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 |
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
setDefaultDrawOpt()
Set default draw option for provided class
toJSON(obj, spacingopt) → {string}
Method converts JavaScript object into ROOT-like JSON
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
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args |
object | string | different setting or simply draw expression Properties
|
Returns:
with object like { obj: draw_object, opt: draw_options }
- Type
- Promise
(async) treeProcess(tree, selector, argsopt) → {Promise}
Process selector for the tree
function similar to the TTree::Process
Parameters:
Name | Type | Attributes | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
tree |
object | instance of TTree class |
|||||||||||||
selector |
object | instance of |
|||||||||||||
args |
object |
<optional> |
different arguments Properties
|
Returns:
with TSelector instance
- Type
- Promise