diff --git a/css_old/_backup20131010/d3d_btns.css b/css_old/_backup20131010/d3d_btns.css
new file mode 100644
index 0000000..1e60daa
--- /dev/null
+++ b/css_old/_backup20131010/d3d_btns.css
@@ -0,0 +1,179 @@
+/*.logo {
+ background: #f5f5f5 url('../img/logo_full.png') no-repeat left top;
+}
+
+@media screen and (max-width: 500px) {
+ .logo {
+ background: #f5f5f5 url('../img/logo_small.png') no-repeat left top;
+ }
+}*/
+
+/*body {*/
+ /*-moz-user-select: none; *//* disable cut copy paste */
+ /*-webkit-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;*/
+/* -webkit-user-select: none;*/
+ /*cursor: pointer*/
+/*}*/
+
+/*
+
+ INTERFACE BUTTONS
+
+*/
+/*
+#btnNew {
+ left: 10px;
+ top: 10px;
+ width: 194px;
+ height: 170px;
+ background: url('../img/buttons/btnNew.png') no-repeat;
+}
+
+#btnPrevious {
+ left: 20px;
+ top: 180px;
+ z-index: 10;
+}
+
+#btnNext {
+ left: 126px;
+ top: 186px;
+ z-index: 10;
+}
+
+#btnSave {
+ left: 20px;
+ top: 240px;
+}
+
+#btnOops {
+ left: 20px;
+ top: 450px;
+ width: 146px;
+ height: 144px;
+ background: url('../img/buttons/btnOops.png') no-repeat;
+}
+*/
+
+/*
+#btnPrint {
+ right: 15px;
+ top: 15px;
+}
+
+#btnStop {
+ right: 20px;
+ top: 200px;
+}
+
+#btnInfo {
+ right: 25px;
+ bottom: 90px;
+}
+
+#btnSettings {
+ right: 25px;
+ bottom: 20px;
+}
+*/
+
+
+
+/*
+
+ DRAW AREA
+
+*/
+
+
+/*#drawAreaContainer > .manipulationBtns {*/
+/*
+.drawareacontainer > .manipulationBtns {
+ margin: 5px;
+}
+
+.manipulationBtn {
+ cursor: pointer;
+}
+
+#btnsUpDown {
+ position: absolute;
+ right: 200px;
+ bottom: -75px;
+}
+#btnsUpDown > div {
+ float: left;
+ padding-right: 8px;
+ background-repeat: no-repeat;
+}
+
+#btnsTurnLeftRight {
+ position: absolute;
+ right: 20px;
+ bottom: -75px;
+}
+#btnsTurnLeftRight >div {
+ float: left;
+ padding-right: 8px;
+ background-repeat: no-repeat;
+}
+
+#btnMoveUp {
+ width: 65px;
+ height: 61px;
+ background: url('../img/buttons/btnUp.png');
+}
+
+#btnMoveDown {
+ width: 64px;
+ height: 63px;
+ background: url('../img/buttons/btnDown.png');
+}
+
+#btnTwistLeft {
+ width: 59px;
+ height: 61px;
+ background: url('../img/buttons/btnTurnLeft.png');
+}
+
+#btnTwistRight {
+ width: 64px;
+ height: 56px;
+ background: url('../img/buttons/btnTurnRight.png');
+}
+*/
+
+/*
+#displayTemp {
+ position: absolute;
+ right: 55px;
+ top: 334px;
+ font-weight: bold;
+ background: white;
+ display:none;
+}
+*/
+
+/*
+.disabled {
+ opacity: 0.3;
+ cursor: default;
+}
+
+#btnStop.disabled {
+ display: none;
+}
+*/
\ No newline at end of file
diff --git a/css_old/_backup20131010/fixedPosInterface.css b/css_old/_backup20131010/fixedPosInterface.css
new file mode 100644
index 0000000..881dd30
--- /dev/null
+++ b/css_old/_backup20131010/fixedPosInterface.css
@@ -0,0 +1,93 @@
+/*
+#drawAreaContainer {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ background-color: #fff;
+ width: 65%;
+ min-width: 500px;
+ max-width: 650px;
+ height: 60%;
+ min-height: 150px;
+ max-height: 450px;
+ border: 4px solid #000;
+ border-radius: 15px;
+ overflow: hidden;
+ z-index: 15;
+ display: none;
+}
+
+#canvasContainers {
+ display:table;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+#mycanvasContainer {
+ display:table-cell;
+ width: auto;
+ height: 100%;
+}
+#mycanvas {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ border-right: 2px solid #333;
+}
+
+#previewContainer {
+ display:table-cell;
+ width: 150px;
+ height: 100%;
+}
+#preview {
+ width: 150px;
+ height: 100%;
+ float: right;
+ margin: 0;
+ padding: 0;
+}
+*/
+
+/* DEBUG THING */
+/*
+#preview_tmp {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 500;
+ border: 1px solid #f80;
+ display: none;
+}
+*/
+
+/*
+
+ Buttons and logo's
+
+*/
+/*
+.button {
+ display: table;
+}
+*/
+
+/*#d3dlogo {*/
+ /*position: absolute;*/
+ /*top: 15px;*/
+ /*left: 31%;*/
+ /*width: 399px;*/
+ /*height: 139px;*/
+ /*background-image: url('../img/logo_full.png');*/
+ /*cursor: pointer;*/
+/*}*/
+
+
diff --git a/css_old/_backup20131010/settingsPopup.css b/css_old/_backup20131010/settingsPopup.css
new file mode 100644
index 0000000..95b407b
--- /dev/null
+++ b/css_old/_backup20131010/settingsPopup.css
@@ -0,0 +1,74 @@
+#contentOverlay {
+ background-color: rgba(255, 255, 255, 0.65);
+ z-index: 20;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ display:none;
+}
+#settings {
+ background-color: #fff;
+ z-index: 15;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 835px;
+ height: 500px;
+ margin: -250px 0 0 -417.5px;
+ /*padding: 25px;*/
+
+ /*overflow: scroll;*/
+ /*overflow-y: hidden;*/
+ -moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ border: 2px solid #222;
+ border-radius: 15px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ overflow: hidden;
+}
+#settings header {
+ margin: 25px 25px 0 25px;
+ height: 44px;
+}
+
+div.content {
+ margin: 15px 25px 25px 25px;
+ height: 388px;
+ display: table;
+}
+
+div.content > div {
+ height: 100%;
+}
+
+div.content > div.settings {
+ border: 1px solid rgb(187, 187, 187);
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+
+ width: 660px;
+ overflow: scroll;
+ max-height: 368px;
+ overflow-x: hidden;
+ padding: 10px 10px 10px 10px;
+}
+div.content > div.manipulationBtns {
+ display: table-cell;
+ vertical-align: bottom;
+ width: 125px;
+
+}
+
+div.content .btnOK {
+ width: 85px;
+ height: 86px;
+ background: url('../img/buttons/btnOk_settings.png') no-repeat;
+ margin: 0 0 0 10px;
+ cursor: pointer;
+}
diff --git a/css_old/_backup20131011/fixedPosInterface.css b/css_old/_backup20131011/fixedPosInterface.css
new file mode 100644
index 0000000..eb071f2
--- /dev/null
+++ b/css_old/_backup20131011/fixedPosInterface.css
@@ -0,0 +1,329 @@
+body {
+/* This chops off any overhanging divs */
+ overflow:hidden;
+}
+
+.button {
+ display: table;
+}
+
+/*#landscape {*/
+ /*position:relative;*/
+ /*width: 1024px;*/
+ /*max-height: 768px;*/
+ /*background-color: #808;*/
+ /*border: 10px solid #ff0;*/
+ /*margin: 0px auto;*/
+/*}*/
+
+
+#verticalShapes {
+ position:absolute;
+ right: -56px;
+ bottom: 15px;
+ /*background-color: #fff;*/
+}
+
+.verticalshape {
+ width: 50px;
+ height: 50px;
+ border: 2px solid #333;
+ border-radius: 0px 5px 5px 0px;
+ margin-top: 4px;
+ /*background-color: #f0f;*/
+ cursor: pointer;
+}
+
+.straight {
+ background: url('../img/vertical_shape_icons/straight.png') no-repeat;
+}
+.diverging {
+ background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
+}
+.converging {
+ background: url('../img/vertical_shape_icons/converging.png') no-repeat;
+}
+.sinus {
+ background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
+}
+
+
+/* Portrait */
+@media screen and (orientation:portrait) {
+ body {
+/* background-color: #08F;*/
+ }
+
+ #landscape {
+ display: none;
+ }
+ #portrait {
+ display: block;
+ }
+}
+ /* Landscape */
+@media screen and (orientation:landscape) {
+ body {
+/* background-color: #8F0;*/
+ }
+
+ #landscape {
+ display: block;
+ }
+ #portrait {
+ display: none;
+ }
+}
+
+.uiButtonsContainer {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 1024px;
+ min-height: 500px;
+ max-height: 768px;
+ height: 100%;
+ /* height: 768px;*/
+}
+.uiButtonsContainer:before {
+ content:' ';
+ display:block;
+ position:absolute;
+ left:0;
+ top:0;
+ right:0;
+ bottom:0;
+ border: 2px solid #333;
+}
+
+#d3dlogo {
+ position: absolute;
+ top: 15px;
+ left: 31%;
+ width: 399px;
+ height: 139px;
+ background-image: url('../img/logo_full.png');
+ cursor: pointer;
+}
+
+#drawAreaContainer {
+ position: absolute;
+ top: 193px;
+ left: 193px;
+ width: 650px;
+ height: 450px;
+ background-color: #fff;
+ border: 4px solid #000;
+ border-radius: 15px;
+}
+
+#preview_tmp {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 500;
+ border: 1px solid #f80;
+ display: none;
+}
+
+#mycanvas, #preview {
+ /*border: 1px solid #08c;*/
+ float: left;
+}
+
+#mycanvas {
+ width: 500px;
+ height: 450px;
+ border: 0px solid #333;
+ border-right: 2px solid #333;
+}
+
+#preview {
+ /*border: 1px solid #f8c;*/
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: 150px;
+ height: 450px;
+}
+
+.vertImage {
+ margin: 0px;
+ padding: 0px;
+ /*border: 2px solid #f0f;*/
+ max-width: 100%;
+ height: auto;
+ width: auto; /* for ie9 */
+}
+
+
+.bgTop {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: -5;
+}
+.bgMiddle {
+ display: block;
+ position: absolute;
+ top: 30%;
+ left: 0px;
+ z-index: -5;
+}
+.bgBottom {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ z-index: -5;
+}
+
+/* PRINT PROGRESS DISPLAY */
+#printProgressContainer {
+ position: absolute;
+ right: 30px;
+ top: 370px;
+ width: 110px;
+ margin: 5px 0px;
+ font-weight: bold;
+ display:none;
+}
+#progressbarContainer {
+ margin: 3px 0px;
+ width: inherit;
+ height: 20px;
+ background-color: #fff;
+ border: 2px solid #333;
+ border-radius: 5px;
+ -o-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+.progressAmount {
+ margin: 0px 5px;
+}
+#progressbar {
+ position: relative;
+ /*margin-bottom: -20px;*/
+ width: 0%;
+ height: 100%;
+ background-color: #4c4;
+ border: 0px solid #f0f;
+ border-radius: 3px;
+ -o-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+/* THERMOMETER */
+#thermometerContainer {
+ position: absolute;
+ right: 5px;
+ top: 360px;
+}
+#thermometerCanvas {
+ /*background: #59b2b8;*/
+ /*zoom: 2;*/
+}
+
+
+/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
+
+@media screen and (max-height: 675px) {
+ .bgMiddle {
+ display: none;
+ }
+
+ #d3dlogo {
+ width: 399px;
+ height: 74px;
+ background-image: url('../img/logo_small.png');
+ margin-top: 9px;
+ }
+
+ #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 {
+ top: 128px;
+ height: 350px;
+ }
+}
+
+@media screen and (max-height: 560px) {
+ #d3dlogo {
+ width: 399px;
+ height: 57px;
+ background-image: url('../img/logo_smaller_wide.png');
+ margin-top: 14px;
+ /*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);
+ }
+
+ #btnPrevious, #btnNext {
+ /*top: 200px;*/
+ -moz-transform: translate(-5px,-10px);
+ }
+
+ #drawAreaContainer {
+ top: 110px;
+ height: 350px;
+ }
+}
+
+
+
diff --git a/css_old/_backup20131011/fixedPosInterface.css.BACKUP.99789.css b/css_old/_backup20131011/fixedPosInterface.css.BACKUP.99789.css
new file mode 100644
index 0000000..eb071f2
--- /dev/null
+++ b/css_old/_backup20131011/fixedPosInterface.css.BACKUP.99789.css
@@ -0,0 +1,329 @@
+body {
+/* This chops off any overhanging divs */
+ overflow:hidden;
+}
+
+.button {
+ display: table;
+}
+
+/*#landscape {*/
+ /*position:relative;*/
+ /*width: 1024px;*/
+ /*max-height: 768px;*/
+ /*background-color: #808;*/
+ /*border: 10px solid #ff0;*/
+ /*margin: 0px auto;*/
+/*}*/
+
+
+#verticalShapes {
+ position:absolute;
+ right: -56px;
+ bottom: 15px;
+ /*background-color: #fff;*/
+}
+
+.verticalshape {
+ width: 50px;
+ height: 50px;
+ border: 2px solid #333;
+ border-radius: 0px 5px 5px 0px;
+ margin-top: 4px;
+ /*background-color: #f0f;*/
+ cursor: pointer;
+}
+
+.straight {
+ background: url('../img/vertical_shape_icons/straight.png') no-repeat;
+}
+.diverging {
+ background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
+}
+.converging {
+ background: url('../img/vertical_shape_icons/converging.png') no-repeat;
+}
+.sinus {
+ background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
+}
+
+
+/* Portrait */
+@media screen and (orientation:portrait) {
+ body {
+/* background-color: #08F;*/
+ }
+
+ #landscape {
+ display: none;
+ }
+ #portrait {
+ display: block;
+ }
+}
+ /* Landscape */
+@media screen and (orientation:landscape) {
+ body {
+/* background-color: #8F0;*/
+ }
+
+ #landscape {
+ display: block;
+ }
+ #portrait {
+ display: none;
+ }
+}
+
+.uiButtonsContainer {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 1024px;
+ min-height: 500px;
+ max-height: 768px;
+ height: 100%;
+ /* height: 768px;*/
+}
+.uiButtonsContainer:before {
+ content:' ';
+ display:block;
+ position:absolute;
+ left:0;
+ top:0;
+ right:0;
+ bottom:0;
+ border: 2px solid #333;
+}
+
+#d3dlogo {
+ position: absolute;
+ top: 15px;
+ left: 31%;
+ width: 399px;
+ height: 139px;
+ background-image: url('../img/logo_full.png');
+ cursor: pointer;
+}
+
+#drawAreaContainer {
+ position: absolute;
+ top: 193px;
+ left: 193px;
+ width: 650px;
+ height: 450px;
+ background-color: #fff;
+ border: 4px solid #000;
+ border-radius: 15px;
+}
+
+#preview_tmp {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 500;
+ border: 1px solid #f80;
+ display: none;
+}
+
+#mycanvas, #preview {
+ /*border: 1px solid #08c;*/
+ float: left;
+}
+
+#mycanvas {
+ width: 500px;
+ height: 450px;
+ border: 0px solid #333;
+ border-right: 2px solid #333;
+}
+
+#preview {
+ /*border: 1px solid #f8c;*/
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: 150px;
+ height: 450px;
+}
+
+.vertImage {
+ margin: 0px;
+ padding: 0px;
+ /*border: 2px solid #f0f;*/
+ max-width: 100%;
+ height: auto;
+ width: auto; /* for ie9 */
+}
+
+
+.bgTop {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: -5;
+}
+.bgMiddle {
+ display: block;
+ position: absolute;
+ top: 30%;
+ left: 0px;
+ z-index: -5;
+}
+.bgBottom {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ z-index: -5;
+}
+
+/* PRINT PROGRESS DISPLAY */
+#printProgressContainer {
+ position: absolute;
+ right: 30px;
+ top: 370px;
+ width: 110px;
+ margin: 5px 0px;
+ font-weight: bold;
+ display:none;
+}
+#progressbarContainer {
+ margin: 3px 0px;
+ width: inherit;
+ height: 20px;
+ background-color: #fff;
+ border: 2px solid #333;
+ border-radius: 5px;
+ -o-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+.progressAmount {
+ margin: 0px 5px;
+}
+#progressbar {
+ position: relative;
+ /*margin-bottom: -20px;*/
+ width: 0%;
+ height: 100%;
+ background-color: #4c4;
+ border: 0px solid #f0f;
+ border-radius: 3px;
+ -o-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+/* THERMOMETER */
+#thermometerContainer {
+ position: absolute;
+ right: 5px;
+ top: 360px;
+}
+#thermometerCanvas {
+ /*background: #59b2b8;*/
+ /*zoom: 2;*/
+}
+
+
+/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
+
+@media screen and (max-height: 675px) {
+ .bgMiddle {
+ display: none;
+ }
+
+ #d3dlogo {
+ width: 399px;
+ height: 74px;
+ background-image: url('../img/logo_small.png');
+ margin-top: 9px;
+ }
+
+ #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 {
+ top: 128px;
+ height: 350px;
+ }
+}
+
+@media screen and (max-height: 560px) {
+ #d3dlogo {
+ width: 399px;
+ height: 57px;
+ background-image: url('../img/logo_smaller_wide.png');
+ margin-top: 14px;
+ /*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);
+ }
+
+ #btnPrevious, #btnNext {
+ /*top: 200px;*/
+ -moz-transform: translate(-5px,-10px);
+ }
+
+ #drawAreaContainer {
+ top: 110px;
+ height: 350px;
+ }
+}
+
+
+
diff --git a/css_old/_backup20131011/fixedPosInterface.css.BASE.99789.css b/css_old/_backup20131011/fixedPosInterface.css.BASE.99789.css
new file mode 100644
index 0000000..426497d
--- /dev/null
+++ b/css_old/_backup20131011/fixedPosInterface.css.BASE.99789.css
@@ -0,0 +1,323 @@
+body {
+/* This chops off any overhanging divs */
+ overflow:hidden;
+}
+
+
+.button {
+ 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;*/
+/*}*/
+
+#logo {
+ position: absolute;
+ /*left: 50%;*/
+ /*margin-left: -220px;*/
+ top: 20px;
+ left: 315px;
+ width: 400px;
+ height: 140px;
+}
+
+/*ha {*/
+ /*background: #f5f5f5 url('../images/bg.jpg') no-repeat;*/
+/*}*/
+
+ /* Portrait */
+@media screen and (orientation:portrait) {
+ body {
+/* background-color: #08F;*/
+ }
+
+ #landscape {
+ display: none;
+ }
+ #portrait {
+ display: block;
+ }
+}
+ /* Landscape */
+@media screen and (orientation:landscape) {
+ body {
+/* background-color: #8F0;*/
+ }
+
+ #landscape {
+ display: block;
+ }
+ #portrait {
+ display: none;
+ }
+}
+
+.container {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ border: 2px solid #333;
+ width: 1024px;
+ min-height: 500px;
+ max-height: 768px;
+ height: 100%;
+/* height: 768px;*/
+}
+
+#d3dlogo {
+ position: absolute;
+ top: 15px;
+ left: 31%;
+ width: 399px;
+ height: 139px;
+ background-image: url('../img/logo_full.png');
+ cursor: pointer;
+}
+
+#svg {
+ cursor: pointer;
+}
+
+#drawAreaContainer {
+ position: absolute;
+ top: 193px;
+ left: 193px;
+ width: 650px;
+ height: 450px;
+ background-color: #fff;
+ border: 4px solid #000;
+ border-radius: 15px;
+}
+
+#preview_tmp {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 500;
+ border: 1px solid #f80;
+ display: none;
+}
+
+#mycanvas, #preview {
+ /*border: 1px solid #08c;*/
+ float: left;
+}
+
+#mycanvas {
+ width: 500px;
+ height: 450px;
+ border: 0px solid #333;
+ border-right: 2px solid #333;
+}
+
+#preview {
+ /*border: 1px solid #f8c;*/
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: 150px;
+ height: 450px;
+}
+
+.vertImage {
+ margin: 0px;
+ padding: 0px;
+ /*border: 2px solid #f0f;*/
+ max-width: 100%;
+ height: auto;
+ width: auto; /* for ie9 */
+}
+
+
+.bgTop {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: -5;
+}
+.bgMiddle {
+ display: block;
+ position: absolute;
+ top: 30%;
+ left: 0px;
+ z-index: -5;
+}
+.bgBottom {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ z-index: -5;
+}
+
+/* PRINT PROGRESS DISPLAY */
+#printProgressContainer {
+ position: absolute;
+ right: 30px;
+ top: 370px;
+ width: 110px;
+ margin: 5px 0px;
+ font-weight: bold;
+ display:none;
+}
+#progressbarContainer {
+ margin: 3px 0px;
+ width: inherit;
+ height: 20px;
+ background-color: #fff;
+ border: 2px solid #333;
+ border-radius: 5px;
+ -o-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+.progressAmount {
+ margin: 0px 5px;
+}
+#progressbar {
+ position: relative;
+ /*margin-bottom: -20px;*/
+ width: 0%;
+ height: 100%;
+ background-color: #4c4;
+ border: 0px solid #f0f;
+ border-radius: 3px;
+ -o-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+/* THERMOMETER */
+#thermometerContainer {
+ position: absolute;
+ right: 25px;
+ top: 370px;
+}
+#thermometerCanvas {
+ /*background: #59b2b8;*/
+ /*zoom: 2;*/
+}
+
+
+/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
+
+@media screen and (max-height: 675px) {
+ .bgMiddle {
+ display: none;
+ }
+
+ #d3dlogo {
+ width: 399px;
+ height: 74px;
+ background-image: url('../img/logo_small.png');
+ margin-top: 9px;
+ }
+
+ #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 {
+ top: 128px;
+ height: 350px;
+ }
+}
+
+@media screen and (max-height: 560px) {
+ #d3dlogo {
+ width: 399px;
+ height: 57px;
+ background-image: url('../img/logo_smaller_wide.png');
+ margin-top: 14px;
+ /*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);
+ }
+
+ #btnPrevious, #btnNext {
+ /*top: 200px;*/
+ -moz-transform: translate(-5px,-10px);
+ }
+
+ #drawAreaContainer {
+ top: 110px;
+ height: 350px;
+ }
+}
+
+
+
diff --git a/css_old/_backup20131011/fixedPosInterface.css.LOCAL.99789.css b/css_old/_backup20131011/fixedPosInterface.css.LOCAL.99789.css
new file mode 100644
index 0000000..eb071f2
--- /dev/null
+++ b/css_old/_backup20131011/fixedPosInterface.css.LOCAL.99789.css
@@ -0,0 +1,329 @@
+body {
+/* This chops off any overhanging divs */
+ overflow:hidden;
+}
+
+.button {
+ display: table;
+}
+
+/*#landscape {*/
+ /*position:relative;*/
+ /*width: 1024px;*/
+ /*max-height: 768px;*/
+ /*background-color: #808;*/
+ /*border: 10px solid #ff0;*/
+ /*margin: 0px auto;*/
+/*}*/
+
+
+#verticalShapes {
+ position:absolute;
+ right: -56px;
+ bottom: 15px;
+ /*background-color: #fff;*/
+}
+
+.verticalshape {
+ width: 50px;
+ height: 50px;
+ border: 2px solid #333;
+ border-radius: 0px 5px 5px 0px;
+ margin-top: 4px;
+ /*background-color: #f0f;*/
+ cursor: pointer;
+}
+
+.straight {
+ background: url('../img/vertical_shape_icons/straight.png') no-repeat;
+}
+.diverging {
+ background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
+}
+.converging {
+ background: url('../img/vertical_shape_icons/converging.png') no-repeat;
+}
+.sinus {
+ background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
+}
+
+
+/* Portrait */
+@media screen and (orientation:portrait) {
+ body {
+/* background-color: #08F;*/
+ }
+
+ #landscape {
+ display: none;
+ }
+ #portrait {
+ display: block;
+ }
+}
+ /* Landscape */
+@media screen and (orientation:landscape) {
+ body {
+/* background-color: #8F0;*/
+ }
+
+ #landscape {
+ display: block;
+ }
+ #portrait {
+ display: none;
+ }
+}
+
+.uiButtonsContainer {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 1024px;
+ min-height: 500px;
+ max-height: 768px;
+ height: 100%;
+ /* height: 768px;*/
+}
+.uiButtonsContainer:before {
+ content:' ';
+ display:block;
+ position:absolute;
+ left:0;
+ top:0;
+ right:0;
+ bottom:0;
+ border: 2px solid #333;
+}
+
+#d3dlogo {
+ position: absolute;
+ top: 15px;
+ left: 31%;
+ width: 399px;
+ height: 139px;
+ background-image: url('../img/logo_full.png');
+ cursor: pointer;
+}
+
+#drawAreaContainer {
+ position: absolute;
+ top: 193px;
+ left: 193px;
+ width: 650px;
+ height: 450px;
+ background-color: #fff;
+ border: 4px solid #000;
+ border-radius: 15px;
+}
+
+#preview_tmp {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 500;
+ border: 1px solid #f80;
+ display: none;
+}
+
+#mycanvas, #preview {
+ /*border: 1px solid #08c;*/
+ float: left;
+}
+
+#mycanvas {
+ width: 500px;
+ height: 450px;
+ border: 0px solid #333;
+ border-right: 2px solid #333;
+}
+
+#preview {
+ /*border: 1px solid #f8c;*/
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: 150px;
+ height: 450px;
+}
+
+.vertImage {
+ margin: 0px;
+ padding: 0px;
+ /*border: 2px solid #f0f;*/
+ max-width: 100%;
+ height: auto;
+ width: auto; /* for ie9 */
+}
+
+
+.bgTop {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: -5;
+}
+.bgMiddle {
+ display: block;
+ position: absolute;
+ top: 30%;
+ left: 0px;
+ z-index: -5;
+}
+.bgBottom {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ z-index: -5;
+}
+
+/* PRINT PROGRESS DISPLAY */
+#printProgressContainer {
+ position: absolute;
+ right: 30px;
+ top: 370px;
+ width: 110px;
+ margin: 5px 0px;
+ font-weight: bold;
+ display:none;
+}
+#progressbarContainer {
+ margin: 3px 0px;
+ width: inherit;
+ height: 20px;
+ background-color: #fff;
+ border: 2px solid #333;
+ border-radius: 5px;
+ -o-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+}
+.progressAmount {
+ margin: 0px 5px;
+}
+#progressbar {
+ position: relative;
+ /*margin-bottom: -20px;*/
+ width: 0%;
+ height: 100%;
+ background-color: #4c4;
+ border: 0px solid #f0f;
+ border-radius: 3px;
+ -o-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+/* THERMOMETER */
+#thermometerContainer {
+ position: absolute;
+ right: 5px;
+ top: 360px;
+}
+#thermometerCanvas {
+ /*background: #59b2b8;*/
+ /*zoom: 2;*/
+}
+
+
+/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
+
+@media screen and (max-height: 675px) {
+ .bgMiddle {
+ display: none;
+ }
+
+ #d3dlogo {
+ width: 399px;
+ height: 74px;
+ background-image: url('../img/logo_small.png');
+ margin-top: 9px;
+ }
+
+ #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 {
+ top: 128px;
+ height: 350px;
+ }
+}
+
+@media screen and (max-height: 560px) {
+ #d3dlogo {
+ width: 399px;
+ height: 57px;
+ background-image: url('../img/logo_smaller_wide.png');
+ margin-top: 14px;
+ /*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);
+ }
+
+ #btnPrevious, #btnNext {
+ /*top: 200px;*/
+ -moz-transform: translate(-5px,-10px);
+ }
+
+ #drawAreaContainer {
+ top: 110px;
+ height: 350px;
+ }
+}
+
+
+
diff --git a/css_old/_backup20131011/fixedPosInterface.css.REMOTE.99789.css b/css_old/_backup20131011/fixedPosInterface.css.REMOTE.99789.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/_backup20131011/popups.css b/css_old/_backup20131011/popups.css
similarity index 100%
rename from css/_backup20131011/popups.css
rename to css_old/_backup20131011/popups.css
diff --git a/css_old/_settings.css b/css_old/_settings.css
new file mode 100644
index 0000000..7c6112c
--- /dev/null
+++ b/css_old/_settings.css
@@ -0,0 +1,96 @@
+form {
+ margin: 10px;
+}
+form input {
+ margin: 1px;
+}
+
+body,th,td {
+ font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
+ font-size: 13px;
+}
+.settingsContainer {
+ position:relative;
+ max-width: 600px;
+ /*min-width: 370px;*/
+ width: 100%;
+ height: 100%;
+}
+/*form#settingsForm {*/
+ /*width: 100% auto;*/
+/*}*/
+form fieldset {
+ max-width: 600px;
+ border: 1px solid rgb(187, 187, 187);
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ padding: 8px;
+ /*padding-right: 8px;*/
+}
+form fieldset fieldset{
+ max-width: 580px;
+ margin: 15px 0 5px 0;
+ clear: left;
+ float: left;
+}
+form fieldset legend {
+ margin-left: 10px;
+ font-weight: bold;
+}
+form label {
+ min-width: 150px;
+ display: block;
+ float: left;
+ margin: 1px 0 0 0;
+ clear: left;
+}
+form div {
+ float: left;
+}
+form input[type="text"], form input[type="number"], form input[type="password"] {
+ border: 1px solid rgb(144, 192, 255);
+ margin-right: 5px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+form input[type="text"].small, form input[type="number"].small, form input[type="password"].small {
+ width: 50px;
+}
+form input[type="text"].large, form input[type="number"].large, form input[type="password"].large {
+ width: 250px;
+}
+form input[type="radio"] {
+ margin: 4px 4px 0 0;
+}
+
+form textarea {
+ border: 1px solid rgb(144, 192, 255);
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+form .startgcode_left {
+ float:left;
+ margin-right: 20px;
+}
+form textarea.gcode {
+ width: 252px;
+ /*max-width: 262px;*/
+ /*min-width: 200px;*/
+ height: 150px;
+}
+form small {
+ margin: 3px 0 0 0;
+ display: block;
+ clear: left;
+}
+form .button {
+ display: inline-block;
+}
+
+form #passwordLabel, form #password {
+ display: none;
+}
\ No newline at end of file
diff --git a/img/bg_vertical.jpg b/img_old/bg_vertical.jpg
similarity index 100%
rename from img/bg_vertical.jpg
rename to img_old/bg_vertical.jpg
diff --git a/img_old/logo/logo_full_8bit.png b/img_old/logo/logo_full_8bit.png
new file mode 100644
index 0000000..adba35c
Binary files /dev/null and b/img_old/logo/logo_full_8bit.png differ
diff --git a/img_old/logo/logo_small BACKUP.png b/img_old/logo/logo_small BACKUP.png
new file mode 100644
index 0000000..372b5ee
Binary files /dev/null and b/img_old/logo/logo_small BACKUP.png differ
diff --git a/img_old/logo/logo_small_8bit.png b/img_old/logo/logo_small_8bit.png
new file mode 100644
index 0000000..a2c0189
Binary files /dev/null and b/img_old/logo/logo_small_8bit.png differ
diff --git a/img_old/logo/logo_smaller_8bit.png b/img_old/logo/logo_smaller_8bit.png
new file mode 100644
index 0000000..bd85479
Binary files /dev/null and b/img_old/logo/logo_smaller_8bit.png differ
diff --git a/img/logo/logo_smaller_wide.png b/img_old/logo/logo_smaller_wide.png
similarity index 100%
rename from img/logo/logo_smaller_wide.png
rename to img_old/logo/logo_smaller_wide.png
diff --git a/img_old/logo/logo_smaller_wide_8bit.png b/img_old/logo/logo_smaller_wide_8bit.png
new file mode 100644
index 0000000..ef193ab
Binary files /dev/null and b/img_old/logo/logo_smaller_wide_8bit.png differ
diff --git a/img/logo/logo_smallest_wide.png b/img_old/logo/logo_smallest_wide.png
similarity index 100%
rename from img/logo/logo_smallest_wide.png
rename to img_old/logo/logo_smallest_wide.png
diff --git a/img_old/thermo_bg_2.png b/img_old/thermo_bg_2.png
new file mode 100644
index 0000000..8e3a979
Binary files /dev/null and b/img_old/thermo_bg_2.png differ
diff --git a/img_old/thermo_fg_2.png b/img_old/thermo_fg_2.png
new file mode 100644
index 0000000..fc14ec4
Binary files /dev/null and b/img_old/thermo_fg_2.png differ
diff --git a/js_old/Thermometer.js.orig b/js_old/Thermometer.js.orig
new file mode 100644
index 0000000..54a708e
--- /dev/null
+++ b/js_old/Thermometer.js.orig
@@ -0,0 +1,136 @@
+<<<<<<< HEAD
+=======
+var $displayThermometer = $("#thermometerContainer");
+
+
+//TODO 2013-09-18 allow displaying temperatures HIGHER than the targTemp (it's now being capped at targTemp).
+>>>>>>> new_layouting_approach
+function Thermometer() {
+ this.currentTemperature = 0; // default val
+ this.targetTemperature = 180; // default val
+
+ this.thermoOverlayImg = new Image();
+ this.thermoOverlayImgSrc = "img/thermometer_fg_overlay.png"; // ../img/thermometer_fg_overlay.png
+
+ this.thermoWidth= 40;
+ this.thermoHeight = 100;
+
+ this.$canvas;
+ this.canvas;
+ this.context;
+ this.$container;
+
+ this.isInitted = false;
+
+ this.enabled = true;
+
+ this.thermoColors = [
+ [50, 200, 244], // 'cold'
+ [244, 190, 10], // 'warming up'
+ [244, 50, 50] // 'ready / hot'
+ ];
+
+ this.init = function(targCanvas, targCanvasContainer) {
+ console.log("Thermometer.init()");
+
+ this.$container = targCanvasContainer;
+
+ this.$canvas = targCanvas;
+ this.canvas = this.$canvas[0];
+ this.context = this.canvas.getContext('2d');
+
+
+ var self = this;
+ this.thermoOverlayImg.onload = function() {
+ console.log("canvasThermoOverlay img loaded");
+ self.isInitted = true;
+ self.update(self.currentTemperature, self.targetTemperature);
+ };
+ this.thermoOverlayImg.src = this.thermoOverlayImgSrc;
+ }
+
+ this.update = function(curr, targ) {
+ // console.log("Thermometer.update(" + curr + "," + targ + ")");
+
+ if (this.isInitted) {
+ if(!this.enabled) return;
+ if (curr == undefined) curr = 0;
+ if (targ== undefined) targ = 180; // prevent divide by zero
+
+ var progress = curr / targ;
+
+ progress = Math.min(progress, 1.0);
+ progress = Math.max(progress, 0);
+
+ var h = this.thermoHeight; // 94 // px
+ var paddingUnder = 15; // how far is beginpoint from bottom of thermometer
+ var paddingAbove = 25; // how far is endpoint from top of thermometer
+ var endPoint = h * .8;
+ var p = Math.floor((h - paddingUnder - paddingAbove) * progress); // %
+ // var tempHeight =
+
+ var currColor = this.thermoColors[0];
+ if (progress > 0.98) {
+ currColor = this.thermoColors[2];
+ } else if (progress > 0.25) {
+ currColor = this.thermoColors[1];
+ }
+
+ // clear
+ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.context.font = "10pt sans-serif";
+
+ // draw the thermometer clipping path
+ this.context.save();
+ this.context.beginPath();
+ this.context.arc(40, 80, 16, 0, 2 * Math.PI, false); // circle bottom of thermometer
+ this.context.arc(40, 10, 4, 0, 2 * Math.PI, false); // circle at top of thermometer tube
+ this.context.rect(36, 11, 8, 70); // thermometer tube
+ this.context.fillStyle = '#fff';
+ this.context.fill();
+ this.context.clip();
+
+ // draw rectangle which represents temperature
+ // rect will be clipped by the thermometer outlines
+ this.context.beginPath();
+ this.context.rect(20, h - paddingUnder - p, 60, p + paddingUnder);
+ //console.log(" currColor: " + currColor);
+ //todo Math.floor??
+ this.context.fillStyle = "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")";
+ this.context.fill();
+ this.context.restore();
+
+ // additional text labels
+ this.context.save();
+ this.context.beginPath();
+ this.context.moveTo(32, paddingAbove);
+ this.context.lineTo(52, paddingAbove);
+ this.context.lineWidth = 2;
+ this.context.strokeStyle = '#000';
+ this.context.stroke();
+ this.context.fillStyle = '#000';
+ this.context.textAlign = "left";
+ this.context.textBaseline = "middle";
+ this.context.fillText(targ + "°", 55, paddingAbove);
+ this.context.restore();
+
+ // the thermometer outline png
+ this.context.drawImage(this.thermoOverlayImg, 20, 0);
+
+ // text
+ this.context.fillStyle = '#000';
+ this.context.textAlign="center";
+ this.context.fillText(curr + "°", 40, h + paddingUnder);
+ } else {
+ console.log("Thermometer.setTemperature() -> thermometer not initialized!");
+ }
+ }
+ this.show = function() {
+ this.$container.show();
+ this.enabled = true;
+ }
+ this.hide = function() {
+ this.$container.hide();
+ this.enabled = false;
+ }
+}
diff --git a/js/libs/bootstrap.js b/js_old/bootstrap.js
similarity index 100%
rename from js/libs/bootstrap.js
rename to js_old/bootstrap.js
diff --git a/js/libs/bootstrap.min.js b/js_old/bootstrap.min.js
similarity index 100%
rename from js/libs/bootstrap.min.js
rename to js_old/bootstrap.min.js
diff --git a/js_old/init_layout backup20130918.js b/js_old/init_layout backup20130918.js
new file mode 100644
index 0000000..a535412
--- /dev/null
+++ b/js_old/init_layout backup20130918.js
@@ -0,0 +1,260 @@
+var imgDims = [320, 320]; // width and height of image
+
+function doClientAndOrientationStuff() {
+ console.log("f:doClientAndOrientationStuff()");
+
+ $(".agentInfo").text("");
+
+ /*
+ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
+ if (window.orientation == -90 || window.orientation == 90) {
+ // landscape
+// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
+ } else {
+ // portrait
+ $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
+ }
+ }
+ return;
+ //*/
+
+ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
+ console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation);
+ if (window.orientation == -90 || window.orientation == 90) {
+ console.log(" landscape");
+ // landscape
+
+ // var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
+ var ww = 0; //get proper width
+ if (window.innerWidth) {
+ ww = window.innerWidth;
+ // if (window.screen.availWidth) {
+// ww = window.screen.availWidth;
+
+// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
+// ww = window.innerWidth;
+// }
+ } else if($(window).width()) {
+ ww = $(window).width();
+ } else {
+
+ }
+
+ // ww = 480;
+
+ var mw = imgDims[0]; // min width of site
+ //*
+ if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
+ var mw = imgDims[1]; // in landscape: min-width is image width
+ }
+ //*/
+ var ratio = ww / mw; //calculate ratio
+ $('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
+ if( ww < mw){ //smaller than minimum size
+// $(".colmask").css("background-color", "#ff0");
+ // $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
+ // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
+ }else{ //regular size
+// $(".colmask").css("background-color", "#0ff");
+ // $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
+ }
+
+ console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio);
+
+ $(".agentInfo").append("ww: " + ww + ", mw: " + mw + "
");
+ $(".agentInfo").append("ratio: " + ratio + "
");
+ $(".agentInfo").append("
");
+ } else {
+ console.log(" portrait");
+ // portrait
+// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
+ $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no');
+ }
+
+ } else {
+ // console.log("else");
+ $(".colmask").css("background-color", "#f80");
+
+ }
+
+
+ $(".agentInfo").append("$(window).width(): " + $(window).width() + "
");
+ $(".agentInfo").append("window.screen.width: " + window.screen.width+ "
");
+ $(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "
");
+ $(".agentInfo").append("
");
+ $(".agentInfo").append("window.innerWidth: " + window.innerWidth + "
");
+ $(".agentInfo").append("window.innerHeight: " + window.innerHeight + "
");
+ $(".agentInfo").append("
");
+ $(".agentInfo").append("$(window).height(): " + $(window).height() + "
");
+ $(".agentInfo").append("window.screen.height: " + window.screen.height+ "
");
+ $(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "
");
+ $(".agentInfo").append("
");
+ $(".agentInfo").append("user agent: " + navigator.userAgent + "
");
+};
+
+function doOnOrientationChange() {
+ console.log("doOnOrientationChange");
+ doClientAndOrientationStuff();
+
+ // switch(window.orientation) {
+ // case -90:
+ // case 90:
+ // alert('landscape');
+ // break;
+ // default:
+ // alert('portrait');
+ // break;
+ // }
+}
+
+var drawAreaContainerMinHeight = 300;
+var drawAreaContainerMaxHeight = 450;
+function doOnResize() {
+ // console.log("doOnResize() >> " + new Date().getTime());
+// $(".container").css("height", window.innerHeight);
+
+ // code from new layouting approach... //TODO give this a more logical spot
+ $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
+
+ canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
+ canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
+ // canvas.width = canvas.clientWidth;
+ // canvas.height = canvas.clientHeight;
+
+ // $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
+ // $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
+ // canvas.width = parseInt($canvas.css("width"), 10);
+ // canvas.height = parseInt($canvas.css("height"), 10);
+
+ preview.width = 150;
+ preview.height = $drawAreaContainer.height();
+// preview.width = parseInt($preview.css("width"), 10);
+// preview.height = parseInt($preview.css("height"), 10);
+
+ canvasWidth = canvas.width;
+ canvasHeight = canvas.height;
+
+ redrawDoodle();
+ redrawPreview();
+
+ return;
+
+// doClientAndOrientationStuff() // <-- is this necessary in this method?
+
+// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
+ if (window.innerHeight < 768) {
+// $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
+ var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
+ newVal = Math.max(newVal, drawAreaContainerMinHeight);
+ newVal = Math.min(newVal, drawAreaContainerMaxHeight);
+
+ $('#drawAreaContainer').innerHeight(newVal);
+
+ // canvas drawing area
+ $canvas.css("height", newVal);
+ canvas.height = newVal;
+ canvasWidth = canvas.width;
+ canvasHeight = canvas.height;
+
+ // preview area
+ $preview.css("height", newVal);
+ preview.height = newVal;
+ layerOffsetY = preview.height - 1.75 * layerCY;
+ yStep = preview.height / 150;
+
+ redrawDoodle();
+ redrawPreview();
+ }
+}
+
+function initLayouting() {
+ console.log("f:initLayouting()");
+
+ // first set the css width/height and actual width/height of the drawing area
+
+
+
+
+// $doodleCanvas = $("#mycanvas");
+// doodleCanvas = $("#mycanvas")[0];
+// doodleCanvasContext = doodleCanvas.getContext('2d');
+
+ $drawAreaContainer = $("#drawAreaContainer");
+ $drawAreaContainer.css("margin", 0);
+ $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
+ $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
+
+ canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
+ canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
+// canvas.width = canvas.clientWidth;
+// canvas.height = canvas.clientHeight;
+
+ preview.width = 150;
+ preview.height = $drawAreaContainer.height();
+
+ // code from new layouting approach... //TODO give this a more logical spot
+// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
+// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
+// canvas.width = parseInt($canvas.css("width"), 10);
+// canvas.height = parseInt($canvas.css("height"), 10);
+// preview.width = parseInt($preview.css("width"), 10);
+// preview.height = parseInt($preview.css("height"), 10);
+ canvasWidth = canvas.width;
+ canvasHeight = canvas.height;
+
+// console.log("f:initLayouting() >> canvas height: " + canvas.height);
+
+
+
+ // imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
+ // imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
+
+// imgDims = [1024, 768];
+
+ /*
+ if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
+ imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
+ } else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
+ imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
+ } else {
+ imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
+ }
+ //*/
+
+ // $(".container").css("height", window.innerHeight);
+
+ // window.innerHeight
+ console.log("window.innerHeight: " + window.innerHeight);
+ console.log("window.innerWidth: " + window.innerWidth);
+ console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
+ console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
+
+
+ /* 2013-07-26 not doing this resizing stuff now, it's not working well yet
+ if (window.innerHeight < 768) {
+ $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
+ }
+ //*/
+
+ // timeout because it SEEMS to be beneficial for initting the layout
+ // 2013-09-18 seems beneficial since when?
+ setTimeout(_startOrientationAndChangeEventListening, 1000);
+}
+
+function _startOrientationAndChangeEventListening() {
+ // Initial execution if needed
+
+ $(window).on('resize', doOnResize);
+
+// if (!window.addEventListener) {
+// window.attachEvent('orientationchange', doOnOrientationChange, false);
+// window.attachEvent('resize', doOnResize, false);
+// } else {
+// window.addEventListener('orientationchange', doOnOrientationChange, false);
+// window.addEventListener('resize', doOnResize, false);
+// }
+
+ // is it necessary to call these? Aren't they called by the above eventhandlers?
+// doClientAndOrientationStuff();
+ doOnResize();
+}
diff --git a/js_old/main.js.orig b/js_old/main.js.orig
new file mode 100644
index 0000000..f74b219
--- /dev/null
+++ b/js_old/main.js.orig
@@ -0,0 +1,139 @@
+var debugMode = false; // debug mode
+var sendPrintCommands = true; // if Doodle3d should send print commands to the 3d printer
+var communicateWithWifibox = true; // if Doodle3d should try interfacing with the wifibox (in case one is not connected)
+var wifiboxIsRemote = false; // when you want to run the client on a computer and have it remotely connect to the wifibox
+var autoUpdate = true; // auto retrieve updates about temperature and progress from printer
+
+var printer = new Printer();
+var progressbar = new Progressbar();
+var thermometer = new Thermometer();
+var settingsWindow = new SettingsWindow();
+var message = new Message();
+
+var firstTimeSettingsLoaded = true;
+
+var wifiboxURL; // Using the uhttpd lua handler as default, because of better performance
+var wifiboxCGIBinURL; // CGI-bin, for some network stuff, where it needs to restart the webserver for example
+
+var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer;
+
+$(function() {
+ console.log("ready");
+
+
+ //TODO give this a more logical place in code
+
+ if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");
+ if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1");
+ if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");
+ if (getURLParameter("r") != "null") wifiboxIsRemote = (getURLParameter("r") == "1");
+ if (getURLParameter("u") != "null") autoUpdate = (getURLParameter("u") == "1");
+
+ if (wifiboxIsRemote) {
+ wifiboxURL = "http://192.168.5.1/d3dapi";
+ wifiboxCGIBinURL = "http://192.168.5.1/cgi-bin/d3dapi";
+ } else {
+ wifiboxURL = "http://" + window.location.host + "/d3dapi";
+ wifiboxCGIBinURL = "http://" + window.location.host + "/cgi-bin/d3dapi";
+ }
+
+ if (!communicateWithWifibox) {
+ sendPrintCommands = false; // 'communicateWithWifibox = false' implies this
+ }
+ console.log("debugMode: " + debugMode);
+ console.log("sendPrintCommands: " + sendPrintCommands);
+ console.log("communicateWithWifibox: " + communicateWithWifibox);
+ console.log("wifiboxIsRemote: " + wifiboxIsRemote);
+ console.log("wifibox URL: " + wifiboxURL);
+
+ initDoodleDrawing();
+ initPreviewRendering();
+ initLayouting();
+ initSidebars();
+ initButtonBehavior();
+ initVerticalShapes();
+
+ thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
+ progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
+
+ message.init($("#message"));
+
+ printer.init();
+ $(document).on(Printer.UPDATE,update);
+
+ settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
+ $(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
+
+ if(debugMode) {
+ console.log("debug mode is true");
+ $("body").css("overflow", "auto");
+ $("#debug_textArea").css("display", "block");
+ $("#preview_tmp").css("display", "block");
+
+ $("#debug_display").css("display", "block");
+
+ // show and hide the progressguage and thermometer
+ showhideInterval = setInterval(showOrHideThermo, 2500);
+
+// $("#debugContainer").css("display", "block");
+
+ /* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
+ // todo remove this temporary code...
+ /*
+ setTimeout(function() {
+ $("#startgcode").text("");
+ $("#startgcode").append("G21 (mm) \n");
+ $("#startgcode").append("G91 (relative) \n");
+ $("#startgcode").append("G28 X0 Y0 Z0 (physical home) \n");
+ $("#startgcode").append("M104 S230 (temperature) \n");
+ $("#startgcode").append("G1 E10 F250 (flow) \n");
+ $("#startgcode").append("G92 X-100 Y-100 Z0 E10 \n");
+ $("#startgcode").append("G1 Z3 F5000 (prevent diagonal line) \n");
+ $("#startgcode").append("G90 (absolute) \n");
+ $("#startgcode").append("M106 (fan on)");
+ console.log("$('#startgcode'): " + $("#startgcode").val());
+
+ $("#endgcode").text("");
+ $("#endgcode").append("G1 X-100 Y-100 F15000 (fast homing) \n");
+ $("#endgcode").append("M107 \n");
+ $("#endgcode").append("M84 (disable axes) \n");
+ console.log("$('#endgcode'): " + $("#endgcode").val());
+ }, 1000);
+ //*/
+ }
+<<<<<<< .merge_file_HNcA77
+=======
+ //showhideInterval = setInterval(showOrHideThermo, 2500);
+>>>>>>> .merge_file_0hlg7g
+});
+
+/*var showhideInterval;
+var showOrHide = false;
+
+function showOrHideThermo() {
+ console.log("f:showOrHideThermo()");
+ if (showOrHide) {
+ thermometer.hide();
+ progressbar.hide();
+ } else {
+ thermometer.show();
+ progressbar.show();
+
+ }
+ showOrHide = !showOrHide;
+}*/
+
+function settingsLoaded() {
+ console.log("settingsLoaded");
+ console.log("autoHeatup: ",settings["printer.heatup.enabled"]);
+ if(settings["printer.heatup.enabled"]) {
+ if(firstTimeSettingsLoaded) {
+ printer.preheat();
+ firstTimeSettingsLoaded = false;
+ }
+ }
+}
+
+function setDebugText(text) {
+ $("#debug_display").text(text);
+}
diff --git a/js/previewRendering_v01.js b/js_old/previewRendering_v01.js
similarity index 100%
rename from js/previewRendering_v01.js
rename to js_old/previewRendering_v01.js
diff --git a/js_old/previewRendering_v02.js.orig b/js_old/previewRendering_v02.js.orig
new file mode 100644
index 0000000..a5e9dd0
--- /dev/null
+++ b/js_old/previewRendering_v02.js.orig
@@ -0,0 +1,355 @@
+//*
+var $preview;
+var preview;
+var previewCtx;
+
+var preview_tmp;
+var previewCtx_tmp;
+
+var previewDefaults = {
+ rotation: Math.PI/90,
+ numLayers: 10
+}
+
+var svgPathRegExp = /[LM]\d* \d*/ig;
+var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
+
+var prevRedrawTime = new Date().getTime();
+var redrawInterval = 1000 / 30; // ms
+
+function initPreviewRendering() {
+ console.log("f:initPreviewRendering()");
+
+ $preview = $("#preview");
+ preview = $preview[0];
+ previewCtx = preview.getContext('2d');
+
+ // DEBUG --> mbt preview_tmp (voor de toImageData truc)
+ var _ratio = preview.width / canvas.width;
+ preview_tmp = document.getElementById('preview_tmp');
+ preview_tmp.width = preview.width;
+ preview_tmp.height = canvas.height * _ratio;
+ $("#preview_tmp").css("top", -preview_tmp.height);
+
+ previewCtx_tmp = preview_tmp.getContext('2d');
+
+ calcPreviewCanvasProperties();
+ redrawPreview();
+}
+
+function calcPreviewCanvasProperties() {
+ console.log("f:calcPreviewCanvasProperties()");
+
+ globalScale = preview.width / canvasWidth;
+ layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
+ layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
+// layerOffsetY = preview.height - 1.75 * layerCY;
+ layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom);
+ yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers;
+}
+
+// TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping)
+var previewRotationLimit = Math.PI / 30; // rough estimate
+
+var numLayers = previewDefaults.numLayers; // current number of preview layers
+var maxNumLayers= 100; // maximum number of preview layers
+var minNumLayers= 2; // minimum number of preview layers
+var globalScale = 0.3; // global scale of preview (width preview / width canvas)
+var globalAlpha = 0.20; // global alpha of preview
+var scaleY = 0.4; // additional vertical scale per path for 3d effect
+var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
+var previewVerticalPadding = { "top" : .15, "bottom" : 0.12 }; // %
+var strokeWidth = 2; //4;
+//var rStep = Math.PI/40; //Math.PI/40; //
+var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
+var yStep;// = preview.height / 150; // 3; //6;
+//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
+//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
+var layerCX, layerCY;
+//var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
+//var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
+var layerOffsetY; //= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
+var prevX = 0;
+var prevY = 0;
+var highlight = true; //highlight bottom, middle and top layers
+
+var linesRaw = "";
+var debug_redrawSimplification = 6;
+function redrawPreview(redrawLess) {
+ if (redrawLess == undefined) redrawLess = false;
+
+ if (_points.length < 2) return;
+
+ if (!redrawLess) {
+ //debug_redrawSimplification = Math.round(_points.length / 65);
+ //*
+ if (_points.length < 100) {
+ debug_redrawSimplification = 6;
+ } else if (_points.length < 250) {
+ debug_redrawSimplification = 7;
+ } else if (_points.length < 400) {
+ debug_redrawSimplification = 8;
+ } else if (_points.length < 550) {
+ debug_redrawSimplification = 9;
+ } else if (_points.length < 700) {
+ debug_redrawSimplification = 10;
+ } else {
+ debug_redrawSimplification = 11;
+ }
+ //*/
+// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
+ }
+
+ var y = 0;
+ var r = 0;
+
+ //preview.width = preview.width;
+ previewCtx.clearRect(0, 0, preview.width, preview.height);
+ previewCtx.lineWidth = strokeWidth;
+ previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,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%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.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
+ previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor);
+ previewCtx.rotate(r);
+ previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
+
+ var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
+
+ previewCtx.beginPath();
+ previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
+ for(var j = 1; j < _points.length; j++) {
+ adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
+ if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
+ previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
+ }
+ previewCtx.stroke();
+
+ y -= yStep;
+ r += rStep;
+ previewCtx.restore();
+ }
+ previewCtx.globalAlpha = globalAlpha;
+}
+
+function renderToImageDataPreview() {
+ console.log("f:renderToImageDataPreview()");
+
+ if (_points.length < 2) return;
+
+ //*
+ // the first step
+ previewCtx_tmp.clearRect(0, 0, preview.width, preview.height);
+ previewCtx_tmp.lineWidth = strokeWidth;
+ previewCtx_tmp.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
+
+ previewCtx_tmp.save();
+ previewCtx_tmp.translate(layerCX, layerCY);
+ previewCtx_tmp.scale(viewerScale, viewerScale);
+ previewCtx_tmp.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
+
+ var adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[0]);
+
+ previewCtx_tmp.beginPath();
+ previewCtx_tmp.moveTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
+ for(var j = 1; j < _points.length; j++) {
+ adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[j])
+ previewCtx_tmp.lineTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
+ }
+ previewCtx_tmp.stroke();
+ previewCtx_tmp.closePath();
+ previewCtx_tmp.restore();
+ //*/
+
+ // var saved_rect = previewCtx_tmp.getImageData(0, 0, layerCX*2, layerCY*2);
+ var saved_rect_todataurl = preview_tmp.toDataURL();
+ doodleImageCapture = new Image();
+ doodleImageCapture.onload = function() {
+
+ 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>>>>>> 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/css/debug.css b/www/css/debug.css
similarity index 100%
rename from css/debug.css
rename to www/css/debug.css
diff --git a/css/settings.css b/www/css/settings.css
similarity index 100%
rename from css/settings.css
rename to www/css/settings.css
diff --git a/css/styles.css b/www/css/styles.css
similarity index 100%
rename from css/styles.css
rename to www/css/styles.css
diff --git a/css/styles.min.css b/www/css/styles.min.css
similarity index 100%
rename from css/styles.min.css
rename to www/css/styles.min.css
diff --git a/favicon.ico b/www/favicon.ico
similarity index 100%
rename from favicon.ico
rename to www/favicon.ico
diff --git a/favicon.png b/www/favicon.png
similarity index 100%
rename from favicon.png
rename to www/favicon.png
diff --git a/favicon_alt.ico b/www/favicon_alt.ico
similarity index 100%
rename from favicon_alt.ico
rename to www/favicon_alt.ico
diff --git a/img/arrows.png b/www/img/arrows.png
similarity index 100%
rename from img/arrows.png
rename to www/img/arrows.png
diff --git a/img/bg_bottom.png b/www/img/bg_bottom.png
similarity index 100%
rename from img/bg_bottom.png
rename to www/img/bg_bottom.png
diff --git a/img/bg_middle.png b/www/img/bg_middle.png
similarity index 100%
rename from img/bg_middle.png
rename to www/img/bg_middle.png
diff --git a/img/bg_top.png b/www/img/bg_top.png
similarity index 100%
rename from img/bg_top.png
rename to www/img/bg_top.png
diff --git a/img/bg_vertical2.png b/www/img/bg_vertical.png
similarity index 100%
rename from img/bg_vertical2.png
rename to www/img/bg_vertical.png
diff --git a/img/buttons/btnDown.png b/www/img/buttons/btnDown.png
similarity index 100%
rename from img/buttons/btnDown.png
rename to www/img/buttons/btnDown.png
diff --git a/img/buttons/btnInfo.png b/www/img/buttons/btnInfo.png
similarity index 100%
rename from img/buttons/btnInfo.png
rename to www/img/buttons/btnInfo.png
diff --git a/img/buttons/btnLeft.png b/www/img/buttons/btnLeft.png
similarity index 100%
rename from img/buttons/btnLeft.png
rename to www/img/buttons/btnLeft.png
diff --git a/img/buttons/btnNew.png b/www/img/buttons/btnNew.png
similarity index 100%
rename from img/buttons/btnNew.png
rename to www/img/buttons/btnNew.png
diff --git a/img/buttons/btnOk.png b/www/img/buttons/btnOk.png
similarity index 100%
rename from img/buttons/btnOk.png
rename to www/img/buttons/btnOk.png
diff --git a/img/buttons/btnOk_settings.png b/www/img/buttons/btnOk_settings.png
similarity index 100%
rename from img/buttons/btnOk_settings.png
rename to www/img/buttons/btnOk_settings.png
diff --git a/img/buttons/btnOops.png b/www/img/buttons/btnOops.png
similarity index 100%
rename from img/buttons/btnOops.png
rename to www/img/buttons/btnOops.png
diff --git a/img/buttons/btnOops2.png b/www/img/buttons/btnOops2.png
similarity index 100%
rename from img/buttons/btnOops2.png
rename to www/img/buttons/btnOops2.png
diff --git a/img/buttons/btnOops_disabled.png b/www/img/buttons/btnOops_disabled.png
similarity index 100%
rename from img/buttons/btnOops_disabled.png
rename to www/img/buttons/btnOops_disabled.png
diff --git a/img/buttons/btnPrint.png b/www/img/buttons/btnPrint.png
similarity index 100%
rename from img/buttons/btnPrint.png
rename to www/img/buttons/btnPrint.png
diff --git a/img/buttons/btnPrint2.png b/www/img/buttons/btnPrint2.png
similarity index 100%
rename from img/buttons/btnPrint2.png
rename to www/img/buttons/btnPrint2.png
diff --git a/img/buttons/btnPrint_disabled.png b/www/img/buttons/btnPrint_disabled.png
similarity index 100%
rename from img/buttons/btnPrint_disabled.png
rename to www/img/buttons/btnPrint_disabled.png
diff --git a/img/buttons/btnRight.png b/www/img/buttons/btnRight.png
similarity index 100%
rename from img/buttons/btnRight.png
rename to www/img/buttons/btnRight.png
diff --git a/img/buttons/btnSave.png b/www/img/buttons/btnSave.png
similarity index 100%
rename from img/buttons/btnSave.png
rename to www/img/buttons/btnSave.png
diff --git a/img/buttons/btnSettings.png b/www/img/buttons/btnSettings.png
similarity index 100%
rename from img/buttons/btnSettings.png
rename to www/img/buttons/btnSettings.png
diff --git a/img/buttons/btnStop.png b/www/img/buttons/btnStop.png
similarity index 100%
rename from img/buttons/btnStop.png
rename to www/img/buttons/btnStop.png
diff --git a/img/buttons/btnStop2.png b/www/img/buttons/btnStop2.png
similarity index 100%
rename from img/buttons/btnStop2.png
rename to www/img/buttons/btnStop2.png
diff --git a/img/buttons/btnStop_disabled.png b/www/img/buttons/btnStop_disabled.png
similarity index 100%
rename from img/buttons/btnStop_disabled.png
rename to www/img/buttons/btnStop_disabled.png
diff --git a/img/buttons/btnTurnLeft.png b/www/img/buttons/btnTurnLeft.png
similarity index 100%
rename from img/buttons/btnTurnLeft.png
rename to www/img/buttons/btnTurnLeft.png
diff --git a/img/buttons/btnTurnRight.png b/www/img/buttons/btnTurnRight.png
similarity index 100%
rename from img/buttons/btnTurnRight.png
rename to www/img/buttons/btnTurnRight.png
diff --git a/img/buttons/btnUp.png b/www/img/buttons/btnUp.png
similarity index 100%
rename from img/buttons/btnUp.png
rename to www/img/buttons/btnUp.png
diff --git a/img/buttons/btnZoomIn.png b/www/img/buttons/btnZoomIn.png
similarity index 100%
rename from img/buttons/btnZoomIn.png
rename to www/img/buttons/btnZoomIn.png
diff --git a/img/buttons/btnZoomOut.png b/www/img/buttons/btnZoomOut.png
similarity index 100%
rename from img/buttons/btnZoomOut.png
rename to www/img/buttons/btnZoomOut.png
diff --git a/img/buttons/settings_lable.png b/www/img/buttons/settings_lable.png
similarity index 100%
rename from img/buttons/settings_lable.png
rename to www/img/buttons/settings_lable.png
diff --git a/img/icon.png b/www/img/icon.png
similarity index 100%
rename from img/icon.png
rename to www/img/icon.png
diff --git a/img/logo/logo_full.png b/www/img/logo/logo_full.png
similarity index 100%
rename from img/logo/logo_full.png
rename to www/img/logo/logo_full.png
diff --git a/img/logo/logo_small.png b/www/img/logo/logo_small.png
similarity index 100%
rename from img/logo/logo_small.png
rename to www/img/logo/logo_small.png
diff --git a/www/img/logo/logo_smaller.png b/www/img/logo/logo_smaller.png
new file mode 100644
index 0000000..f000e5c
Binary files /dev/null and b/www/img/logo/logo_smaller.png differ
diff --git a/www/img/logo/logo_smallest.png b/www/img/logo/logo_smallest.png
new file mode 100644
index 0000000..17f2799
Binary files /dev/null and b/www/img/logo/logo_smallest.png differ
diff --git a/img/progress_bg.png b/www/img/progress_bg.png
similarity index 100%
rename from img/progress_bg.png
rename to www/img/progress_bg.png
diff --git a/img/progress_fg.png b/www/img/progress_fg.png
similarity index 100%
rename from img/progress_fg.png
rename to www/img/progress_fg.png
diff --git a/img/settings_lable.png b/www/img/settings_lable.png
similarity index 100%
rename from img/settings_lable.png
rename to www/img/settings_lable.png
diff --git a/img/thermometer_fg_overlay.png b/www/img/thermometer_fg_overlay.png
similarity index 100%
rename from img/thermometer_fg_overlay.png
rename to www/img/thermometer_fg_overlay.png
diff --git a/img/vertical_shape_icons/converging.png b/www/img/vertical_shape_icons/converging.png
similarity index 100%
rename from img/vertical_shape_icons/converging.png
rename to www/img/vertical_shape_icons/converging.png
diff --git a/img/vertical_shape_icons/diverging.png b/www/img/vertical_shape_icons/diverging.png
similarity index 100%
rename from img/vertical_shape_icons/diverging.png
rename to www/img/vertical_shape_icons/diverging.png
diff --git a/img/vertical_shape_icons/sinus.png b/www/img/vertical_shape_icons/sinus.png
similarity index 100%
rename from img/vertical_shape_icons/sinus.png
rename to www/img/vertical_shape_icons/sinus.png
diff --git a/img/vertical_shape_icons/straight.png b/www/img/vertical_shape_icons/straight.png
similarity index 100%
rename from img/vertical_shape_icons/straight.png
rename to www/img/vertical_shape_icons/straight.png
diff --git a/img/webpage_icons/apple-touch-icon-114x114-precomposed.png b/www/img/webpage_icons/apple-touch-icon-114x114-precomposed.png
similarity index 100%
rename from img/webpage_icons/apple-touch-icon-114x114-precomposed.png
rename to www/img/webpage_icons/apple-touch-icon-114x114-precomposed.png
diff --git a/img/webpage_icons/apple-touch-icon-144x144-precomposed.png b/www/img/webpage_icons/apple-touch-icon-144x144-precomposed.png
similarity index 100%
rename from img/webpage_icons/apple-touch-icon-144x144-precomposed.png
rename to www/img/webpage_icons/apple-touch-icon-144x144-precomposed.png
diff --git a/img/webpage_icons/apple-touch-icon-72x72-precomposed.png b/www/img/webpage_icons/apple-touch-icon-72x72-precomposed.png
similarity index 100%
rename from img/webpage_icons/apple-touch-icon-72x72-precomposed.png
rename to www/img/webpage_icons/apple-touch-icon-72x72-precomposed.png
diff --git a/img/webpage_icons/apple-touch-icon-precomposed.png b/www/img/webpage_icons/apple-touch-icon-precomposed.png
similarity index 100%
rename from img/webpage_icons/apple-touch-icon-precomposed.png
rename to www/img/webpage_icons/apple-touch-icon-precomposed.png
diff --git a/index.html b/www/index.html
similarity index 98%
rename from index.html
rename to www/index.html
index 9002452..cd0b5d3 100755
--- a/index.html
+++ b/www/index.html
@@ -127,7 +127,7 @@
-
+
