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

intermediary progress

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-09-18 16:02:51 +02:00
parent bd83fc42f8
commit 066eb182f0
4 changed files with 106 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
css/fixedPosInterface.css
View File

@ -43,12 +43,13 @@ body {
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
max-width: 1024px;
height: 100%; height: 100%;
max-width: 1024px;
max-height: 768px;
margin: 0px auto; margin: 0px auto;
} }
/* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */ /* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */
#landscape:after { #landscape:before {
content:' '; content:' ';
display:block; display:block;
position:absolute; position:absolute;
@ -93,15 +94,75 @@ body {
left: 50%; left: 50%;
/*margin: -225px 0 0 -325px;*/ /*margin: -225px 0 0 -325px;*/
background-color: #fff; background-color: #fff;
width: 75%; width: 65%;
min-width: 150px; min-width: 150px;
max-width: 650px; max-width: 650px;
height: 70%; height: 60%;
min-height: 150px; min-height: 150px;
max-height: 450px;
border: 4px solid #000; border: 4px solid #000;
border-radius: 15px; 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 { #preview_tmp {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -111,41 +172,6 @@ body {
display: none; 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) */ /* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
/*
@media screen and (max-height: 675px) { @media screen and (max-height: 675px) {
.bgMiddle { .bgMiddle {
display: none; display: none;
@ -284,10 +309,10 @@ body {
-moz-transform: scale(.94); -moz-transform: scale(.94);
} }
#drawAreaContainer { /*#drawAreaContainer {*/
top: 128px; /*top: 128px;*/
height: 350px; /*height: 350px;*/
} /*}*/
} }
@media screen and (max-height: 560px) { @media screen and (max-height: 560px) {
@ -331,12 +356,11 @@ body {
-moz-transform: translate(-5px,-10px); -moz-transform: translate(-5px,-10px);
} }
#drawAreaContainer { /*#drawAreaContainer {*/
top: 110px; /*top: 110px;*/
height: 350px; /*height: 350px;*/
} /*}*/
} }
//*/

6
index.html
View File

@ -55,8 +55,14 @@
</div> </div>
</div> </div>
<div id="drawAreaContainer"> <div id="drawAreaContainer">
<div id="canvasContainers">
<div id="mycanvasContainer">
<canvas id="mycanvas"></canvas> <canvas id="mycanvas"></canvas>
</div>
<div id="previewContainer">
<canvas id="preview"></canvas> <canvas id="preview"></canvas>
</div>
</div>
<canvas id="preview_tmp"></canvas> <canvas id="preview_tmp"></canvas>
<div class="manipulationBtns cf"> <div class="manipulationBtns cf">
<div id="btnsUpDown"> <div id="btnsUpDown">

35
js/init_layout.js
View File

@ -115,18 +115,21 @@ function doOnResize() {
// code from new layouting approach... //TODO give this a more logical spot // code from new layouting approach... //TODO give this a more logical spot
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2); $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
doodleCanvas.width = doodleCanvas.clientWidth; canvas.width = canvas.clientWidth;
doodleCanvas.height = doodleCanvas.clientHeight; canvas.height = canvas.clientHeight;
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10)); // $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10)); // $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
// canvas.width = parseInt($canvas.css("width"), 10); // canvas.width = parseInt($canvas.css("width"), 10);
// canvas.height = parseInt($canvas.css("height"), 10); // 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;
//return; redrawDoodle();
redrawPreview();
return;
// doClientAndOrientationStuff() // <-- is this necessary in this method? // doClientAndOrientationStuff() // <-- is this necessary in this method?
@ -164,16 +167,25 @@ function initLayouting() {
<!--canvas mycanvas 500, 450--> <!--canvas mycanvas 500, 450-->
<!--canvas preview 150, 450--> <!--canvas preview 150, 450-->
// 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); $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("width", parseInt($("#drawAreaContainer").css("width"), 10));
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10)); // $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
// canvas.width = parseInt($canvas.css("width"), 10); // canvas.width = parseInt($canvas.css("width"), 10);
// canvas.height = parseInt($canvas.css("height"), 10); // 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;
@ -184,7 +196,8 @@ function initLayouting() {
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join("")); // imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
// imgDims[1] = parseInt($(".container").css("height").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) ) { if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join("")); imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));

13
js/main.js
View File

@ -14,18 +14,7 @@ $(function() {
console.log("ready"); console.log("ready");
//TODO give more logical place in code //TODO give this a 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;