vmario
/
doodle3d-client
mirror of https://github.com/Doodle3D/doodle3d-client.git
0
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/d3d_btns.css
View File

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

84
css/fixedPosInterface.css
View File

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

26
index.html
View File

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

18
js/buttonbehaviors.js
View File

@ -171,10 +171,22 @@ function initButtonBehavior() {
btnTwistRight.on('touchstart', function(e) { startTwistRight(e) }); btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
btnTwistRight.on('touchend', function(e) { stopTwistRight(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(); 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) { btnInfo.mouseup(function(e) {
e.preventDefault(); e.preventDefault();
@ -210,8 +222,6 @@ function print(e) {
var gencode = generate_gcode(); var gencode = generate_gcode();
startPrint(); startPrint();
// console.log(""); // console.log("");
// console.log(""); // console.log("");
// console.log("-------------------------------------------------"); // console.log("-------------------------------------------------");

40
js/canvasDrawing_v01.js
View File

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

19
js/doodlePrintCode.js
View File

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

3
js/init_layout.js
View File

@ -101,7 +101,7 @@ function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime()); // console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight); // $(".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); // console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
if (window.innerHeight < 768) { if (window.innerHeight < 768) {
@ -178,6 +178,7 @@ function initLayouting() {
doOnResize(); doOnResize();
// doOnOrientationChange(); // doOnOrientationChange();
// window.innerHeight // window.innerHeight
console.log("window.innerHeight: " + window.innerHeight); console.log("window.innerHeight: " + window.innerHeight);
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight()); console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());