+
diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js
index b20c231..aee80dc 100644
--- a/js/canvasDrawing_v01.js
+++ b/js/canvasDrawing_v01.js
@@ -41,6 +41,7 @@ var lineweight = 2;
function initDoodleDrawing() {
console.log("f:initDoodleDrawing()");
+ //*
//TODO make these jquery eventhandlers (works for all)
if (!canvas.addEventListener) {
canvas.attachEvent('onmousedown',onCanvasMouseDown);
@@ -57,14 +58,19 @@ function initDoodleDrawing() {
canvas.addEventListener('touchstart',onCanvasTouchDown,false);
canvas.addEventListener('touchmove',onCanvasTouchMove,false);
canvas.addEventListener('touchend',onCanvasTouchEnd,false);
- document.body.addEventListener('touchmove',prevent,false);
}
+ //*/
drawCanvas = $("#drawAreaContainer");
+// drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
- drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
- drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
+// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
+// drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
+ drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
+ drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
+// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
+// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
console.log("f:initDoodleDrawing() >> canvasWidth: " + canvasWidth);
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
@@ -146,6 +152,8 @@ function clearDoodle() {
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
+ dragging = false;
+
clearMainView();
resetPreview();
}
@@ -259,7 +267,7 @@ function onCanvasMouseDown(e) {
// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
// console.log("onmousedown >> e: " + e);
// console.log(e);
- console.log("f:onCanvasMouseDown()");
+// console.log("f:onCanvasMouseDown()");
dragging = true;
prevCountingTime = new Date().getTime();
@@ -288,7 +296,7 @@ function onCanvasMouseDown(e) {
var prevPoint = {x:-1, y:-1};
function onCanvasMouseMove(e) {
- console.log("f:onCanvasMouseMove()");
+// console.log("f:onCanvasMouseMove()");
if (!dragging) return;
// console.log("onmousemove");
@@ -349,7 +357,7 @@ prevUpdateFullPreview = 0; // 0 is not a timeframe but refers to the _points arr
prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
function onCanvasMouseUp(e) {
- console.log("f:onCanvasMouseUp()");
+// console.log("f:onCanvasMouseUp()");
// console.log("onmouseup");
dragging = false;
console.log("doodleBounds: " + doodleBounds);
@@ -370,10 +378,13 @@ function onCanvasMouseUp(e) {
function onCanvasTouchDown(e) {
e.preventDefault();
+ console.log("f:onCanvasTouchDown >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
- var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
- var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+// var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
+// var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+ var x = e.touches[0].layerX;
+ var y = e.touches[0].layerY;
_points.push([x, y, true]);
adjustBounds(x, y);
@@ -387,10 +398,13 @@ function onCanvasTouchDown(e) {
function onCanvasTouchMove(e) {
e.preventDefault();
+ console.log("f:onCanvasTouchMove >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+// var x = e.touches[0].layerX;
+// var y = e.touches[0].layerY;
if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
diff --git a/js/init_layout.js b/js/init_layout.js
index b7e3262..2c7e683 100644
--- a/js/init_layout.js
+++ b/js/init_layout.js
@@ -1,131 +1,27 @@
-var imgDims = [320, 320]; // width and height of image
-
-function doClientAndOrientationStuff() {
- console.log("f:doClientAndOrientationStuff()");
-
- $(".agentInfo").text("");
-
- /*
- if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
- if (window.orientation == -90 || window.orientation == 90) {
- // landscape
-// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
- } else {
- // portrait
- $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
- }
- }
- return;
- //*/
-
- if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
- console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation);
- if (window.orientation == -90 || window.orientation == 90) {
- console.log(" landscape");
- // landscape
-
- // var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
- var ww = 0; //get proper width
- if (window.innerWidth) {
- ww = window.innerWidth;
- // if (window.screen.availWidth) {
-// ww = window.screen.availWidth;
-
-// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
-// ww = window.innerWidth;
-// }
- } else if($(window).width()) {
- ww = $(window).width();
- } else {
-
- }
-
- // ww = 480;
-
- var mw = imgDims[0]; // min width of site
- //*
- if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
- var mw = imgDims[1]; // in landscape: min-width is image width
- }
- //*/
- var ratio = ww / mw; //calculate ratio
- $('#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);
- // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
- }else{ //regular size
-// $(".colmask").css("background-color", "#0ff");
- // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
- }
-
- console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio);
-
- $(".agentInfo").append("ww: " + ww + ", mw: " + mw + "
"); - $(".agentInfo").append("ratio: " + ratio + "
"); - $(".agentInfo").append("
"); - } else { - console.log(" portrait"); - // 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,minimum-scale=1.0,user-scalable=no'); - } - - } else { - // console.log("else"); - $(".colmask").css("background-color", "#f80"); - - } - - - $(".agentInfo").append("$(window).width(): " + $(window).width() + "
"); - $(".agentInfo").append("window.screen.width: " + window.screen.width+ "
"); - $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("window.innerWidth: " + window.innerWidth + "
"); - $(".agentInfo").append("window.innerHeight: " + window.innerHeight + "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("$(window).height(): " + $(window).height() + "
"); - $(".agentInfo").append("window.screen.height: " + window.screen.height+ "
"); - $(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("user agent: " + navigator.userAgent + "
"); -}; - -function doOnOrientationChange() { - console.log("doOnOrientationChange"); - doClientAndOrientationStuff(); - - // switch(window.orientation) { - // case -90: - // case 90: - // alert('landscape'); - // break; - // default: - // alert('portrait'); - // break; - // } -} - var drawAreaContainerMinHeight = 300; var drawAreaContainerMaxHeight = 450; function doOnResize() { // console.log("doOnResize() >> " + new Date().getTime()); // $(".container").css("height", window.innerHeight); - // code from new layouting approach... //TODO give this a more logical spot - $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); - canvas.width = canvas.clientWidth; - canvas.height = canvas.clientHeight; - // $("#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); + $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45); + + canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth; + canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; + + preview.width = 150; + preview.height = $drawAreaContainer.height(); // preview.width = parseInt($preview.css("width"), 10); // preview.height = parseInt($preview.css("height"), 10); + canvasWidth = canvas.width; canvasHeight = canvas.height; + drawCanvasTopLeftCoords[0] = drawCanvas.offset().left; + drawCanvasTopLeftCoords[1] = drawCanvas.offset().top; +// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft; +// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop; + redrawDoodle(); redrawPreview(); @@ -167,49 +63,24 @@ function initLayouting() { - $drawAreaContainer = $("#drawAreaContainer"); // $doodleCanvas = $("#mycanvas"); // doodleCanvas = $("#mycanvas")[0]; // doodleCanvasContext = doodleCanvas.getContext('2d'); + $drawAreaContainer = $("#drawAreaContainer"); $drawAreaContainer.css("margin", 0); $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2); - $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); + $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45); - canvas.width = canvas.clientWidth; - canvas.height = canvas.clientHeight; + canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth; + canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; + + preview.width = 150; + preview.height = $drawAreaContainer.height(); - // code from new layouting approach... //TODO give this a more logical spot -// $("#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("")); - -// imgDims = [1024, 768]; - - /* - if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); - } else { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } - //*/ - - // $(".container").css("height", window.innerHeight); - // window.innerHeight console.log("window.innerHeight: " + window.innerHeight); console.log("window.innerWidth: " + window.innerWidth); @@ -233,14 +104,6 @@ function _startOrientationAndChangeEventListening() { $(window).on('resize', doOnResize); -// if (!window.addEventListener) { -// window.attachEvent('orientationchange', doOnOrientationChange, false); -// window.attachEvent('resize', doOnResize, false); -// } else { -// window.addEventListener('orientationchange', doOnOrientationChange, false); -// window.addEventListener('resize', doOnResize, false); -// } - // is it necessary to call these? Aren't they called by the above eventhandlers? // doClientAndOrientationStuff(); doOnResize();
diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js
index b20c231..aee80dc 100644
--- a/js/canvasDrawing_v01.js
+++ b/js/canvasDrawing_v01.js
@@ -41,6 +41,7 @@ var lineweight = 2;
function initDoodleDrawing() {
console.log("f:initDoodleDrawing()");
+ //*
//TODO make these jquery eventhandlers (works for all)
if (!canvas.addEventListener) {
canvas.attachEvent('onmousedown',onCanvasMouseDown);
@@ -57,14 +58,19 @@ function initDoodleDrawing() {
canvas.addEventListener('touchstart',onCanvasTouchDown,false);
canvas.addEventListener('touchmove',onCanvasTouchMove,false);
canvas.addEventListener('touchend',onCanvasTouchEnd,false);
- document.body.addEventListener('touchmove',prevent,false);
}
+ //*/
drawCanvas = $("#drawAreaContainer");
+// drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
- drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
- drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
+// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
+// drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
+ drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
+ drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
+// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
+// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
console.log("f:initDoodleDrawing() >> canvasWidth: " + canvasWidth);
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
@@ -146,6 +152,8 @@ function clearDoodle() {
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
+ dragging = false;
+
clearMainView();
resetPreview();
}
@@ -259,7 +267,7 @@ function onCanvasMouseDown(e) {
// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
// console.log("onmousedown >> e: " + e);
// console.log(e);
- console.log("f:onCanvasMouseDown()");
+// console.log("f:onCanvasMouseDown()");
dragging = true;
prevCountingTime = new Date().getTime();
@@ -288,7 +296,7 @@ function onCanvasMouseDown(e) {
var prevPoint = {x:-1, y:-1};
function onCanvasMouseMove(e) {
- console.log("f:onCanvasMouseMove()");
+// console.log("f:onCanvasMouseMove()");
if (!dragging) return;
// console.log("onmousemove");
@@ -349,7 +357,7 @@ prevUpdateFullPreview = 0; // 0 is not a timeframe but refers to the _points arr
prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
function onCanvasMouseUp(e) {
- console.log("f:onCanvasMouseUp()");
+// console.log("f:onCanvasMouseUp()");
// console.log("onmouseup");
dragging = false;
console.log("doodleBounds: " + doodleBounds);
@@ -370,10 +378,13 @@ function onCanvasMouseUp(e) {
function onCanvasTouchDown(e) {
e.preventDefault();
+ console.log("f:onCanvasTouchDown >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
- var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
- var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+// var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
+// var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+ var x = e.touches[0].layerX;
+ var y = e.touches[0].layerY;
_points.push([x, y, true]);
adjustBounds(x, y);
@@ -387,10 +398,13 @@ function onCanvasTouchDown(e) {
function onCanvasTouchMove(e) {
e.preventDefault();
+ console.log("f:onCanvasTouchMove >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
+// var x = e.touches[0].layerX;
+// var y = e.touches[0].layerY;
if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
diff --git a/js/init_layout.js b/js/init_layout.js
index b7e3262..2c7e683 100644
--- a/js/init_layout.js
+++ b/js/init_layout.js
@@ -1,131 +1,27 @@
-var imgDims = [320, 320]; // width and height of image
-
-function doClientAndOrientationStuff() {
- console.log("f:doClientAndOrientationStuff()");
-
- $(".agentInfo").text("");
-
- /*
- if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
- if (window.orientation == -90 || window.orientation == 90) {
- // landscape
-// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
- } else {
- // portrait
- $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
- }
- }
- return;
- //*/
-
- if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
- console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation);
- if (window.orientation == -90 || window.orientation == 90) {
- console.log(" landscape");
- // landscape
-
- // var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
- var ww = 0; //get proper width
- if (window.innerWidth) {
- ww = window.innerWidth;
- // if (window.screen.availWidth) {
-// ww = window.screen.availWidth;
-
-// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
-// ww = window.innerWidth;
-// }
- } else if($(window).width()) {
- ww = $(window).width();
- } else {
-
- }
-
- // ww = 480;
-
- var mw = imgDims[0]; // min width of site
- //*
- if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
- var mw = imgDims[1]; // in landscape: min-width is image width
- }
- //*/
- var ratio = ww / mw; //calculate ratio
- $('#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);
- // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
- }else{ //regular size
-// $(".colmask").css("background-color", "#0ff");
- // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
- }
-
- console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio);
-
- $(".agentInfo").append("ww: " + ww + ", mw: " + mw + ""); - $(".agentInfo").append("ratio: " + ratio + "
"); - $(".agentInfo").append("
"); - } else { - console.log(" portrait"); - // 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,minimum-scale=1.0,user-scalable=no'); - } - - } else { - // console.log("else"); - $(".colmask").css("background-color", "#f80"); - - } - - - $(".agentInfo").append("$(window).width(): " + $(window).width() + "
"); - $(".agentInfo").append("window.screen.width: " + window.screen.width+ "
"); - $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("window.innerWidth: " + window.innerWidth + "
"); - $(".agentInfo").append("window.innerHeight: " + window.innerHeight + "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("$(window).height(): " + $(window).height() + "
"); - $(".agentInfo").append("window.screen.height: " + window.screen.height+ "
"); - $(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "
"); - $(".agentInfo").append("
"); - $(".agentInfo").append("user agent: " + navigator.userAgent + "
"); -}; - -function doOnOrientationChange() { - console.log("doOnOrientationChange"); - doClientAndOrientationStuff(); - - // switch(window.orientation) { - // case -90: - // case 90: - // alert('landscape'); - // break; - // default: - // alert('portrait'); - // break; - // } -} - var drawAreaContainerMinHeight = 300; var drawAreaContainerMaxHeight = 450; function doOnResize() { // console.log("doOnResize() >> " + new Date().getTime()); // $(".container").css("height", window.innerHeight); - // code from new layouting approach... //TODO give this a more logical spot - $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); - canvas.width = canvas.clientWidth; - canvas.height = canvas.clientHeight; - // $("#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); + $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45); + + canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth; + canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; + + preview.width = 150; + preview.height = $drawAreaContainer.height(); // preview.width = parseInt($preview.css("width"), 10); // preview.height = parseInt($preview.css("height"), 10); + canvasWidth = canvas.width; canvasHeight = canvas.height; + drawCanvasTopLeftCoords[0] = drawCanvas.offset().left; + drawCanvasTopLeftCoords[1] = drawCanvas.offset().top; +// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft; +// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop; + redrawDoodle(); redrawPreview(); @@ -167,49 +63,24 @@ function initLayouting() { - $drawAreaContainer = $("#drawAreaContainer"); // $doodleCanvas = $("#mycanvas"); // doodleCanvas = $("#mycanvas")[0]; // doodleCanvasContext = doodleCanvas.getContext('2d'); + $drawAreaContainer = $("#drawAreaContainer"); $drawAreaContainer.css("margin", 0); $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2); - $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); + $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45); - canvas.width = canvas.clientWidth; - canvas.height = canvas.clientHeight; + canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth; + canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; + + preview.width = 150; + preview.height = $drawAreaContainer.height(); - // code from new layouting approach... //TODO give this a more logical spot -// $("#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("")); - -// imgDims = [1024, 768]; - - /* - if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) { - imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); - } else { - imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - } - //*/ - - // $(".container").css("height", window.innerHeight); - // window.innerHeight console.log("window.innerHeight: " + window.innerHeight); console.log("window.innerWidth: " + window.innerWidth); @@ -233,14 +104,6 @@ function _startOrientationAndChangeEventListening() { $(window).on('resize', doOnResize); -// if (!window.addEventListener) { -// window.attachEvent('orientationchange', doOnOrientationChange, false); -// window.attachEvent('resize', doOnResize, false); -// } else { -// window.addEventListener('orientationchange', doOnOrientationChange, false); -// window.addEventListener('resize', doOnResize, false); -// } - // is it necessary to call these? Aren't they called by the above eventhandlers? // doClientAndOrientationStuff(); doOnResize();