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> 8 var index = 0; 9 10 DebuggerInit({ 11 locateFile: (file) => '/node_modules/debugger/bin/'+file, 12 }).ready().then((Debugger) => { 13 const surface = Debugger.MakeSWCanvasSurface('debugger_view'); 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.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 }; 39 reader.readAsArrayBuffer(file); 40 } 41 42 function playFile() { 43 interval = Number(document.getElementById('interval').value) 44 var intervalID = setInterval(function(){ 45 if (index < 789){ 46 player.drawTo(surface, index); 47 surface.flush(); 48 index++; 49 console.log("index = "+index); 50 } 51 }, interval); 52 } 53 54 document.getElementById('file-input') 55 .addEventListener('change', readSkpFile, false); 56 57 document.getElementById('playbutton') 58 .addEventListener('click', playFile, false); 59 60 }); 61 </script> 62 </head> 63 <body> 64 <canvas id=debugger_view width=720 height=1280></canvas> 65 <div style="float:right"> 66 <input type="file" id="file-input" /><br> 67 <input type="button" id="playbutton" value="Play" /> 68 command interval in ms 69 <input type="text" id="interval" value="20" /> 70 <div> 71 <div style="float:clear"></div> 72 </body> 73 </html> 74
