diff --git a/css/d3d_btns.css b/css/d3d_btns.css
index e739a04..49efe72 100644
--- a/css/d3d_btns.css
+++ b/css/d3d_btns.css
@@ -8,8 +8,21 @@
}
}*/
+body {
+ -moz-user-select: none; /* disable cut copy paste */
+ -webkit-user-select: none; /* disable cut copy paste */
+}
+
img {
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 {
left: 10px;
top: 10px;
+ width: 194px;
+ height: 170px;
+ background: url('../img/buttons/btnNew.png');
}
#btnPrevious {
@@ -42,8 +58,11 @@ img {
#btnOops {
left: 20px;
-/* bottom: 150px;*/
top: 450px;
+/* bottom: 150px;*/
+ width: 146px;
+ height: 144px;
+ background: url('../img/buttons/btnOops.png');
}
#btnPrint {
@@ -84,26 +103,45 @@ img {
right: 200px;
bottom: -75px;
}
+#btnsUpDown > div {
+ float: left;
+ padding-right: 8px;
+ background-repeat: no-repeat;
+}
#btnsTurnLeftRight {
position: absolute;
right: 20px;
bottom: -75px;
}
+#btnsTurnLeftRight >div {
+ float: left;
+ padding-right: 8px;
+ background-repeat: no-repeat;
+}
#btnMoveUp {
+ width: 65px;
+ height: 61px;
+ background: url('../img/buttons/btnUp.png');
}
#btnMoveDown {
-
+ width: 64px;
+ height: 63px;
+ background: url('../img/buttons/btnDown.png');
}
#btnTwistLeft {
-
+ width: 59px;
+ height: 61px;
+ background: url('../img/buttons/btnTurnLeft.png');
}
#btnTwistRight {
-
+ width: 64px;
+ height: 56px;
+ background: url('../img/buttons/btnTurnRight.png');
}
.btn {
diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css
index 393d423..521c9e6 100644
--- a/css/fixedPosInterface.css
+++ b/css/fixedPosInterface.css
@@ -161,8 +161,7 @@ body {
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
-/*
-@media screen and (max-height: 700px) {
+@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
@@ -173,7 +172,7 @@ body {
}
#btnsUpDown, #btnsTurnLeftRight {
- zoom: 0.96;
+ zoom: 0.94;
}
#btnPrint {
@@ -182,7 +181,7 @@ body {
}
.btn {
- zoom: 0.96;
+ zoom: 0.94;
}
#drawAreaContainer {
@@ -191,14 +190,14 @@ body {
}
}
-@media screen and (max-height: 500px) {
+@media screen and (max-height: 560px) {
#d3dlogo {
zoom: 0.8;
left: 34%;
}
#btnsUpDown, #btnsTurnLeftRight {
- zoom: 0.9;
+ zoom: 0.86;
}
#btnPrint {
@@ -206,16 +205,22 @@ body {
}
.btn {
- zoom: 0.9;
+ zoom: 0.86;
}
- #drawAreaContainer {
+ #btnOops {
+ top: 350px;
+ }
+
+ #btnSave {
+ top: 200px;
+ }
+
+ #drawAreaContainer {
top: 110px;
height: 350px;
}
}
-//*/
-
diff --git a/img/bg_vertical2.png b/img/bg_vertical2.png
new file mode 100644
index 0000000..3b0b4e0
Binary files /dev/null and b/img/bg_vertical2.png differ
diff --git a/img/buttons/btnTurnRight.png b/img/buttons/btnTurnRight.png
old mode 100755
new mode 100644
index 6c1fcca..89f242c
Binary files a/img/buttons/btnTurnRight.png and b/img/buttons/btnTurnRight.png differ
diff --git a/index.html b/index.html
index 2987b78..9477b1d 100755
--- a/index.html
+++ b/index.html
@@ -1,11 +1,12 @@
- Bootstrap 101 Template
+ Doodle3D
+
@@ -61,31 +62,32 @@
-
-
+
@@ -135,15 +137,14 @@
$("#debug_textArea").css("display", "block");
}
+// $("#mycanvas").css("scale", 0.5);
+
//debug
// generate_gcode();
})
- function copyToClipboard (text) {
- window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
- }
\ No newline at end of file
diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js
index 685eb74..84bf56e 100644
--- a/js/buttonbehaviors.js
+++ b/js/buttonbehaviors.js
@@ -78,20 +78,24 @@ function initButtonBehavior() {
// console.log("btnPrevious");
// })
- btnOops.mousedown(function(e) {
- e.preventDefault();
+ function startOops(e) {
// console.log("btnOops mouse down");
+ e.preventDefault();
btnOopsInterval = setInterval( function() {
oopsUndo();
}, 1000/50);
- });
- btnOops.mouseup(function(e) {
- e.preventDefault();
+ }
+ function stopOops(e) {
// console.log("btnOops mouse up");
+ e.preventDefault();
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();
// console.log("btnMoveUp mouse down");
previewUp();
@@ -99,14 +103,18 @@ function initButtonBehavior() {
btnMoveUpInterval = setInterval( function() {
previewUp();
}, 1000/30);
- });
- btnMoveUp.mouseup(function(e) {
+ }
+ function stopMoveUp(e) {
e.preventDefault();
- console.log("btnMoveUp mouse up");
+ console.log("btnMoveUp mouse up");
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();
// console.log("btnMoveDown mouse down");
previewDown();
@@ -114,14 +122,18 @@ function initButtonBehavior() {
btnMoveDownInterval = setInterval( function() {
previewDown();
}, 1000/30);
- });
- btnMoveDown.mouseup(function(e) {
+ }
+ function stopMoveDown(e) {
e.preventDefault();
- console.log("btnMoveDown mouse up");
+ console.log("btnMoveDown mouse up");
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();
// console.log("btnTwistLeft mouse down");
previewTwistLeft();
@@ -129,14 +141,18 @@ function initButtonBehavior() {
btnTwistLeftInterval = setInterval( function() {
previewTwistLeft();
}, 1000/30);
- });
- btnTwistLeft.mouseup(function(e) {
+ }
+ function stopTwistLeft(e) {
e.preventDefault();
// console.log("btnTwistLeft mouse up");
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();
// console.log("btnTwistRight mouse down");
previewTwistRight();
@@ -144,12 +160,16 @@ function initButtonBehavior() {
btnTwistRightInterval = setInterval( function() {
previewTwistRight();
}, 1000/30);
- });
- btnTwistRight.mouseup(function(e) {
+ }
+ function stopTwistRight(e) {
e.preventDefault();
// console.log("btnTwistRight mouse up");
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) {
e.preventDefault();
@@ -232,19 +252,8 @@ function clearPreview() {
function oopsUndo() {
// console.log("f:oopsUndo()");
_points.pop();
+ redrawDoodle();
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() {
// console.log("f:previewUp()");
diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js
index 6602064..32e3234 100644
--- a/js/canvasDrawing_v01.js
+++ b/js/canvasDrawing_v01.js
@@ -11,6 +11,7 @@ var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
var dragging = false;
+var $canvas = $("#mycanvas");
var canvas = $("#mycanvas")[0];
var ctx = canvas.getContext('2d');
@@ -145,6 +146,24 @@ function clearDoodle() {
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) {
// console.log("f:adjustBounds("+x+","+y+")");
diff --git a/js/init_layout.js b/js/init_layout.js
index a4d7019..fa7c353 100644
--- a/js/init_layout.js
+++ b/js/init_layout.js
@@ -41,7 +41,7 @@ function doClientAndOrientationStuff() {
}
//*/
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
// $(".colmask").css("background-color", "#ff0");
// $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
@@ -57,7 +57,7 @@ function doClientAndOrientationStuff() {
} else {
// portrait
// $('#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 {
@@ -95,19 +95,59 @@ function doOnOrientationChange() {
// }
}
+var drawAreaContainerMinHeight = 300;
+var drawAreaContainerMaxHeight = 450;
function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime());
// $(".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) {
- $('#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() {
console.log("f:initLayouting()");
+ // first set the css width/height and actual width/height of the drawing area
+
+
+
+ $("#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[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
@@ -125,7 +165,7 @@ function initLayouting() {
// $(".container").css("height", window.innerHeight);
// 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) {
window.attachEvent('orientationchange', doOnOrientationChange);
window.attachEvent('resize', doOnResize)
@@ -135,6 +175,7 @@ function initLayouting() {
}
//*/
doClientAndOrientationStuff();
+ doOnResize();
// doOnOrientationChange();
// window.innerHeight
diff --git a/js/previewRendering_v01.js b/js/previewRendering_v01.js
index ab469ea..375a617 100644
--- a/js/previewRendering_v01.js
+++ b/js/previewRendering_v01.js
@@ -1,7 +1,12 @@
//*
+var $preview;
var preview;
var previewCtx;
+$preview = $("#preview");
+preview = document.getElementById('preview');
+previewCtx = preview.getContext('2d');
+
var svgPathRegExp = /[LM]\d* \d*/ig;
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
@@ -11,8 +16,10 @@ var redrawInterval = 1000 / 20; // ms
function initPreviewRendering() {
console.log("f:initPreviewRendering()");
- preview = document.getElementById('preview');
- previewCtx = preview.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();
}
@@ -26,12 +33,12 @@ var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwi
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 = 3; //6;
+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 = (canvasWidth / 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 prevY = 0;
var highlight = true; //highlight bottom, middle and top layers