>>>>>> new_layouting_approach
- previewCtx.rotate(r);
- previewCtx.translate(-layerCX,-layerCY);
-
- previewCtx.drawImage(doodleImageCapture, 0, 0);
-
- y -= yStep;
- r += rStep;
- previewCtx.restore();
- }
- };
- doodleImageCapture.src = saved_rect_todataurl;
-
- previewCtx.globalAlpha = globalAlpha;
-}
-
-// called by the move up/down or twist left/right buttons
-// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
-function redrawRenderedPreview(redrawLess) {
- if (redrawLess == undefined) redrawLess = false;
- console.log("f:redrawRenderedPreview()");
-
- previewCtx.clearRect(0, 0, preview.width, preview.height);
- previewCtx.lineWidth = strokeWidth;
- previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
-
- var y = 0;
- var r = 0;
-
- for(var i = 0; i < numLayers; i++) {
-
- var verticalScaleFactor = scaleFunction(i / maxNumLayers);
-
- if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
- previewCtx.globalAlpha = 1;
- } else {
- previewCtx.globalAlpha = globalAlpha;
- }
-
- if (redrawLess && i%2 != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
- y -= yStep;
- r += rStep;
- continue;
- }
- previewCtx.save();
-
-<<<<<<< HEAD
- previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
-// previewCtx.scale(1, scaleY)
- previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
-=======
- previewCtx.translate(layerCX,layerOffsetY+y);
-// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
- previewCtx.scale(1, scaleY)
->>>>>>> new_layouting_approach
- previewCtx.rotate(r);
- previewCtx.translate(-layerCX,-layerCY);
-
- previewCtx.drawImage(doodleImageCapture, 0, 0);
-
- y -= yStep;
- r += rStep;
- previewCtx.restore();
- }
-}
-
-function centeredAndScaledDoodlePoint(p) {
- var obj = { x: 0, y: 0};
-
- obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
- obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
-// obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
-// obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
-// obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
-// obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
-
- return obj;
-}
-
-//*
-var updatePrevX = -1;
-var updatePrevY = -1;
-function updatePreview(_x, _y, redrawLess) {
- if (redrawLess == undefined) redrawLess = false;
- redrawLess = false;
-
- if (_points.length < 2) return;
- if (updatePrevX == -1 || updatePrevY == -1) {
- updatePrevX = _x;
- updatePrevY = _y;
- return;
- }
-
-// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
-
- var y = 0;
- var r = 0;
-
- previewCtx.lineWidth = strokeWidth;
- previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
-
- for(var i = 0; i < numLayers; i++) {
-
- if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
- previewCtx.globalAlpha = 1;
- } else {
- previewCtx.globalAlpha = globalAlpha;
- }
-
- if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
- y -= yStep;
- r += rStep;
- continue;
- }
-
- previewCtx.save();
-
-// previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
- previewCtx.translate(layerCX, layerOffsetY + y);
- previewCtx.scale(viewerScale, scaleY * viewerScale);
- previewCtx.rotate(r);
- previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
-
-
- previewCtx.beginPath();
- var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
- previewCtx.moveTo(prevPoint.x, prevPoint.y);
- var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
- previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
- previewCtx.stroke();
-
- y -= yStep;
- r += rStep;
- previewCtx.restore();
- }
- previewCtx.globalAlpha = globalAlpha;
- updatePrevX = _x;
- updatePrevY = _y;
-
-}
-//*/
\ No newline at end of file
diff --git a/less/base.less b/less/base.less
index 2fb5ae9..5375bbc 100644
--- a/less/base.less
+++ b/less/base.less
@@ -1,8 +1,7 @@
/*
-
GLOBAL CONTAINER
-
*/
+@import "config.less";
body {
@@ -10,20 +9,12 @@ body {
user-select: none; /* disable cut copy paste */
overflow:hidden; /* This chops off any overhanging divs */
}
-img {
- z-index: 5;
- /*pointer-events:none;*/
- /*-webkit-touch-callout: none; *//*disable callout, image save panel */
- /*-webkit-tap-highlight-color: transparent; *//* "turn off" link highlight */
-}
-/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
-.btn {
- background-repeat: no-repeat;
- cursor: pointer;
-}
+
+@import "buttons.less";
+@import "popup.less";
+
#landscape {
position:absolute;
-// background-color: #fff;
width: 100%;
max-width: 1024px;
max-height: 768px;
@@ -31,99 +22,50 @@ img {
bottom: 0;
left: 0;
right: 0;
-// z-index: 5;
overflow: hidden;
margin: 0 auto;
-// box-sizing: border-box;
-// border: 2px solid #5e8c71;
-// -moz-box-sizing:border-box;
-// -webkit-box-sizing:border-box;// border-width: 0 2px 2px 2px;
-
// solution from: http://stackoverflow.com/questions/14085822/css-firefox-box-shadow-and-outline
box-shadow: 0 0 0 2px #5e8c71,
0 0 8px 4px rgba(8, 8, 8, 0.25);
-
-// outline: 2px solid #5e8c71;
}
+
#portrait {
display: none;
}
+
.bgContainer {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
-.bgTop, .bgMiddle, .bgBottom {
+#bgTop, #bgMiddle, #bgBottom {
opacity: 1.0;
transition: opacity .35s linear;
position: absolute;
left: 0px;
- z-index: -5;
+ //z-index: -5;
}
-.bgTop {
+
+#bgTop {
top: 0px;
}
-.bgMiddle {
+
+#bgMiddle {
top: 30%;
}
-.bgBottom {
+
+#bgBottom {
bottom: 0px;
}
-//.rightpanel, .leftpanel {
-// img {
-// cursor: pointer;
-// }
-//}
-/*
-
- CENTER PANEL
-
-*/
@import "base_centerpanel.less";
-
-/*
-
- LEFT PANEL
-
-*/
@import "base_leftpanel.less";
-
-/*
-
- RIGHT PANEL
-
-*/
@import "base_rightpanel.less";
-
/*
- under all the above styles w.r.t. the cascading effect
-*/
-.disabled {
- opacity: 0.3;
- cursor: default;
-}
-
-#btnStop.disabled {
- display: none;
-}
-
-
-// http://blogs.msdn.com/b/askie/archive/2013/01/06/how-to-implement-the-ms-touch-action-none-property-to-disable-double-tap-zoom-on-touch-devices.aspx
-//a, input, button {
-// -ms-touch-action: none !important;
-//}
-
-
-
-
-/*
-
REST
-
*/
/* CLEARFIX */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
diff --git a/less/base_centerpanel.less b/less/base_centerpanel.less
index f69c6ac..56cf46a 100644
--- a/less/base_centerpanel.less
+++ b/less/base_centerpanel.less
@@ -1,58 +1,130 @@
// CENTER PANEL
-.centerpanel {
+#centerpanel {
position: absolute;
left: 50%;
- margin-left: -33%;
- width: 66%;
+ margin-left: -@center-panel-width/2;
+ width: @center-panel-width;
height: 100%;
-// z-index: 5;
+ padding-top: 1%;
}
+#logopanel {
+ height: 15%;
+ text-align: center;
+ width: 40%;
+ margin-left: 30%;
+ cursor: pointer;
-// top panel
-@import "base_centerpanel_logo.less";
+ img#pencil {
+ margin-top: 2%;
+ max-width: 50%;
+ max-height: 50%;
+ }
-// draw area stuff (plus up/down/left/right buttons)
-@import "base_centerpanel_drawarea.less";
+ img#logo {
+ max-width: 90%;
+ margin-bottom: 2%;
+ max-height: 45%;
+ }
+}
+
+// DRAW AREA
+#drawareacontainer {
+ position: relative;
+ width: 100%;
+ height: 79%;
+ background-color: #fff;
+ border: 3px solid black;
+ border-radius: 15px;
+ box-sizing: border-box;
+ margin-top: 1%;
+}
+
+#canvasContainers {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+#mycanvasContainer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 78%;
+ height: 100%;
+}
+
+#mycanvas {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ border-right: 2px solid #333;
+}
+
+#previewContainer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 22%;
+ height: 100%;
+}
+
+#preview {
+ min-width: 50px;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#preview_tmp {
+ display: none;
+}
/*
HEIGHT-related RESPONSIVE STUFF
*/
@media screen and (max-height: 700px) {
- .logopanel {
- height: 22%;
- }
- .doodlecontainer {
- height: 68%;
- }
- .d3dlogo {
- top: 25%;
- max-width: 399px;
- height: 74px;
- background-image: url('../img/logo/logo_small.png');
- }
+
+
}
+
@media screen and (max-height: 655px) {
- .bgMiddle { opacity: 0; }
+
+ #logopanel {
+ height: 10%;
+
+ img#logo {
+ margin-top: 1%;
+ max-height: 90%;
+ }
+
+ img#pencil {
+ display: none;
+ }
+ }
+
+ #drawareacontainer {
+ height: 83%;
+ }
+
}
@media screen and (max-height: 525px) {
- .d3dlogo {
- top: 20%;
- height: 57px;
- max-width: 307px;
- background-image: url('../img/logo/logo_smaller.png');
-// max-width: 399px;
-// background-image: url('../img/logo/logo_smaller_wide.png');
- }
+
+
+
}
+
@media screen and (max-height: 375px) {
- .d3dlogo {
- height: 40px;
- max-width: 216px;
- background-image: url('../img/logo/logo_smallest.png');
-// max-width: 399px;
-// background-image: url('../img/logo/logo_smallest_wide.png');
- }
-}
\ No newline at end of file
+
+}
+
+
diff --git a/less/base_centerpanel_drawarea.less b/less/base_centerpanel_drawarea.less
deleted file mode 100644
index 461625a..0000000
--- a/less/base_centerpanel_drawarea.less
+++ /dev/null
@@ -1,128 +0,0 @@
-// import vertical shapes additions
-@import "verticalshapes.less";
-
-// DRAW AREA
-.drawareacontainer {
- position: relative;
- width: 100%;
- height: 65%;
- background-color: #fff;
- border: 4px solid #000;
- border-radius: 15px;
- box-sizing: border-box;
-// z-index: 15;
-}
-
-#canvasContainers {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
-}
-
-#mycanvasContainer {
- position: absolute;
- top: 0;
- left: 0;
- width: 78%;
- height: 100%;
-}
-#mycanvas {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- border-right: 2px solid #333;
-}
-
-#previewContainer {
- position: absolute;
- top: 0;
- right: 0;
- width: 22%;
-// max-width: 150px;
- height: 100%;
-}
-#preview {
- min-width: 50px;
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-/* DEBUG THING */
-#preview_tmp {
- position: absolute;
- top: 0px;
- left: 0px;
- z-index: 500;
- border: 1px solid #f80;
- display: none;
-}
-.bottompanel {
- position: relative;
- bottom: 0px;
- width: 100%;
- height: 10%;
-}
-
-/*
- DOODLE UP/DOWN/LEFT/RIGHT buttons
-*/
-.manipulationBtns {
- margin: 2px 5px;
- position: absolute;
- right: 0;
- top: 0;
- max-width: 340px;
- max-height: 70px;
- width: 45%;
-}
-
-.manipulationBtn {
- width: 45%;
- height: auto;
- cursor: pointer;
-}
-
-#btnsUpDown {
- float: left;
- width: 45%;
-}
-#btnsUpDown > div {
- float: left;
- padding-right: 8px;
- background-repeat: no-repeat;
-}
-
-#btnsTurnLeftRight {
- float: right;
- width: 45%;
-}
-#btnsTurnLeftRight >div {
- float: left;
- padding-right: 8px;
- background-repeat: no-repeat;
-}
-
-#btnMoveUp {
- max-width: 65px;
-}
-
-#btnMoveDown {
- max-width: 64px;
-}
-
-#btnTwistLeft {
- max-width: 59px;
-}
-
-#btnTwistRight {
- max-width: 64px;
-}
\ No newline at end of file
diff --git a/less/base_centerpanel_logo.less b/less/base_centerpanel_logo.less
deleted file mode 100644
index a84a3fd..0000000
--- a/less/base_centerpanel_logo.less
+++ /dev/null
@@ -1,15 +0,0 @@
-.logopanel {
- height: 25%;
-}
-.d3dlogo {
- position: relative;
- top: 15%;
- width: 100%;
- height: 100%;
- margin: 0px auto;
- max-width: 399px;
- height: 139px;
- background: url('../img/logo/logo_full.png') no-repeat center center;
- cursor: pointer;
-}
-
diff --git a/less/base_leftpanel.less b/less/base_leftpanel.less
index c491b09..7691c95 100644
--- a/less/base_leftpanel.less
+++ b/less/base_leftpanel.less
@@ -1,42 +1,8 @@
// LEFT PANEL
-.leftpanel {
+#leftpanel {
position: absolute;
- width: 17%;
-// background-color: rgba(67, 204, 67, 0.4);
+ width: @left-panel-width;
top: 0px;
left: 0px;
bottom: 0px;
}
-.btnNew {
- margin: 5% 0% 1% 5%;
- width: 100%;
- max-width: 180px;
- height: auto;
-}
-.btnsPrevNext {
- margin: 1% 7%;
- max-width: 160px;
-}
-.btnPrevious {
- width: 40%;
- max-width: 56px;
- height: auto;
-}
-.btnNext {
- width: 40%;
- max-width: 56px;
- height: auto;
- float: right;
-}
-.btnSave {
- margin: 5% 5% 1% 5%;
- width: 90%;
- max-width: 144px;
- height: auto;
-}
-.btnOops {
- margin: 5% 5% 1% 5%;
- width: 90%;
- max-width: 144px;
- height: auto;
-}
diff --git a/less/base_rightpanel.less b/less/base_rightpanel.less
index a9e7d4d..ae05750 100644
--- a/less/base_rightpanel.less
+++ b/less/base_rightpanel.less
@@ -1,50 +1,16 @@
// RIGHT PANEL
-.rightpanel {
+#rightpanel {
position: absolute;
- width: 17%;
-// background-color: rgba(255, 0, 254, 0.4);
+ width: @right-panel-width;
top: 0;
right: 0;
bottom: 0;
+ //padding-top: 2%; /* reserve space for status message */
}
-.btnPrint {
- margin: 1% 5% 5% 0%;
- width: 100%;
- max-width: 163px;
- height: auto;
- float: right;
-}
-.btnStop {
- margin: 5% 10% 1% 5%;
- float: right;
- width: 90%;
- max-width: 98px;
- height: auto;
-}
-.btnsSettingsInfo {
- position: absolute;
- bottom: 25px;
- right: 5px;
- width: 80%;
- margin: 1% 5%;
- max-width: 160px;
-}
-.btnInfo {
- width: 40%;
- max-width: 53px;
- height: auto;
-}
-.btnSettings {
- width: 40%;
- max-width: 53px;
- height: auto;
- float: right;
-}
+
/*
-
PROGRESSGUAGE AND THERMOMETER SHARED STYLES
-
*/
.progressbarAppear {
/*margin-right: 1.5% !important;*/
@@ -55,104 +21,6 @@
right: -6.5% !important;
}
+@import "thermometer.less";
+@import "progressbar.less";
-/*
-
- PROGRESS GUAGE
-
-*/
-.progressbarCanvasContainerParent {
- position:relative;
- width:100%;
-}
-#progressbarCanvasContainer {
- position: relative;
- width: 50%;
- float:right;
-
- border: solid #000;
- border-width: 2px 0 2px 2px;
- border-radius: 15px 0 0 15px;
-/*padding: 5px 0px 5px 5px;*/
- padding: 5px;
- background-color: #fff;
- -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
- box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-
- transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- right: -70%;
- margin: 5% 0%;
-}
-
-#progressbarCanvas {
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: auto;
- background-color: #fff;
-// border: solid #000;
-// border-width: 2px 0 2px 2px;
-// border-radius: 15px 0 0 15px;
-// padding: 5px 0px 5px 5px;
-//
-// -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-// box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-}
-
-/*
-
- THERMOMETER
-
-*/
-.thermometerContainerParent {
- position:relative;
- width:100%;
- padding-top: 10px;
-}
-#thermometerContainer {
- position: relative;
- width: 45%;
- float: right;
-
- background-color: #fff;
- border: solid #000;
- border-width: 2px 0 2px 2px;
- border-radius: 15px 0 0 15px;
- padding: 5px;
-
- -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
- box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-
- transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
- right: -65%;
-}
-
-#thermometerCanvas {
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: auto;
- background-color: #fff;
-// border: solid #000;
-// border-width: 2px 0 2px 2px;
-// border-radius: 15px 0 0 15px;
-// padding: 5px 0px 5px 5px;
-//
-// -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-// box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
-}
-
-
-//#thermometerContainer {
-// position: absolute;
-// right: 25px;
-// top: 370px;
-//}
-//#thermometerCanvas {
-///*background: #59b2b8;*/
-///*zoom: 2;*/
-//}
diff --git a/less/buttons.less b/less/buttons.less
new file mode 100644
index 0000000..1c4f032
--- /dev/null
+++ b/less/buttons.less
@@ -0,0 +1,202 @@
+/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
+.btn {
+ background-repeat: no-repeat;
+ cursor: pointer;
+
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+
+ -khtml-user-drag: none;
+ -webkit-user-drag: none;
+
+ -webkit-touch-callout: none; /* disable callout, image save panel */
+
+ -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
+}
+
+.btn.disabled {
+ opacity: 0.3;
+ cursor: default;
+}
+
+#btnPrint {
+ margin: 1% 5% 5% 0%;
+ width: 90%;
+ max-width: 163px;
+ height: auto;
+ float: right;
+}
+
+#btnStop {
+ margin: 5% 5% 1% 5%;
+ float: right;
+ width: 80%;
+ max-width: 98px;
+ height: auto;
+}
+
+#btnsSettingsInfo {
+ position: absolute;
+ bottom: 4%; //25px;
+ right: 5px;
+ width: 80%;
+ margin: 1% 5%;
+ max-width: 160px;
+ .btn {
+ width: 46%;
+ max-width: 53px;
+ height: auto;
+ }
+ #btnSettings {
+ float: right;
+ }
+}
+
+#btnNew {
+ margin: 5% 0% 1% 5%;
+ width: 90%;
+ max-width: 130px;
+ height: auto;
+}
+
+#btnsPrevNext {
+ margin: 1% 7%;
+ max-width: 100px;
+ /*text-align:center;*/
+}
+
+#btnPrevious {
+ width: 40%;
+ max-width: 56px;
+ height: auto;
+}
+
+#btnNext {
+ width: 40%;
+ max-width: 56px;
+ height: auto;
+ float: right;
+}
+#btnSave {
+ margin: 4% 5% 1% 5%;
+ width: 90%;
+ max-width: 100px;
+ height: auto;
+}
+
+#btnOops {
+ margin: 5% 5% 1% 5%;
+ width: 90%;
+ max-width: 100px;
+ height: auto;
+}
+
+#btnAdd {
+ width: 90%;
+ max-width: 100px;
+ margin: 5% 5% 1% 5%;
+}
+
+
+/*
+ DOODLE UP/DOWN/LEFT/RIGHT buttons
+*/
+.manipulationBtns {
+ margin: 2px 5px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ max-width: 340px;
+ max-height: 70px;
+ width: 45%;
+}
+
+.manipulationBtn {
+ width: 45%;
+ height: auto;
+ cursor: pointer;
+}
+
+
+.btnVertical {
+ width: 35%;
+ display: none;
+}
+
+#btnToggleEdit {
+ top: 4px;
+ left: 4px;
+ position: absolute;
+}
+#buttonGroupEdit {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ padding: 5px 7px 9px 8px;
+ display: none;
+
+ .btn {
+ float: left;
+ }
+ #btnZoom {
+ clear: left;
+ margin: 0 2px 0 0;
+ }
+}
+
+.buttonGroup {
+ /*background-color: white;*/
+ background-color: #fff;
+ position: absolute;
+ border: 3px solid black;
+ border-radius: 40px;
+ box-sizing: border-box;
+ padding: 5% 5% 5% 5%;
+}
+
+#buttonGroupAdd {
+ display: none;
+ z-index: 1000;
+ position: relative;
+ margin-top: -60%;
+ margin-left: 70%;
+ width: 200%;
+ max-width: 140px; /*fixme: can this grow based on it's content?*/
+ padding: 5% 0 5% 5%;
+ #btnWordArt, #btnShape {
+ width: 45%;
+ }
+}
+
+#buttonGroupVerticalShapes {
+ top: 7px;
+ left: 8px;
+ padding: 12px 7px 7px 9px;
+ width: 65px;
+
+ .btn {
+ width: 40px;
+ }
+}
+
+#btnToggleVerticalShapes {
+ position: absolute;
+ top: 3px;
+ left: 6px;
+}
+
+@media only screen and (max-height: 480px),
+ only screen and (max-width: 600px) and (min-device-pixel-ratio : 1.5),
+ only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio : 1.5) {
+ #buttonGroupVerticalShapes {
+ #btnConv, #btnDiv, #btnSine, #btnStraight {
+ display: none;
+ }
+ }
+}
+
+
+
+
diff --git a/less/config.less b/less/config.less
new file mode 100644
index 0000000..2c9efed
--- /dev/null
+++ b/less/config.less
@@ -0,0 +1,3 @@
+@left-panel-width: 10%;
+@center-panel-width: 80%;
+@right-panel-width: 10%;
\ No newline at end of file
diff --git a/less/full.less b/less/full.less
deleted file mode 100644
index 101f62f..0000000
--- a/less/full.less
+++ /dev/null
@@ -1 +0,0 @@
-// FULL styles (not sure if going to use...)
\ No newline at end of file
diff --git a/less/help_joyride-2.1.less b/less/help_joyride-2.1.less
index 582a0c1..15a97f0 100644
--- a/less/help_joyride-2.1.less
+++ b/less/help_joyride-2.1.less
@@ -299,7 +299,7 @@
.joyride-expose-cover {
background: transparent;
position: absolute;
- z-index: 10000;
+ //z-index: 10000;
top: 0;
left: 0;
border-radius: 5px;
diff --git a/less/jquery-tourbus.less b/less/jquery-tourbus.less
deleted file mode 100644
index 0f50433..0000000
--- a/less/jquery-tourbus.less
+++ /dev/null
@@ -1,142 +0,0 @@
-/* Tourbus leg definitions element */
-.tourbus-legs {
- display: none;
-}
-/* Container for tourbus leg */
-.tourbus-leg {
- position: absolute;
- visibility: hidden;
- top: 0;
- border: 1px solid #E5E5E5;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
- border-radius: 4px;
- background: white;
-
- /*
- remove top padding/margin on headings
- because the interior of the leg has padding
- */
- h1, h2, h3, h4, h5, h6 {
- margin-top: 0;
- padding-top: 0;
- }
-}
-
-/* Interior of leg, clearfixed */
-.tourbus-leg-inner {
- padding: 20px;
- position: relative;
- zoom: 1;
-}
-.tourbus-leg-inner:before,
-.tourbus-leg-inner:after {
- content: "\0020";
- display: block;
- height: 0;
- overflow: hidden;
-}
-.tourbus-leg-inner:after {
- clear: both;
-}
-
-.prevnextBtn {
- border: 1px solid #8e8e8e;
- color: #252525;
- border-radius: 4px;
- padding: 4px 8px;
- background-color: #eaeaea;
- -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
- -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
- margin-right: 8px;
-}
-
-/* Tourbus leg arrow */
-.tourbus-arrow:before,
-.tourbus-arrow:after {
- border: solid rgba(0, 0, 0, 0);
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: transparent;
-}
-/* set the :after to be the _interior_ size of the arrow */
-/* set the :before to be the _interior + desired border width_ */
-.tourbus-arrow:after {
- border-width: 14px;
-}
-.tourbus-arrow:before {
- border-width: 16px;
-}
-/* Arrow background and border colors */
-/*
- change margin-top/left values here to
- match the border width for :after above
-
- border colors here are for the _interior_ of the arrow
-*/
-.tourbus-arrow-right:after {
- border-right-color: #ffffff;
- margin-top: -14px;
- top: 50%;
-}
-.tourbus-arrow-left:after {
- border-left-color: #ffffff;
- margin-top: -14px;
- top: 50%;
-}
-.tourbus-arrow-bottom:after {
- border-bottom-color: #ffffff;
- margin-left: -14px;
- left: 50%;
-}
-.tourbus-arrow-top:after {
- border-top-color: #ffffff;
- margin-left: -14px;
- left: 50%;
-}
-/*
- change margin-top/left values here to
- match the border width for :before above
-
- border colors here are for the _border_ of the arrow
-*/
-.tourbus-arrow-right:before {
- border-right-color: #e5e5e5;
- margin-top: -16px;
- top: 50%;
-}
-.tourbus-arrow-left:before {
- border-left-color: #e5e5e5;
- margin-top: -16px;
- top: 50%;
-}
-.tourbus-arrow-bottom:before {
- border-bottom-color: #e5e5e5;
- margin-left: -16px;
- left: 50%;
-}
-.tourbus-arrow-top:before {
- border-top-color: #e5e5e5;
- margin-left: -16px;
- left: 50%;
-}
-/* you shouldn't need to change these */
-.tourbus-arrow-right:after,
-.tourbus-arrow-right:before {
- right: 100%;
-}
-.tourbus-arrow-left:after,
-.tourbus-arrow-left:before {
- left: 100%;
-}
-.tourbus-arrow-bottom:after,
-.tourbus-arrow-bottom:before {
- bottom: 100%;
-}
-.tourbus-arrow-top:after,
-.tourbus-arrow-top:before {
- top: 100%;
-}
diff --git a/less/message.less b/less/message.less
index 0076c1b..e66f1fa 100644
--- a/less/message.less
+++ b/less/message.less
@@ -13,7 +13,7 @@
color: #333;
white-space:nowrap;
- z-index: 5;
+ //z-index: 5;
display:none;
diff --git a/less/mobile.less b/less/mobile.less
index 47c15f8..399cce8 100644
--- a/less/mobile.less
+++ b/less/mobile.less
@@ -1,138 +1,56 @@
-/*
- TOP LOGO
-*/
-.centerpanel {
- left: 0;
- margin-left: 0;
- width: 100%;
-/* background-color: rgba(0, 135, 255, 0.4);*/
-}
-.logopanel {
- height: 40px;
-}
-.d3dlogo {
- top: 0;
- height: 40px;
- max-width: 216px;
- background-image: url('../img/logo/logo_smallest.png');
-// max-width: 399px;
-// background-image: url('../img/logo/logo_smallest_wide.png');
-}
-.drawareacontainer {
-/* position: absolute;*/
- height: 70%;
-}
-.bottompanel {
- height: 10%;
-
- .manipulationBtns {
- margin: 2px -27;
- right: 22%;
- width: 38%;
- }
-}
-
-// sets width for both right and left panel
-@mobilePanelsWidth: 92px;
/*
LEFT
*/
-.leftpanel {
- width: @mobilePanelsWidth;
- background-color: #fff;
- z-index: 50;
- transition: left .3s ease-out;
-}
-.hideleft {
- left: -(@mobilePanelsWidth+1);
-}
-.shadowright {
- box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
-}
-.btnNew {
- margin: 5% 5% 1% 5%;
- width: 90%;
-}
-.btnSave {
- margin-left: 9%;
- width: 75%;
-}
-.btnOops {
- margin-left: 6%;
- width: 71%;
-}
+#leftpanel {
+ // width: @mobilePanelsWidth;
+ #btnNew {
+ margin: 5% 5% 1% 5%;
+ width: 90%;
+ }
+
+ #btnSave {
+ margin-left: 5%;
+ width: 90%;
+ }
+
+ #btnOops {
+ margin-left: 5%;
+ width: 90%;
+ }
+
+ #btnAdd {
+ margin-left: 5%;
+ width: 90%;
+ }
+}
+/*
+ CENTER
+*/
+#centerpanel {
+
+}
/*
RIGHT
*/
-.rightpanel {
- width: @mobilePanelsWidth;
- background-color: #fff;
- z-index: 50;
- transition: right .3s ease-out;
-}
-.hideright {
- right: -(@mobilePanelsWidth+1);
-}
-.shadowleft {
- box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
-}
-.btnPrint {
- margin: 1% 5% 5% 5%;
- width: 90%;
-}
-.btnStop {
- margin: 5% 6% 1% 5%;
- width: 70%;
-}
+#rightpanel {
+ // width: @mobilePanelsWidth;
+ // margin-top: 5%; /* reserve space for 'status message' in right top */
+ #btnPrint {
+ margin: 1% 5% 5% 5%;
+ width: 90%;
+ }
+ #btnStop {
+ margin: 5% 6% 1% 5%;
+ width: 70%;
+ }
+}
/*
- REST
+ SETTINGS POPUP
*/
-.sidebutton {
- display: block;
- position:absolute;
-/* top: 50%;*/
-/* margin-top: -20px;*/
- top: 40px;
- /*float:right;*/
- width: 25px;
- height: 38px;
- border: 1px solid #808;
- background: url('../img/arrows.png') no-repeat;
- background-color: #eee;
- cursor: pointer;
-
- &:active {
- background-color: #aaa;
- }
-
- .leftpanel & {
- right: -27px;
- background-position: 0px 0px;
- }
-
- .rightpanel & {
- left: -27px;
- background-position: -25px 0px;
- }
-}
-
-.sidebuttonin {
-
- &:active {
- background-color: #888;
- }
-
- .leftpanel & {
- background-color: #ccc;
- background-position: -25px 0px;
- }
-
- .rightpanel & {
- background-color: #ccc;
- background-position: -0px 0px;
- }
-}
+#popupSettings {
+ margin: 2% 2%;
+}
\ No newline at end of file
diff --git a/less/mobile_settingspopup.less b/less/mobile_settingspopup.less
deleted file mode 100644
index 213cc06..0000000
--- a/less/mobile_settingspopup.less
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-
- SETTINGS POPUP - MOBILE
-
-*/
-#contentOverlay {
- z-index: 200;
-
- #settings {
- width: 87%;
- height: 82%;
- margin: 6% 4%;
-
- > .right {
- width: 14%;
- }
- }
-}
\ No newline at end of file
diff --git a/less/normalize.min.less b/less/normalize.min.less
deleted file mode 100644
index 5fabfd2..0000000
--- a/less/normalize.min.less
+++ /dev/null
@@ -1 +0,0 @@
-/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
\ No newline at end of file
diff --git a/less/popup.less b/less/popup.less
new file mode 100644
index 0000000..93646b8
--- /dev/null
+++ b/less/popup.less
@@ -0,0 +1,80 @@
+// @popup-width: 60%;
+
+#popupMask {
+ background-color: rgba(255, 255, 255, 0.65);
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ display:none;
+ user-select: text;
+}
+
+.popup {
+ background-color: #fff;
+ border: 2px solid #222;
+ border-radius: 15px;
+ box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ position: absolute;
+ left: 50%;
+ top:50%;
+}
+
+.popup .content {
+ /*margin: 5%;*/
+ margin: 15px;
+}
+
+.popup {
+ display: none;
+}
+
+#popupWordArt {
+ width: 330px;
+ height:210px;
+ margin-left: -165px;
+ margin-top: -105px;
+
+ input[type="text"] {
+ width: 98%;
+ }
+ #btnWordArtOk {
+ float: right;
+ margin: 15px 0 0 0;
+ }
+}
+
+#popupShape {
+ width: 310px;
+ margin-left: -155px;
+ height: 230px;
+ margin-top: -115px;
+ top: 50%;
+
+ #shapePreview {
+ // width: 150px;
+ // height: 150px;
+ border: 1px solid black;
+ border-radius: 5px;
+ }
+
+ .lblShapeResolution {
+ display: inline-block;
+ }
+ #iconShapeLessPoints, #iconShapeMorePoints {
+ margin: 0 0 7px 0;
+ }
+
+ #btnShapeOk {
+ position: absolute;
+ bottom: 5%;
+ right: 3%;
+ }
+}
+
+.columnRight {
+ float: right;
+}
\ No newline at end of file
diff --git a/less/portrait.less b/less/portrait.less
index 78c8356..c21d977 100644
--- a/less/portrait.less
+++ b/less/portrait.less
@@ -6,7 +6,7 @@
display: block;
}
-.vertImage {
+#vertImage {
margin: 0;
padding: 0;
/*border: 2px solid #f0f;*/
diff --git a/less/progressbar.less b/less/progressbar.less
new file mode 100644
index 0000000..6674da8
--- /dev/null
+++ b/less/progressbar.less
@@ -0,0 +1,44 @@
+/*
+
+ PROGRESS GUAGE
+
+*/
+#progressbarCanvasContainerParent {
+ position:relative;
+ width:100%;
+}
+#progressbarCanvasContainer {
+ position: relative;
+ width: 50%;
+ float:right;
+
+ border: solid #000;
+ border-width: 2px 0 2px 2px;
+ border-radius: 15px 0 0 15px;
+/*padding: 5px 0px 5px 5px;*/
+ padding: 5px;
+ background-color: #fff;
+ -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+ box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+
+ transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ right: -70%;
+ margin: 5% 0%;
+}
+
+#progressbarCanvas {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: auto;
+ background-color: #fff;
+// border: solid #000;
+// border-width: 2px 0 2px 2px;
+// border-radius: 15px 0 0 15px;
+// padding: 5px 0px 5px 5px;
+//
+// -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+// box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+}
\ No newline at end of file
diff --git a/less/settingsPopup.less b/less/settingsPopup.less
index 4497375..da8fe2d 100644
--- a/less/settingsPopup.less
+++ b/less/settingsPopup.less
@@ -3,90 +3,77 @@
SETTINGS POPUP
*/
-#contentOverlay {
- background-color: rgba(255, 255, 255, 0.65);
- z-index: 20;
- position: absolute;
+#popupSettings {
top: 0;
left: 0;
right: 0;
bottom: 0;
- width: 100%;
- height: 100%;
- display:none;
- user-select: text;
+ //z-index: 15;
+ max-width: 775px;
+ max-height: 540px;
+ //width: 80%;
+ //height: 75%;
+ margin: 7% 8%;
+ padding: 2%;
- #settings {
- background-color: #fff;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 15;
- max-width: 775px;
- max-height: 540px;
- width: 80%;
- height: 75%;
- margin: 7% 8%;
- box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
- border: 2px solid #222;
- border-radius: 15px;
- padding: 2%;
+ .toppanel {
+ height: 10%;
- .toppanel {
- height: 10%;
-
- .settingsLabelContainer {
- width: 100%;
- height: auto;
- margin-bottom: 1%;
-
- .settingsLabelImg {
- width: 45%;
- max-width: 373px;
- height: auto;
- }
- }
- }
- .bottompanel {
+ /*#settingsLabelContainer {
width: 100%;
- height: 90%;
+ height: auto;
+ margin-bottom: 1%;
- > .settingsContainer {
- float:left;
- width: 83%;
- height: 98%;
- margin: .5%;
- overflow-y: scroll;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
- border: 1px solid rgb(187, 187, 187);
- border-radius: 5px;
+ #settingsLabelImg {
+ width: 45%;
+ max-width: 373px;
+ height: auto;
}
- > .right {
- width: 15%;
- height: 100%;
- float:right;
- position:relative;
- right: 0;
+ }*/
+ .title {
+ height: 100%;
+ max-height: 44px;
+ width: auto;
+ margin: 0 0 1% 0;
+ }
+ }
+ .bottompanel {
+ width: 100%;
+ height: 90%;
- > .btnContainer {
- position: absolute;
- bottom: 3%;
- right: 7%;
- width: 100%;
+ > #settingsContainer {
+ float:left;
+ width: 83%;
+ height: 98%;
+ margin: .5%;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ -webkit-overflow-scrolling: touch;
+ border: 1px solid rgb(187, 187, 187);
+ border-radius: 5px;
+ }
+ > .right {
+ width: 15%;
+ height: 100%;
+ float:right;
+ position:relative;
+ right: 0;
- > .btn {
- max-width: 85px;
- min-width: 42px;
- width: 88%;
- height: auto;
- margin: 8% 2% 2% 0;
- cursor: pointer;
- float:right;
- }
- }
+ > .btnContainer {
+ position: absolute;
+ bottom: 3%;
+ right: 7%;
+ width: 100%;
+
+ > .btn {
+ max-width: 85px;
+ min-width: 42px;
+ width: 88%;
+ height: auto;
+ margin: 8% 2% 2% 0;
+ cursor: pointer;
+ float:right;
+ }
}
}
}
diff --git a/less/styles.less b/less/styles.less
index 3a31e72..6c55ef1 100644
--- a/less/styles.less
+++ b/less/styles.less
@@ -1,5 +1,4 @@
// IMPORTS
-//@import "normalize.min.less";
//@import "jquery-tourbus.less";
@import "help_joyride-2.1.less";
@import "help.less";
@@ -14,13 +13,6 @@
only screen and (max-width: 720px) and (min-device-pixel-ratio : 1.5),
only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.5) {
@import "mobile.less";
- @import "mobile_settingspopup.less";
-}
-
-// FULL
-@media only screen and (min-width: 1000px) and (max-device-pixel-ratio : 1.5),
- only screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio : 1.5) {
- @import "full.less";
}
// PORTRAIT
diff --git a/less/thermometer.less b/less/thermometer.less
new file mode 100644
index 0000000..7ef7c78
--- /dev/null
+++ b/less/thermometer.less
@@ -0,0 +1,56 @@
+
+/*
+
+ THERMOMETER
+
+*/
+#thermometerContainerParent {
+ position:relative;
+ width:100%;
+ padding-top: 10px;
+}
+#thermometerContainer {
+ position: relative;
+ width: 45%;
+ float: right;
+
+ background-color: #fff;
+ border: solid #000;
+ border-width: 2px 0 2px 2px;
+ border-radius: 15px 0 0 15px;
+ padding: 5px;
+
+ -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+ box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+
+ transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ right: -65%;
+}
+
+#thermometerCanvas {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: auto;
+ background-color: #fff;
+// border: solid #000;
+// border-width: 2px 0 2px 2px;
+// border-radius: 15px 0 0 15px;
+// padding: 5px 0px 5px 5px;
+//
+// -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+// box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
+}
+
+
+//#thermometerContainer {
+// position: absolute;
+// right: 25px;
+// top: 370px;
+//}
+//#thermometerCanvas {
+///*background: #59b2b8;*/
+///*zoom: 2;*/
+//}
\ No newline at end of file
diff --git a/less/verticalshapes.less b/less/verticalshapes.less
deleted file mode 100644
index b51e5f7..0000000
--- a/less/verticalshapes.less
+++ /dev/null
@@ -1,22 +0,0 @@
-#verticalShapes {
- position:absolute;
- right: 0;
- bottom: 15px;
- margin-right: -8.5%;
- width: 8%;
-
- >div {
- border: 2px solid #333;
- border-radius: 0px 5px 5px 0px;
- margin-top: 4px;
- background-color: #fff;
- cursor: pointer;
-
- img.verticalshape {
- width: 100%;
- max-width: 50px;
- height: auto;
- vertical-align: bottom;
- }
- }
-}
\ No newline at end of file
diff --git a/www/helpcontent.html b/www/helpcontent.html
index 43a3740..e55fb40 100644
--- a/www/helpcontent.html
+++ b/www/helpcontent.html
@@ -8,67 +8,71 @@
in the top-right corner, or press escape.
For more in-depth help you can visit doodle3d.com/help .
-
+
Left panel
Let's first look at the left panel. It's mainly geared towards creating, saving and retrieving doodles.
-
+
New
This button creates a new drawing. Pressing the button will clear the current screen and offers you a clean slate to doodle on.
-
+
Save
Saves your doodle to the local Doodle3D Wi-Fi box.
-
+
View saved doodles
Use the buttons '<' and '>' to flip through all the saved doodles on your Wi-Fi box.
-
+
Oops
The oops button discards your last steps in drawing your doodle. You can actually keep pressing the button to return to the first step if you want.
-
-
-
-
+
+ Add
+ This button lets you add WordArt and shapes.
+
Doodle area
This is the drawing canvas. Unleash your inner artist!
+
+ Edit
+ Behind this button you'll find buttons to do simple 2D edits
+
Preview
The preview field shows a preview of how your doodle will look in real life.
-
+
Manipulating your doodle
- In the bottom-right corner of the doodle area are buttons to influence your doodle's visual appearance. Find out how they work!
+ These are buttons to influence your doodle's visual appearance. Find out how they work!
-
+
+ Twist left/right
+ These buttons enable you to rotate your doodle counterclockwise or clockwise.
+
+
Stretch up/down
Using these buttons you can stretch your doodle vertically. This enables you to determine what height the doodle gets when printed.
-
- Rotate left/right
- These buttons enable you to rotate your doodle counterclockwise or clockwise.
-
vertical outlines
- select vertical outlines
+ Select a vertical shape
-
+
Right Panel
The right panel is geared towards printing, feedback of printer status and controlling your Doodle3D settings.
-
+
Print
Pressing the print button will print your doodle on the connected 3D printer. Make sure the design is exactly what you want it to be, the printer is connected and turned on, the startup temperature of your printer is reached and the right filament is installed.
-
+
Stop
If the print is in progress and you want it to stop printing, press the Stop button on the right hand side of the screen. This will make the printer stop printing the doodle. It can take up to a few seconds for the printer to react.
diff --git a/www/img/buttons/btnAdd.png b/www/img/buttons/btnAdd.png
new file mode 100644
index 0000000..e2679c8
Binary files /dev/null and b/www/img/buttons/btnAdd.png differ
diff --git a/www/img/buttons/btnArrowClose.png b/www/img/buttons/btnArrowClose.png
new file mode 100644
index 0000000..38db14f
Binary files /dev/null and b/www/img/buttons/btnArrowClose.png differ
diff --git a/www/img/buttons/btnArrowOpen.png b/www/img/buttons/btnArrowOpen.png
new file mode 100644
index 0000000..c84bd98
Binary files /dev/null and b/www/img/buttons/btnArrowOpen.png differ
diff --git a/www/img/buttons/btnConv.png b/www/img/buttons/btnConv.png
new file mode 100644
index 0000000..00d2366
Binary files /dev/null and b/www/img/buttons/btnConv.png differ
diff --git a/www/img/buttons/btnDiv.png b/www/img/buttons/btnDiv.png
new file mode 100644
index 0000000..0514296
Binary files /dev/null and b/www/img/buttons/btnDiv.png differ
diff --git a/www/img/buttons/btnEditClosed.png b/www/img/buttons/btnEditClosed.png
new file mode 100644
index 0000000..7b76cdb
Binary files /dev/null and b/www/img/buttons/btnEditClosed.png differ
diff --git a/www/img/buttons/btnEditOpen.png b/www/img/buttons/btnEditOpen.png
new file mode 100644
index 0000000..208be79
Binary files /dev/null and b/www/img/buttons/btnEditOpen.png differ
diff --git a/www/img/buttons/btnHeight.png b/www/img/buttons/btnHeight.png
new file mode 100644
index 0000000..ecdd343
Binary files /dev/null and b/www/img/buttons/btnHeight.png differ
diff --git a/www/img/buttons/btnInfo.png b/www/img/buttons/btnInfo.png
index a3ade29..02493c3 100644
Binary files a/www/img/buttons/btnInfo.png and b/www/img/buttons/btnInfo.png differ
diff --git a/www/img/buttons/btnMin.png b/www/img/buttons/btnMin.png
new file mode 100644
index 0000000..3722164
Binary files /dev/null and b/www/img/buttons/btnMin.png differ
diff --git a/www/img/buttons/btnMove.png b/www/img/buttons/btnMove.png
new file mode 100644
index 0000000..c1f9e47
Binary files /dev/null and b/www/img/buttons/btnMove.png differ
diff --git a/www/img/buttons/btnOops2.png b/www/img/buttons/btnOops2.png
deleted file mode 100644
index acd9193..0000000
Binary files a/www/img/buttons/btnOops2.png and /dev/null differ
diff --git a/www/img/buttons/btnOops_disabled.png b/www/img/buttons/btnOops_disabled.png
deleted file mode 100644
index c34985c..0000000
Binary files a/www/img/buttons/btnOops_disabled.png and /dev/null differ
diff --git a/www/img/buttons/btnPlus.png b/www/img/buttons/btnPlus.png
new file mode 100644
index 0000000..432dbe5
Binary files /dev/null and b/www/img/buttons/btnPlus.png differ
diff --git a/www/img/buttons/btnPrint2.png b/www/img/buttons/btnPrint2.png
deleted file mode 100644
index 7e40dfe..0000000
Binary files a/www/img/buttons/btnPrint2.png and /dev/null differ
diff --git a/www/img/buttons/btnPrint_disabled.png b/www/img/buttons/btnPrint_disabled.png
deleted file mode 100644
index 667d292..0000000
Binary files a/www/img/buttons/btnPrint_disabled.png and /dev/null differ
diff --git a/www/img/buttons/btnRotate.png b/www/img/buttons/btnRotate.png
new file mode 100644
index 0000000..23bf759
Binary files /dev/null and b/www/img/buttons/btnRotate.png differ
diff --git a/www/img/buttons/btnShape.png b/www/img/buttons/btnShape.png
new file mode 100644
index 0000000..a80318e
Binary files /dev/null and b/www/img/buttons/btnShape.png differ
diff --git a/www/img/buttons/btnSine.png b/www/img/buttons/btnSine.png
new file mode 100644
index 0000000..39b5a58
Binary files /dev/null and b/www/img/buttons/btnSine.png differ
diff --git a/www/img/buttons/btnStop2.png b/www/img/buttons/btnStop2.png
deleted file mode 100644
index 2e9e611..0000000
Binary files a/www/img/buttons/btnStop2.png and /dev/null differ
diff --git a/www/img/buttons/btnStop_disabled.png b/www/img/buttons/btnStop_disabled.png
deleted file mode 100644
index 78b5312..0000000
Binary files a/www/img/buttons/btnStop_disabled.png and /dev/null differ
diff --git a/www/img/buttons/btnStraight.png b/www/img/buttons/btnStraight.png
new file mode 100644
index 0000000..08b3343
Binary files /dev/null and b/www/img/buttons/btnStraight.png differ
diff --git a/www/img/buttons/btnTwist.png b/www/img/buttons/btnTwist.png
new file mode 100644
index 0000000..f40f373
Binary files /dev/null and b/www/img/buttons/btnTwist.png differ
diff --git a/www/img/buttons/btnTurnLeft.png b/www/img/buttons/btnTwistLeft.png
similarity index 100%
rename from www/img/buttons/btnTurnLeft.png
rename to www/img/buttons/btnTwistLeft.png
diff --git a/www/img/buttons/btnTurnRight.png b/www/img/buttons/btnTwistRight.png
similarity index 100%
rename from www/img/buttons/btnTurnRight.png
rename to www/img/buttons/btnTwistRight.png
diff --git a/www/img/buttons/btnWordArt.png b/www/img/buttons/btnWordArt.png
new file mode 100644
index 0000000..c272f75
Binary files /dev/null and b/www/img/buttons/btnWordArt.png differ
diff --git a/www/img/buttons/btnZoom.png b/www/img/buttons/btnZoom.png
new file mode 100644
index 0000000..20d9f43
Binary files /dev/null and b/www/img/buttons/btnZoom.png differ
diff --git a/www/img/buttons/collapsed.gif b/www/img/buttons/collapsed.gif
deleted file mode 100644
index 108ff04..0000000
Binary files a/www/img/buttons/collapsed.gif and /dev/null differ
diff --git a/www/img/buttons/expanded.gif b/www/img/buttons/expanded.gif
deleted file mode 100644
index f520c08..0000000
Binary files a/www/img/buttons/expanded.gif and /dev/null differ
diff --git a/www/img/font.svg b/www/img/font.svg
new file mode 100644
index 0000000..cc0222f
--- /dev/null
+++ b/www/img/font.svg
@@ -0,0 +1,512 @@
+
+
+
+image/svg+xml
+
+
+
+
+Doodle3D
-
-
-
-
-
-
-
+
-
-
-
-
+
+
+
-
+
-
+
-
@@ -67,104 +66,108 @@
-
-
-
+
+
+
+
+
-
+
+
+
+
+
+
+
-
-
+
+
+
+
-
Download gcode
-
+
+
+
+
+
+
-
-
-
-
-
-
+
+