mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 09:17:56 +01:00
massive commit due to merging branch 'new_layouting_approach' into feature/printerdriver
---------------------------------------------------------------------- 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
commit
58b3a12c6b
173
css/d3d_btns.css
173
css/d3d_btns.css
@ -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;
|
|
||||||
}
|
|
||||||
@ -1,15 +1,17 @@
|
|||||||
.debugContainer {
|
.debugContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0;
|
||||||
left: 0px;
|
left: 0;
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
|
background-color: #f0f;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#debug_textArea {
|
#debug_textArea {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 800px;
|
/*width: 800px; */
|
||||||
|
z-index: 500;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -9,17 +9,28 @@ body,th,td {
|
|||||||
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
|
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
.settingsContainer {
|
||||||
|
position:relative;
|
||||||
|
max-width: 600px;
|
||||||
|
/*min-width: 370px;*/
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/*form#settingsForm {*/
|
||||||
|
/*width: 100% auto;*/
|
||||||
|
/*}*/
|
||||||
form fieldset {
|
form fieldset {
|
||||||
width: 600px;
|
max-width: 600px;
|
||||||
border: 1px solid rgb(187, 187, 187);
|
border: 1px solid rgb(187, 187, 187);
|
||||||
-webkit-border-radius: 5px;
|
-webkit-border-radius: 5px;
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 8px 0 8px 8px;
|
padding: 8px;
|
||||||
|
/*padding-right: 8px;*/
|
||||||
}
|
}
|
||||||
form fieldset fieldset{
|
form fieldset fieldset{
|
||||||
width: 580px;
|
max-width: 580px;
|
||||||
margin: 15px 0 5px 0;
|
margin: 15px 0 5px 0;
|
||||||
clear: left;
|
clear: left;
|
||||||
float: left;
|
float: left;
|
||||||
@ -60,11 +71,15 @@ form textarea {
|
|||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
form textarea.gcode {
|
form .startgcode_left {
|
||||||
width: 270px;
|
float:left;
|
||||||
height: 150px;
|
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
form textarea.gcode {
|
||||||
|
max-width: 262px;
|
||||||
|
min-width: 200px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
form small {
|
form small {
|
||||||
margin: 3px 0 0 0;
|
margin: 3px 0 0 0;
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
809
css/styles.css
Normal file
809
css/styles.css
Normal 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
1
css/styles.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -50,7 +50,7 @@
|
|||||||
<div class="agentInfo"></div>
|
<div class="agentInfo"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="landscape">
|
<div id="landscape">
|
||||||
<div class="container">
|
<div class="uiButtonsContainer">
|
||||||
<img class="bgTop" src="img/bg_top.png" />
|
<img class="bgTop" src="img/bg_top.png" />
|
||||||
<img class="bgMiddle" src="img/bg_middle.png" />
|
<img class="bgMiddle" src="img/bg_middle.png" />
|
||||||
<img class="bgBottom" src="img/bg_bottom.png" />
|
<img class="bgBottom" src="img/bg_bottom.png" />
|
||||||
|
|||||||
BIN
img/arrows.png
Normal file
BIN
img/arrows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 726 B |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
BIN
img/logo/logo_smallest_wide.png
Normal file
BIN
img/logo/logo_smallest_wide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
112
index.html
112
index.html
@ -6,39 +6,42 @@
|
|||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<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-capable" content="yes" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
<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_alt.ico"/>
|
||||||
<link rel="icon" type="image/ico" href="favicon.ico"/>
|
<link href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
|
||||||
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
|
|
||||||
|
|
||||||
<link href="css/normalize.css" rel="stylesheet" media="screen">
|
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||||
<link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
|
|
||||||
<link href="css/d3d_btns.css" rel="stylesheet" media="screen">
|
<link href="css/styles.css" rel="stylesheet" media="screen">
|
||||||
<link href="css/popups.css" rel="stylesheet">
|
|
||||||
<link href="css/debug.css" rel="stylesheet" media="screen">
|
<link href="css/debug.css" rel="stylesheet" media="screen">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="debugContainer">
|
<div id="landscape" class="clearfix">
|
||||||
<div class="debugBtn"></div>
|
|
||||||
<div class="agentInfo"></div>
|
<!-- background images -->
|
||||||
</div>
|
<div class="bgContainer">
|
||||||
<div id="landscape">
|
|
||||||
<div class="uiButtonsContainer">
|
|
||||||
<img class="bgTop" src="img/bg_top.png" />
|
<img class="bgTop" src="img/bg_top.png" />
|
||||||
<img class="bgMiddle" src="img/bg_middle.png" />
|
<img class="bgMiddle" src="img/bg_middle.png" />
|
||||||
<img class="bgBottom" src="img/bg_bottom.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>
|
</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
|
<!-- not now
|
||||||
<div id="printProgressContainer">
|
<div id="printProgressContainer">
|
||||||
<label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
|
<label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
|
||||||
@ -50,24 +53,27 @@
|
|||||||
<div id="thermometerContainer">
|
<div id="thermometerContainer">
|
||||||
<canvas id="thermometerCanvas" width="100" height="125"></canvas>
|
<canvas id="thermometerCanvas" width="100" height="125"></canvas>
|
||||||
</div>
|
</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">
|
</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>
|
<canvas id="mycanvas"></canvas>
|
||||||
<!--<svg id="svg">-->
|
</div>
|
||||||
<!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>-->
|
<div id="previewContainer">
|
||||||
<!--</svg>-->
|
|
||||||
<canvas id="preview"></canvas>
|
<canvas id="preview"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<canvas id="preview_tmp"></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>
|
|
||||||
</div>
|
|
||||||
<div id="btnsTurnLeftRight">
|
|
||||||
<div class="manipulationBtn" id="btnTwistLeft"></div>
|
|
||||||
<div class="manipulationBtn" id="btnTwistRight"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="verticalShapes">
|
<div id="verticalShapes">
|
||||||
<div class="verticalshape straight"> </div>
|
<div class="verticalshape straight"> </div>
|
||||||
<div class="verticalshape diverging"> </div>
|
<div class="verticalshape diverging"> </div>
|
||||||
@ -75,20 +81,33 @@
|
|||||||
<div class="verticalshape sinus"> </div>
|
<div class="verticalshape sinus"> </div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<div id="debug_textArea">
|
||||||
<textarea rows="5" cols="115" id="textdump"></textarea>
|
<textarea rows="5" cols="60" id="textdump"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div id="debug_display">
|
<div id="debug_display">
|
||||||
</div>
|
</div>
|
||||||
<div id="contentOverlay">
|
<div id="contentOverlay">
|
||||||
<div id="settings" class="popup">
|
<div id="settings">
|
||||||
<header>
|
<div class="settingsLabelContainer">
|
||||||
<img src="img/settings_lable.png" alt="settings"/>
|
<img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
|
||||||
</header>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="settings">henk</div>
|
<div class="settings"></div>
|
||||||
<div class="manipulationBtns">
|
<div class="btnContainer">
|
||||||
<div class="btnOK"></div>
|
<img src="img/buttons/btnOk_settings.png" class="btnOK" alt="settings"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -109,6 +128,7 @@
|
|||||||
<script src="js/Printer.js"></script>
|
<script src="js/Printer.js"></script>
|
||||||
<script src="js/Thermometer.js"></script>
|
<script src="js/Thermometer.js"></script>
|
||||||
<script src="js/utils.js"></script>
|
<script src="js/utils.js"></script>
|
||||||
|
<script src="js/sidebar.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -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() {
|
function Thermometer() {
|
||||||
this.currentTemperature = 0; // default val
|
this.currentTemperature = 0; // default val
|
||||||
this.targetTemperature = 180; // default val
|
this.targetTemperature = 180; // default val
|
||||||
|
|||||||
@ -11,49 +11,50 @@ var btnNew, btnPrevious, btnNext;
|
|||||||
var btnOops, btnStop, btnClear;
|
var btnOops, btnStop, btnClear;
|
||||||
var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
|
var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
|
||||||
var btnInfo, btnSettings;
|
var btnInfo, btnSettings;
|
||||||
var btnDebug; // debug
|
//var btnDebug; // debug
|
||||||
var displayProgress;
|
var displayTemp, displayProgress;
|
||||||
|
|
||||||
var state;
|
var state;
|
||||||
var prevState;
|
var prevState;
|
||||||
|
|
||||||
function initButtonBehavior() {
|
function initButtonBehavior() {
|
||||||
console.log("f:initButtonBehavior >> btnNew = " + btnNew);
|
console.log("f:initButtonBehavior");
|
||||||
|
|
||||||
btnClear= $("#btnClear");
|
// btnClear= $(".btnClear");
|
||||||
btnOops = $("#btnOops");
|
btnOops = $(".btnOops");
|
||||||
btnMoveUp = $("#btnMoveUp");
|
btnMoveUp = $("#btnMoveUp");
|
||||||
btnMoveDown = $("#btnMoveDown");
|
btnMoveDown = $("#btnMoveDown");
|
||||||
btnTwistLeft = $("#btnTwistLeft");
|
btnTwistLeft = $("#btnTwistLeft");
|
||||||
btnTwistRight = $("#btnTwistRight");
|
btnTwistRight = $("#btnTwistRight");
|
||||||
btnInfo = $("#btnInfo");
|
btnInfo = $(".btnInfo");
|
||||||
btnSettings = $("#btnSettings");
|
btnSettings = $(".btnSettings");
|
||||||
btnNew = $("#btnNew");
|
btnNew = $(".btnNew");
|
||||||
btnPrint= $("#btnPrint");
|
btnPrint= $(".btnPrint");
|
||||||
btnStop = $("#btnStop");
|
btnStop = $(".btnStop");
|
||||||
|
displayTemp = $("#thermometerContainer");
|
||||||
displayProgress = $("#printProgressContainer");
|
displayProgress = $("#printProgressContainer");
|
||||||
|
|
||||||
// btnPrevious = $("#btnPrevious");
|
btnPrevious = $(".btnPrevious");
|
||||||
// btnNext = $("#btnNext");
|
btnNext = $(".btnNext");
|
||||||
|
|
||||||
//debug
|
//debug
|
||||||
btnDebug = $(".debugBtn");
|
//btnDebug = $(".debugBtn");
|
||||||
|
|
||||||
btnNew.bind('touchstart mousedown',clearDoodle);
|
btnNew.on('touchstart mousedown', clearDoodle);
|
||||||
btnPrint.bind('touchstart mousedown',print);
|
btnPrint.on('touchstart mousedown', print);
|
||||||
|
|
||||||
// not using these at the moment
|
// not using these at the moment
|
||||||
$("#btnPrevious").css("opacity", "0.3");
|
$("#btnPrevious").css("opacity", "0.3");
|
||||||
$("#btnNext").css("opacity", "0.3");
|
btnNext.css("opacity", "0.3");
|
||||||
$("#btnSave").css("opacity", "0.3");
|
$("#btnSave").css("opacity", "0.3");
|
||||||
$("#btnInfo").css("opacity", "0.3");
|
btnInfo.css("opacity", "0.3");
|
||||||
|
|
||||||
btnClear.click(function(e) {
|
// btnClear.click(function(e) {
|
||||||
e.preventDefault();
|
// e.preventDefault();
|
||||||
// console.log("clear");
|
// // console.log("clear");
|
||||||
|
//
|
||||||
clearDoodle();
|
// clearDoodle();
|
||||||
});
|
// });
|
||||||
|
|
||||||
function startOops(e) {
|
function startOops(e) {
|
||||||
// console.log("btnOops mouse down");
|
// console.log("btnOops mouse down");
|
||||||
@ -174,14 +175,16 @@ function initButtonBehavior() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// DEBUG
|
// DEBUG
|
||||||
|
/*
|
||||||
// $(".agentInfo").css("display", "none");
|
// $(".agentInfo").css("display", "none");
|
||||||
btnDebug.click(function(e) {
|
btnDebug.click(function(e) {
|
||||||
console.log("debugClick");
|
console.log("debugClick");
|
||||||
$(".agentInfo").toggleClass("agentInfoToggle");
|
$(".agentInfo").toggleClass("agentInfoToggle");
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
})
|
})
|
||||||
|
//*/
|
||||||
|
|
||||||
btnStop.bind('touchstart mousedown',stopPrint);
|
btnStop.on('touchstart mousedown',stopPrint);
|
||||||
}
|
}
|
||||||
function stopPrint() {
|
function stopPrint() {
|
||||||
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
|
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
|
||||||
|
|||||||
@ -11,12 +11,8 @@ var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
|||||||
|
|
||||||
var dragging = false;
|
var dragging = false;
|
||||||
|
|
||||||
var $canvas = $("#mycanvas");
|
var $canvas, canvas, ctx;
|
||||||
var canvas = $("#mycanvas")[0];
|
var canvasWidth, canvasHeight;
|
||||||
var ctx = canvas.getContext('2d');
|
|
||||||
|
|
||||||
var canvasWidth = canvas.width;
|
|
||||||
var canvasHeight = canvas.height;
|
|
||||||
|
|
||||||
var drawCanvas;
|
var drawCanvas;
|
||||||
var drawCanvasTopLeftCoords = [0, 0];
|
var drawCanvasTopLeftCoords = [0, 0];
|
||||||
@ -41,6 +37,16 @@ var lineweight = 2;
|
|||||||
function initDoodleDrawing() {
|
function initDoodleDrawing() {
|
||||||
console.log("f: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) {
|
if (!canvas.addEventListener) {
|
||||||
canvas.attachEvent('onmousedown',onCanvasMouseDown);
|
canvas.attachEvent('onmousedown',onCanvasMouseDown);
|
||||||
canvas.attachEvent('onmousemove',onCanvasMouseMove);
|
canvas.attachEvent('onmousemove',onCanvasMouseMove);
|
||||||
@ -56,14 +62,19 @@ function initDoodleDrawing() {
|
|||||||
canvas.addEventListener('touchstart',onCanvasTouchDown,false);
|
canvas.addEventListener('touchstart',onCanvasTouchDown,false);
|
||||||
canvas.addEventListener('touchmove',onCanvasTouchMove,false);
|
canvas.addEventListener('touchmove',onCanvasTouchMove,false);
|
||||||
canvas.addEventListener('touchend',onCanvasTouchEnd,false);
|
canvas.addEventListener('touchend',onCanvasTouchEnd,false);
|
||||||
document.body.addEventListener('touchmove',prevent,false);
|
|
||||||
}
|
}
|
||||||
|
//*/
|
||||||
|
|
||||||
drawCanvas = $("#drawAreaContainer");
|
// drawCanvas = $(".drawareacontainer");
|
||||||
|
drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
|
||||||
|
|
||||||
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
|
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
|
||||||
drawCanvasTopLeftCoords[0] = drawCanvas.css("left").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[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() >> canvasWidth: " + canvasWidth);
|
||||||
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
|
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
|
||||||
@ -145,6 +156,8 @@ function clearDoodle() {
|
|||||||
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
|
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
|
||||||
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
|
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
|
||||||
|
|
||||||
|
dragging = false;
|
||||||
|
|
||||||
clearMainView();
|
clearMainView();
|
||||||
resetPreview();
|
resetPreview();
|
||||||
resetVerticalShapes();
|
resetVerticalShapes();
|
||||||
@ -255,11 +268,11 @@ function adjustPreviewTransformation() {
|
|||||||
*
|
*
|
||||||
* * * * * * * * * */
|
* * * * * * * * * */
|
||||||
function onCanvasMouseDown(e) {
|
function onCanvasMouseDown(e) {
|
||||||
// console.log("onmousedown");
|
|
||||||
// console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
|
// 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.layerX,e.layerY= " + e.layerX+","+e.layerY);
|
||||||
// console.log("onmousedown >> e: " + e);
|
// console.log("onmousedown >> e: " + e);
|
||||||
// console.log(e);
|
// console.log(e);
|
||||||
|
// console.log("f:onCanvasMouseDown()");
|
||||||
dragging = true;
|
dragging = true;
|
||||||
|
|
||||||
prevCountingTime = new Date().getTime();
|
prevCountingTime = new Date().getTime();
|
||||||
@ -288,6 +301,7 @@ function onCanvasMouseDown(e) {
|
|||||||
|
|
||||||
var prevPoint = {x:-1, y:-1};
|
var prevPoint = {x:-1, y:-1};
|
||||||
function onCanvasMouseMove(e) {
|
function onCanvasMouseMove(e) {
|
||||||
|
// console.log("f:onCanvasMouseMove()");
|
||||||
if (!dragging) return;
|
if (!dragging) return;
|
||||||
// console.log("onmousemove");
|
// 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
|
prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
|
||||||
|
|
||||||
function onCanvasMouseUp(e) {
|
function onCanvasMouseUp(e) {
|
||||||
|
// console.log("f:onCanvasMouseUp()");
|
||||||
// console.log("onmouseup");
|
// console.log("onmouseup");
|
||||||
dragging = false;
|
dragging = false;
|
||||||
console.log("doodleBounds: " + doodleBounds);
|
console.log("doodleBounds: " + doodleBounds);
|
||||||
@ -368,10 +383,13 @@ function onCanvasMouseUp(e) {
|
|||||||
|
|
||||||
function onCanvasTouchDown(e) {
|
function onCanvasTouchDown(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
console.log("f:onCanvasTouchDown >> e: " , e);
|
||||||
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
||||||
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
||||||
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
// var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
||||||
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
|
// 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]);
|
_points.push([x, y, true]);
|
||||||
adjustBounds(x, y);
|
adjustBounds(x, y);
|
||||||
@ -385,10 +403,13 @@ function onCanvasTouchDown(e) {
|
|||||||
|
|
||||||
function onCanvasTouchMove(e) {
|
function onCanvasTouchMove(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
console.log("f:onCanvasTouchMove >> e: " , e);
|
||||||
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
||||||
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
||||||
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
||||||
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
|
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) {
|
if (prevPoint.x != -1 || prevPoint.y != -1) {
|
||||||
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
|
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
|
||||||
|
|||||||
1
js/gcodeGenerating_v01.js
Executable file → Normal file
1
js/gcodeGenerating_v01.js
Executable file → Normal file
@ -131,6 +131,7 @@ function generate_gcode(callback) {
|
|||||||
|
|
||||||
//gcode.push("M109 S" + temperature); // set target temperature and wait for the extruder to reach it
|
//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 extruder = 0.0;
|
||||||
var prev = new Point(); prev.set(0, 0);
|
var prev = new Point(); prev.set(0, 0);
|
||||||
|
|
||||||
|
|||||||
@ -1,110 +1,55 @@
|
|||||||
var imgDims = [320, 320]; // width and height of image
|
// TODO refactor this stuff, there's much to wipe
|
||||||
|
|
||||||
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;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
var drawAreaContainerMinHeight = 300;
|
var drawAreaContainerMinHeight = 300;
|
||||||
var drawAreaContainerMaxHeight = 450;
|
var drawAreaContainerMaxHeight = 450;
|
||||||
|
|
||||||
function doOnResize() {
|
function doOnResize() {
|
||||||
// console.log("doOnResize() >> " + new Date().getTime());
|
// console.log("doOnResize() >> " + new Date().getTime());
|
||||||
// $(".container").css("height", window.innerHeight);
|
// $(".container").css("height", window.innerHeight);
|
||||||
|
|
||||||
doClientAndOrientationStuff() // <-- is this necessary in this method?
|
/* 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);
|
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
|
||||||
if (window.innerHeight < 768) {
|
if (window.innerHeight < 768) {
|
||||||
@ -139,53 +84,38 @@ function initLayouting() {
|
|||||||
<!--div drawAreaContainer 650,450-->
|
<!--div drawAreaContainer 650,450-->
|
||||||
<!--canvas mycanvas 500, 450-->
|
<!--canvas mycanvas 500, 450-->
|
||||||
<!--canvas preview 150, 450-->
|
<!--canvas preview 150, 450-->
|
||||||
$("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
|
||||||
$("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
// $doodleCanvas = $("#mycanvas");
|
||||||
canvas.width = parseInt($canvas.css("width"), 10);
|
// doodleCanvas = $("#mycanvas")[0];
|
||||||
canvas.height = parseInt($canvas.css("height"), 10);
|
// doodleCanvasContext = doodleCanvas.getContext('2d');
|
||||||
preview.width = parseInt($preview.css("width"), 10);
|
|
||||||
preview.height = parseInt($preview.css("height"), 10);
|
$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;
|
canvasWidth = canvas.width;
|
||||||
canvasHeight = canvas.height;
|
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
|
// window.innerHeight
|
||||||
console.log("window.innerHeight: " + window.innerHeight);
|
console.log("window.innerHeight: " + window.innerHeight);
|
||||||
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
|
console.log("window.innerWidth: " + window.innerWidth);
|
||||||
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
|
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
|
/* 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();
|
||||||
}
|
}
|
||||||
|
|||||||
10
js/main.js
10
js/main.js
@ -11,9 +11,14 @@ var settingsWindow = new SettingsWindow();
|
|||||||
var firstTimeSettingsLoaded = true;
|
var firstTimeSettingsLoaded = true;
|
||||||
|
|
||||||
|
|
||||||
|
var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer;
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
console.log("ready");
|
console.log("ready");
|
||||||
|
|
||||||
|
|
||||||
|
//TODO give this a more logical place in code
|
||||||
|
|
||||||
if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");
|
if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");
|
||||||
if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1");
|
if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1");
|
||||||
if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");
|
if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");
|
||||||
@ -35,9 +40,10 @@ $(function() {
|
|||||||
console.log("wifiboxIsRemote: " + wifiboxIsRemote);
|
console.log("wifiboxIsRemote: " + wifiboxIsRemote);
|
||||||
console.log("wifibox URL: " + wifiboxURL);
|
console.log("wifibox URL: " + wifiboxURL);
|
||||||
|
|
||||||
initLayouting();
|
|
||||||
initDoodleDrawing();
|
initDoodleDrawing();
|
||||||
initPreviewRendering();
|
initPreviewRendering();
|
||||||
|
initLayouting();
|
||||||
|
initSidebars();
|
||||||
initButtonBehavior();
|
initButtonBehavior();
|
||||||
initVerticalShapes();
|
initVerticalShapes();
|
||||||
|
|
||||||
@ -57,6 +63,8 @@ $(function() {
|
|||||||
|
|
||||||
$("#debug_display").css("display", "block");
|
$("#debug_display").css("display", "block");
|
||||||
|
|
||||||
|
// $("#debugContainer").css("display", "block");
|
||||||
|
|
||||||
/* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
|
/* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
|
||||||
// todo remove this temporary code...
|
// todo remove this temporary code...
|
||||||
/*
|
/*
|
||||||
|
|||||||
@ -3,11 +3,6 @@ var $preview;
|
|||||||
var preview;
|
var preview;
|
||||||
var previewCtx;
|
var previewCtx;
|
||||||
|
|
||||||
$preview = $("#preview");
|
|
||||||
|
|
||||||
preview = document.getElementById('preview');
|
|
||||||
previewCtx = preview.getContext('2d');
|
|
||||||
|
|
||||||
var preview_tmp;
|
var preview_tmp;
|
||||||
var previewCtx_tmp;
|
var previewCtx_tmp;
|
||||||
|
|
||||||
@ -25,6 +20,10 @@ var redrawInterval = 1000 / 30; // ms
|
|||||||
function initPreviewRendering() {
|
function initPreviewRendering() {
|
||||||
console.log("f:initPreviewRendering()");
|
console.log("f:initPreviewRendering()");
|
||||||
|
|
||||||
|
$preview = $("#preview");
|
||||||
|
preview = $preview[0];
|
||||||
|
previewCtx = preview.getContext('2d');
|
||||||
|
|
||||||
// DEBUG --> mbt preview_tmp (voor de toImageData truc)
|
// DEBUG --> mbt preview_tmp (voor de toImageData truc)
|
||||||
var _ratio = preview.width / canvas.width;
|
var _ratio = preview.width / canvas.width;
|
||||||
preview_tmp = document.getElementById('preview_tmp');
|
preview_tmp = document.getElementById('preview_tmp');
|
||||||
@ -34,12 +33,19 @@ function initPreviewRendering() {
|
|||||||
|
|
||||||
previewCtx_tmp = preview_tmp.getContext('2d');
|
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
|
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||||
layerCY = (canvasHeight / 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.75 * layerCY;
|
||||||
yStep = preview.height / 150;
|
layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom);
|
||||||
|
yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers;
|
||||||
redrawPreview();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping)
|
// 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 globalAlpha = 0.20; // global alpha of preview
|
||||||
var scaleY = 0.4; // additional vertical scale per path for 3d effect
|
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 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 strokeWidth = 2; //4;
|
||||||
//var rStep = Math.PI/40; //Math.PI/40; //
|
//var rStep = Math.PI/40; //Math.PI/40; //
|
||||||
var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
|
var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
|
||||||
@ -119,7 +126,8 @@ function redrawPreview(redrawLess) {
|
|||||||
|
|
||||||
previewCtx.save();
|
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.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
|
||||||
previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor);
|
previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor);
|
||||||
previewCtx.rotate(r);
|
previewCtx.rotate(r);
|
||||||
@ -196,7 +204,7 @@ function renderToImageDataPreview() {
|
|||||||
|
|
||||||
previewCtx.save();
|
previewCtx.save();
|
||||||
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
previewCtx.translate(layerCX,layerOffsetY+y);
|
||||||
// previewCtx.scale(1, scaleY)
|
// previewCtx.scale(1, scaleY)
|
||||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor)
|
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor)
|
||||||
previewCtx.rotate(r);
|
previewCtx.rotate(r);
|
||||||
@ -244,7 +252,7 @@ function redrawRenderedPreview(redrawLess) {
|
|||||||
}
|
}
|
||||||
previewCtx.save();
|
previewCtx.save();
|
||||||
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
previewCtx.translate(layerCX,layerOffsetY+y);
|
||||||
// previewCtx.scale(1, scaleY)
|
// previewCtx.scale(1, scaleY)
|
||||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
|
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
|
||||||
previewCtx.rotate(r);
|
previewCtx.rotate(r);
|
||||||
@ -309,7 +317,8 @@ function updatePreview(_x, _y, redrawLess) {
|
|||||||
|
|
||||||
previewCtx.save();
|
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.scale(viewerScale, scaleY * viewerScale);
|
||||||
previewCtx.rotate(r);
|
previewCtx.rotate(r);
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||||
|
|||||||
62
js/sidebar.js
Normal file
62
js/sidebar.js
Normal 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
115
less/base.less
Normal 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
54
less/base_centerpanel.less
Normal 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
128
less/base_centerpanel_drawarea.less
Normal 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
15
less/base_centerpanel_logo.less
Normal 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
42
less/base_leftpanel.less
Normal 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
99
less/base_rightpanel.less
Normal 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
1
less/full.less
Normal file
@ -0,0 +1 @@
|
|||||||
|
// FULL styles (not sure if going to use...)
|
||||||
127
less/mobile.less
Normal file
127
less/mobile.less
Normal 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
18
less/mobile_settingspopup.less
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
SETTINGS POPUP - MOBILE
|
||||||
|
|
||||||
|
*/
|
||||||
|
#contentOverlay {
|
||||||
|
z-index: 200;
|
||||||
|
|
||||||
|
#settings {
|
||||||
|
width: 87%;
|
||||||
|
height: 82%;
|
||||||
|
margin: 6% 4%;
|
||||||
|
|
||||||
|
> .right {
|
||||||
|
width: 14%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
css/normalize.css → less/normalize.css
vendored
30
css/normalize.css → less/normalize.css
vendored
@ -502,33 +502,3 @@ table {
|
|||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
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
504
less/normalize.less
vendored
Normal 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
1
less/normalize.min.css
vendored
Normal 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
1
less/normalize.min.less
Normal 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
16
less/portrait.less
Normal 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
85
less/settingsPopup.less
Normal 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
24
less/styles.less
Normal 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
21
less/verticalshapes.less
Normal 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
55
lesstocss.sh
Executable 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
|
||||||
|
|
||||||
@ -9,7 +9,7 @@
|
|||||||
<link href="css/settings.css" rel="stylesheet" media="screen">
|
<link href="css/settings.css" rel="stylesheet" media="screen">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
<div class="settingsContainer">
|
||||||
<form id="settingsForm">
|
<form id="settingsForm">
|
||||||
<!--<fieldset>
|
<!--<fieldset>
|
||||||
<legend>3D printer</legend>
|
<legend>3D printer</legend>
|
||||||
@ -122,6 +122,18 @@
|
|||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>GCODE settings</legend>
|
<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>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
@ -137,8 +149,9 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
-->
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form><br/>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user