pn11/JSROOT.md

## JSROOT.md

      
    Raw
  

              JSROOT.md
            
          
    JSROOTの使い方

とりあえずROOTファイルを置いてWebブラウザで見れるようにする方法。マウスで範囲を指定したり、右クリックで軸をLogにしたりできる。ROOTファイルではなくJSONでデータを渡すことが推奨されているけど、とりあえずこっちで。
https://root.cern.ch/js/3.4/demo/example_file.htm
の真似をしてやってみる。このHTMLをそのまま自分のサーバーに置けば多分動作するはず。このままだとJavaScriptとROOTファイルがCERNに置いてあるので、これも自前にしたい。
htmlのソースを見るとJSRootCor.min.jsというのを呼び出している。JavaScriptの自動生成されたのか中身はごちゃごちゃなので見なかったことにする。このJavaScriptはJSROOTのソースをダウンロードすると入っているので、

JavaScript ROOT

からダウンロードする。(2015/04/20現在はver.3.4)
ROOTファイルは適当に自分で作ればよい。例えばhttps://root.cern.ch/root/html/TH1.htmlに書いてあるように
TH1F h1("h1", "histo from a gaussian", 100, -3, 3);
h1.FillRandom("gaus", 10000);
h1.SaveAs("test.root");
とすればh1という名前のTH1Fが入ったtest.rootができるので、これと、さっきダウンロードしたJSROOTのソースをサーバーの適当な場所に置いて、以下のようなHTMLを置くと動く。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <meta http-equiv="X-UA-Compatible" content="IE=Edge; text/html">

   <title>Reading object from the ROOT file</title>

   <script src="JsRoot34/scripts/JSRootCore.min.js?io&2d&onload=createGUI" type="text/javascript"></script>

   <script type='text/javascript'>
	
      function createGUI() {
         var filename = "test.root";
         new JSROOT.TFile(filename, function(file) {
           file.ReadObject("h1;1", function(obj) {
               JSROOT.draw("drawing", obj, "hist");
            });
         });
      }
   </script>

</head>

<body>
  <div id="drawing" style="width:800px; height:600px"></div>
</body>

</html>
見ればすぐわかるけどJSRootCor.min.jsの場所は
<script src="JsRoot34/scripts/JSRootCore.min.js?io&2d&onload=createGUI" type="text/javascript"></script>

というところで指定している。また、ROOT fileは
var filename = "test.root";

で指定していて、ヒストグラムなどのオブジェクトの名前は
file.ReadObject("h1;1", function(obj) {  /* --- */  }

で指定している。これで、とりあえず任意のヒストグラム（少なくともTH1とTH2）はWeb上で見れるようになった。あと、TCanvasもDrawできたので、とりあえずCanvasにしてしまえば何でも書ける（TLegendとか、X軸を時間にするとか何でもできる）。
To do的な


https://root.cern.ch/js/3.4/index.htm?nobrowser&file=../files/hsimple.root&item=hprof;1

でも出来そう。これだとJSRootCore.min.jsではなくJSRootCore.jsを使っている。JSRootCore.jsはソースが読めて自分でいじれそうなのでこっちのが良さそう。