1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Debugger Demo</title>
6  <script src="bin/debugger.js"></script>
7  <script>
8let index = 0;
9let surface;
10
11DebuggerInit({
12  locateFile: (file) => '/node_modules/debugger/bin/'+file,
13}).then((Debugger) => {
14  const player = new Debugger.SkpDebugPlayer();
15
16  // Define an event handler for the file input dialog
17  function readSkpFile(e){
18    // Did the change event result in the file-input element specifing a file? (user might have cancelled the dialog)
19    const file = e.target.files[0];
20    if (!file) {
21      return;
22    }
23    // create a callback for when the file finishes being read.
24    const reader = new FileReader();
25    reader.onload = function(e) {
26      // Convert e.target.result (an ArrayBuffer) into a typedarray,
27      // otherwise fileMem.set() below seems to have no effect.
28      const fileContents = new Uint8Array(e.target.result);
29      const size = fileContents.byteLength;
30      // Allocate memory in wasm to hold the skp file selected by the user.
31      const fileMemPtr = Debugger._malloc(size);
32      // Make a typed array view of that memory
33      let fileMem = new Uint8Array(Debugger.HEAPU8.buffer, fileMemPtr, size);
34      // Copy the file into it
35      fileMem.set(fileContents);
36      // Hand off pointer to wasm
37      player.loadSkp(fileMemPtr, size);
38      // From the loaded commands, Debugger now knows the bounds.
39      let bounds = player.getBounds();
40      // Resize our canvas to match
41      canvas = document.getElementById('debugger_view');
42      canvas.width = bounds.fRight - bounds.fLeft;
43      canvas.height = bounds.fBottom - bounds.fTop;
44      //Assume GPU selected initially
45      surface = Debugger.MakeWebGLCanvasSurface(canvas);
46
47      document.getElementById('command-count').innerHTML = player.getSize();
48      player.setClipVizColor(0);
49    };
50    reader.readAsArrayBuffer(file);
51  }
52
53  function playFile() {
54    interval = parseFloat(document.getElementById('interval').value);
55    let intervalID = setInterval(function() {
56        if (index < 789){
57          player.drawTo(surface, index);
58          surface.flush();
59          index++;
60        }
61    }, interval);
62  }
63
64  // Discard canvas when switching between cpu/gpu backend because it's bound to a context.
65  function replaceCanvas() {
66      canvas = document.getElementById('debugger_view');
67      let newCanvas = canvas.cloneNode(true);
68      let parent = canvas.parentNode;
69      parent.replaceChild(newCanvas, canvas);
70  }
71
72  document.getElementById('file-input')
73    .addEventListener('change', readSkpFile);
74
75  document.getElementById('play_button')
76    .addEventListener('click', playFile);
77
78  document.getElementById('overdraw')
79    .addEventListener('change', function(e) {
80      player.setOverdrawVis(e.target.checked);
81    });
82
83  document.getElementById('gpu_op_bounds')
84    .addEventListener('change', function(e) {
85      player.setGpuOpBounds(e.target.checked);
86    });
87
88  document.getElementById('clip_viz_color')
89    .addEventListener('change', function(e) {
90      // Remove the '#' from the hex color string.
91      // prepend an alpha value (0x50 or about 30%)
92      // then convert to an integer.
93      colorInt = parseInt("50"+e.target.value.substring(1),16);
94      player.setClipVizColor(colorInt);
95    });
96
97  document.getElementById('disable_clip_viz')
98    .addEventListener('click', function(e) {
99      // Setting the clip viz to transparent black makes it invisible.
100      player.setClipVizColor(0);
101    });
102
103  document.getElementById('get_json_command_list')
104    .addEventListener('click', function(e) {
105      result = player.jsonCommandList(surface);
106      console.log('getjsoncommandlist result '+result.substring(0,100)+'...');
107      commands = JSON.parse(result);
108      console.log('parsed json');
109    });
110
111  document.getElementById('backend_gpu')
112    .addEventListener('change', function(e) {
113      if (e.target.checked) {
114        replaceCanvas();
115        surface = Debugger.MakeWebGLCanvasSurface(document.getElementById('debugger_view'));
116      }
117    });
118
119  document.getElementById('backend_cpu')
120    .addEventListener('change', function(e) {
121      if (e.target.checked) {
122        replaceCanvas();
123        surface = Debugger.MakeSWCanvasSurface(document.getElementById('debugger_view'));
124      }
125    });
126
127});
128  </script>
129  </head>
130  <body>
131    <canvas id=debugger_view width=400 height=400></canvas>
132    <div style="float:right">
133      <input type="radio" name="backend" value="CPU" id="backend_cpu"> CPU
134      <input type="radio" name="backend" value="WebGL" id="backend_gpu" checked> WebGL<br>
135      <input type="file" id="file-input" /> | <span id="command-count">0</span> commands<br>
136      <input type="button" id="play_button" value="Play" />
137      command interval in ms
138      <input type="text" id="interval" value="20" /><br>
139      <input type="checkbox" id="overdraw" /> Overdraw vis<br>
140      <input type="checkbox" id="gpu_op_bounds" /> GPU Op bounds<br>
141      <input type="color" id="clip_viz_color" />Clip visualization color
142      <input type="button" id="disable_clip_viz" value="Disable" /><br>
143      <input type="button" id="get_json_command_list" value="Get JSON Command List" /><br>
144    <div>
145    <div style="float:clear"></div>
146  </body>
147</html>
148