forked from protonphoton/LJ
210 lines
5.2 KiB
HTML
210 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>PDM Modelviewer</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
|
|
|
|
body {
|
|
font-family: 'Lato';
|
|
background-color: #f0f0f0;
|
|
margin: 0px auto;
|
|
max-width: 1150px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
h2 {
|
|
font-weight : 400;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="../models/model_pca_20_svm.js"></script>
|
|
<script src="./js/libs/dat.gui.min.js"></script>
|
|
<h2>Modelviewer</h2>
|
|
<canvas id="compare" width="600" height="550"></canvas>
|
|
<p>Load a model from a file:</p>
|
|
<input type="file" value="load a model" id="loadjs"/>
|
|
|
|
<script>
|
|
function loadjs(file) {
|
|
var reader = new FileReader();
|
|
var str;
|
|
reader.onload = function(theFile) {
|
|
str = theFile.target.result;
|
|
debugger;
|
|
(function() { eval.apply(this, arguments); }(str));
|
|
rebuild();
|
|
}
|
|
reader.onerror = function() {alert("error reading file")};
|
|
reader.readAsText(file.target.files[0]);
|
|
}
|
|
document.getElementById('loadjs').addEventListener('change', loadjs, false);
|
|
|
|
function rebuild() {
|
|
// check how many parameters
|
|
pnums = pModel.shapeModel.eigenValues.length;
|
|
|
|
ph = new parameterHolder();
|
|
gui.destroy();
|
|
gui = new dat.GUI();
|
|
|
|
control = {};
|
|
eig = 0;
|
|
for (var i = 0;i < pnums;i++) {
|
|
eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
|
|
control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
|
|
}
|
|
|
|
for (var i = 0;i < pnums;i++) {
|
|
control['c'+(i+1)].onChange(drawNew);
|
|
}
|
|
|
|
params = [];
|
|
for (var i = 0;i < pnums;i++) {
|
|
params.push(ph['component '+(i+1)]);
|
|
}
|
|
|
|
drawNew();
|
|
}
|
|
|
|
var canvasInput = document.getElementById('compare');
|
|
var cc = canvasInput.getContext('2d');
|
|
cc.fillStyle = "rgb(200,0,0)";
|
|
|
|
// check how many parameters
|
|
var pnums = pModel.shapeModel.eigenValues.length;
|
|
|
|
var parameterHolder = function() {
|
|
for (var i = 0;i < pnums;i++) {
|
|
this['component '+(i+1)] = 0;
|
|
}
|
|
};
|
|
|
|
var ph = new parameterHolder();
|
|
var gui = new dat.GUI();
|
|
|
|
var control = {};
|
|
var eig = 0;
|
|
for (var i = 0;i < pnums;i++) {
|
|
eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
|
|
control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
|
|
}
|
|
|
|
var params;
|
|
var drawNew = function(value) {
|
|
cc.clearRect(0,0,600,600);
|
|
params = [];
|
|
for (var i = 0;i < pnums;i++) {
|
|
params.push(ph['component '+(i+1)]);
|
|
}
|
|
draw(document.getElementById('compare'), similarityTransforms.concat(params));
|
|
}
|
|
|
|
for (var i = 0;i < pnums;i++) {
|
|
control['c'+(i+1)].onChange(drawNew);
|
|
}
|
|
|
|
params = [];
|
|
for (var i = 0;i < pnums;i++) {
|
|
params.push(ph['component '+(i+1)]);
|
|
}
|
|
|
|
var similarityTransforms = [4,0,0,0];
|
|
//var similarityTransforms = [1, 0, -250, -450];
|
|
//var similarityTransforms = [1, 0, 200, 200];
|
|
var paramslength = params.length;
|
|
var num_points = pModel.shapeModel.numPtsPerSample;
|
|
|
|
var x,y;
|
|
|
|
var i, path;
|
|
|
|
var drawPath = function(canvasContext, path, dp) {
|
|
canvasContext.beginPath();
|
|
var i, x, y;
|
|
for (var p = 0;p < path.length;p++) {
|
|
i = path[p]*2;
|
|
x = pModel.shapeModel.meanShape[i/2][0];
|
|
y = pModel.shapeModel.meanShape[i/2][1];
|
|
for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
|
|
x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
|
|
y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
|
|
}
|
|
a = dp[0]*x - dp[1]*y + dp[2];
|
|
b = dp[0]*y + dp[1]*x + dp[3];
|
|
x += a;
|
|
y += b;
|
|
|
|
if (i == 0) {
|
|
canvasContext.moveTo(x,y);
|
|
} else {
|
|
canvasContext.lineTo(x,y);
|
|
}
|
|
}
|
|
canvasContext.moveTo(0,0);
|
|
canvasContext.closePath();
|
|
canvasContext.stroke();
|
|
}
|
|
|
|
function drawPoint(canvasContext, point, dp) {
|
|
var i, x, y;
|
|
i = point*2;
|
|
x = pModel.shapeModel.meanShape[i/2][0];
|
|
y = pModel.shapeModel.meanShape[i/2][1];
|
|
for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
|
|
x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
|
|
y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
|
|
}
|
|
a = dp[0]*x - dp[1]*y + dp[2];
|
|
b = dp[0]*y + dp[1]*x + dp[3];
|
|
x += a;
|
|
y += b;
|
|
canvasContext.beginPath();
|
|
canvasContext.arc(x, y, 2, 0, Math.PI*2, true);
|
|
canvasContext.closePath();
|
|
canvasContext.fill();
|
|
}
|
|
|
|
var draw = function(canvas, pv) {
|
|
// if no previous points, just draw in the middle of canvas
|
|
|
|
var params;
|
|
if (pv === undefined) {
|
|
params = currentParameters.slice(0);
|
|
} else {
|
|
params = pv.slice(0);
|
|
}
|
|
|
|
var cc = canvas.getContext('2d');
|
|
cc.fillStyle = "rgb(0,0,0)";
|
|
cc.strokeStyle = "rgb(0,0,0)";
|
|
//cc.lineWidth = 1;
|
|
cc.save();
|
|
|
|
var paths = pModel.path.normal;
|
|
for (var i = 0;i < paths.length;i++) {
|
|
if (typeof(paths[i]) == 'number') {
|
|
drawPoint(cc, paths[i], params);
|
|
} else {
|
|
drawPath(cc, paths[i], params);
|
|
}
|
|
}
|
|
|
|
cc.restore()
|
|
}
|
|
draw(document.getElementById('compare'), similarityTransforms.concat(params))
|
|
/*
|
|
var eigenVectors = new goog.math.Matrix(num_points*2, 7);
|
|
for (var i = 0;i < num_points*2;i++) {
|
|
for (var j = 0;j < 7;j++) {
|
|
eigenVectors.setValueAt(i, j, pModel.shapeModel.eVectors[(i*num_points*2)+j]);
|
|
}
|
|
}*/
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|