0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-12-25 14:23:48 +01:00

adjusted css and htmls

This commit is contained in:
Adriaan Wormgoor 2013-07-28 02:46:32 +02:00
parent 6990cf37ab
commit f439592faf
7 changed files with 145 additions and 53 deletions

View File

@ -36,7 +36,7 @@ img {
top: 10px;
width: 194px;
height: 170px;
background: url('../img/buttons/btnNew.png');
background: url('../img/buttons/btnNew.png') no-repeat;
}
#btnPrevious {
@ -62,7 +62,7 @@ img {
/* bottom: 150px;*/
width: 146px;
height: 144px;
background: url('../img/buttons/btnOops.png');
background: url('../img/buttons/btnOops.png') no-repeat;
}
#btnPrint {
@ -77,12 +77,12 @@ img {
#btnInfo {
right: 25px;
bottom: 20px;
bottom: 90px;
}
#btnSettings {
right: 25px;
bottom: 90px;
bottom: 20px;
}

View File

@ -8,30 +8,30 @@ body {
display: table;
}
.big {
background: #a6e19c;
border: 1px solid #222;
height: 64px;
width: 64px;
display: table-cell;
vertical-align: middle;
text-align: center;
border-radius: 32px;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
}
.small {
background: #a3d5f7;
border: 1px solid #222;
height: 40px;
width: 40px;
display: table-cell;
vertical-align: middle;
text-align: center;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*.big {*/
/*background: #a6e19c;*/
/*border: 1px solid #222;*/
/*height: 64px;*/
/*width: 64px;*/
/*display: table-cell;*/
/*vertical-align: middle;*/
/*text-align: center;*/
/*border-radius: 32px;*/
/*-moz-border-radius: 32px;*/
/*-webkit-border-radius: 32px;*/
/*}*/
/*.small {*/
/*background: #a3d5f7;*/
/*border: 1px solid #222;*/
/*height: 40px;*/
/*width: 40px;*/
/*display: table-cell;*/
/*vertical-align: middle;*/
/*text-align: center;*/
/*border-radius: 20px;*/
/*-moz-border-radius: 20px;*/
/*-webkit-border-radius: 20px;*/
/*}*/
#logo {
position: absolute;
@ -173,15 +173,29 @@ body {
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.94;
-moz-transform: translate(0px,-5px) scale(.94);
}
#btnNew {
zoom: 0.94;
-moz-transform: translate(-5px,-5px) scale(.94);
/*-moz-transform: translate(-3px,-3px);*/
}
#btnOops {
zoom: 0.94;
-moz-transform: translate(-5px,-10px) scale(0.94);
}
#btnPrint {
right: 10px;
top: 10px;
-moz-transform: translate(5px,-5px);
}
.btn {
zoom: 0.94;
-moz-transform: scale(.94);
}
#drawAreaContainer {
@ -193,27 +207,43 @@ body {
@media screen and (max-height: 560px) {
#d3dlogo {
zoom: 0.8;
left: 34%;
-moz-transform: translate(-20px,-15px) scale(.8);
/*-moz-transform: ;*/
left: 34%;
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.86;
-moz-transform: translate(0px,-7px) scale(0.86);
}
#btnPrint {
right: 6px;
-moz-transform: translate(10px,-10px);
}
#btnNew {
zoom: 0.86;
-moz-transform: translate(-10px,-10px) scale(.86);
}
.btn {
zoom: 0.86;
-moz-transform: scale(.86);
}
#btnOops {
top: 350px;
zoom: 0.86;
-moz-transform: translate(-10px,-25px) scale(.86);
}
#btnSave {
-moz-transform: translate(-5px,-13px);
}
#btnSave {
top: 200px;
#btnPrevious, #btnNext {
/*top: 200px;*/
-moz-transform: translate(-5px,-10px);
}
#drawAreaContainer {

View File

@ -14,6 +14,7 @@
<link href="css/normalize.css" rel="stylesheet" media="screen">
<link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
<link href="css/d3d_btns.css" rel="stylesheet" media="screen">
<link href="css/settingsPopup.css" rel="stylesheet" media="screen">
<style type="text/css">
.debugContainer {
@ -94,6 +95,22 @@
<div id="debug_textArea" style="position:absolute; bottom: -600px; width: 800px; height: 600px;">
<textarea rows="5" cols="115" id="textdump"></textarea>
</div>
<div id="contentOverlay">
<div id="settingsContainer">
<div id="settings">
<header>
<img src="img/settings_lable.png" alt="settings"/>
</header>
<div class="content">
<div class="settings">henk</div>
<div class="buttons">
<div class="btnOK"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="portrait">
<img class="vertImage" src="img/bg_vertical2.png"/>
@ -117,7 +134,7 @@
$("#btnNext").css("opacity", "0.3");
$("#btnSave").css("opacity", "0.3");
$("#btnInfo").css("opacity", "0.3");
$("#btnSettings").css("opacity", "0.3");
// $("#btnSettings").css("opacity", "0.3");
// var debug = true;
@ -131,6 +148,13 @@
initButtonBehavior();
initSettingsPopup();
$("#settings .settings").load("settings.html", function() {
console.log("finished loading settings.html, now loading settings...");
loadSettings();
});
if(debug) {
console.log("debug mode");
$("body").css("overflow", "auto");

View File

@ -171,10 +171,22 @@ function initButtonBehavior() {
btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
btnTwistRight.on('touchend', function(e) { stopTwistRight(e) });
btnSettings.mouseup(function(e) {
function openSettings() {
console.log("f:openSettings()");
$("#contentOverlay").fadeIn(1000, function() {
loadSettings();
});
}
btnSettings.click(function(e) {
e.preventDefault();
console.log("btnSettings mouse up");
console.log("btnSettings clicked");
showSettings();
});
// btnSettings.on('touchend', function(e) {
// e.preventDefault();
// console.log("btnSettings touchend");
// });
btnInfo.mouseup(function(e) {
e.preventDefault();
@ -210,8 +222,6 @@ function print(e) {
var gencode = generate_gcode();
startPrint();
// console.log("");
// console.log("");
// console.log("-------------------------------------------------");

View File

@ -210,7 +210,7 @@ function adjustPreviewTransformation() {
var sclX, sclY, finalScl;
if (_points.length < 2) {
console.log(_points);
// console.log(_points);
sclX = 1.0;
sclY = 1.0;
finalScl = Math.min(sclX, sclY);
@ -233,7 +233,11 @@ function adjustPreviewTransformation() {
*
* * * * * * * * * */
function onCanvasMouseDown(e) {
// console.log("onmousedown");
// console.log("onmousedown");
// console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
// console.log("onmousedown >> e: " + e);
// console.log(e);
dragging = true;
prevCountingTime = new Date().getTime();
@ -243,10 +247,21 @@ function onCanvasMouseDown(e) {
// adjustBounds(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
// adjustPreviewTransformation();
// draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, 0.5);
_points.push([e.offsetX,e.offsetY, true]);
adjustBounds(e.offsetX,e.offsetY);
var x, y;
if (e.offsetX != undefined) {
x = e.offsetX;
y = e.offsetY;
} else {
x = e.layerX;
y = e.layerY;
}
// console.log(" x: " + x + ", y: " + y);
_points.push([x, y, true]);
adjustBounds(x, y);
adjustPreviewTransformation();
draw(e.offsetX,e.offsetY, 0.5);
draw(x, y, 0.5);
}
function onCanvasMouseMove(e) {
@ -258,10 +273,19 @@ function onCanvasMouseMove(e) {
// adjustPreviewTransformation();
// draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
_points.push([e.offsetX,e.offsetY, false]);
adjustBounds(e.offsetX,e.offsetY);
var x, y;
if (e.offsetX != undefined) {
x = e.offsetX;
y = e.offsetY;
} else {
x = e.layerX;
y = e.layerY;
}
_points.push([x, y, false]);
adjustBounds(x, y);
adjustPreviewTransformation();
draw(e.offsetX,e.offsetY);
draw(x, y);
// update counter -> this was for getting a handle on how often the Canvas fires a move-event
/*

View File

@ -13,14 +13,17 @@ function startPrint() {
// sendLength = 2000; // 2000 regels
// sendGCodeSlice(sendIndex, sendLength);
$.post(kastjeURL + "test/" + "write/", { data: "test"}, function(data) {
console.log("returned data: " + JSON.stringify(data));
data = JSON.parse(data);
console.log(" data.msg: " + data.msg);
console.log(" data.status: " + data.status);
// console.log(" status: " + data["status"]);
// btnPrint.disabled = false;
});
// 2013-07-28 tot hier en niet verder... de GCODE kan al wel worden gegenereerd, maar we sturen het nu niet naar het kastje.
/*
$.post(kastjeURL + "test/" + "write/", { data: "test"}, function(data) {
console.log("returned data: " + JSON.stringify(data));
data = JSON.parse(data);
console.log(" data.msg: " + data.msg);
console.log(" data.status: " + data.status);
// console.log(" status: " + data["status"]);
// btnPrint.disabled = false;
});
//*/
//http://192.168.10.1/cgi-bin/d3dapi/write
}

View File

@ -101,7 +101,7 @@ function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight);
// doClientAndOrientationStuff() // <-- is this necessary in this method?
doClientAndOrientationStuff() // <-- is this necessary in this method?
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
if (window.innerHeight < 768) {
@ -178,6 +178,7 @@ function initLayouting() {
doOnResize();
// doOnOrientationChange();
// window.innerHeight
console.log("window.innerHeight: " + window.innerHeight);
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());