mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-24 10:07:57 +01:00
adjusted css and htmls
This commit is contained in:
Adriaan Wormgoor
parent
6990cf37ab
commit
f439592faf
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
-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 {
|
||||
|
||||
26
index.html
26
index.html
@ -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");
|
||||
|
||||
@ -171,11 +171,23 @@ function initButtonBehavior() {
|
||||
btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
|
||||
btnTwistRight.on('touchend', function(e) { stopTwistRight(e) });
|
||||
|
||||
btnSettings.mouseup(function(e) {
|
||||
e.preventDefault();
|
||||
console.log("btnSettings mouse up");
|
||||
function openSettings() {
|
||||
console.log("f:openSettings()");
|
||||
$("#contentOverlay").fadeIn(1000, function() {
|
||||
loadSettings();
|
||||
});
|
||||
|
||||
}
|
||||
btnSettings.click(function(e) {
|
||||
e.preventDefault();
|
||||
console.log("btnSettings clicked");
|
||||
showSettings();
|
||||
});
|
||||
// btnSettings.on('touchend', function(e) {
|
||||
// e.preventDefault();
|
||||
// console.log("btnSettings touchend");
|
||||
// });
|
||||
|
||||
btnInfo.mouseup(function(e) {
|
||||
e.preventDefault();
|
||||
console.log("btnInfo mouse up");
|
||||
@ -210,8 +222,6 @@ function print(e) {
|
||||
var gencode = generate_gcode();
|
||||
startPrint();
|
||||
|
||||
|
||||
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
// console.log("-------------------------------------------------");
|
||||
|
||||
@ -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);
|
||||
@ -234,6 +234,10 @@ function adjustPreviewTransformation() {
|
||||
* * * * * * * * * */
|
||||
function onCanvasMouseDown(e) {
|
||||
// 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
|
||||
/*
|
||||
|
||||
@ -13,6 +13,8 @@ function startPrint() {
|
||||
// sendLength = 2000; // 2000 regels
|
||||
// sendGCodeSlice(sendIndex, sendLength);
|
||||
|
||||
// 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);
|
||||
@ -21,6 +23,7 @@ function startPrint() {
|
||||
// console.log(" status: " + data["status"]);
|
||||
// btnPrint.disabled = false;
|
||||
});
|
||||
//*/
|
||||
|
||||
//http://192.168.10.1/cgi-bin/d3dapi/write
|
||||
}
|
||||
|
||||
@ -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());
|
||||
|
||||
Loading…
Reference in New Issue
Block a user