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 @@
- +
+ - +
-
- +
+ - +
- - +
+
- - +
+
@@ -94,7 +96,7 @@
- +
@@ -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