Load TEVE elements interactively in JSROOT

I can load a saved Geometry created via TGeo locally. It displays on a firefox browser nicely. See the code extract below.
My question is: is it possible to interactively load TEVE tracks or TEVEBoxSets (or their equivalent in JSROOT)?
I other words there would be a button that runs a script (Python or C++) which retrieves an event from a run.root file and displays the hits in the JSROOT geometry on the webpage.
So far the examples which I have seen (like this one) are not interactive, i.e the tracks are pre-loaded from the geometry and the user cannot press on a button to load the next event.
Is there a way to do this in JSROOT?


 <script src="scripts/JSRootCore.js" type="text/javascript"></script>
<script type='text/javascript'>
var filename ="/path/to/file/MyTGeoGeometry.root";  //local
JSROOT.OpenFile(filename, function(file) {
        file.ReadObject("Default;1", function(obj) {
           JSROOT.draw("drawing", obj);
loading drawing..
<div id="drawing" style="width:1200px; height:600px"></div> 

ROOT 6.10/08 mac os 10.13.4

Hi Sebastien,

There are many ways to place button on the HTML page and assign JavaScript call.
You can use plain HTML, jQuery or OpenUI5 or many-many other frameworks. See JSROOT example with openui.

When button pressed, in JavaScript you can use XMLHttpRequest to ask your HTTP server produce some new data for you. It can be any server, supporting CGI or PHP scripts. Or you can use THttpServer class, which can provide such data directly from running ROOT application.

And finally, retrieved objects (hits, tracks, …) can be displayed together with geometry. Simple example doing this with ROOT files I can provide next week.

But next steps - navigating through displayed objects, enable/disable some tracks/hits, show extra info about tracks - not yet fully implemented in JSROOT.
This functionality planned in WebEve project, which is developed recently.


ok thanks, I’ll try that.

Hi Sebastien,

I create example with my developer version:


Source code you can find here

Using addExtras method, you can add different supported objects to the TGeoPainter.


Hi Sergey,

thanks a lot for the example. Do you have the files evegeoshape.json.gz and the root file with the tracks eve_tracks.root? I will help to understand and I can’t find them for some reason.
If I understand correctly in the example you load Evetracks and geometry from pre-generated root files. I would like to directly load the tracks and hits in the window by reading and processing a run file interactively. Exactly like I do in TEVE but online essentially.
I tried running my root macro with the THttpServer and then open a browser window with the corresponding address http://localhost:8080. I summarised what the macro does below (if you need the full code I can also provide it)
The canvas with the filled histograms loads nicely on the browser, but the geometry and the TEVEBoxSet objects are nowhere to be found. Locally no problem I get it all on the TEVEWindow.
I guess WebEve will be able to cope with this? For now is there a workaround? Essentially I would like the user to press on “next event” and have the tracks appearing on the pre-loaded geometry.

When you say “retrieved objects (hits, tracks, …) can be displayed together with geometry”, you mean they should first be saved in a root file and then this root file must be re-opened?
Or is there a way to do something like myTEVEBoxset.Draw() directly on the pre-loaded geometry?



gEve= TEveManager.Create()
#declare some histograms to be filled
h2=TH2F("h2 hit_start_time","h2_hit_start_time",200,-100,100,200,-100,100)

#load geometry in TGeo
gEve= TEveManager.Create()
gGeo= gEve.GetGeometry(GDML_file_name)
top_node =  gGeo.GetTopNode()
TopGeoNode = TEveGeoTopNode(gGeo, top_node)

# now load a root file and loop on tracks and hits, fill a EVEboxset

#outside of loop update the window

# also draw the canvas with the histograms

Hi Sebastien,

Of course, you can use THttpServer. There is no big difference if you read data from files
or access same data from THttpServer. Here is minimal example, which reads data in ROOT macro and export them to THttpServer:

void geom_test()
   TFile* fgeom = TFile::Open("http://mtadel.home.cern.ch/mtadel/root/alice_mini_geom.root");
   if (!fgeom)    return;
   TEveGeoShapeExtract* gse = (TEveGeoShapeExtract*) fgeom->Get("Gentle");
   delete fgeom;

   TFile *ftr = TFile::Open("https://root.cern/js/files/geom/eve_tracks.root");
   if (!ftr) return;
   TList *tracks = (TList *) ftr->Get("tracks");
   delete ftr;


   THttpServer *serv = new THttpServer("http:8088");
   serv->Register("", gse);
   serv->Register("", tracks);

Once such server is running, you can display geometry and tracks using URL: http://localhost:8088/?item=[Objects/Gentle,Objects/tracks]

If you would like, you can create your own HTML page:


And inside your page you can do similar coding as here: http://jsroot.gsi.de/dev/demo/read_geometry_tracks.htm

When accessing data from THttpServer, one uses root.json requests - see THttpServer docu.

But again - it is not yet fully functional event display.


ok thanks. This looks good. From what I get by reading the example I could run the python script which fills a TList with the TEveObjects (tracks, boxsets,…) retrieve them directly and display them on the geometry. (I don’t want to have to write object to root file, close the file and then re-open it or each event).
I will try and let you know how it goes.


Hi Sebastien,

Not all TEVE primitives are supported. Tracks and points -yes, but not TEveBoxSet.
But they could be implemented - just let me know that is missing. Best if you can provide ROOT files with such data.


This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.