From 066eb182f08d7806b7288b0261f8d915cf67ed15 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Wed, 18 Sep 2013 16:02:51 +0200 Subject: [PATCH] intermediary progress --- css/fixedPosInterface.css | 122 +++++++++++++++++++++++--------------- index.html | 10 +++- js/init_layout.js | 35 +++++++---- js/main.js | 13 +--- 4 files changed, 106 insertions(+), 74 deletions(-) diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css index 2da5bb4..c63af8e 100644 --- a/css/fixedPosInterface.css +++ b/css/fixedPosInterface.css @@ -43,12 +43,13 @@ body { left: 0; right: 0; width: 100%; - max-width: 1024px; height: 100%; + max-width: 1024px; + max-height: 768px; margin: 0px auto; } /* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */ -#landscape:after { +#landscape:before { content:' '; display:block; position:absolute; @@ -93,15 +94,75 @@ body { left: 50%; /*margin: -225px 0 0 -325px;*/ background-color: #fff; - width: 75%; + width: 65%; min-width: 150px; max-width: 650px; - height: 70%; + height: 60%; min-height: 150px; + max-height: 450px; border: 4px solid #000; border-radius: 15px; } +#canvasContainers { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + /*height: 100%;*/ + background-color: #0e0; +} + +#mycanvas, #preview { + /*border: 1px solid #08c;*/ + /*float:left;*/ +} + +#mycanvasContainer { + display: table-cell; + float:left; +} + +#previewContainer { + display: table-cell; +} + +#mycanvas { + /*width: 500px;*/ + /*height: 450px;*/ + /*border: 0px solid #333;*/ + border-right: 2px solid #333; + /*background-color: #f0f;*/ + + /*position: absolute;*/ + /*top: 0;*/ + /*bottom: 0;*/ + /*left: 0;*/ + /*right: 0;*/ + /*width: 80%;*/ + /*float:left;*/ + /*width: 100%;*/ + /*height: 100%;*/ + background: #808; +} + +#preview { + /*border: 1px solid #f8c;*/ + /*position: absolute;*/ + /*right: 0px;*/ + /*top: 0px;*/ + + float:right; + width: 150px; + height: 100%; + background: #f44; + + /*width: 150px;*/ + /*height: 450px;*/ +} + #preview_tmp { position: absolute; top: 0px; @@ -111,41 +172,6 @@ body { display: none; } -#mycanvas, #preview { - /*border: 1px solid #08c;*/ - float: left; -} - -#mycanvas { - /*width: 500px;*/ - /*height: 450px;*/ - /*border: 0px solid #333;*/ - /*border-right: 2px solid #333;*/ - /*background-color: #f0f;*/ - - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 80%; - height: 100%; - background: #808; -} - -#preview { - /*border: 1px solid #f8c;*/ - position: absolute; - right: 0px; - top: 0px; - - /*width: 150px;*/ - /*height: 450px;*/ - - width: 20%; - height: 100%; -} - /* @@ -245,7 +271,6 @@ body { /* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */ -/* @media screen and (max-height: 675px) { .bgMiddle { display: none; @@ -284,10 +309,10 @@ body { -moz-transform: scale(.94); } - #drawAreaContainer { - top: 128px; - height: 350px; - } + /*#drawAreaContainer {*/ + /*top: 128px;*/ + /*height: 350px;*/ + /*}*/ } @media screen and (max-height: 560px) { @@ -331,12 +356,11 @@ body { -moz-transform: translate(-5px,-10px); } - #drawAreaContainer { - top: 110px; - height: 350px; - } + /*#drawAreaContainer {*/ + /*top: 110px;*/ + /*height: 350px;*/ + /*}*/ } -//*/ diff --git a/index.html b/index.html index 4e462dd..73c4f17 100755 --- a/index.html +++ b/index.html @@ -55,8 +55,14 @@
- - +
+
+ +
+
+ +
+
diff --git a/js/init_layout.js b/js/init_layout.js index b18fc78..b7e3262 100644 --- a/js/init_layout.js +++ b/js/init_layout.js @@ -115,18 +115,21 @@ function doOnResize() { // code from new layouting approach... //TODO give this a more logical spot $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); - doodleCanvas.width = doodleCanvas.clientWidth; - doodleCanvas.height = doodleCanvas.clientHeight; + 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); - preview.width = parseInt($preview.css("width"), 10); - preview.height = parseInt($preview.css("height"), 10); +// preview.width = parseInt($preview.css("width"), 10); +// preview.height = parseInt($preview.css("height"), 10); canvasWidth = canvas.width; canvasHeight = canvas.height; - //return; + redrawDoodle(); + redrawPreview(); + + return; // doClientAndOrientationStuff() // <-- is this necessary in this method? @@ -164,16 +167,25 @@ function initLayouting() { - // code from new layouting approach... //TODO give this a more logical spot + $drawAreaContainer = $("#drawAreaContainer"); +// $doodleCanvas = $("#mycanvas"); +// doodleCanvas = $("#mycanvas")[0]; +// doodleCanvasContext = doodleCanvas.getContext('2d'); + + $drawAreaContainer.css("margin", 0); + $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2); $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); - doodleCanvas.width = doodleCanvas.clientWidth; - doodleCanvas.height = doodleCanvas.clientHeight; + + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; + + // 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); +// preview.width = parseInt($preview.css("width"), 10); +// preview.height = parseInt($preview.css("height"), 10); canvasWidth = canvas.width; canvasHeight = canvas.height; @@ -184,7 +196,8 @@ function initLayouting() { // imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); // imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); - imgDims = [1024, 768]; +// imgDims = [1024, 768]; + /* if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) { imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); diff --git a/js/main.js b/js/main.js index 5bf35f7..2c8dd6d 100644 --- a/js/main.js +++ b/js/main.js @@ -14,18 +14,7 @@ $(function() { console.log("ready"); - //TODO give more logical place in code - $drawAreaContainer = $("#drawAreaContainer"); - $doodleCanvas = $("#mycanvas"); - doodleCanvas = $("#mycanvas")[0]; - doodleCanvasContext = doodleCanvas.getContext('2d'); - - $drawAreaContainer.css("margin", 0); - $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2); - $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); - - doodleCanvas.width = doodleCanvas.clientWidth; - doodleCanvas.height = doodleCanvas.clientWidth; + //TODO give this a more logical place in code