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

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

View File

@ -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 {

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) */
/*
@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;
}
}
//*/

BIN
img/bg_vertical2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -1,11 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<title>Doodle3D</title>
<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-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">
<!-- Bootstrap -->
@ -61,31 +62,32 @@
<img class="bgBottom" src="img/bg_bottom.png" />
<div class="buttons">
<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="btnNext" src="img/buttons/btnRight.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="btnStop" src="img/buttons/btnStop.png">
<img class="btn" id="btnInfo" src="img/buttons/btnInfo.png">
<img class="btn" id="btnSettings" src="img/buttons/btnSettings.png">
</div>
</div>
<div id="drawAreaContainer" width="650" height="450">
<canvas id="mycanvas" width="500" height="450"></canvas>
<div id="drawAreaContainer">
<canvas id="mycanvas"></canvas>
<!--<svg id="svg">-->
<!--<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" width="150" height="450"></canvas>
<canvas id="preview"></canvas>
<div class="buttons cf">
<div id="btnsUpDown">
<img id="btnMoveUp" src="img/buttons/btnUp.png">
<img id="btnMoveDown" src="img/buttons/btnDown.png">
<div id="btnMoveUp"></div>
<div id="btnMoveDown"></div>
</div>
<div id="btnsTurnLeftRight">
<img id="btnTwistLeft" src="img/buttons/btnTurnLeft.png">
<img id="btnTwistRight" src="img/buttons/btnTurnRight.png">
<div id="btnTwistLeft"></div>
<div id="btnTwistRight"></div>
</div>
</div>
</div>
@ -94,7 +96,7 @@
</div>
</div>
<div id="portrait">
<img class="vertImage" src="img/bg_vertical.jpg"/>
<img class="vertImage" src="img/bg_vertical2.png"/>
</div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
@ -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);
}
</script>
</body>
</html>

View File

@ -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()");

View File

@ -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+")");

View File

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

View File

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