THttpServer: remember layout(s) ; interact with frame from the code

jaromrax · March 13, 2019, 4:29pm

Dear Sergey (I just guess who can answer this),
I am trying to use the fantastic THttpServer with pyroot for monitoring.

I have managed:
1- to online update TGraphs
2- display them with their actual ranges - but only sometimes

I dont know how to :
3- make (in program) unzoom to continue online display (i must click ?;click TH1F;click “let update zoom”)
3- (re) start the viewer with the older/predefined layout [ every time Imust define the pagelayout ]
4- interact with canvas/pad - e.g. set grids, logy programaticaly [ it is maybe #3]

Would you have an advice? I searched the internet, looked briefly to tutorials…

Thank you in advance,
Jaromir

ROOT Version: 6.14.06
Platform: ubuntu
Compiler: Not Provided

linev · March 13, 2019, 7:07pm

Hi Jaromir,

Can you describe more precise your problem?
Do you have examples when range selection does not work?

This is more JSROOT problem/feature. Idea behind is following - once user changed zoom selection in the browser, selection remains even when object data updated from the server. And such zoom selection cannot be changed from the server. Only by unzooming actual data range will be displayed. Easiest way to make unzoom - double-click on the frame (place where hisograms/graphs are draw).

Many parameters can be defined with URL syntax (including layout). Like:

https://root.cern/js/latest/httpserver.C/?layout=grid2x2&item=Files/job1.root/hpxpy&opt=colz

You can reproduce create such link, if after drawing all necessary elements activates context menu over most top element (job1 in the example) and select Direct item menu command.

List of all available URL parameters can be found here:

github.com

root-project/jsroot/blob/master/docs/JSROOT.md#drawing-objects-in-jsroot

# JavaScript ROOT

The JSROOT project allows:
   - reading of binary and JSON ROOT files in JavaScript;
   - drawing of different ROOT classes in web browsers;
   - reading and drawing TTree data;
   - using in node.js.


## Installing JSROOT

In most practical cases it is not necessary to install JSROOT - it can be used directly from project web sites <https://root.cern/js/> and <https://jsroot.gsi.de/>.

When required, there are following alternatives to install JSROOT on other web servers:

   - download and unpack [provided](https://github.com/root-project/jsroot/releases) packages (recommended)
   - use [npm](https://npmjs.com/package/jsroot) package manager and invoke `npm install jsroot`
   - clone master branch from [repository](https://github.com/root-project/jsroot/)

This file has been truncated. show original

Some of these parameters can be predefined already on the server side (see tutorials/http/httpcontrol.C macro)

   serv->SetItemField("/","_monitoring","5000");
   serv->SetItemField("/","_layout","grid2x2");
   serv->SetItemField("/","_drawitem","[hpxpy,hpx,Debug]");
   serv->SetItemField("/","_drawopt","col");

Unfortunately, this is not documented feature.

Most easy way to restore grid or log settings - register TCanvas to the THttpServer. These settings belongs to TCanvas. But in principle, one could use gridx or logx draw option when drawing histograms. Like:

https://root.cern/js/latest/httpserver.C/?item=Files/job1.root/hpx&opt=gridx,logy

Again, this is extra features of JSROOT which are not directly documented. Normally JSROOT supports just regular draw options like “L” or “HIST”

Hope this helps.

Regards,
Sergey

linev · March 14, 2019, 7:20am

I add short section about UI customization into THttpServer docs:

github.com

root-project/jsroot/blob/master/docs/HttpServer.md#customize-user-interface

# HTTP server in ROOT

The idea of THttpServer is to provide remote http access to running ROOT application and enable HTML/JavaScript user interface. Any registered object can be requested and displayed in the web browser. There are many benefits of such approach:

   * standard http interface to ROOT application
   * no any temporary ROOT files to access data
   * user interface running in all browsers

## Starting the HTTP server

To start the http server, at any time, create an instance of the [THttpServer](https://root.cern/root/html/THttpServer.html) class like:

    serv = new THttpServer("http:8080");

This will start a [civetweb](https://github.com/civetweb/civetweb)-based http server on the port 8080. Then one should be able to open the address "http://localhost:8080" in any modern browser (Firefox, Chrome, Opera, Safari, IE11) and browse objects created in application. By default, the server can access files, canvases, and histograms via the gROOT pointer. All those objects can be displayed with JSROOT graphics.

There is a [server snapshot](https://root.cern/js/latest/httpserver.C/?layout=simple&item=Canvases/c1) of running macro [tutorials/http/httpserver.C](https://github.com/root-project/root/blob/master/tutorials/http/httpserver.C) from ROOT tutorials.

One could specify several options when creating http server. They could be add as additional URL parameters to the constructor arguments like:

This file has been truncated. show original

jaromrax · March 16, 2019, 9:24pm

Dear Sergei,
thank you very much for the information. It is quite dense for me, but SetItemField works great. I am busy these days to prepare a quality followup question on updating TGraph.

I try briefly:
I set a new point of TGraph(s) on every update (5 seconds) g.SetPoint( g1.GetN(), x,vals[0] ) and I try to convince the graph to unzoom to the actual range. Usually I must manually clear and draw panels again to get the Y range expanded:

#pyroot
# this works fine .. x being the time
g.GetXaxis().SetLimits( x-ROOT.TIMEBUFFER, x+10)
# this sometimes yes, rather not much
if mn!=mx:
   g.SetMaximum( mx )
   g.SetMinimum( mn )
   g.GetYaxis().SetLimits( mn,mx )
   g.GetHistogram().GetYaxis().SetRangeUser(mn,mx)

Maybe you already have some working example already in your pocket.
Best reagards
Jaromir

linev · March 16, 2019, 9:45pm

Hi Jaromir,

I do not have such example with TGraph, but I will try it.
I intensively using TGraph painter of JSROOT with other framework.

Sorry for wrong recommendation in previous version - you should set ranges.
See how I did it in example:

http_graph.C (1.2 KB)

#include <THttpServer.h>
#include <TGraph.h>
#include <TTimer.h>
#include <TAxis.h>
#include <TMath.h>

TGraph *gr = new TGraph(100);
int cnt = 0;

void update_graph()
{
   for (int n=0;n<100;n++) {
      gr->SetPoint(n, n+cnt, 10*TMath::Sin((n+cnt)/10.));
   }
   gr->GetXaxis()->SetLimits(cnt - 5, cnt + 105);
   gr->GetYaxis()->SetLimits(-11, 11);

   cnt++;
}

void http_graph()
{
   // Create some histograms, a profile histogram and an ntuple
   gr->SetName("graph");
   gr->SetTitle("Sinus");

   update_graph();

   // http server with port 8080, use jobname as top-folder name
   THttpServer* serv = new THttpServer("http:8080");

   serv->Register("/", gr);
   
   serv->SetItemField("/","_monitoring","100");
   serv->SetItemField("/","_layout","simple");
   serv->SetItemField("/","_drawitem","graph");
   serv->SetItemField("/","_drawopt","AL");
   
   TTimer *tm = new TTimer(100);
   tm->SetCommand("update_graph()");
   tm->TurnOn();
}

Regards,
Sergey

jaromrax · March 18, 2019, 9:10am

Dear Sergey, thanks for the example. Two small but important differences to my case (that introduce more complications):

i start with zero points and every 5s I add one point. And run for days.
i want to see monitored last 1 hour/5minutes/24 hours - depending on user will (I set a global variable for this). And the freedom to go back in time and check what happened 2 days ago.
Best regards, thanks for the effort,
Jaromir

linev · March 18, 2019, 9:20am

Hi Jaromir,

More points should not be a problem.
But automatic selection of last 1 hour is a problem - I never develop/test such functionality in JSROOT.
I will check if something can be done.

But in our DAQ framework I use different approach.
I collect timed data on server side, but never send complete set of points to client - only when they really requested. And normally only last 100 points are seen.

Probably, you could follow same approach. Just create several TGraphs - with points for last 1hour, 5minutes and so on. And select these graphs by name on client side or just replace them on server - by re-registering:

serv->Register("/", appropriate_gr);

One can replace any registered object in THttpServer at any time - there no any “hidden” states.
This will save you data traffic between server and client.

Regards,
Sergey

linev · March 18, 2019, 12:41pm

Hi,

I add new feature which allow to unzoom TGraph, which has more points than shown.
It can be tested with following macro:

http_graph.C (1.3 KB)

Here TGraph always growing, but configured to show only last 100 points.
If one double-click on the frame (unzoom), all TGraph points will be shown. If double-click second time, range selection will be restored and continue to update.

Code is now only in JSROOT dev version - it configured like:

serv->SetJSROOT("http://jsroot.gsi.de/dev/");

Or you can checkout dev branch from jsroot repository and configure JSROOTSYS location like:

export JSROOTSYS=/home/user/git/jsroot

Regards,
Sergey

jaromrax · March 18, 2019, 2:19pm

Fantastic. One practical thing would be helpful - to have a possibility to zoom in and see the monitoring. I can (sometimes) manage now with clicking (?)-TH1F-Let update zoom. But it is very deep for a casual user with 5 graphs.

One important point I didnt realize: every (monitoring) update, all objects are re-sent to all clients, are they?

Best regards
Jaromir

linev · March 18, 2019, 2:45pm

As I said - mouse double-click on the axes or inside frame should have same effect.

Only displayed objects are resend with every monitoring cycle.

jaromrax · March 23, 2019, 9:31am

Dear Sergey, I tried to elaborate a bit, I create 3 graphs with different # of points. I use that dev JS you have pointed in your example.
I see two things that might improve the usage a lot:

sometimes on must doubleclick 3 or more times to get the the continuous regime,
when I make zoom on y-axis and I want to have continuous update, I must click (?), click TH1F, click Let Update Zoom. Could this great function be easier accessible somehow? Even for all graphs at once.
Thank you for your help and the improvements you already did.
best regards
Jaromir

linev · March 25, 2019, 1:28pm

Hi Jaromir,

In normal situation it should be two double-clicks.
But if update comes in-between, more clicks may be required.

It is very special functionality, which is not very evident for normal user.
Now in “dev” version I tried to put same functionality into “Toggle zoom/unzoom” button.
If you do unzoom with it, range update from server will be allowed.
Please check if fits to you.

Regards,
Sergey

jaromrax · March 26, 2019, 12:25pm

Dear Sergey,
nice shortcut ctrl-*.

To stress the typical situation, I use a function like:

double val=10*TMath::Sin(cnt/10.) * TMath::Exp(-cnt/100.);

To set the limits of TGraph, I use then:

gr100->GetYaxis()->SetLimits(gr100->GetMinimum(), gr100->GetMaximum() );

Everything is nice, unless I need to “cut” an y-range from a long TGraph and I need to watch it. However, this I can (as you suggested before) overcome by create short (clones of) TGraph, that displays the last 100 points and sets the range there.

“let update zoom” seems still very nice thing but hidden a bit for a user.

Thank you,
enjoying and looking forward your future code,
Jaromir

linev · March 26, 2019, 12:55pm

Hi Jaromir,

Does ctrl + * work you?
It is keyboard shortcut for toggling autozoom/unzoom functionality.

I do not like to have it as extra button - just to avoid confusion.

Regards,
Sergey

jaromrax · March 26, 2019, 2:24pm

Does ctrl + * works nice, I have already acknowledged. Alhough nice, the functionality of “let update zoom” is supreme. Regards,Jaromir

system · April 9, 2019, 2:24pm

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