vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2025-06-11 17:23:17 +02: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
Download Patch File Download Diff File Expand all files Collapse all files

81
js/buttonbehaviors.js
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()");

19
js/canvasDrawing_v01.js
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+")");

51
js/init_layout.js
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

15
js/previewRendering_v01.js
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