From 6e32a36e12e2ea224209be1addfa9755260c13a8 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Wed, 18 Sep 2013 19:08:58 +0200 Subject: [PATCH] a lot of changes -> almost there but the drawing is not consistent yet across devices. Drawing on the draw canvas is going OK but the preview is not drawing well now. Giving up for now. --- css/fixedPosInterface.css | 64 ++------------ index.html | 2 +- js/canvasDrawing_v01.js | 30 +++++-- js/init_layout.js | 177 +++++--------------------------------- 4 files changed, 52 insertions(+), 221 deletions(-) diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css index cc8f81b..062b76e 100644 --- a/css/fixedPosInterface.css +++ b/css/fixedPosInterface.css @@ -60,7 +60,7 @@ body { border: 2px solid #333; } -.container { +.uiButtonsContainer { position: absolute; top: 0; bottom: 0; @@ -68,31 +68,12 @@ body { right: 0; width: 100%; height: 100%; - /*margin: 0px auto;*/ - - /*position: fixed;*/ - /*top: 0px;*/ - /*left: 0px;*/ - /*width: 1024px;*/ - /*min-height: 500px;*/ - /*max-height: 768px;*/ - /*height: 100%;*/ -/* height: 768px;*/ } #drawAreaContainer { - /*position: absolute;*/ - /*top: 193px;*/ - /*left: 193px;*/ - /*width: 650px;*/ - /*height: 450px;*/ - /*background-color: #fff;*/ - /*border: 4px solid #000;*/ - /*border-radius: 15px;*/ position: absolute; top: 50%; left: 50%; - /*margin: -225px 0 0 -325px;*/ background-color: #fff; width: 65%; min-width: 150px; @@ -100,8 +81,8 @@ body { height: 60%; min-height: 150px; max-height: 450px; - /*border: 4px solid #000;*/ - /*border-radius: 15px;*/ + border: 4px solid #000; + border-radius: 15px; } #canvasContainers { @@ -115,63 +96,36 @@ body { height: 100%; padding: 0; margin: 0; - /*border: 4px solid #000;*/ - /*border-radius: 15px;*/ } #mycanvasContainer { display:table-cell; width: auto; height: 100%; - /*border: 4px solid #000;*/ } -#previewContainer { - display:table-cell; - width: 150px; - height: 100%; - /*border: 4px solid #000;*/ - /*border-radius: 15px;*/ -} - -/*#canvasContainers {*/ - /*position: absolute;*/ - /*top: 0;*/ - /*left: 0;*/ - /*right: 0;*/ - /*bottom: 0;*/ - /*width: 100%;*/ - /*background-color: #0e0;*/ -/*}*/ - #mycanvas { width: 100%; height: 100%; margin: 0; padding: 0; /*float: left;*/ - border-width: 0px; - background-color: #f0f; border-right: 2px solid #333; - /*border-radius: 15px;*/ - /*border-radius: 15px;*/ - border-radius-topleft: 15px; - /*border-radius-topright: 15px;*/ - -moz-border-radius-topleft: 15px; - /*-moz-border-radius-topright: 15px;*/ - -webkit-border-radius-topleft: 15px; - /*-webkit-border-radius-topright: 15px;*/ } +#previewContainer { + display:table-cell; + width: 150px; + height: 100%; +} #preview { width: 150px; height: 100%; float: right; margin: 0; padding: 0; - border-width: 0px; - background-color: #0ff; } +/* DEBUG THING */ #preview_tmp { position: absolute; top: 0px; diff --git a/index.html b/index.html index 73c4f17..3e0fbdb 100755 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@
-
+
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();