148 lines
5.2 KiB
HTML
148 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Debugger Demo</title>
|
|
<script src="bin/debugger.js"></script>
|
|
<script>
|
|
let index = 0;
|
|
let surface;
|
|
|
|
DebuggerInit({
|
|
locateFile: (file) => '/node_modules/debugger/bin/'+file,
|
|
}).then((Debugger) => {
|
|
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.HEAPU8.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;
|
|
//Assume GPU selected initially
|
|
surface = Debugger.MakeWebGLCanvasSurface(canvas);
|
|
|
|
document.getElementById('command-count').innerHTML = player.getSize();
|
|
player.setClipVizColor(0);
|
|
};
|
|
reader.readAsArrayBuffer(file);
|
|
}
|
|
|
|
function playFile() {
|
|
interval = parseFloat(document.getElementById('interval').value);
|
|
let intervalID = setInterval(function() {
|
|
if (index < 789){
|
|
player.drawTo(surface, index);
|
|
surface.flush();
|
|
index++;
|
|
}
|
|
}, interval);
|
|
}
|
|
|
|
// Discard canvas when switching between cpu/gpu backend because it's bound to a context.
|
|
function replaceCanvas() {
|
|
canvas = document.getElementById('debugger_view');
|
|
let newCanvas = canvas.cloneNode(true);
|
|
let parent = canvas.parentNode;
|
|
parent.replaceChild(newCanvas, canvas);
|
|
}
|
|
|
|
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');
|
|
});
|
|
|
|
document.getElementById('backend_gpu')
|
|
.addEventListener('change', function(e) {
|
|
if (e.target.checked) {
|
|
replaceCanvas();
|
|
surface = Debugger.MakeWebGLCanvasSurface(document.getElementById('debugger_view'));
|
|
}
|
|
});
|
|
|
|
document.getElementById('backend_cpu')
|
|
.addEventListener('change', function(e) {
|
|
if (e.target.checked) {
|
|
replaceCanvas();
|
|
surface = Debugger.MakeSWCanvasSurface(document.getElementById('debugger_view'));
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id=debugger_view width=400 height=400></canvas>
|
|
<div style="float:right">
|
|
<input type="radio" name="backend" value="CPU" id="backend_cpu"> CPU
|
|
<input type="radio" name="backend" value="WebGL" id="backend_gpu" checked> WebGL<br>
|
|
<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>
|