mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-12-22 21:23:48 +01:00
Updated preview rendering. onMouseUp / onTouchEnd the preview is now cached to an Image() object (image/png) (via a proxy Canvas element (id='preview_tmp') and used to draw the preview. This allows for much faster move up/down and twist left/right behavior.
This commit is contained in:
Adriaan Wormgoor
parent
5c7e226caf
commit
69df58c054
@ -109,7 +109,11 @@ body {
|
||||
}
|
||||
|
||||
#preview_tmp {
|
||||
/*border: 1px solid #8fc;*/
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 500;
|
||||
border: 1px solid #f80;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
|
||||
<link rel="icon" type="image/ico" href="favicon.ico"/>
|
||||
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
|
||||
|
||||
<!-- Bootstrap -->
|
||||
@ -49,7 +50,7 @@
|
||||
<!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>-->
|
||||
<!--</svg>-->
|
||||
<canvas id="preview"></canvas>
|
||||
<canvas id="preview_tmp" width="150" height="125"></canvas>
|
||||
<canvas id="preview_tmp"></canvas>
|
||||
<div class="buttons cf">
|
||||
<div id="btnsUpDown">
|
||||
<div id="btnMoveUp"></div>
|
||||
@ -87,7 +88,7 @@
|
||||
<script src="js/d3dServerInterfacing.js"></script>
|
||||
<script src="js/buttonbehaviors.js"></script>
|
||||
<script src="js/canvasDrawing_v01.js"></script>
|
||||
<script src="js/previewRendering_v01.js"></script>
|
||||
<script src="js/previewRendering_v02.js"></script>
|
||||
<script src="js/gcodeGenerating_v01.js"></script>
|
||||
<script src="js/init_layout.js"></script>
|
||||
<script src="js/Printer.js"></script>
|
||||
|
||||
@ -305,14 +305,16 @@ function previewUp(redrawLess) {
|
||||
if (numLayers < 100) {
|
||||
numLayers++;
|
||||
}
|
||||
redrawPreview(redrawLess);
|
||||
// redrawPreview(redrawLess);
|
||||
redrawRenderedPreview();
|
||||
}
|
||||
function previewDown(redrawLess) {
|
||||
// console.log("f:previewDown()");
|
||||
if (numLayers > 2) {
|
||||
numLayers--;
|
||||
}
|
||||
redrawPreview(redrawLess);
|
||||
// redrawPreview(redrawLess);
|
||||
redrawRenderedPreview();
|
||||
}
|
||||
function previewTwistLeft(redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
@ -320,14 +322,16 @@ function previewTwistLeft(redrawLess) {
|
||||
// if (rStep < Math.PI) {
|
||||
rStep -= twistIncrement;
|
||||
// }
|
||||
redrawPreview(redrawLess);
|
||||
// redrawPreview(redrawLess);
|
||||
redrawRenderedPreview();
|
||||
}
|
||||
function previewTwistRight(redrawLess) {
|
||||
// console.log("f:previewTwistRight()");
|
||||
// if (rStep < Math.PI) {
|
||||
rStep += twistIncrement;
|
||||
// }
|
||||
redrawPreview(redrawLess);
|
||||
// redrawPreview(redrawLess);
|
||||
redrawRenderedPreview();
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -328,6 +328,7 @@ function onCanvasMouseMove(e) {
|
||||
if (_points.length < 50) {
|
||||
redrawPreview();
|
||||
} else {
|
||||
// redrawPreview();
|
||||
updatePreview(x, y, true);
|
||||
}
|
||||
prevRedrawTime = new Date().getTime();
|
||||
@ -349,7 +350,8 @@ function onCanvasMouseUp(e) {
|
||||
// $("#textdump").append("doodlebounds:" + doodleBounds + "\n");
|
||||
// $("#textdump").append("doodletransform:" + doodleTransform + "\n");
|
||||
|
||||
redrawPreview();
|
||||
// redrawPreview();
|
||||
renderToImageDataPreview();
|
||||
}
|
||||
|
||||
function onCanvasTouchDown(e) {
|
||||
@ -425,7 +427,8 @@ function onCanvasTouchEnd(e) {
|
||||
|
||||
console.log("_points.length :" + _points.length);
|
||||
|
||||
redrawPreview();
|
||||
// redrawPreview();
|
||||
renderToImageDataPreview();
|
||||
}
|
||||
|
||||
function prevent(e) {
|
||||
|
||||
@ -34,6 +34,7 @@ $(function() {
|
||||
initDoodleDrawing();
|
||||
initPreviewRendering();
|
||||
|
||||
|
||||
initButtonBehavior();
|
||||
|
||||
initSettingsPopup(wifiboxURL);
|
||||
@ -51,6 +52,7 @@ $(function() {
|
||||
console.log("debug mode is true");
|
||||
$("body").css("overflow", "auto");
|
||||
$("#debug_textArea").css("display", "block");
|
||||
$("#preview_tmp").css("display", "block");
|
||||
}
|
||||
|
||||
printer.init();
|
||||
|
||||
313
js/previewRendering_v02.js
Normal file
313
js/previewRendering_v02.js
Normal file
@ -0,0 +1,313 @@
|
||||
//*
|
||||
var $preview;
|
||||
var preview;
|
||||
var previewCtx;
|
||||
|
||||
$preview = $("#preview");
|
||||
|
||||
preview = document.getElementById('preview');
|
||||
previewCtx = preview.getContext('2d');
|
||||
|
||||
var preview_tmp;
|
||||
var previewCtx_tmp;
|
||||
|
||||
var svgPathRegExp = /[LM]\d* \d*/ig;
|
||||
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
||||
|
||||
var prevRedrawTime = new Date().getTime();
|
||||
var redrawInterval = 1000 / 30; // ms
|
||||
|
||||
function initPreviewRendering() {
|
||||
console.log("f:initPreviewRendering()");
|
||||
|
||||
// DEBUG --> mbt preview_tmp (voor de toImageData truc)
|
||||
var _ratio = preview.width / canvas.width;
|
||||
preview_tmp = document.getElementById('preview_tmp');
|
||||
preview_tmp.width = preview.width;
|
||||
preview_tmp.height = canvas.height * _ratio;
|
||||
$("#preview_tmp").css("top", -preview_tmp.height);
|
||||
|
||||
previewCtx_tmp = preview_tmp.getContext('2d');
|
||||
|
||||
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
layerOffsetY = preview.height - 1.75 * layerCY;
|
||||
yStep = preview.height / 150;
|
||||
|
||||
redrawPreview();
|
||||
}
|
||||
|
||||
//var numLayers = 100; //50
|
||||
var numLayers = 100; // 100
|
||||
var globalScale = 0.3; // global scale of preview (width preview / width canvas)
|
||||
var globalAlpha = 0.20; // global alpha of preview
|
||||
var scaleY = 0.4; // additional vertical scale per path for 3d effect
|
||||
var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
|
||||
var strokeWidth = 2; //4;
|
||||
//var rStep = Math.PI/40; //Math.PI/40; //
|
||||
var rStep = Math.PI/45; // Math.PI/180; //Math.PI/40; //
|
||||
var yStep;// = preview.height / 150; // 3; //6;
|
||||
//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
|
||||
//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
|
||||
var layerCX, layerCY;
|
||||
//var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
//var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
var layerOffsetY; //= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
|
||||
var prevX = 0;
|
||||
var prevY = 0;
|
||||
var highlight = true; //highlight bottom, middle and top layers
|
||||
|
||||
var linesRaw = "";
|
||||
var debug_redrawSimplification = 6;
|
||||
function redrawPreview(redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
|
||||
if (_points.length < 2) return;
|
||||
|
||||
if (!redrawLess) {
|
||||
//debug_redrawSimplification = Math.round(_points.length / 65);
|
||||
//*
|
||||
if (_points.length < 100) {
|
||||
debug_redrawSimplification = 6;
|
||||
} else if (_points.length < 250) {
|
||||
debug_redrawSimplification = 7;
|
||||
} else if (_points.length < 400) {
|
||||
debug_redrawSimplification = 8;
|
||||
} else if (_points.length < 550) {
|
||||
debug_redrawSimplification = 9;
|
||||
} else if (_points.length < 700) {
|
||||
debug_redrawSimplification = 10;
|
||||
} else {
|
||||
debug_redrawSimplification = 11;
|
||||
}
|
||||
//*/
|
||||
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
|
||||
}
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
//preview.width = preview.width;
|
||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
continue;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
||||
// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
|
||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||
|
||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
|
||||
|
||||
previewCtx.beginPath();
|
||||
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
for(var j = 1; j < _points.length; j++) {
|
||||
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
|
||||
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
|
||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
}
|
||||
previewCtx.stroke();
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
function renderToImageDataPreview() {
|
||||
console.log("f:renderToImageDataPreview()");
|
||||
|
||||
if (_points.length < 2) return;
|
||||
|
||||
//*
|
||||
// the first step
|
||||
previewCtx_tmp.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx_tmp.lineWidth = strokeWidth;
|
||||
previewCtx_tmp.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
previewCtx_tmp.save();
|
||||
previewCtx_tmp.translate(layerCX, layerCY);
|
||||
previewCtx_tmp.scale(viewerScale, viewerScale);
|
||||
previewCtx_tmp.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||
|
||||
var adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[0]);
|
||||
|
||||
previewCtx_tmp.beginPath();
|
||||
previewCtx_tmp.moveTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
||||
for(var j = 1; j < _points.length; j++) {
|
||||
adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[j])
|
||||
previewCtx_tmp.lineTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
||||
}
|
||||
previewCtx_tmp.stroke();
|
||||
previewCtx_tmp.closePath();
|
||||
previewCtx_tmp.restore();
|
||||
//*/
|
||||
|
||||
// var saved_rect = previewCtx_tmp.getImageData(0, 0, layerCX*2, layerCY*2);
|
||||
var saved_rect_todataurl = preview_tmp.toDataURL();
|
||||
doodleImageCapture = new Image();
|
||||
doodleImageCapture.onload = function() {
|
||||
|
||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
for(var i=0;i<numLayers;i++) {
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
||||
previewCtx.scale(1, scaleY)
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate(-layerCX,-layerCY);
|
||||
|
||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
};
|
||||
doodleImageCapture.src = saved_rect_todataurl;
|
||||
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
// called by the move up/down or twist left/right buttons
|
||||
// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
|
||||
function redrawRenderedPreview() {
|
||||
console.log("f:redrawRenderedPreview()");
|
||||
|
||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
||||
previewCtx.scale(1, scaleY)
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate(-layerCX,-layerCY);
|
||||
|
||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function centeredAndScaledDoodlePoint(p) {
|
||||
var obj = { x: 0, y: 0};
|
||||
|
||||
obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
|
||||
obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
|
||||
// obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
|
||||
// obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
|
||||
// obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
|
||||
// obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
//*
|
||||
var updatePrevX = -1;
|
||||
var updatePrevY = -1;
|
||||
function updatePreview(_x, _y, redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
redrawLess = false;
|
||||
|
||||
if (_points.length < 2) return;
|
||||
if (updatePrevX == -1 || updatePrevY == -1) {
|
||||
updatePrevX = _x;
|
||||
updatePrevY = _y;
|
||||
return;
|
||||
}
|
||||
|
||||
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
continue;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||
|
||||
|
||||
previewCtx.beginPath();
|
||||
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
|
||||
previewCtx.moveTo(prevPoint.x, prevPoint.y);
|
||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
|
||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
previewCtx.stroke();
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
updatePrevX = _x;
|
||||
updatePrevY = _y;
|
||||
|
||||
}
|
||||
//*/
|
||||
Loading…
Reference in New Issue
Block a user