skia2/experimental/wasm-skp-debugger/debugger/index.html
Nathaniel Nifong cfdf87ecd2 fill out more of SkDebugCanvas interface
Added methods for toggling clip viz, overdraw viz, gpu bound viz.
methods for getting number of commands, toggling command visibility and deleting commands.
Added method for writing out json command list.

bound methods with emscrpiten and connected up to buttons in barebones interface to prove they're working.


Bug: skia:
Change-Id: I3f733b13db00ce5d14b1b5170de8fb66102c8b14
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/199938
Commit-Queue: Nathaniel Nifong <nifong@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>
2019-03-14 13:50:24 +00:00

121 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Debugger Demo</title>
<script src="bin/debugger.js"></script>
<script>
var index = 0;
DebuggerInit({
locateFile: (file) => '/node_modules/debugger/bin/'+file,
}).ready().then((Debugger) => {
let surface;
const player = new Debugger.SkpDebugPlayer();
// Define an event handler for the file input dialog
function readSkpFile(e){
// Did the change event result in the file-input element specifing a file? (user might have cancelled the dialog)
const file = e.target.files[0];
if (!file) {
return;
}
// create a callback for when the file finishes being read.
const reader = new FileReader();
reader.onload = function(e) {
// Convert e.target.result (an ArrayBuffer) into a typedarray,
// otherwise fileMem.set() below seems to have no effect.
const fileContents = new Uint8Array(e.target.result);
const size = fileContents.byteLength;
// Allocate memory in wasm to hold the skp file selected by the user.
const fileMemPtr = Debugger._malloc(size);
// Make a typed array view of that memory
let fileMem = new Uint8Array(Debugger.buffer, fileMemPtr, size);
// Copy the file into it
fileMem.set(fileContents);
// Hand off pointer to wasm
player.loadSkp(fileMemPtr, size);
// From the loaded commands, Debugger now knows the bounds.
let bounds = player.getBounds();
// Resize our canvas to match
canvas = document.getElementById('debugger_view');
canvas.width = bounds.fRight - bounds.fLeft;
canvas.height = bounds.fBottom - bounds.fTop;
surface = Debugger.MakeSWCanvasSurface('debugger_view');
document.getElementById('command-count').innerHTML = player.getSize();
player.setClipVizColor(0);
};
reader.readAsArrayBuffer(file);
}
function playFile() {
interval = parseFloat(document.getElementById('interval').value);
var intervalID = setInterval(function() {
if (index < 789){
player.drawTo(surface, index);
surface.flush();
index++;
}
}, interval);
}
document.getElementById('file-input')
.addEventListener('change', readSkpFile);
document.getElementById('play_button')
.addEventListener('click', playFile);
document.getElementById('overdraw')
.addEventListener('change', function(e) {
player.setOverdrawVis(e.target.checked);
});
document.getElementById('gpu_op_bounds')
.addEventListener('change', function(e) {
player.setGpuOpBounds(e.target.checked);
});
document.getElementById('clip_viz_color')
.addEventListener('change', function(e) {
// Remove the '#' from the hex color string.
// prepend an alpha value (0x50 or about 30%)
// then convert to an integer.
colorInt = parseInt("50"+e.target.value.substring(1),16);
player.setClipVizColor(colorInt);
});
document.getElementById('disable_clip_viz')
.addEventListener('click', function(e) {
// Setting the clip viz to transparent black makes it invisible.
player.setClipVizColor(0);
});
document.getElementById('get_json_command_list')
.addEventListener('click', function(e) {
result = player.jsonCommandList(surface);
console.log('getjsoncommandlist result '+result.substring(0,100)+'...');
commands = JSON.parse(result);
console.log('parsed json');
});
});
</script>
</head>
<body>
<canvas id=debugger_view width=400 height=400></canvas>
<div style="float:right">
<input type="file" id="file-input" /> | <span id="command-count">0</span> commands<br>
<input type="button" id="play_button" value="Play" />
command interval in ms
<input type="text" id="interval" value="20" /><br>
<input type="checkbox" id="overdraw" /> Overdraw vis<br>
<input type="checkbox" id="gpu_op_bounds" /> GPU Op bounds<br>
<input type="color" id="clip_viz_color" />Clip visualization color
<input type="button" id="disable_clip_viz" value="Disable" /><br>
<input type="button" id="get_json_command_list" value="Get JSON Command List" /><br>
<div>
<div style="float:clear"></div>
</body>
</html>