vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 09:17:56 +01:00
Code Issues Releases Wiki Activity

lower text wasn't always showing (put it higher) and the text was iPad specific. It's generic now.

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-07-27 18:19:50 +02:00
parent ceebebbb69
commit 6990cf37ab
9 changed files with 193 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
css/d3d_btns.css
View File

@ -8,8 +8,21 @@
} }
}*/ }*/
body {
-moz-user-select: none; /* disable cut copy paste */
-webkit-user-select: none; /* disable cut copy paste */
}
img { img {
z-index: 5; z-index: 5;
/*pointer-events:none;*/
/*-webkit-touch-callout: none; *//*disable callout, image save panel */
/*-webkit-tap-highlight-color: transparent; *//* "turn off" link highlight */
}
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
.btn {
background-repeat: no-repeat;
} }
/* /*
@ -21,6 +34,9 @@ img {
#btnNew { #btnNew {
left: 10px; left: 10px;
top: 10px; top: 10px;
width: 194px;
height: 170px;
background: url('../img/buttons/btnNew.png');
} }
#btnPrevious { #btnPrevious {
@ -42,8 +58,11 @@ img {
#btnOops { #btnOops {
left: 20px; left: 20px;
/* bottom: 150px;*/
top: 450px; top: 450px;
/* bottom: 150px;*/
width: 146px;
height: 144px;
background: url('../img/buttons/btnOops.png');
} }
#btnPrint { #btnPrint {
@ -84,26 +103,45 @@ img {
right: 200px; right: 200px;
bottom: -75px; bottom: -75px;
} }
#btnsUpDown > div {
float: left;
padding-right: 8px;
background-repeat: no-repeat;
}
#btnsTurnLeftRight { #btnsTurnLeftRight {
position: absolute; position: absolute;
right: 20px; right: 20px;
bottom: -75px; bottom: -75px;
} }
#btnsTurnLeftRight >div {
float: left;
padding-right: 8px;
background-repeat: no-repeat;
}
#btnMoveUp { #btnMoveUp {
width: 65px;
height: 61px;
background: url('../img/buttons/btnUp.png');
} }
#btnMoveDown { #btnMoveDown {
width: 64px;
height: 63px;
background: url('../img/buttons/btnDown.png');
} }
#btnTwistLeft { #btnTwistLeft {
width: 59px;
height: 61px;
background: url('../img/buttons/btnTurnLeft.png');
} }
#btnTwistRight { #btnTwistRight {
width: 64px;
height: 56px;
background: url('../img/buttons/btnTurnRight.png');
} }
.btn { .btn {

23
css/fixedPosInterface.css
View File

@ -161,8 +161,7 @@ body {
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */ /* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
/* @media screen and (max-height: 675px) {
@media screen and (max-height: 700px) {
.bgMiddle { .bgMiddle {
display: none; display: none;
} }
@ -173,7 +172,7 @@ body {
} }
#btnsUpDown, #btnsTurnLeftRight { #btnsUpDown, #btnsTurnLeftRight {
zoom: 0.96; zoom: 0.94;
} }
#btnPrint { #btnPrint {
@ -182,7 +181,7 @@ body {
} }
.btn { .btn {
zoom: 0.96; zoom: 0.94;
} }
#drawAreaContainer { #drawAreaContainer {
@ -191,14 +190,14 @@ body {
} }
} }
@media screen and (max-height: 500px) { @media screen and (max-height: 560px) {
#d3dlogo { #d3dlogo {
zoom: 0.8; zoom: 0.8;
left: 34%; left: 34%;
} }
#btnsUpDown, #btnsTurnLeftRight { #btnsUpDown, #btnsTurnLeftRight {
zoom: 0.9; zoom: 0.86;
} }
#btnPrint { #btnPrint {
@ -206,7 +205,15 @@ body {
} }
.btn { .btn {
zoom: 0.9; zoom: 0.86;
}
#btnOops {
top: 350px;
}
#btnSave {
top: 200px;
} }
#drawAreaContainer { #drawAreaContainer {
@ -215,7 +222,5 @@ body {
} }
} }
//*/

BIN
img/bg_vertical2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
img/buttons/btnTurnRight.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

29
index.html
View File

@ -1,11 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Bootstrap 101 Template</title> <title>Doodle3D</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes"> <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<!-- Bootstrap --> <!-- Bootstrap -->
@ -61,31 +62,32 @@
<img class="bgBottom" src="img/bg_bottom.png" /> <img class="bgBottom" src="img/bg_bottom.png" />
<div class="buttons"> <div class="buttons">
<img id="d3dlogo" src="img/logo_full.png" onclick="location.reload()"> <img id="d3dlogo" src="img/logo_full.png" onclick="location.reload()">
<img class="btn" id="btnNew" src="img/buttons/btnNew.png"> <div class="btn" id="btnNew"></div>
<!--<img class="btn" id="btnNew" src="img/buttons/btnNew.png">-->
<img class="btn" id="btnPrevious" src="img/buttons/btnLeft.png"> <img class="btn" id="btnPrevious" src="img/buttons/btnLeft.png">
<img class="btn" id="btnNext" src="img/buttons/btnRight.png"> <img class="btn" id="btnNext" src="img/buttons/btnRight.png">
<img class="btn" id="btnSave" src="img/buttons/btnSave.png"> <img class="btn" id="btnSave" src="img/buttons/btnSave.png">
<img class="btn" id="btnOops" src="img/buttons/btnOops.png"> <div class="btn" id="btnOops"></div>
<img class="btn" id="btnPrint" src="img/buttons/btnPrint.png"> <img class="btn" id="btnPrint" src="img/buttons/btnPrint.png">
<img class="btn" id="btnStop" src="img/buttons/btnStop.png"> <img class="btn" id="btnStop" src="img/buttons/btnStop.png">
<img class="btn" id="btnInfo" src="img/buttons/btnInfo.png"> <img class="btn" id="btnInfo" src="img/buttons/btnInfo.png">
<img class="btn" id="btnSettings" src="img/buttons/btnSettings.png"> <img class="btn" id="btnSettings" src="img/buttons/btnSettings.png">
</div> </div>
</div> </div>
<div id="drawAreaContainer" width="650" height="450"> <div id="drawAreaContainer">
<canvas id="mycanvas" width="500" height="450"></canvas> <canvas id="mycanvas"></canvas>
<!--<svg id="svg">--> <!--<svg id="svg">-->
<!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>--> <!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>-->
<!--</svg>--> <!--</svg>-->
<canvas id="preview" width="150" height="450"></canvas> <canvas id="preview"></canvas>
<div class="buttons cf"> <div class="buttons cf">
<div id="btnsUpDown"> <div id="btnsUpDown">
<img id="btnMoveUp" src="img/buttons/btnUp.png"> <div id="btnMoveUp"></div>
<img id="btnMoveDown" src="img/buttons/btnDown.png"> <div id="btnMoveDown"></div>
</div> </div>
<div id="btnsTurnLeftRight"> <div id="btnsTurnLeftRight">
<img id="btnTwistLeft" src="img/buttons/btnTurnLeft.png"> <div id="btnTwistLeft"></div>
<img id="btnTwistRight" src="img/buttons/btnTurnRight.png"> <div id="btnTwistRight"></div>
</div> </div>
</div> </div>
</div> </div>
@ -94,7 +96,7 @@
</div> </div>
</div> </div>
<div id="portrait"> <div id="portrait">
<img class="vertImage" src="img/bg_vertical.jpg"/> <img class="vertImage" src="img/bg_vertical2.png"/>
</div> </div>
<script src="js/libs/jquery-1.8.3.min.js"></script> <script src="js/libs/jquery-1.8.3.min.js"></script>
@ -135,15 +137,14 @@
$("#debug_textArea").css("display", "block"); $("#debug_textArea").css("display", "block");
} }
// $("#mycanvas").css("scale", 0.5);
//debug //debug
// generate_gcode(); // generate_gcode();
}) })
function copyToClipboard (text) {
window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
}
</script> </script>
</body> </body>
</html> </html>

77
js/buttonbehaviors.js
View File

@ -78,20 +78,24 @@ function initButtonBehavior() {
// console.log("btnPrevious"); // console.log("btnPrevious");
// }) // })
btnOops.mousedown(function(e) { function startOops(e) {
e.preventDefault();
// console.log("btnOops mouse down"); // console.log("btnOops mouse down");
e.preventDefault();
btnOopsInterval = setInterval( function() { btnOopsInterval = setInterval( function() {
oopsUndo(); oopsUndo();
}, 1000/50); }, 1000/50);
}); }
btnOops.mouseup(function(e) { function stopOops(e) {
e.preventDefault();
// console.log("btnOops mouse up"); // console.log("btnOops mouse up");
e.preventDefault();
clearInterval(btnOopsInterval); clearInterval(btnOopsInterval);
}); }
btnOops.on('touchstart', function(e) { startOops(e); });
btnOops.on('touchend', function(e) { stopOops(e); });
btnOops.mousedown(function(e) { startOops(e); });
btnOops.mouseup(function(e) { stopOops(e); });
btnMoveUp.mousedown(function(e) { function startMoveUp(e) {
e.preventDefault(); e.preventDefault();
// console.log("btnMoveUp mouse down"); // console.log("btnMoveUp mouse down");
previewUp(); previewUp();
@ -99,14 +103,18 @@ function initButtonBehavior() {
btnMoveUpInterval = setInterval( function() { btnMoveUpInterval = setInterval( function() {
previewUp(); previewUp();
}, 1000/30); }, 1000/30);
}); }
btnMoveUp.mouseup(function(e) { function stopMoveUp(e) {
e.preventDefault(); e.preventDefault();
console.log("btnMoveUp mouse up"); console.log("btnMoveUp mouse up");
clearInterval(btnMoveUpInterval); clearInterval(btnMoveUpInterval);
}); }
btnMoveUp.mousedown(function(e) { startMoveUp(e) });
btnMoveUp.mouseup(function(e) { stopMoveUp(e) });
btnMoveUp.on('touchstart', function(e) { startMoveUp(e) });
btnMoveUp.on('touchend', function(e) { stopMoveUp(e) });
btnMoveDown.mousedown(function(e) { function startMoveDown(e) {
e.preventDefault(); e.preventDefault();
// console.log("btnMoveDown mouse down"); // console.log("btnMoveDown mouse down");
previewDown(); previewDown();
@ -114,14 +122,18 @@ function initButtonBehavior() {
btnMoveDownInterval = setInterval( function() { btnMoveDownInterval = setInterval( function() {
previewDown(); previewDown();
}, 1000/30); }, 1000/30);
}); }
btnMoveDown.mouseup(function(e) { function stopMoveDown(e) {
e.preventDefault(); e.preventDefault();
console.log("btnMoveDown mouse up"); console.log("btnMoveDown mouse up");
clearInterval(btnMoveDownInterval); clearInterval(btnMoveDownInterval);
}); }
btnMoveDown.mousedown(function(e) { startMoveDown(e) });
btnMoveDown.mouseup(function(e) { stopMoveDown(e) });
btnMoveDown.on('touchstart', function(e) { startMoveDown(e) });
btnMoveDown.on('touchend', function(e) { stopMoveDown(e) });
btnTwistLeft.mousedown(function(e) { function startTwistLeft(e) {
e.preventDefault(); e.preventDefault();
// console.log("btnTwistLeft mouse down"); // console.log("btnTwistLeft mouse down");
previewTwistLeft(); previewTwistLeft();
@ -129,14 +141,18 @@ function initButtonBehavior() {
btnTwistLeftInterval = setInterval( function() { btnTwistLeftInterval = setInterval( function() {
previewTwistLeft(); previewTwistLeft();
}, 1000/30); }, 1000/30);
}); }
btnTwistLeft.mouseup(function(e) { function stopTwistLeft(e) {
e.preventDefault(); e.preventDefault();
// console.log("btnTwistLeft mouse up"); // console.log("btnTwistLeft mouse up");
clearInterval(btnTwistLeftInterval); clearInterval(btnTwistLeftInterval);
}); }
btnTwistLeft.mousedown(function(e) { startTwistLeft(e) });
btnTwistLeft.mouseup(function(e) { stopTwistLeft(e) });
btnTwistLeft.on('touchstart', function(e) { startTwistLeft(e) });
btnTwistLeft.on('touchend', function(e) { stopTwistLeft(e) });
btnTwistRight.mousedown(function(e) { function startTwistRight(e) {
e.preventDefault(); e.preventDefault();
// console.log("btnTwistRight mouse down"); // console.log("btnTwistRight mouse down");
previewTwistRight(); previewTwistRight();
@ -144,12 +160,16 @@ function initButtonBehavior() {
btnTwistRightInterval = setInterval( function() { btnTwistRightInterval = setInterval( function() {
previewTwistRight(); previewTwistRight();
}, 1000/30); }, 1000/30);
}); }
btnTwistRight.mouseup(function(e) { function stopTwistRight(e) {
e.preventDefault(); e.preventDefault();
// console.log("btnTwistRight mouse up"); // console.log("btnTwistRight mouse up");
clearInterval(btnTwistRightInterval); clearInterval(btnTwistRightInterval);
}); }
btnTwistRight.mousedown(function(e) { startTwistRight(e) });
btnTwistRight.mouseup(function(e) { stopTwistRight(e) });
btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
btnTwistRight.on('touchend', function(e) { stopTwistRight(e) });
btnSettings.mouseup(function(e) { btnSettings.mouseup(function(e) {
e.preventDefault(); e.preventDefault();
@ -232,19 +252,8 @@ function clearPreview() {
function oopsUndo() { function oopsUndo() {
// console.log("f:oopsUndo()"); // console.log("f:oopsUndo()");
_points.pop(); _points.pop();
redrawDoodle();
redrawPreview(); redrawPreview();
clearMainView();
prevX = 0;
prevY = 0;
for (var i = 0; i < _points.length; i++) {
// console.log(" drawing points " + _points[i]);
if (_points[i][2] == true) {
draw(_points[i][0], _points[i][1], 0.5);
} else {
draw(_points[i][0], _points[i][1]);
}
}
} }
function previewUp() { function previewUp() {
// console.log("f:previewUp()"); // console.log("f:previewUp()");

19
js/canvasDrawing_v01.js
View File

@ -11,6 +11,7 @@ var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
var dragging = false; var dragging = false;
var $canvas = $("#mycanvas");
var canvas = $("#mycanvas")[0]; var canvas = $("#mycanvas")[0];
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
@ -145,6 +146,24 @@ function clearDoodle() {
clearPreview(); clearPreview();
} }
function redrawDoodle() {
console.log("f:redrawDoodle()");
clearMainView();
prevX = 0;
prevY = 0;
for (var i = 0; i < _points.length; i++) {
// console.log(" drawing points " + _points[i]);
if (_points[i][2] == true) {
draw(_points[i][0], _points[i][1], 0.5);
} else {
draw(_points[i][0], _points[i][1]);
}
}
}
function adjustBounds(x, y) { function adjustBounds(x, y) {
// console.log("f:adjustBounds("+x+","+y+")"); // console.log("f:adjustBounds("+x+","+y+")");

51
js/init_layout.js
View File

@ -41,7 +41,7 @@ function doClientAndOrientationStuff() {
} }
//*/ //*/
var ratio = ww / mw; //calculate ratio var ratio = ww / mw; //calculate ratio
$('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=yes,width='+mw); $('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
if( ww < mw){ //smaller than minimum size if( ww < mw){ //smaller than minimum size
// $(".colmask").css("background-color", "#ff0"); // $(".colmask").css("background-color", "#ff0");
// $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); // $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
@ -57,7 +57,7 @@ function doClientAndOrientationStuff() {
} else { } else {
// portrait // portrait
// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no'); // $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes'); $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no');
} }
} else { } else {
@ -95,19 +95,59 @@ function doOnOrientationChange() {
// } // }
} }
var drawAreaContainerMinHeight = 300;
var drawAreaContainerMaxHeight = 450;
function doOnResize() { function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime()); // console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight); // $(".container").css("height", window.innerHeight);
doClientAndOrientationStuff()
// doClientAndOrientationStuff() // <-- is this necessary in this method?
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
if (window.innerHeight < 768) { if (window.innerHeight < 768) {
$('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70); // $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
newVal = Math.max(newVal, drawAreaContainerMinHeight);
newVal = Math.min(newVal, drawAreaContainerMaxHeight);
$('#drawAreaContainer').innerHeight(newVal);
// canvas drawing area
$canvas.css("height", newVal);
canvas.height = newVal;
canvasWidth = canvas.width;
canvasHeight = canvas.height;
// preview area
$preview.css("height", newVal);
preview.height = newVal;
layerOffsetY = preview.height - 1.75 * layerCY;
yStep = preview.height / 150;
redrawDoodle();
redrawPreview();
} }
} }
function initLayouting() { function initLayouting() {
console.log("f:initLayouting()"); console.log("f:initLayouting()");
// first set the css width/height and actual width/height of the drawing area
<!--div drawAreaContainer 650,450-->
<!--canvas mycanvas 500, 450-->
<!--canvas preview 150, 450-->
$("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
$("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
canvas.width = parseInt($canvas.css("width"), 10);
canvas.height = parseInt($canvas.css("height"), 10);
preview.width = parseInt($preview.css("width"), 10);
preview.height = parseInt($preview.css("height"), 10);
canvasWidth = canvas.width;
canvasHeight = canvas.height;
// console.log("f:initLayouting() >> canvas height: " + canvas.height);
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); // imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
// imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); // imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
@ -125,7 +165,7 @@ function initLayouting() {
// $(".container").css("height", window.innerHeight); // $(".container").css("height", window.innerHeight);
// Initial execution if needed // Initial execution if needed
/* 2013-07-26 not doing this resizing stuff now, it's not working well yet //* 2013-07-26 not doing this resizing stuff now, it's not working well yet
if (!window.addEventListener) { if (!window.addEventListener) {
window.attachEvent('orientationchange', doOnOrientationChange); window.attachEvent('orientationchange', doOnOrientationChange);
window.attachEvent('resize', doOnResize) window.attachEvent('resize', doOnResize)
@ -135,6 +175,7 @@ function initLayouting() {
} }
//*/ //*/
doClientAndOrientationStuff(); doClientAndOrientationStuff();
doOnResize();
// doOnOrientationChange(); // doOnOrientationChange();
// window.innerHeight // window.innerHeight

15
js/previewRendering_v01.js
View File

@ -1,7 +1,12 @@
//* //*
var $preview;
var preview; var preview;
var previewCtx; var previewCtx;
$preview = $("#preview");
preview = document.getElementById('preview');
previewCtx = preview.getContext('2d');
var svgPathRegExp = /[LM]\d* \d*/ig; var svgPathRegExp = /[LM]\d* \d*/ig;
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/; var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
@ -11,8 +16,10 @@ var redrawInterval = 1000 / 20; // ms
function initPreviewRendering() { function initPreviewRendering() {
console.log("f:initPreviewRendering()"); console.log("f:initPreviewRendering()");
preview = document.getElementById('preview'); layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
previewCtx = preview.getContext('2d'); layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
layerOffsetY = preview.height - 1.75 * layerCY;
yStep = preview.height / 150;
redrawPreview(); redrawPreview();
} }
@ -26,12 +33,12 @@ var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwi
var strokeWidth = 2; //4; var strokeWidth = 2; //4;
//var rStep = Math.PI/40; //Math.PI/40; // //var rStep = Math.PI/40; //Math.PI/40; //
var rStep = Math.PI/45; // Math.PI/180; //Math.PI/40; // var rStep = Math.PI/45; // Math.PI/180; //Math.PI/40; //
var yStep = 3; //6; var yStep = preview.height / 150; // 3; //6;
//var svgWidth = 500; // 650 //parseInt($(svg).css("width")); //var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
//var svgHeight = 450; //450; //parseInt($(svg).css("height")); //var svgHeight = 450; //450; //parseInt($(svg).css("height"));
var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
var layerOffsetY= 330; var layerOffsetY= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
var prevX = 0; var prevX = 0;
var prevY = 0; var prevY = 0;
var highlight = true; //highlight bottom, middle and top layers var highlight = true; //highlight bottom, middle and top layers