New tools to build web-based graphics and user interfaces in ROOT
Bertrand Bellenot (CERN), Olivier Couet (CERN), Sergey Linev (GSI, Darmstadt), Axel Naumann (CERN) Motivation
• Why to change current graphics? – X11 vanishes from MacOS – OpenGL + remote X11 – single threaded – long-term maintenance problems – lack of new technologies
• If change – do it right: – portable – remote displays – multiple views – multi threaded
11.09.2018 S.Linev, web-based ROOT graphics and GUI 2 ROOT7 graphics and UI
• Web-based http – C++ server – JavaScript clients
• Reuse existing components – THttpServer for communication – TBufferJSON for I/O – JavaScript ROOT as code base for clients
11.09.2018 S.Linev, web-based ROOT graphics and GUI 3 THttpServer
• http access to running ROOT application – civetweb – fastcgi • execution of commands and methods • objects hierarchy inspection • objects visualization with JSROOT – possibility for fully custom UI • websockets support – bidirectional – binary data (when necessary) – fallback solution with long poll requests
11.09.2018 S.Linev, web-based ROOT graphics and GUI 4 TBufferJSON
• Converts any streamable object into JSON • ROOT I/O remains fully on server side • Support of custom streamers • Optional arrays compression • Now also reading of objects from JSON
• Significantly simplifies data exchange between C++ server and JavaScript-based clients
11.09.2018 S.Linev, web-based ROOT graphics and GUI 5 JavaScript ROOT
• ROOT objects display in web browsers • Binary data reading, including TTree • ROOT JSON format support • User interface for the THttpServer • Full integration with Node.js
• Developed since 2012 – https://root.cern/js/ – https://github.com/root-project/jsroot
11.09.2018 S.Linev, web-based ROOT graphics and GUI 6 https://root.cern/js/latest/examples.htm#tgraph_excl
11.09.2018 S.Linev, web-based ROOT graphics and GUI 7 https://root.cern/js/latest/examples.htm#thstack_lego
11.09.2018 S.Linev, web-based ROOT graphics and GUI 8 https://root.cern/js/latest/examples.htm#tgeo_proj
11.09.2018 S.Linev, web-based ROOT graphics and GUI 9 https://root.cern/js/latest/examples.htm#ttree_cut
11.09.2018 S.Linev, web-based ROOT graphics and GUI 10 RWebWindow class
• Server-side entity in new ROOT7 window management
• Main functionality: – display window in web browser(s) – manage multiple connections with clients – data transfer to/from clients – support of batch (headless) mode
11.09.2018 S.Linev, web-based ROOT graphics and GUI 11 RWebWindow - server side
using namespace ROOT::Experimental;
// create window instance auto window = RWebWindowsManager::Instance()->CreateWindow();
// configure html page loaded when window shown window->SetDefaultPage("file:Main.html");
// this is call-back, invoked when message received from client window->SetDataCallBack( [](unsigned connid, const std::string &arg) { printf(“Get msg %s from %u\n”, arg.c_str(), connid); } );
// configure predefined geometry window->SetGeometry(300, 300);
// display window window->Show();
11.09.2018 S.Linev, web-based ROOT graphics and GUI 12 RWebWindow - client side
11.09.2018 S.Linev, web-based ROOT graphics and GUI 13 RWebWindow clients
localhost
RWebWindow Firefox JavaScript,
websocket HTML, SVG, http server http WebGL http://localhost:8080/win1/ • Any modern web browser – typically on the same host • THttpServer bound to loopback address • Communication via websockets
11.09.2018 S.Linev, web-based ROOT graphics and GUI 14 RWebWindow clients - LAN lxplus024.cern.ch Opera lxplus025.cern.ch JavaScript, HTML, SVG,
RWebWindow websocket WebGL http server http
http://lxplus025.cern.ch:8080/win1/ • No any difference with local clients • Bound THttpServer with normal IP address • Communication via websockets
11.09.2018 S.Linev, web-based ROOT graphics and GUI 15 RWebWindow clients - WAN
lxplus025.cern.ch
RWebWindow
lxi001.gsi.de
http server http Chrome JavaScript, websocket, async http HTML, SVG, http://lxplus025.cern.ch:8080/win1/ WebGL • websockets not always work – firewall/proxy limitation – not supported in fastcgi – automatic fall back to long polling (async http)
11.09.2018 S.Linev, web-based ROOT graphics and GUI 16 RWebWindow - multiple clients lxplus024.cern.ch Opera lxplus025.cern.ch JavaScript, HTML, SVG,
RWebWindow websocket WebGL Firefox JavaScript, lxi001.gsi.de
websocket HTML, SVG, http server http WebGL Chrome JavaScript, websocket, async http HTML, SVG, http://lxplus025.cern.ch:8080/win1/ WebGL
• Same window can be displayed multiple times • Separate connection for each client
11.09.2018 S.Linev, web-based ROOT graphics and GUI 17 Special displays
RWebWindow RWebWindow CEF QWebEngine JavaScript, JavaScript,
API API server HTML, SVG, HTML, SVG, server WebGL WebGL
• Two kind of special displays: – Chromium Embedded Framework (CEF) – QWebEngine in Qt5 • Create and manage window(s) directly in C++ • Communication via dedicated APIs - no any http/websockets • Headless mode not (yet) supported
• Made as optional plugins, fully transparent
11.09.2018 S.Linev, web-based ROOT graphics and GUI 18 Batch mode
• Produce images without creating display • Reuse client and server code as is
• Headless Google Chrome – on Linux with WebGL! • Headless Mozilla Firefox – no WebGL, use THREE.CanvasRenderer for 3D • Potentially Node.js – with “canvas” module, required extra system libs
11.09.2018 S.Linev, web-based ROOT graphics and GUI 19 Multi threading
• Default: – all RWebWindow runs in main thread
• Optional: – special thread for THttpServer – dedicated thread for every RWebWindow – dedicated thread(s) for clients communication
• Need to care about I/O thread safety
11.09.2018 S.Linev, web-based ROOT graphics and GUI 20 ROOT7 GUI
• ROOT7 needs not only graphics – RBrowser, RFitPanel, RGEditor, ...
• Library for buttons, checkbox, list, menu, ... – SAP OpenUI5 https://openui5.org/
• OpenUI fully supported in RWebWindow – any other library can be used
11.09.2018 S.Linev, web-based ROOT graphics and GUI 21 OpenUI usage
using namespace ROOT::Experimental;
// create window instance auto window = RWebWindowsManager::Instance()->CreateWindow();
// configure XML view file from current directory window->SetPanelName(“localapp.view.TestPanel");
// this is call-back, invoked when message received from client window->SetDataCallBack( [](unsigned connid, const std::string &arg) { printf(“Get msg %s from %u\n”, arg.c_str(), connid); } );
// configure predefined geometry window->SetGeometry(300, 300);
// display window window->Show(); See: https://github.com/linev/examples/tree/master/panel
11.09.2018 S.Linev, web-based ROOT graphics and GUI 22 RCanvas – see Olivier talk
menu
Graphics attributes editor
11.09.2018 S.Linev, web-based ROOT graphics and GUI 23 RFitPanel – see Iliana talk
11.09.2018 S.Linev, web-based ROOT graphics and GUI 24 WebEve* prototype
*Alja Mrak-Tadel and Matevz Tadel for CMS 11.09.2018 S.Linev, web-based ROOT graphics and GUI 25 Status
• Code is in ROOT master repository – compile with -Droot7=ON -Dcxx14=ON flags
• Several examples: – see https://github.com/linev/examples/ – see tutorials/v7/ in ROOT
• Still in ROOT::Experimental namespace – but API is trivial and therefore relatively stable
11.09.2018 S.Linev, web-based ROOT graphics and GUI 26 Plans and ideas
• Authentication and authorization – very simple method supported by civetweb – support OAuth technology in the future
• RWebWindow offline mode – display clients HTML without running ROOT
• Implementation of main ROOT widgets – RCanvas, RFitPanel, RBrowser, RWebEve
11.09.2018 S.Linev, web-based ROOT graphics and GUI 27