vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 01:07:56 +01:00
Code Issues Releases Wiki Activity

massive commit due to merging branch 'new_layouting_approach' into feature/printerdriver

Browse Source 
----------------------------------------------------------------------

Merge branch 'new_layouting_approach' into feature/printerdriver

* new_layouting_approach: (22 commits)
  changed chmod
  adjustments to make preview be initialized and updated better (when resizing)
  updates css styles
  changes to how the draw and preview canvasses are positioned and initted
  many updates CSS and LESS files and generally a responsive scaling overhaul of the settings page
  new LESS
  simple js lib for managing the folded in/out state of the sidebars on the minimal interface
  arrow file used in the minimal doodle3d interface
  the resulting css files which LESS outputs
  removed this because it's being rolled into the styles.css by LESS
  moved logos to their own dir + removed a few redundant ones
  copy normalize.css to the LESS dir since it's a source file
  smallest size of the doodle3d logo
  started using LESS for stylesheeting
  commit of current state of this branch. It's a work-in-progress (comitting because I need to change to other branch)
  a lot of changes -> almost there but the drawing is not consistent yet across devices. Drawing on the draw canvas is going OK but the preview is not drawing well now. Giving up for now.
  changes (sry)
  intermediary progress
  commented out part of the css (not final solution)
  added todo for future
  ...
This commit is contained in:
Adriaan Wormgoor 2013-10-11 15:02:26 +02:00
commit 58b3a12c6b
45 changed files with 2483 additions and 797 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
css/d3d_btns.css
View File

@ -1,173 +0,0 @@
/*.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 */
}
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
}
/*
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;
/* bottom: 150px;*/
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 {
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');
}
.btn {
position: absolute;
-webkit-user-select: none;
cursor: pointer;
}
#displayTemp {
position: absolute;
right: 55px;
top: 334px;
font-weight: bold;
background: white;
display:none;
}
.disabled {
opacity: 0.3;
cursor: default;
}
#btnStop.disabled {
display: none;
}

8
css/debug.css
View File

@ -1,15 +1,17 @@
.debugContainer {
position: absolute;
top: 0px;
left: 0px;
top: 0;
left: 0;
z-index: 500;
background-color: #f0f;
display: none;
}
#debug_textArea {
position:absolute;
bottom: 0;
width: 800px;
/*width: 800px; */
z-index: 500;
display: none;
}

329
css/fixedPosInterface.css
View File

@ -1,329 +0,0 @@
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;
}
}

27
css/settings.css
View File

@ -9,17 +9,28 @@ 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 {
width: 600px;
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 0 8px 8px;
padding: 8px;
/*padding-right: 8px;*/
}
form fieldset fieldset{
width: 580px;
max-width: 580px;
margin: 15px 0 5px 0;
clear: left;
float: left;
@ -60,11 +71,15 @@ form textarea {
-moz-border-radius: 5px;
border-radius: 5px;
}
form textarea.gcode {
width: 270px;
height: 150px;
form .startgcode_left {
float:left;
margin-right: 20px;
}
form textarea.gcode {
max-width: 262px;
min-width: 200px;
height: 150px;
}
form small {
margin: 3px 0 0 0;
display: block;

809
css/styles.css Normal file
View File

@ -0,0 +1,809 @@
/*
GLOBAL CONTAINER
*/
body {
background-color: #fcfcfc;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; /* disable cut copy paste */
/* 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;
}
#landscape {
position: absolute;
background-color: #fff;
width: 100%;
max-width: 1024px;
max-height: 768px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 5;
overflow: hidden;
margin: 0px auto;
outline: 2px solid #5e8c71;
-webkit-box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
}
#portrait {
display: none;
}
.bgContainer {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.bgTop,.bgMiddle,.bgBottom {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1.0;
-webkit-transition: opacity .35s linear;
-moz-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
-ms-transition: opacity .35s linear;
transition: opacity .35s linear;
position: absolute;
left: 0px;
z-index: -5;
}
.bgTop {
top: 0px;
}
.bgMiddle {
top: 30%;
}
.bgBottom {
bottom: 0px;
}
.rightpanel img,.leftpanel img {
cursor: pointer;
}
/*
CENTER PANEL
*/
.centerpanel {
position: absolute;
left: 50%;
margin-left: -33%;
width: 66%;
height: 100%;
z-index: 5;
}
.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;
}
#verticalShapes {
position: absolute;
right: -56px;
bottom: 15px;
}
#verticalShapes .verticalshape {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 0px 5px 5px 0px;
margin-top: 4px; /*background-color: #f0f;
*/
cursor: pointer;
}
#verticalShapes .verticalshape.straight {
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
#verticalShapes .verticalshape.diverging {
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
#verticalShapes .verticalshape.converging {
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
#verticalShapes .verticalshape.sinus {
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
}
.drawareacontainer {
position: relative;
width: 100%;
height: 65%;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 15px;
}
#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%;
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;
}
/*
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 {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
}
@media screen and (max-height: 525px) {
.d3dlogo {
max-width: 399px;
top: 20%;
height: 57px;
background-image: url('../img/logo/logo_smaller_wide.png');
}
}
@media screen and (max-height: 375px) {
.d3dlogo {
max-width: 399px;
height: 40px;
background-image: url('../img/logo/logo_smallest_wide.png');
}
}
/*
LEFT PANEL
*/
.leftpanel {
position: absolute;
width: 17%; /* background-color: rgba(67, 204, 67, 0.4);
*/
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;
}
/*
RIGHT PANEL
*/
.rightpanel {
position: absolute;
width: 17%; /* background-color: rgba(255, 0, 254, 0.4);
*/
top: 0px;
right: 0px;
bottom: 0px;
}
.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;
}
/*
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;
}
.progressAmount {
margin: 0px 5px;
}
#progressbar {
position: relative; /*margin-bottom: -20px;
*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
}
/*
THERMOMETER
*/
#thermometerContainer {
position: absolute;
right: 25px;
top: 370px;
}
#thermometerCanvas {
/*background: #59b2b8;
*/
/*zoom: 2;
*/
}
/*
REST
*/
/* CLEARFIX */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 only*/
.clearfix {
*zoom: 1;
}
/*
SETTINGS POPUP
*/
#contentOverlay {
background-color: rgba(255, 255, 255, 0.65);
z-index: 20;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: none;
}
#contentOverlay #settings {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 15;
max-width: 835px;
max-height: 540px;
width: 80%;
height: 75%;
margin: 7% 8%;
-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;
overflow: hidden;
display: table;
padding: 2%;
}
#contentOverlay #settings .settingsLabelContainer {
width: 100%;
height: auto;
margin-bottom: 1%;
}
#contentOverlay #settings .settingsLabelImg {
width: 45%;
max-width: 373px;
height: auto;
}
#contentOverlay #settings > .content {
margin: 3% 12%;
margin-top: 12%;
max-height: 388px;
display: table-row;
width: 100%;
}
#contentOverlay #settings > .content > .settings {
border: 1px solid #bbbbbb;
border-radius: 5px;
overflow: scroll;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
#contentOverlay #settings > .content > .btnContainer {
width: 15%;
position: relative;
display: table-cell;
}
#contentOverlay #settings > .content > .btnContainer > .btnOK {
position: absolute;
bottom: 3%;
right: 3%;
max-width: 85px;
min-width: 42px;
width: 91%;
height: auto;
margin: 0 2% 2% 0;
cursor: pointer;
float: right;
}
#contentOverlay #settings > .content > div {
height: 100%;
}
@media only screen and (max-width: 480px),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) {
/*
TOP LOGO
*/
.centerpanel {
left: 0;
margin-left: 0;
width: 100%; /* background-color: rgba(0, 135, 255, 0.4);
*/
}
.logopanel {
height: 40px;
}
.d3dlogo {
top: 0;
max-width: 399px;
height: 40px;
background-image: url('../img/logo/logo_smallest_wide.png');
}
.doodlecontainer {
/* position: absolute;
*/
height: 85%;
}
/*.bottompanel {
display: none;
}
*/
/*
LEFT
*/
.leftpanel {
width: 100px;
background-color: #fff;
z-index: 50;
-webkit-transition: left 0.3s ease-out;
-moz-transition: left 0.3s ease-out;
-o-transition: left 0.3s ease-out;
-ms-transition: left 0.3s ease-out;
transition: left 0.3s ease-out;
}
.hideleft {
left: -101px;
}
.shadowright {
-webkit-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
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%;
}
/*
RIGHT
*/
.rightpanel {
width: 100px;
background-color: #fff;
z-index: 50;
-webkit-transition: right 0.3s ease-out;
-moz-transition: right 0.3s ease-out;
-o-transition: right 0.3s ease-out;
-ms-transition: right 0.3s ease-out;
transition: right 0.3s ease-out;
}
.hideright {
right: -101px;
}
.shadowleft {
-webkit-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
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%;
}
/*
REST
*/
.sidebutton {
display: block;
position: absolute; /* top: 50%;
*/
/* margin-top: -20px;
*/
top: 0px; /*float: right;
*/
width: 25px;
height: 38px;
border: 1px solid #808;
background: url('../img/arrows.png') no-repeat;
background-color: #eee;
cursor: pointer;
}
.sidebutton:active {
background-color: #aaa;
}
.leftpanel .sidebutton {
right: -27px;
background-position: 0px 0px;
}
.rightpanel .sidebutton {
left: -27px;
background-position: -25px 0px;
}
.sidebuttonin:active {
background-color: #888;
}
.leftpanel .sidebuttonin {
background-color: #ccc;
background-position: -25px 0px;
}
.rightpanel .sidebuttonin {
background-color: #ccc;
background-position: 0px 0px;
}
/*
SETTINGS POPUP -MOBILE
*/
#contentOverlay {
z-index: 200;
}
#contentOverlay #settings {
width: 87%;
height: 82%;
margin: 6% 4%;
}
#contentOverlay #settings > .right {
width: 14%;
}
}
@media only screen and (orientation: portrait) {
#landscape {
display: none;
}
#portrait {
display: block;
}
.vertImage {
margin: 0px;
padding: 0px; /*border: 2px solid #f0f;
*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}
}

1
css/styles.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
fixedPosInterface01_v02.html
View File

@ -50,7 +50,7 @@
<div class="agentInfo"></div>
</div>
<div id="landscape">
<div class="container">
<div class="uiButtonsContainer">
<img class="bgTop" src="img/bg_top.png" />
<img class="bgMiddle" src="img/bg_middle.png" />
<img class="bgBottom" src="img/bg_bottom.png" />

BIN
img/arrows.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 726 B

0
img/logo_full.png → img/logo/logo_full.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

0
img/logo_small.png → img/logo/logo_small.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

0
img/logo_smaller_wide.png → img/logo/logo_smaller_wide.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
img/logo/logo_smallest_wide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
img/logo_full_8bit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
img/logo_small_8bit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
img/logo_smaller.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
img/logo_smaller_8bit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.1 KiB

BIN
img/logo_smaller_wide_8bit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

126
index.html
View File

@ -6,39 +6,42 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
<link rel="icon" type="image/ico" href="favicon.ico"/>
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<link rel="icon" type="image/ico" href="favicon_alt.ico"/>
<link href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
<link href="css/normalize.css" rel="stylesheet" media="screen">
<link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
<link href="css/d3d_btns.css" rel="stylesheet" media="screen">
<link href="css/popups.css" rel="stylesheet">
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="css/styles.css" rel="stylesheet" media="screen">
<link href="css/debug.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="debugContainer">
<div class="debugBtn"></div>
<div class="agentInfo"></div>
</div>
<div id="landscape">
<div class="uiButtonsContainer">
<img class="bgTop" src="img/bg_top.png" />
<div id="landscape" class="clearfix">
<!-- background images -->
<div class="bgContainer">
<img class="bgTop" src="img/bg_top.png" />
<img class="bgMiddle" src="img/bg_middle.png" />
<img class="bgBottom" src="img/bg_bottom.png" />
<div class="buttons">
<div id="d3dlogo" onclick="location.reload()"></div>
<div class="btn" id="btnNew"></div>
<img class="btn" id="btnPrevious" src="img/buttons/btnLeft.png">
<img class="btn" id="btnNext" src="img/buttons/btnRight.png">
<img class="btn" id="btnSave" src="img/buttons/btnSave.png">
<div class="btn" id="btnOops"></div>
<img class="btn" id="btnPrint" src="img/buttons/btnPrint.png">
<img class="btn disabled" id="btnStop" src="img/buttons/btnStop.png">
<img class="btn" id="btnInfo" src="img/buttons/btnInfo.png">
<img class="btn" id="btnSettings" src="img/buttons/btnSettings.png">
</div>
<!-- left panel -->
<div class="leftpanel shadowright">
<div class='sidebutton shadowright'></div>
<img class="btnNew btn" src="img/buttons/btnNew.png" /><br/>
<div class="btnsPrevNext">
<img class="btnPrevious btn" src="img/buttons/btnLeft.png">
<img class="btnNext btn" src="img/buttons/btnRight.png">
</div>
<img class="btnSave btn" src="img/buttons/btnSave.png" /><br/>
<img class="btnOops btn" src="img/buttons/btnOops.png" /><br/>
</div>
<!-- right panel -->
<div class="rightpanel shadowleft">
<div class='sidebutton shadowleft'></div>
<img class="btnPrint btn" src="img/buttons/btnPrint.png" /><br/>
<img class="btnStop btn disabled" src="img/buttons/btnStop.png" /><br/>
<!-- not now
<div id="printProgressContainer">
<label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
@ -50,45 +53,61 @@
<div id="thermometerContainer">
<canvas id="thermometerCanvas" width="100" height="125"></canvas>
</div>
<div class="btnsSettingsInfo">
<img class="btnSettings btn" src="img/buttons/btnSettings.png">
<img class="btnInfo btn" src="img/buttons/btnInfo.png">
</div>
</div>
<div id="drawAreaContainer">
<canvas id="mycanvas"></canvas>
<!--<svg id="svg">-->
<!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>-->
<!--</svg>-->
<canvas id="preview"></canvas>
<canvas id="preview_tmp"></canvas>
<div class="manipulationBtns cf">
<div id="btnsUpDown">
<div class="manipulationBtn" id="btnMoveUp"></div>
<div class="manipulationBtn" id="btnMoveDown"></div>
<!-- center panel -->
<div class="centerpanel">
<div class="logopanel">
<div class="d3dlogo" onclick="location.reload()"></div>
</div>
<div class="drawareacontainer">
<div id="canvasContainers">
<div id="mycanvasContainer">
<canvas id="mycanvas"></canvas>
</div>
<div id="previewContainer">
<canvas id="preview"></canvas>
</div>
</div>
<div id="btnsTurnLeftRight">
<div class="manipulationBtn" id="btnTwistLeft"></div>
<div class="manipulationBtn" id="btnTwistRight"></div>
<canvas id="preview_tmp"></canvas>
<div id="verticalShapes">
<div class="verticalshape straight"> </div>
<div class="verticalshape diverging"> </div>
<div class="verticalshape converging"> </div>
<div class="verticalshape sinus"> </div>
</div>
</div>
<div id="verticalShapes">
<div class="verticalshape straight"> </div>
<div class="verticalshape diverging"> </div>
<div class="verticalshape converging"> </div>
<div class="verticalshape sinus"> </div>
<div class="bottompanel">
<div class="manipulationBtns clearfix">
<div id="btnsUpDown">
<img class="manipulationBtn" id="btnMoveUp" src="img/buttons/btnUp.png" />
<img class="manipulationBtn" id="btnMoveDown" src="img/buttons/btnDown.png" />
</div>
<div id="btnsTurnLeftRight">
<img class="manipulationBtn" id="btnTwistLeft" src="img/buttons/btnTurnLeft.png" />
<img class="manipulationBtn" id="btnTwistRight" src="img/buttons/btnTurnRight.png" />
</div>
</div>
</div>
</div>
<div id="debug_textArea">
<textarea rows="5" cols="115" id="textdump"></textarea>
<textarea rows="5" cols="60" id="textdump"></textarea>
</div>
<div id="debug_display">
</div>
<div id="contentOverlay">
<div id="settings" class="popup">
<header>
<img src="img/settings_lable.png" alt="settings"/>
</header>
<div id="settings">
<div class="settingsLabelContainer">
<img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
</div>
<div class="content">
<div class="settings">henk</div>
<div class="manipulationBtns">
<div class="btnOK"></div>
<div class="settings"></div>
<div class="btnContainer">
<img src="img/buttons/btnOk_settings.png" class="btnOK" alt="settings"/>
</div>
</div>
</div>
@ -109,6 +128,7 @@
<script src="js/Printer.js"></script>
<script src="js/Thermometer.js"></script>
<script src="js/utils.js"></script>
<script src="js/sidebar.js"></script>
<script src="js/main.js"></script>
</body>

5
js/Thermometer.js
View File

@ -1,3 +1,8 @@
// TODO assess if this var is still necessary
var $displayThermometer = $("#thermometerContainer");
//TODO 2013-09-18 allow displaying temperatures HIGHER than the targTemp (it's now being capped at targTemp).
function Thermometer() {
this.currentTemperature = 0; // default val
this.targetTemperature = 180; // default val

51
js/buttonbehaviors.js
View File

@ -11,49 +11,50 @@ var btnNew, btnPrevious, btnNext;
var btnOops, btnStop, btnClear;
var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
var btnInfo, btnSettings;
var btnDebug; // debug
var displayProgress;
//var btnDebug; // debug
var displayTemp, displayProgress;
var state;
var prevState;
function initButtonBehavior() {
console.log("f:initButtonBehavior >> btnNew = " + btnNew);
console.log("f:initButtonBehavior");
btnClear= $("#btnClear");
btnOops = $("#btnOops");
// btnClear= $(".btnClear");
btnOops = $(".btnOops");
btnMoveUp = $("#btnMoveUp");
btnMoveDown = $("#btnMoveDown");
btnTwistLeft = $("#btnTwistLeft");
btnTwistRight = $("#btnTwistRight");
btnInfo = $("#btnInfo");
btnSettings = $("#btnSettings");
btnNew = $("#btnNew");
btnPrint= $("#btnPrint");
btnStop = $("#btnStop");
btnInfo = $(".btnInfo");
btnSettings = $(".btnSettings");
btnNew = $(".btnNew");
btnPrint= $(".btnPrint");
btnStop = $(".btnStop");
displayTemp = $("#thermometerContainer");
displayProgress = $("#printProgressContainer");
// btnPrevious = $("#btnPrevious");
// btnNext = $("#btnNext");
btnPrevious = $(".btnPrevious");
btnNext = $(".btnNext");
//debug
btnDebug = $(".debugBtn");
//btnDebug = $(".debugBtn");
btnNew.bind('touchstart mousedown',clearDoodle);
btnPrint.bind('touchstart mousedown',print);
btnNew.on('touchstart mousedown', clearDoodle);
btnPrint.on('touchstart mousedown', print);
// not using these at the moment
$("#btnPrevious").css("opacity", "0.3");
$("#btnNext").css("opacity", "0.3");
btnNext.css("opacity", "0.3");
$("#btnSave").css("opacity", "0.3");
$("#btnInfo").css("opacity", "0.3");
btnInfo.css("opacity", "0.3");
btnClear.click(function(e) {
e.preventDefault();
// console.log("clear");
clearDoodle();
});
// btnClear.click(function(e) {
// e.preventDefault();
// // console.log("clear");
//
// clearDoodle();
// });
function startOops(e) {
// console.log("btnOops mouse down");
@ -174,14 +175,16 @@ function initButtonBehavior() {
});
// DEBUG
/*
// $(".agentInfo").css("display", "none");
btnDebug.click(function(e) {
console.log("debugClick");
$(".agentInfo").toggleClass("agentInfoToggle");
e.preventDefault();
})
//*/
btnStop.bind('touchstart mousedown',stopPrint);
btnStop.on('touchstart mousedown',stopPrint);
}
function stopPrint() {
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);

55
js/canvasDrawing_v01.js
View File

@ -11,12 +11,8 @@ var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
var dragging = false;
var $canvas = $("#mycanvas");
var canvas = $("#mycanvas")[0];
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var $canvas, canvas, ctx;
var canvasWidth, canvasHeight;
var drawCanvas;
var drawCanvasTopLeftCoords = [0, 0];
@ -41,6 +37,16 @@ var lineweight = 2;
function initDoodleDrawing() {
console.log("f:initDoodleDrawing()");
$canvas = $("#mycanvas");
canvas = $canvas[0];
ctx = canvas.getContext('2d');
canvasWidth = canvas.width;
canvasHeight = canvas.height;
//*
//TODO make these jquery eventhandlers (works for all)
if (!canvas.addEventListener) {
canvas.attachEvent('onmousedown',onCanvasMouseDown);
canvas.attachEvent('onmousemove',onCanvasMouseMove);
@ -56,14 +62,19 @@ function initDoodleDrawing() {
canvas.addEventListener('touchstart',onCanvasTouchDown,false);
canvas.addEventListener('touchmove',onCanvasTouchMove,false);
canvas.addEventListener('touchend',onCanvasTouchEnd,false);
document.body.addEventListener('touchmove',prevent,false);
}
//*/
drawCanvas = $("#drawAreaContainer");
// drawCanvas = $(".drawareacontainer");
drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
// drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
console.log("f:initDoodleDrawing() >> canvasWidth: " + canvasWidth);
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
@ -145,6 +156,8 @@ function clearDoodle() {
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
dragging = false;
clearMainView();
resetPreview();
resetVerticalShapes();
@ -255,11 +268,11 @@ function adjustPreviewTransformation() {
*
* * * * * * * * * */
function onCanvasMouseDown(e) {
// console.log("onmousedown");
// console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
// console.log("onmousedown >> e: " + e);
// console.log(e);
// console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
// console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
// console.log("onmousedown >> e: " + e);
// console.log(e);
// console.log("f:onCanvasMouseDown()");
dragging = true;
prevCountingTime = new Date().getTime();
@ -288,6 +301,7 @@ function onCanvasMouseDown(e) {
var prevPoint = {x:-1, y:-1};
function onCanvasMouseMove(e) {
// console.log("f:onCanvasMouseMove()");
if (!dragging) return;
// console.log("onmousemove");
@ -348,6 +362,7 @@ prevUpdateFullPreview = 0; // 0 is not a timeframe but refers to the _points arr
prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
function onCanvasMouseUp(e) {
// console.log("f:onCanvasMouseUp()");
// console.log("onmouseup");
dragging = false;
console.log("doodleBounds: " + doodleBounds);
@ -368,10 +383,13 @@ function onCanvasMouseUp(e) {
function onCanvasTouchDown(e) {
e.preventDefault();
console.log("f:onCanvasTouchDown >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
// var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
// var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
var x = e.touches[0].layerX;
var y = e.touches[0].layerY;
_points.push([x, y, true]);
adjustBounds(x, y);
@ -385,10 +403,13 @@ function onCanvasTouchDown(e) {
function onCanvasTouchMove(e) {
e.preventDefault();
console.log("f:onCanvasTouchMove >> e: " , e);
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
// var x = e.touches[0].layerX;
// var y = e.touches[0].layerY;
if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));

3
js/gcodeGenerating_v01.js Executable file → Normal file
View File

@ -130,7 +130,8 @@ function generate_gcode(callback) {
gcode = gcode.concat(startGcode);
//gcode.push("M109 S" + temperature); // set target temperature and wait for the extruder to reach it
var layers = maxObjectHeight / layerHeight; //maxObjectHeight instead of objectHeight
var extruder = 0.0;
var prev = new Point(); prev.set(0, 0);

227
js/init_layout.js
View File

@ -1,110 +1,55 @@
var imgDims = [320, 320]; // width and height of image
function doClientAndOrientationStuff() {
console.log("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) ) {
if (window.orientation == -90 || window.orientation == 90) {
// landscape
// var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
var ww = 0; //get proper width
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);
}
$(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
$(".agentInfo").append("ratio: " + ratio + "<br/>");
$(".agentInfo").append("<br/>");
} else {
// 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() + "<br/>");
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("window.innerWidth: " + window.innerWidth + "<br/>");
$(".agentInfo").append("window.innerHeight: " + window.innerHeight + "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("$(window).height(): " + $(window).height() + "<br/>");
$(".agentInfo").append("window.screen.height: " + window.screen.height+ "<br/>");
$(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("user agent: " + navigator.userAgent + "<br/>");
};
function doOnOrientationChange() {
console.log("doOnOrientationChange");
doClientAndOrientationStuff();
// switch(window.orientation) {
// case -90:
// case 90:
// alert('landscape');
// break;
// default:
// alert('portrait');
// break;
// }
}
// TODO refactor this stuff, there's much to wipe
var drawAreaContainerMinHeight = 300;
var drawAreaContainerMaxHeight = 450;
function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight);
doClientAndOrientationStuff() // <-- is this necessary in this method?
/* 2013-10-09 commented out -> no more need with new layouting
$drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
$drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
// $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
//*/
// canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth;
// canvas.width = $("#mycanvasContainer").width();
canvas.width = $canvas.width();
canvas.height = $canvas.height(); // canvas.clientHeight;
// canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
preview.width = $preview.width();
preview.height = $drawAreaContainer.height();
canvasWidth = canvas.width;
canvasHeight = canvas.height;
console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
calcPreviewCanvasProperties();
// layerOffsetY = preview.height - 1.75 * layerCY;
// yStep = preview.height / 150;
// preview.width = parseInt($preview.css("width"), 10);
// preview.height = parseInt($preview.css("height"), 10);
// canvasWidth = canvas.width;
// canvasHeight = canvas.height;
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
drawCanvasTopLeftCoords[1] = drawCanvas.offset().top;
// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
// preview.height = $("#previewContainer").height();
// console.log("f:doOnResize() >> preview.height: " + preview.height);
redrawDoodle();
redrawPreview();
return;
// doClientAndOrientationStuff() // <-- is this necessary in this method?
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
if (window.innerHeight < 768) {
@ -139,53 +84,38 @@ function initLayouting() {
<!--div drawAreaContainer 650,450-->
<!--canvas mycanvas 500, 450-->
<!--canvas preview 150, 450-->
$("#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);
// $doodleCanvas = $("#mycanvas");
// doodleCanvas = $("#mycanvas")[0];
// doodleCanvasContext = doodleCanvas.getContext('2d');
$drawAreaContainer = $(".drawareacontainer");
/* 2013-10-09 commented out -> no more need with new layouting
$drawAreaContainer.css("margin", 0);
$drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
$drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
//*/
// console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
// canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth;
// canvas.width = $("#mycanvasContainer").width();
canvas.width = $canvas.width();
canvas.height = $canvas.height(); // canvas.clientHeight;
// canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
preview.width = $preview.width();
preview.height = $drawAreaContainer.height();
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);
// Initial execution if needed
//* 2013-07-26 not doing this resizing stuff now, it's not working well yet
if (!window.addEventListener) {
window.attachEvent('orientationchange', doOnOrientationChange);
window.attachEvent('resize', doOnResize)
} else {
window.addEventListener('orientationchange', doOnOrientationChange);
window.addEventListener('resize', doOnResize)
}
//*/
doClientAndOrientationStuff();
doOnResize();
// doOnOrientationChange();
$drawAreaContainer.show();
// window.innerHeight
console.log("window.innerHeight: " + window.innerHeight);
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
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
@ -194,4 +124,17 @@ function initLayouting() {
}
//*/
// 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);
// is it necessary to call these? Aren't they called by the above eventhandlers?
// doClientAndOrientationStuff();
doOnResize();
}

12
js/main.js
View File

@ -11,9 +11,14 @@ var settingsWindow = new SettingsWindow();
var firstTimeSettingsLoaded = true;
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");
@ -35,9 +40,10 @@ $(function() {
console.log("wifiboxIsRemote: " + wifiboxIsRemote);
console.log("wifibox URL: " + wifiboxURL);
initLayouting();
initDoodleDrawing();
initPreviewRendering();
initLayouting();
initSidebars();
initButtonBehavior();
initVerticalShapes();
@ -47,7 +53,7 @@ $(function() {
$(document).on(Printer.UPDATE,update);
settingsWindow.init(wifiboxURL);
$(document).on(SettingsWindow.SETTINGS_LOADED,settingsLoaded);
$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
if(debugMode) {
console.log("debug mode is true");
@ -57,6 +63,8 @@ $(function() {
$("#debug_display").css("display", "block");
// $("#debugContainer").css("display", "block");
/* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
// todo remove this temporary code...
/*

35
js/previewRendering_v02.js
View File

@ -3,11 +3,6 @@ var $preview;
var preview;
var previewCtx;
$preview = $("#preview");
preview = document.getElementById('preview');
previewCtx = preview.getContext('2d');
var preview_tmp;
var previewCtx_tmp;
@ -25,6 +20,10 @@ 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');
@ -34,12 +33,19 @@ function initPreviewRendering() {
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;
yStep = preview.height / 150;
redrawPreview();
// 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)
@ -52,6 +58,7 @@ 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; //
@ -119,7 +126,8 @@ function redrawPreview(redrawLess) {
previewCtx.save();
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
// 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);
@ -196,7 +204,7 @@ function renderToImageDataPreview() {
previewCtx.save();
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
previewCtx.translate(layerCX,layerOffsetY+y);
// previewCtx.scale(1, scaleY)
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor)
previewCtx.rotate(r);
@ -244,7 +252,7 @@ function redrawRenderedPreview(redrawLess) {
}
previewCtx.save();
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
previewCtx.translate(layerCX,layerOffsetY+y);
// previewCtx.scale(1, scaleY)
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
previewCtx.rotate(r);
@ -309,7 +317,8 @@ function updatePreview(_x, _y, redrawLess) {
previewCtx.save();
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
// 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]));

62
js/sidebar.js Normal file
View File

@ -0,0 +1,62 @@
var sidebarLeft;
var sidebarRight;
function initSidebars() {
console.log("f:initSidebars()");
sidebarLeft = new SideBar();
sidebarLeft.init(".leftpanel", "hideleft", function() {
$(".leftpanel").show();
});
sidebarRight = new SideBar();
sidebarRight.init(".rightpanel", "hideright", function() {
$(".rightpanel").show();
});
}
function SideBar() {
this.initted = false;
this.$contentTarg = undefined;
this.$sideBtn = undefined;
this.contentHidden = false;
this.hideClass = "";
this.init = function(targ, hideClass, callback) {
console.log("SideBar >> f:init >> targ: " , $(targ) , ", hideClass: " + hideClass);
this.$contentTarg = $(targ);
this.hideClass = hideClass;
this.$contentTarg.addClass(this.hideClass);
this.contentHidden = true;
this.$contentTarg.append("<div class='sidebutton'></div>");
this.$sideBtn = $(targ +" .sidebutton");
var self = this;
this.$sideBtn.on('click', function(e) {
console.log("sidebutton");
self.toggleShowHide();
});
this.initted = true;
callback();
}
this.toggleShowHide = function() {
if (this.contentHidden) {
this.contentHidden = false;
this.$contentTarg.removeClass(this.hideClass);
// self.$sideBtn.addClass("sidebuttonin");
this.$sideBtn.addClass("sidebuttonin");
} else {
this.contentHidden = true;
this.$contentTarg.addClass(this.hideClass);
// self.$sideBtn.removeClass("sidebuttonin");
this.$sideBtn.removeClass("sidebuttonin");
}
}
}

115
less/base.less Normal file
View File

@ -0,0 +1,115 @@
/*
GLOBAL CONTAINER
*/
body {
background-color: #fcfcfc;
-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
}
#landscape {
position:absolute;
background-color: #fff;
width: 100%;
max-width: 1024px;
max-height: 768px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 5;
overflow: hidden;
margin: 0px auto;
outline: 2px solid #5e8c71;
box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
}
#portrait {
display: none;
}
.bgContainer {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.bgTop, .bgMiddle, .bgBottom {
opacity: 1.0;
transition: opacity .35s linear;
position: absolute;
left: 0px;
z-index: -5;
}
.bgTop {
top: 0px;
}
.bgMiddle {
top: 30%;
}
.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";
/*
REST
*/
/* CLEARFIX */
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 only*/
.clearfix {
*zoom: 1;
}

54
less/base_centerpanel.less Normal file
View File

@ -0,0 +1,54 @@
// CENTER PANEL
.centerpanel {
position: absolute;
left: 50%;
margin-left: -33%;
width: 66%;
height: 100%;
z-index: 5;
}
// top panel
@import "base_centerpanel_logo.less";
// draw area stuff (plus up/down/left/right buttons)
@import "base_centerpanel_drawarea.less";
/*
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; }
}
@media screen and (max-height: 525px) {
.d3dlogo {
max-width: 399px;
top: 20%;
height: 57px;
background-image: url('../img/logo/logo_smaller_wide.png');
}
}
@media screen and (max-height: 375px) {
.d3dlogo {
max-width: 399px;
height: 40px;
background-image: url('../img/logo/logo_smallest_wide.png');
}
}

128
less/base_centerpanel_drawarea.less Normal file
View File

@ -0,0 +1,128 @@
// 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: 15px;
}
#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;
}

15
less/base_centerpanel_logo.less Normal file
View File

@ -0,0 +1,15 @@
.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;
}

42
less/base_leftpanel.less Normal file
View File

@ -0,0 +1,42 @@
// LEFT PANEL
.leftpanel {
position: absolute;
width: 17%;
/* background-color: rgba(67, 204, 67, 0.4);*/
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;
}

99
less/base_rightpanel.less Normal file
View File

@ -0,0 +1,99 @@
// RIGHT PANEL
.rightpanel {
position: absolute;
width: 17%;
/* background-color: rgba(255, 0, 254, 0.4);*/
top: 0px;
right: 0px;
bottom: 0px;
}
.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;
}
/*
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;*/
}

1
less/full.less Normal file
View File

@ -0,0 +1 @@
// FULL styles (not sure if going to use...)

127
less/mobile.less Normal file
View File

@ -0,0 +1,127 @@
/*
TOP LOGO
*/
.centerpanel {
left: 0;
margin-left: 0;
width: 100%;
/* background-color: rgba(0, 135, 255, 0.4);*/
}
.logopanel {
height: 40px;
}
.d3dlogo {
top: 0;
max-width: 399px;
height: 40px;
background-image: url('../img/logo/logo_smallest_wide.png');
}
.doodlecontainer {
/* position: absolute;*/
height: 85%;
}
/*.bottompanel {
display: none;
}*/
/*
LEFT
*/
.leftpanel {
width: 100px;
background-color: #fff;
z-index: 50;
transition: left .3s ease-out;
}
.hideleft {
left: -101px;
}
.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%;
}
/*
RIGHT
*/
.rightpanel {
width: 100px;
background-color: #fff;
z-index: 50;
transition: right .3s ease-out;
}
.hideright {
right: -101px;
}
.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%;
}
/*
REST
*/
.sidebutton {
display: block;
position:absolute;
/* top: 50%;*/
/* margin-top: -20px;*/
top: 0px;
/*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;
}
}

18
less/mobile_settingspopup.less Normal file
View File

@ -0,0 +1,18 @@
/*
SETTINGS POPUP - MOBILE
*/
#contentOverlay {
z-index: 200;
#settings {
width: 87%;
height: 82%;
margin: 6% 4%;
> .right {
width: 14%;
}
}
}

32
css/normalize.css → less/normalize.css vendored
View File

@ -501,34 +501,4 @@ textarea {
table {
border-collapse: collapse;
border-spacing: 0;
}
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
}

504
less/normalize.less vendored Normal file
View File

@ -0,0 +1,504 @@
/*! normalize.css v1.0.2 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
* and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/*
* Addresses margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
/*
* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Addresses margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/*
* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Addresses CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/*
* Addresses `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/*
* Addresses paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/*
* Corrects list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/*
* Corrects margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/*
* 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improves appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/*
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}

1
less/normalize.min.css vendored Normal file
View File

@ -0,0 +1 @@
/*! 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}

1
less/normalize.min.less Normal file
View File

@ -0,0 +1 @@
/*! 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}

16
less/portrait.less Normal file
View File

@ -0,0 +1,16 @@
#landscape {
display: none;
}
#portrait {
display: block;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}

85
less/settingsPopup.less Normal file
View File

@ -0,0 +1,85 @@
/*
SETTINGS POPUP
*/
#contentOverlay {
background-color: rgba(255, 255, 255, 0.65);
z-index: 20;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display:none;
#settings {
background-color: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 15;
max-width: 835px;
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;
overflow: hidden;
display: table;
padding: 2%;
.settingsLabelContainer {
width: 100%;
height: auto;
margin-bottom: 1%;
}
.settingsLabelImg {
width: 45%;
max-width: 373px;
height: auto;
}
> .content {
margin: 3% 12%;
margin-top: 12%;
max-height: 388px;
display: table-row;
width: 100%;
> .settings {
border: 1px solid rgb(187, 187, 187);
border-radius: 5px;
overflow: scroll;
overflow-x: hidden;
}
> .btnContainer {
width: 15%;
position:relative;
display: table-cell;
> .btnOK {
position: absolute;
bottom: 3%;
right: 3%;
max-width: 85px;
min-width: 42px;
width: 91%;
height: auto;
margin: 0 2% 2% 0;
cursor: pointer;
float: right;
}
}
> div {
height: 100%;
}
}
}
}

24
less/styles.less Normal file
View File

@ -0,0 +1,24 @@
// IMPORTS
//@import "normalize.min.less";
@import "base.less";
@import "settingsPopup.less";
// MOBILE
@media only screen and (max-width: 480px),
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
@media only screen and (orientation:portrait) {
@import "portrait.less";
}

21
less/verticalshapes.less Normal file
View File

@ -0,0 +1,21 @@
#verticalShapes {
position:absolute;
right: -56px;
bottom: 15px;
.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; }
}
}

55
lesstocss.sh Executable file
View File

@ -0,0 +1,55 @@
#!/bin/bash
echo 'converting LESS to CSS...'
# generate CSS from LESS
lessc less/styles.less css/styles.css
if [ -a css/styles.min.css ]; then
rm css/styles.min.css
fi
if [ -n "$1" ]; then
if [ $1 = '--prefix' ] || [ $1 = '-p' ]; then
echo 'applying prefixr...'
# prefixed (-s overwrites existing file)
prefixr --input ./css/styles.css -s
fi
if [ $1 = '--minify' ] || [ $1 = '-m' ]; then
if [ ! -n "$2" ]; then
echo 'creating minified....'
lessc --yui-compress less/styles.less css/styles.min.css
else
echo 'creating minified and prefixed...'
# copy to .min.css to create a minified version as well
cp css/styles.css css/styles.min.css
# prefixed and minified (-s overwrites existing file)
prefixr --input ./css/styles.min.css -s -c
fi
fi
fi
if [ -n "$2" ]; then
if [ $2 = '--prefix' ] || [ $2 = '-p' ]; then
echo 'applying prefixr...'
# prefixed (-s overwrites existing file)
prefixr --input ./css/styles.css -s
fi
if [ $2 = '--minify' ] || [ $2 = '-m' ]; then
echo 'creating minified and prefixed...'
# copy to .min.css to create a minified version as well
cp css/styles.css css/styles.min.css
# prefixed and minified (-s overwrites existing file)
prefixr --input ./css/styles.min.css -s -c
fi
fi

17
settings.html
View File

@ -9,7 +9,7 @@
<link href="css/settings.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<div class="settingsContainer">
<form id="settingsForm">
<!--<fieldset>
<legend>3D printer</legend>
@ -122,6 +122,18 @@
<fieldset>
<legend>GCODE settings</legend>
<div class="startgcode_left">
<label for="startgcode">Start:</label><br/>
<textarea id="startgcode" class="gcode" name="printer.startgcode">
</textarea>
</div>
<div>
<label for="endgcode">End:</label><br/>
<textarea id="endgcode" class="gcode" name="printer.endgcode">
</textarea>
</div>
<!-- 2013-10-09 replaced by DIV solution (but keeping here in comments temporarily as lookup...)
<table>
<tr>
<td>
@ -137,8 +149,9 @@
</td>
</tr>
</table>
-->
</fieldset>
</form>
</form><br/>
</div>
</body>
</html>