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