vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-25 18:47:57 +01:00
Code Issues Releases Wiki Activity

a lot of changes -> almost there but the drawing is not consistent yet across devices.

Browse Source 
Drawing on the draw canvas is going OK but the preview is not drawing well now.
Giving up for now.
This commit is contained in:
Adriaan Wormgoor 2013-09-18 19:08:58 +02:00
parent c51107a275
commit 6e32a36e12
4 changed files with 52 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
css/fixedPosInterface.css
View File

@ -60,7 +60,7 @@ body {
border: 2px solid #333; border: 2px solid #333;
} }
.container { .uiButtonsContainer {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -68,31 +68,12 @@ body {
right: 0; right: 0;
width: 100%; width: 100%;
height: 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 { #drawAreaContainer {
/*position: absolute;*/
/*top: 193px;*/
/*left: 193px;*/
/*width: 650px;*/
/*height: 450px;*/
/*background-color: #fff;*/
/*border: 4px solid #000;*/
/*border-radius: 15px;*/
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
/*margin: -225px 0 0 -325px;*/
background-color: #fff; background-color: #fff;
width: 65%; width: 65%;
min-width: 150px; min-width: 150px;
@ -100,8 +81,8 @@ body {
height: 60%; height: 60%;
min-height: 150px; min-height: 150px;
max-height: 450px; max-height: 450px;
/*border: 4px solid #000;*/ border: 4px solid #000;
/*border-radius: 15px;*/ border-radius: 15px;
} }
#canvasContainers { #canvasContainers {
@ -115,63 +96,36 @@ body {
height: 100%; height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
/*border: 4px solid #000;*/
/*border-radius: 15px;*/
} }
#mycanvasContainer { #mycanvasContainer {
display:table-cell; display:table-cell;
width: auto; width: auto;
height: 100%; 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 { #mycanvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
/*float: left;*/ /*float: left;*/
border-width: 0px;
background-color: #f0f;
border-right: 2px solid #333; 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 { #preview {
width: 150px; width: 150px;
height: 100%; height: 100%;
float: right; float: right;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-width: 0px;
background-color: #0ff;
} }
/* DEBUG THING */
#preview_tmp { #preview_tmp {
position: absolute; position: absolute;
top: 0px; top: 0px;

2
index.html
View File

@ -26,7 +26,7 @@
<div class="agentInfo"></div> <div class="agentInfo"></div>
</div> </div>
<div id="landscape"> <div id="landscape">
<div class="container"> <div class="uiButtonsContainer">
<img class="bgTop" src="img/bg_top.png" /> <img class="bgTop" src="img/bg_top.png" />
<img class="bgMiddle" src="img/bg_middle.png" /> <img class="bgMiddle" src="img/bg_middle.png" />
<img class="bgBottom" src="img/bg_bottom.png" /> <img class="bgBottom" src="img/bg_bottom.png" />

30
js/canvasDrawing_v01.js
View File

@ -41,6 +41,7 @@ var lineweight = 2;
function initDoodleDrawing() { function initDoodleDrawing() {
console.log("f:initDoodleDrawing()"); console.log("f:initDoodleDrawing()");
//*
//TODO make these jquery eventhandlers (works for all) //TODO make these jquery eventhandlers (works for all)
if (!canvas.addEventListener) { if (!canvas.addEventListener) {
canvas.attachEvent('onmousedown',onCanvasMouseDown); canvas.attachEvent('onmousedown',onCanvasMouseDown);
@ -57,14 +58,19 @@ function initDoodleDrawing() {
canvas.addEventListener('touchstart',onCanvasTouchDown,false); canvas.addEventListener('touchstart',onCanvasTouchDown,false);
canvas.addEventListener('touchmove',onCanvasTouchMove,false); canvas.addEventListener('touchmove',onCanvasTouchMove,false);
canvas.addEventListener('touchend',onCanvasTouchEnd,false); canvas.addEventListener('touchend',onCanvasTouchEnd,false);
document.body.addEventListener('touchmove',prevent,false);
} }
//*/
drawCanvas = $("#drawAreaContainer"); drawCanvas = $("#drawAreaContainer");
// drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords); console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
drawCanvasTopLeftCoords[0] = drawCanvas.css("left").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[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() >> canvasWidth: " + canvasWidth);
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight); console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
@ -146,6 +152,8 @@ function clearDoodle() {
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ] doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
dragging = false;
clearMainView(); clearMainView();
resetPreview(); resetPreview();
} }
@ -259,7 +267,7 @@ function onCanvasMouseDown(e) {
// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY); // console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
// console.log("onmousedown >> e: " + e); // console.log("onmousedown >> e: " + e);
// console.log(e); // console.log(e);
console.log("f:onCanvasMouseDown()"); // console.log("f:onCanvasMouseDown()");
dragging = true; dragging = true;
prevCountingTime = new Date().getTime(); prevCountingTime = new Date().getTime();
@ -288,7 +296,7 @@ function onCanvasMouseDown(e) {
var prevPoint = {x:-1, y:-1}; var prevPoint = {x:-1, y:-1};
function onCanvasMouseMove(e) { function onCanvasMouseMove(e) {
console.log("f:onCanvasMouseMove()"); // console.log("f:onCanvasMouseMove()");
if (!dragging) return; if (!dragging) return;
// console.log("onmousemove"); // 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 prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
function onCanvasMouseUp(e) { function onCanvasMouseUp(e) {
console.log("f:onCanvasMouseUp()"); // console.log("f:onCanvasMouseUp()");
// console.log("onmouseup"); // console.log("onmouseup");
dragging = false; dragging = false;
console.log("doodleBounds: " + doodleBounds); console.log("doodleBounds: " + doodleBounds);
@ -370,10 +378,13 @@ function onCanvasMouseUp(e) {
function onCanvasTouchDown(e) { function onCanvasTouchDown(e) {
e.preventDefault(); e.preventDefault();
console.log("f:onCanvasTouchDown >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft; // var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop; // var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0]; // var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1]; // 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]); _points.push([x, y, true]);
adjustBounds(x, y); adjustBounds(x, y);
@ -387,10 +398,13 @@ function onCanvasTouchDown(e) {
function onCanvasTouchMove(e) { function onCanvasTouchMove(e) {
e.preventDefault(); e.preventDefault();
console.log("f:onCanvasTouchMove >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft; // var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop; // var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0]; var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1]; 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) { if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2)); var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));

177
js/init_layout.js
View File

@ -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 + "<br/>");
$(".agentInfo").append("ratio: " + ratio + "<br/>");
$(".agentInfo").append("<br/>");
} 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() + "<br/>");
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("window.innerWidth: " + window.innerWidth + "<br/>");
$(".agentInfo").append("window.innerHeight: " + window.innerHeight + "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("$(window).height(): " + $(window).height() + "<br/>");
$(".agentInfo").append("window.screen.height: " + window.screen.height+ "<br/>");
$(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("user agent: " + navigator.userAgent + "<br/>");
};
function doOnOrientationChange() {
console.log("doOnOrientationChange");
doClientAndOrientationStuff();
// switch(window.orientation) {
// case -90:
// case 90:
// alert('landscape');
// break;
// default:
// alert('portrait');
// break;
// }
}
var drawAreaContainerMinHeight = 300; var drawAreaContainerMinHeight = 300;
var drawAreaContainerMaxHeight = 450; var drawAreaContainerMaxHeight = 450;
function doOnResize() { function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime()); // console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight); // $(".container").css("height", window.innerHeight);
// code from new layouting approach... //TODO give this a more logical spot $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
canvas.width = canvas.clientWidth; canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
canvas.height = canvas.clientHeight; canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10)); preview.width = 150;
// canvas.width = parseInt($canvas.css("width"), 10); preview.height = $drawAreaContainer.height();
// canvas.height = parseInt($canvas.css("height"), 10);
// preview.width = parseInt($preview.css("width"), 10); // preview.width = parseInt($preview.css("width"), 10);
// preview.height = parseInt($preview.css("height"), 10); // preview.height = parseInt($preview.css("height"), 10);
canvasWidth = canvas.width; canvasWidth = canvas.width;
canvasHeight = canvas.height; 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(); redrawDoodle();
redrawPreview(); redrawPreview();
@ -167,49 +63,24 @@ function initLayouting() {
<!--canvas mycanvas 500, 450--> <!--canvas mycanvas 500, 450-->
<!--canvas preview 150, 450--> <!--canvas preview 150, 450-->
$drawAreaContainer = $("#drawAreaContainer");
// $doodleCanvas = $("#mycanvas"); // $doodleCanvas = $("#mycanvas");
// doodleCanvas = $("#mycanvas")[0]; // doodleCanvas = $("#mycanvas")[0];
// doodleCanvasContext = doodleCanvas.getContext('2d'); // doodleCanvasContext = doodleCanvas.getContext('2d');
$drawAreaContainer = $("#drawAreaContainer");
$drawAreaContainer.css("margin", 0); $drawAreaContainer.css("margin", 0);
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2); $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.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
canvas.height = canvas.clientHeight; 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; canvasWidth = canvas.width;
canvasHeight = canvas.height; 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 // window.innerHeight
console.log("window.innerHeight: " + window.innerHeight); console.log("window.innerHeight: " + window.innerHeight);
console.log("window.innerWidth: " + window.innerWidth); console.log("window.innerWidth: " + window.innerWidth);
@ -233,14 +104,6 @@ function _startOrientationAndChangeEventListening() {
$(window).on('resize', doOnResize); $(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? // is it necessary to call these? Aren't they called by the above eventhandlers?
// doClientAndOrientationStuff(); // doClientAndOrientationStuff();
doOnResize(); doOnResize();