demo/th2.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Create, draw and update TH2 object</title>
      <link rel="shortcut icon" href="../img/RootIcon.ico"/>
   </head>
   <body>
      <div id="object_draw" style="width: 800px; height:600px"></div>
   </body>

   <script type='module'>
      import { createHistogram, redraw } from '../modules/main.mjs';

      let cnt = 0;
      function updateGUI() {
         let histo = createHistogram('TH2I', 20, 20);
         for (let iy = 0; iy < 20; iy++)
            for (let ix = 0; ix < 20; ix++) {
               let bin = histo.getBin(ix+1, iy+1), val = 0;
               switch (cnt % 4) {
                  case 1: val = ix + 19 - iy; break;
                  case 2: val = 38 - ix - iy; break;
                  case 3: val = 19 - ix + iy; break;
                  default: val = ix + iy; break;
               }
               histo.setBinContent(bin, val);
            }

         histo.fName = 'generated';
         histo.fTitle = `Drawing ${cnt++}`;
         redraw('object_draw', histo, 'colz');
      }
      updateGUI();
      setInterval(updateGUI, 3000);
   </script>
</html>