[webgui] introduce simple RWebWindow tutorial

linev · linev · commit 9dc3259e5e9c · 2019-07-01T19:05:21.000+02:00
It shows simple communication between c++ server and JS client
diff --git a/tutorials/webgui/webwindow/client.html b/tutorials/webgui/webwindow/client.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    <title>RWebWindow test</title>
+
+    <script src="/jsrootsys/scripts/JSRootCore.js" type="text/javascript"></script>
+  </head>
+
+  <body>
+     <button onclick="SendMsg('get_text')">Text</button> 
+     <button onclick="SendMsg('get_binary')">Binary</button> 
+     <button onclick="SendMsg('halt')">Halt</button> 
+     <div id="main"></div>
+  </body>
+
+  <script>
+
+    var conn_handle = null;
+
+    function SendMsg(txt) {
+       if (conn_handle)
+          conn_handle.Send(txt);
+    }
+    
+    function AddOutput(msg) {
+       document.getElementById("main").innerHTML += msg + "<br>";
+    }
+
+    JSROOT.ConnectWebWindow({
+       // prereq: "2d",  /* one could specify different JSROOT components like 2d or geom
+       // prereq_logdiv: "main",  /* div id where loading of JSROOT scripts will be logged */
+       // callback: function(handle) { AddOutput("init done"); },  /* if necessary, initial callback can be cacthed */
+       receiver: {
+          // method called when connection to server is established
+          OnWebsocketOpened: function(handle) {
+             handle.Send("Init msg from client");
+             conn_handle = handle;
+             AddOutput("Connected");
+          },
+      
+          // method with new message from server
+          OnWebsocketMsg: function(handle, msg, offset) {
+             if (typeof msg != "string") {
+                var arr = new Float32Array(msg, offset);
+                AddOutput("bin: " + arr.toString());
+             } else { 
+                AddOutput("txt: " + msg);
+             }
+          },
+          
+          // method called when connection is gone
+          OnWebsocketClosed: function(handle) {
+             conn_handle = null;
+             // when connection closed, close panel as well
+             if (window) window.close();
+          }
+       }
+    });
+
+  </script>
+
+</html>
diff --git a/tutorials/webgui/webwindow/server.cxx b/tutorials/webgui/webwindow/server.cxx
@@ -0,0 +1,64 @@
+/// \file
+/// \ingroup tutorial_webgui
+///  This program demonstrates minimal server/client code for working with RWebWindow class
+///  File server.cxx shows how RWebWindow can be created and used
+///  In client.html simple client code is provided.
+///
+/// \macro_code
+///
+/// \author Sergey Linev
+
+
+#include <ROOT/RWebWindowsManager.hxx>
+
+std::shared_ptr<ROOT::Experimental::RWebWindow> window;
+
+int counter{0};
+
+void ProcessData(unsigned connid, const std::string &arg)
+{
+   if (arg == "CONN_READY") {
+      printf("connection established %u\n", connid);
+      return;
+   }
+
+   if (arg == "CONN_CLOSED") {
+      printf("connection closed\n");
+      return;
+   }
+
+   printf("Get msg %s \n", arg.c_str());
+
+   counter++;
+
+   if (arg == "get_text") {
+      // send arbitrary text message
+      window->Send(connid, Form("Message%d", counter));
+   } else if (arg == "get_binary") {
+      // send float array as binary
+      float arr[10];
+      for (int n = 0; n < 10; ++n)
+         arr[n] = counter;
+      window->SendBinary(connid, arr, sizeof(arr));
+   } else if (arg == "halt") {
+      // terminate ROOT
+      ROOT::Experimental::RWebWindowsManager::Instance()->Terminate();
+   }
+}
+
+void server()
+{
+   // create window, manager can handle many windows a time
+   window = ROOT::Experimental::RWebWindowsManager::Instance()->CreateWindow();
+
+   // configure default html page
+   // either HTML code can be specified or just name of file after 'file:' prefix
+   window->SetDefaultPage("file:client.html");
+
+   // this is call-back, invoked when message received from client
+   window->SetDataCallBack(ProcessData);
+
+   window->SetGeometry(300, 500); // configure predefined geometry
+
+   window->Show();
+}
