<!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>