overhaul of client files to 'www' dir. This dir will now as a 'bin' dir of sorts. Outside of the 'www' dir there will be old files, temp files and also shell scripts which support continuous compilation and minification of css and js files
Adriaan Wormgoor
|
|
@ -0,0 +1,179 @@
|
|||
/*.logo {
|
||||
background: #f5f5f5 url('../img/logo_full.png') no-repeat left top;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.logo {
|
||||
background: #f5f5f5 url('../img/logo_small.png') no-repeat left top;
|
||||
}
|
||||
}*/
|
||||
|
||||
/*body {*/
|
||||
/*-moz-user-select: none; *//* disable cut copy paste */
|
||||
/*-webkit-user-select: none; *//* disable cut copy paste */
|
||||
/*overflow:hidden; *//* This chops off any overhanging divs */
|
||||
/*}*/
|
||||
|
||||
/*img {*/
|
||||
/*z-index: 5;*/
|
||||
/*pointer-events:none;*/
|
||||
/*-webkit-touch-callout: none; *//**//*disable callout, image save panel */
|
||||
/*-webkit-tap-highlight-color: transparent; *//**//* "turn off" link highlight */
|
||||
/*}*/
|
||||
|
||||
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
|
||||
/*.btn {*/
|
||||
/*background-repeat: no-repeat;*/
|
||||
/* -webkit-user-select: none;*/
|
||||
/*cursor: pointer*/
|
||||
/*}*/
|
||||
|
||||
/*
|
||||
|
||||
INTERFACE BUTTONS
|
||||
|
||||
*/
|
||||
/*
|
||||
#btnNew {
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
width: 194px;
|
||||
height: 170px;
|
||||
background: url('../img/buttons/btnNew.png') no-repeat;
|
||||
}
|
||||
|
||||
#btnPrevious {
|
||||
left: 20px;
|
||||
top: 180px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#btnNext {
|
||||
left: 126px;
|
||||
top: 186px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#btnSave {
|
||||
left: 20px;
|
||||
top: 240px;
|
||||
}
|
||||
|
||||
#btnOops {
|
||||
left: 20px;
|
||||
top: 450px;
|
||||
width: 146px;
|
||||
height: 144px;
|
||||
background: url('../img/buttons/btnOops.png') no-repeat;
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
#btnPrint {
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
#btnStop {
|
||||
right: 20px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
#btnInfo {
|
||||
right: 25px;
|
||||
bottom: 90px;
|
||||
}
|
||||
|
||||
#btnSettings {
|
||||
right: 25px;
|
||||
bottom: 20px;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
DRAW AREA
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/*#drawAreaContainer > .manipulationBtns {*/
|
||||
/*
|
||||
.drawareacontainer > .manipulationBtns {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.manipulationBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#btnsUpDown {
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
bottom: -75px;
|
||||
}
|
||||
#btnsUpDown > div {
|
||||
float: left;
|
||||
padding-right: 8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#btnsTurnLeftRight {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: -75px;
|
||||
}
|
||||
#btnsTurnLeftRight >div {
|
||||
float: left;
|
||||
padding-right: 8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#btnMoveUp {
|
||||
width: 65px;
|
||||
height: 61px;
|
||||
background: url('../img/buttons/btnUp.png');
|
||||
}
|
||||
|
||||
#btnMoveDown {
|
||||
width: 64px;
|
||||
height: 63px;
|
||||
background: url('../img/buttons/btnDown.png');
|
||||
}
|
||||
|
||||
#btnTwistLeft {
|
||||
width: 59px;
|
||||
height: 61px;
|
||||
background: url('../img/buttons/btnTurnLeft.png');
|
||||
}
|
||||
|
||||
#btnTwistRight {
|
||||
width: 64px;
|
||||
height: 56px;
|
||||
background: url('../img/buttons/btnTurnRight.png');
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
#displayTemp {
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 334px;
|
||||
font-weight: bold;
|
||||
background: white;
|
||||
display:none;
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#btnStop.disabled {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
/*
|
||||
#drawAreaContainer {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: #fff;
|
||||
width: 65%;
|
||||
min-width: 500px;
|
||||
max-width: 650px;
|
||||
height: 60%;
|
||||
min-height: 150px;
|
||||
max-height: 450px;
|
||||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
z-index: 15;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#canvasContainers {
|
||||
display:table;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#mycanvasContainer {
|
||||
display:table-cell;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
#mycanvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: 2px solid #333;
|
||||
}
|
||||
|
||||
#previewContainer {
|
||||
display:table-cell;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
}
|
||||
#preview {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
/* DEBUG THING */
|
||||
/*
|
||||
#preview_tmp {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 500;
|
||||
border: 1px solid #f80;
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
|
||||
Buttons and logo's
|
||||
|
||||
*/
|
||||
/*
|
||||
.button {
|
||||
display: table;
|
||||
}
|
||||
*/
|
||||
|
||||
/*#d3dlogo {*/
|
||||
/*position: absolute;*/
|
||||
/*top: 15px;*/
|
||||
/*left: 31%;*/
|
||||
/*width: 399px;*/
|
||||
/*height: 139px;*/
|
||||
/*background-image: url('../img/logo_full.png');*/
|
||||
/*cursor: pointer;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
#contentOverlay {
|
||||
background-color: rgba(255, 255, 255, 0.65);
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display:none;
|
||||
}
|
||||
#settings {
|
||||
background-color: #fff;
|
||||
z-index: 15;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 835px;
|
||||
height: 500px;
|
||||
margin: -250px 0 0 -417.5px;
|
||||
/*padding: 25px;*/
|
||||
|
||||
/*overflow: scroll;*/
|
||||
/*overflow-y: hidden;*/
|
||||
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
||||
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
||||
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
||||
border: 2px solid #222;
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#settings header {
|
||||
margin: 25px 25px 0 25px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
div.content {
|
||||
margin: 15px 25px 25px 25px;
|
||||
height: 388px;
|
||||
display: table;
|
||||
}
|
||||
|
||||
div.content > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.content > div.settings {
|
||||
border: 1px solid rgb(187, 187, 187);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
width: 660px;
|
||||
overflow: scroll;
|
||||
max-height: 368px;
|
||||
overflow-x: hidden;
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
div.content > div.manipulationBtns {
|
||||
display: table-cell;
|
||||
vertical-align: bottom;
|
||||
width: 125px;
|
||||
|
||||
}
|
||||
|
||||
div.content .btnOK {
|
||||
width: 85px;
|
||||
height: 86px;
|
||||
background: url('../img/buttons/btnOk_settings.png') no-repeat;
|
||||
margin: 0 0 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
body {
|
||||
/* This chops off any overhanging divs */
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/*#landscape {*/
|
||||
/*position:relative;*/
|
||||
/*width: 1024px;*/
|
||||
/*max-height: 768px;*/
|
||||
/*background-color: #808;*/
|
||||
/*border: 10px solid #ff0;*/
|
||||
/*margin: 0px auto;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
#verticalShapes {
|
||||
position:absolute;
|
||||
right: -56px;
|
||||
bottom: 15px;
|
||||
/*background-color: #fff;*/
|
||||
}
|
||||
|
||||
.verticalshape {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
margin-top: 4px;
|
||||
/*background-color: #f0f;*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.straight {
|
||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
||||
}
|
||||
.diverging {
|
||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
||||
}
|
||||
.converging {
|
||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
||||
}
|
||||
.sinus {
|
||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/* Portrait */
|
||||
@media screen and (orientation:portrait) {
|
||||
body {
|
||||
/* background-color: #08F;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: none;
|
||||
}
|
||||
#portrait {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/* Landscape */
|
||||
@media screen and (orientation:landscape) {
|
||||
body {
|
||||
/* background-color: #8F0;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: block;
|
||||
}
|
||||
#portrait {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.uiButtonsContainer {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1024px;
|
||||
min-height: 500px;
|
||||
max-height: 768px;
|
||||
height: 100%;
|
||||
/* height: 768px;*/
|
||||
}
|
||||
.uiButtonsContainer:before {
|
||||
content:' ';
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 31%;
|
||||
width: 399px;
|
||||
height: 139px;
|
||||
background-image: url('../img/logo_full.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
position: absolute;
|
||||
top: 193px;
|
||||
left: 193px;
|
||||
width: 650px;
|
||||
height: 450px;
|
||||
background-color: #fff;
|
||||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#preview_tmp {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 500;
|
||||
border: 1px solid #f80;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mycanvas, #preview {
|
||||
/*border: 1px solid #08c;*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
#mycanvas {
|
||||
width: 500px;
|
||||
height: 450px;
|
||||
border: 0px solid #333;
|
||||
border-right: 2px solid #333;
|
||||
}
|
||||
|
||||
#preview {
|
||||
/*border: 1px solid #f8c;*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 150px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.vertImage {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*border: 2px solid #f0f;*/
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto; /* for ie9 */
|
||||
}
|
||||
|
||||
|
||||
.bgTop {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgMiddle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgBottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
/* PRINT PROGRESS DISPLAY */
|
||||
#printProgressContainer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 370px;
|
||||
width: 110px;
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
display:none;
|
||||
}
|
||||
#progressbarContainer {
|
||||
margin: 3px 0px;
|
||||
width: inherit;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #333;
|
||||
border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
.progressAmount {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
#progressbar {
|
||||
position: relative;
|
||||
/*margin-bottom: -20px;*/
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #4c4;
|
||||
border: 0px solid #f0f;
|
||||
border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
}
|
||||
|
||||
/* THERMOMETER */
|
||||
#thermometerContainer {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 360px;
|
||||
}
|
||||
#thermometerCanvas {
|
||||
/*background: #59b2b8;*/
|
||||
/*zoom: 2;*/
|
||||
}
|
||||
|
||||
|
||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
||||
|
||||
@media screen and (max-height: 675px) {
|
||||
.bgMiddle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 74px;
|
||||
background-image: url('../img/logo_small.png');
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(0px,-5px) scale(.94);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
||||
/*-moz-transform: translate(-3px,-3px);*/
|
||||
}
|
||||
#btnOops {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
-moz-transform: translate(5px,-5px);
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
zoom: 0.94;
|
||||
-moz-transform: scale(.94);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 128px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 560px) {
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 57px;
|
||||
background-image: url('../img/logo_smaller_wide.png');
|
||||
margin-top: 14px;
|
||||
/*zoom: 0.8;*/
|
||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
||||
/*-moz-transform: ;*/
|
||||
/*left: 34%;*/
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 6px;
|
||||
-moz-transform: translate(10px,-10px);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
||||
}
|
||||
|
||||
.btn {
|
||||
zoom: 0.86;
|
||||
-moz-transform: scale(.86);
|
||||
}
|
||||
|
||||
#btnOops {
|
||||
top: 350px;
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
||||
}
|
||||
#btnSave {
|
||||
-moz-transform: translate(-5px,-13px);
|
||||
}
|
||||
|
||||
#btnPrevious, #btnNext {
|
||||
/*top: 200px;*/
|
||||
-moz-transform: translate(-5px,-10px);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 110px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
body {
|
||||
/* This chops off any overhanging divs */
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/*#landscape {*/
|
||||
/*position:relative;*/
|
||||
/*width: 1024px;*/
|
||||
/*max-height: 768px;*/
|
||||
/*background-color: #808;*/
|
||||
/*border: 10px solid #ff0;*/
|
||||
/*margin: 0px auto;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
#verticalShapes {
|
||||
position:absolute;
|
||||
right: -56px;
|
||||
bottom: 15px;
|
||||
/*background-color: #fff;*/
|
||||
}
|
||||
|
||||
.verticalshape {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
margin-top: 4px;
|
||||
/*background-color: #f0f;*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.straight {
|
||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
||||
}
|
||||
.diverging {
|
||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
||||
}
|
||||
.converging {
|
||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
||||
}
|
||||
.sinus {
|
||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/* Portrait */
|
||||
@media screen and (orientation:portrait) {
|
||||
body {
|
||||
/* background-color: #08F;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: none;
|
||||
}
|
||||
#portrait {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/* Landscape */
|
||||
@media screen and (orientation:landscape) {
|
||||
body {
|
||||
/* background-color: #8F0;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: block;
|
||||
}
|
||||
#portrait {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.uiButtonsContainer {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1024px;
|
||||
min-height: 500px;
|
||||
max-height: 768px;
|
||||
height: 100%;
|
||||
/* height: 768px;*/
|
||||
}
|
||||
.uiButtonsContainer:before {
|
||||
content:' ';
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 31%;
|
||||
width: 399px;
|
||||
height: 139px;
|
||||
background-image: url('../img/logo_full.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
position: absolute;
|
||||
top: 193px;
|
||||
left: 193px;
|
||||
width: 650px;
|
||||
height: 450px;
|
||||
background-color: #fff;
|
||||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#preview_tmp {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 500;
|
||||
border: 1px solid #f80;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mycanvas, #preview {
|
||||
/*border: 1px solid #08c;*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
#mycanvas {
|
||||
width: 500px;
|
||||
height: 450px;
|
||||
border: 0px solid #333;
|
||||
border-right: 2px solid #333;
|
||||
}
|
||||
|
||||
#preview {
|
||||
/*border: 1px solid #f8c;*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 150px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.vertImage {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*border: 2px solid #f0f;*/
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto; /* for ie9 */
|
||||
}
|
||||
|
||||
|
||||
.bgTop {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgMiddle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgBottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
/* PRINT PROGRESS DISPLAY */
|
||||
#printProgressContainer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 370px;
|
||||
width: 110px;
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
display:none;
|
||||
}
|
||||
#progressbarContainer {
|
||||
margin: 3px 0px;
|
||||
width: inherit;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #333;
|
||||
border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
.progressAmount {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
#progressbar {
|
||||
position: relative;
|
||||
/*margin-bottom: -20px;*/
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #4c4;
|
||||
border: 0px solid #f0f;
|
||||
border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
}
|
||||
|
||||
/* THERMOMETER */
|
||||
#thermometerContainer {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 360px;
|
||||
}
|
||||
#thermometerCanvas {
|
||||
/*background: #59b2b8;*/
|
||||
/*zoom: 2;*/
|
||||
}
|
||||
|
||||
|
||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
||||
|
||||
@media screen and (max-height: 675px) {
|
||||
.bgMiddle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 74px;
|
||||
background-image: url('../img/logo_small.png');
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(0px,-5px) scale(.94);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
||||
/*-moz-transform: translate(-3px,-3px);*/
|
||||
}
|
||||
#btnOops {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
-moz-transform: translate(5px,-5px);
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
zoom: 0.94;
|
||||
-moz-transform: scale(.94);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 128px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 560px) {
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 57px;
|
||||
background-image: url('../img/logo_smaller_wide.png');
|
||||
margin-top: 14px;
|
||||
/*zoom: 0.8;*/
|
||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
||||
/*-moz-transform: ;*/
|
||||
/*left: 34%;*/
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 6px;
|
||||
-moz-transform: translate(10px,-10px);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
||||
}
|
||||
|
||||
.btn {
|
||||
zoom: 0.86;
|
||||
-moz-transform: scale(.86);
|
||||
}
|
||||
|
||||
#btnOops {
|
||||
top: 350px;
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
||||
}
|
||||
#btnSave {
|
||||
-moz-transform: translate(-5px,-13px);
|
||||
}
|
||||
|
||||
#btnPrevious, #btnNext {
|
||||
/*top: 200px;*/
|
||||
-moz-transform: translate(-5px,-10px);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 110px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
body {
|
||||
/* This chops off any overhanging divs */
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/*.big {*/
|
||||
/*background: #a6e19c;*/
|
||||
/*border: 1px solid #222;*/
|
||||
/*height: 64px;*/
|
||||
/*width: 64px;*/
|
||||
/*display: table-cell;*/
|
||||
/*vertical-align: middle;*/
|
||||
/*text-align: center;*/
|
||||
/*border-radius: 32px;*/
|
||||
/*-moz-border-radius: 32px;*/
|
||||
/*-webkit-border-radius: 32px;*/
|
||||
/*}*/
|
||||
/*.small {*/
|
||||
/*background: #a3d5f7;*/
|
||||
/*border: 1px solid #222;*/
|
||||
/*height: 40px;*/
|
||||
/*width: 40px;*/
|
||||
/*display: table-cell;*/
|
||||
/*vertical-align: middle;*/
|
||||
/*text-align: center;*/
|
||||
/*border-radius: 20px;*/
|
||||
/*-moz-border-radius: 20px;*/
|
||||
/*-webkit-border-radius: 20px;*/
|
||||
/*}*/
|
||||
|
||||
#logo {
|
||||
position: absolute;
|
||||
/*left: 50%;*/
|
||||
/*margin-left: -220px;*/
|
||||
top: 20px;
|
||||
left: 315px;
|
||||
width: 400px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
/*ha {*/
|
||||
/*background: #f5f5f5 url('../images/bg.jpg') no-repeat;*/
|
||||
/*}*/
|
||||
|
||||
/* Portrait */
|
||||
@media screen and (orientation:portrait) {
|
||||
body {
|
||||
/* background-color: #08F;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: none;
|
||||
}
|
||||
#portrait {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/* Landscape */
|
||||
@media screen and (orientation:landscape) {
|
||||
body {
|
||||
/* background-color: #8F0;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: block;
|
||||
}
|
||||
#portrait {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border: 2px solid #333;
|
||||
width: 1024px;
|
||||
min-height: 500px;
|
||||
max-height: 768px;
|
||||
height: 100%;
|
||||
/* height: 768px;*/
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 31%;
|
||||
width: 399px;
|
||||
height: 139px;
|
||||
background-image: url('../img/logo_full.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
position: absolute;
|
||||
top: 193px;
|
||||
left: 193px;
|
||||
width: 650px;
|
||||
height: 450px;
|
||||
background-color: #fff;
|
||||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#preview_tmp {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 500;
|
||||
border: 1px solid #f80;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mycanvas, #preview {
|
||||
/*border: 1px solid #08c;*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
#mycanvas {
|
||||
width: 500px;
|
||||
height: 450px;
|
||||
border: 0px solid #333;
|
||||
border-right: 2px solid #333;
|
||||
}
|
||||
|
||||
#preview {
|
||||
/*border: 1px solid #f8c;*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 150px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.vertImage {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*border: 2px solid #f0f;*/
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto; /* for ie9 */
|
||||
}
|
||||
|
||||
|
||||
.bgTop {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgMiddle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgBottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
/* PRINT PROGRESS DISPLAY */
|
||||
#printProgressContainer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 370px;
|
||||
width: 110px;
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
display:none;
|
||||
}
|
||||
#progressbarContainer {
|
||||
margin: 3px 0px;
|
||||
width: inherit;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #333;
|
||||
border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
.progressAmount {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
#progressbar {
|
||||
position: relative;
|
||||
/*margin-bottom: -20px;*/
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #4c4;
|
||||
border: 0px solid #f0f;
|
||||
border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
}
|
||||
|
||||
/* THERMOMETER */
|
||||
#thermometerContainer {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 370px;
|
||||
}
|
||||
#thermometerCanvas {
|
||||
/*background: #59b2b8;*/
|
||||
/*zoom: 2;*/
|
||||
}
|
||||
|
||||
|
||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
||||
|
||||
@media screen and (max-height: 675px) {
|
||||
.bgMiddle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 74px;
|
||||
background-image: url('../img/logo_small.png');
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(0px,-5px) scale(.94);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
||||
/*-moz-transform: translate(-3px,-3px);*/
|
||||
}
|
||||
#btnOops {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
-moz-transform: translate(5px,-5px);
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
zoom: 0.94;
|
||||
-moz-transform: scale(.94);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 128px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 560px) {
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 57px;
|
||||
background-image: url('../img/logo_smaller_wide.png');
|
||||
margin-top: 14px;
|
||||
/*zoom: 0.8;*/
|
||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
||||
/*-moz-transform: ;*/
|
||||
/*left: 34%;*/
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 6px;
|
||||
-moz-transform: translate(10px,-10px);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
||||
}
|
||||
|
||||
.btn {
|
||||
zoom: 0.86;
|
||||
-moz-transform: scale(.86);
|
||||
}
|
||||
|
||||
#btnOops {
|
||||
top: 350px;
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
||||
}
|
||||
#btnSave {
|
||||
-moz-transform: translate(-5px,-13px);
|
||||
}
|
||||
|
||||
#btnPrevious, #btnNext {
|
||||
/*top: 200px;*/
|
||||
-moz-transform: translate(-5px,-10px);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 110px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
body {
|
||||
/* This chops off any overhanging divs */
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/*#landscape {*/
|
||||
/*position:relative;*/
|
||||
/*width: 1024px;*/
|
||||
/*max-height: 768px;*/
|
||||
/*background-color: #808;*/
|
||||
/*border: 10px solid #ff0;*/
|
||||
/*margin: 0px auto;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
#verticalShapes {
|
||||
position:absolute;
|
||||
right: -56px;
|
||||
bottom: 15px;
|
||||
/*background-color: #fff;*/
|
||||
}
|
||||
|
||||
.verticalshape {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
margin-top: 4px;
|
||||
/*background-color: #f0f;*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.straight {
|
||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
||||
}
|
||||
.diverging {
|
||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
||||
}
|
||||
.converging {
|
||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
||||
}
|
||||
.sinus {
|
||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/* Portrait */
|
||||
@media screen and (orientation:portrait) {
|
||||
body {
|
||||
/* background-color: #08F;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: none;
|
||||
}
|
||||
#portrait {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/* Landscape */
|
||||
@media screen and (orientation:landscape) {
|
||||
body {
|
||||
/* background-color: #8F0;*/
|
||||
}
|
||||
|
||||
#landscape {
|
||||
display: block;
|
||||
}
|
||||
#portrait {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.uiButtonsContainer {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1024px;
|
||||
min-height: 500px;
|
||||
max-height: 768px;
|
||||
height: 100%;
|
||||
/* height: 768px;*/
|
||||
}
|
||||
.uiButtonsContainer:before {
|
||||
content:' ';
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 31%;
|
||||
width: 399px;
|
||||
height: 139px;
|
||||
background-image: url('../img/logo_full.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
position: absolute;
|
||||
top: 193px;
|
||||
left: 193px;
|
||||
width: 650px;
|
||||
height: 450px;
|
||||
background-color: #fff;
|
||||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#preview_tmp {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 500;
|
||||
border: 1px solid #f80;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mycanvas, #preview {
|
||||
/*border: 1px solid #08c;*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
#mycanvas {
|
||||
width: 500px;
|
||||
height: 450px;
|
||||
border: 0px solid #333;
|
||||
border-right: 2px solid #333;
|
||||
}
|
||||
|
||||
#preview {
|
||||
/*border: 1px solid #f8c;*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 150px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.vertImage {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*border: 2px solid #f0f;*/
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto; /* for ie9 */
|
||||
}
|
||||
|
||||
|
||||
.bgTop {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgMiddle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
.bgBottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
/* PRINT PROGRESS DISPLAY */
|
||||
#printProgressContainer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 370px;
|
||||
width: 110px;
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
display:none;
|
||||
}
|
||||
#progressbarContainer {
|
||||
margin: 3px 0px;
|
||||
width: inherit;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #333;
|
||||
border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
.progressAmount {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
#progressbar {
|
||||
position: relative;
|
||||
/*margin-bottom: -20px;*/
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #4c4;
|
||||
border: 0px solid #f0f;
|
||||
border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
}
|
||||
|
||||
/* THERMOMETER */
|
||||
#thermometerContainer {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 360px;
|
||||
}
|
||||
#thermometerCanvas {
|
||||
/*background: #59b2b8;*/
|
||||
/*zoom: 2;*/
|
||||
}
|
||||
|
||||
|
||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
||||
|
||||
@media screen and (max-height: 675px) {
|
||||
.bgMiddle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 74px;
|
||||
background-image: url('../img/logo_small.png');
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(0px,-5px) scale(.94);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
||||
/*-moz-transform: translate(-3px,-3px);*/
|
||||
}
|
||||
#btnOops {
|
||||
zoom: 0.94;
|
||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
-moz-transform: translate(5px,-5px);
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
zoom: 0.94;
|
||||
-moz-transform: scale(.94);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 128px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 560px) {
|
||||
#d3dlogo {
|
||||
width: 399px;
|
||||
height: 57px;
|
||||
background-image: url('../img/logo_smaller_wide.png');
|
||||
margin-top: 14px;
|
||||
/*zoom: 0.8;*/
|
||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
||||
/*-moz-transform: ;*/
|
||||
/*left: 34%;*/
|
||||
}
|
||||
|
||||
#btnsUpDown, #btnsTurnLeftRight {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
||||
}
|
||||
|
||||
#btnPrint {
|
||||
right: 6px;
|
||||
-moz-transform: translate(10px,-10px);
|
||||
}
|
||||
|
||||
#btnNew {
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
||||
}
|
||||
|
||||
.btn {
|
||||
zoom: 0.86;
|
||||
-moz-transform: scale(.86);
|
||||
}
|
||||
|
||||
#btnOops {
|
||||
top: 350px;
|
||||
zoom: 0.86;
|
||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
||||
}
|
||||
#btnSave {
|
||||
-moz-transform: translate(-5px,-13px);
|
||||
}
|
||||
|
||||
#btnPrevious, #btnNext {
|
||||
/*top: 200px;*/
|
||||
-moz-transform: translate(-5px,-10px);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 110px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
form {
|
||||
margin: 10px;
|
||||
}
|
||||
form input {
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
body,th,td {
|
||||
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
.settingsContainer {
|
||||
position:relative;
|
||||
max-width: 600px;
|
||||
/*min-width: 370px;*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*form#settingsForm {*/
|
||||
/*width: 100% auto;*/
|
||||
/*}*/
|
||||
form fieldset {
|
||||
max-width: 600px;
|
||||
border: 1px solid rgb(187, 187, 187);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px;
|
||||
/*padding-right: 8px;*/
|
||||
}
|
||||
form fieldset fieldset{
|
||||
max-width: 580px;
|
||||
margin: 15px 0 5px 0;
|
||||
clear: left;
|
||||
float: left;
|
||||
}
|
||||
form fieldset legend {
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
form label {
|
||||
min-width: 150px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 1px 0 0 0;
|
||||
clear: left;
|
||||
}
|
||||
form div {
|
||||
float: left;
|
||||
}
|
||||
form input[type="text"], form input[type="number"], form input[type="password"] {
|
||||
border: 1px solid rgb(144, 192, 255);
|
||||
margin-right: 5px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
form input[type="text"].small, form input[type="number"].small, form input[type="password"].small {
|
||||
width: 50px;
|
||||
}
|
||||
form input[type="text"].large, form input[type="number"].large, form input[type="password"].large {
|
||||
width: 250px;
|
||||
}
|
||||
form input[type="radio"] {
|
||||
margin: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
border: 1px solid rgb(144, 192, 255);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
form .startgcode_left {
|
||||
float:left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
form textarea.gcode {
|
||||
width: 252px;
|
||||
/*max-width: 262px;*/
|
||||
/*min-width: 200px;*/
|
||||
height: 150px;
|
||||
}
|
||||
form small {
|
||||
margin: 3px 0 0 0;
|
||||
display: block;
|
||||
clear: left;
|
||||
}
|
||||
form .button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
form #passwordLabel, form #password {
|
||||
display: none;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,136 @@
|
|||
<<<<<<< HEAD
|
||||
=======
|
||||
var $displayThermometer = $("#thermometerContainer");
|
||||
|
||||
|
||||
//TODO 2013-09-18 allow displaying temperatures HIGHER than the targTemp (it's now being capped at targTemp).
|
||||
>>>>>>> new_layouting_approach
|
||||
function Thermometer() {
|
||||
this.currentTemperature = 0; // default val
|
||||
this.targetTemperature = 180; // default val
|
||||
|
||||
this.thermoOverlayImg = new Image();
|
||||
this.thermoOverlayImgSrc = "img/thermometer_fg_overlay.png"; // ../img/thermometer_fg_overlay.png
|
||||
|
||||
this.thermoWidth= 40;
|
||||
this.thermoHeight = 100;
|
||||
|
||||
this.$canvas;
|
||||
this.canvas;
|
||||
this.context;
|
||||
this.$container;
|
||||
|
||||
this.isInitted = false;
|
||||
|
||||
this.enabled = true;
|
||||
|
||||
this.thermoColors = [
|
||||
[50, 200, 244], // 'cold'
|
||||
[244, 190, 10], // 'warming up'
|
||||
[244, 50, 50] // 'ready / hot'
|
||||
];
|
||||
|
||||
this.init = function(targCanvas, targCanvasContainer) {
|
||||
console.log("Thermometer.init()");
|
||||
|
||||
this.$container = targCanvasContainer;
|
||||
|
||||
this.$canvas = targCanvas;
|
||||
this.canvas = this.$canvas[0];
|
||||
this.context = this.canvas.getContext('2d');
|
||||
|
||||
|
||||
var self = this;
|
||||
this.thermoOverlayImg.onload = function() {
|
||||
console.log("canvasThermoOverlay img loaded");
|
||||
self.isInitted = true;
|
||||
self.update(self.currentTemperature, self.targetTemperature);
|
||||
};
|
||||
this.thermoOverlayImg.src = this.thermoOverlayImgSrc;
|
||||
}
|
||||
|
||||
this.update = function(curr, targ) {
|
||||
// console.log("Thermometer.update(" + curr + "," + targ + ")");
|
||||
|
||||
if (this.isInitted) {
|
||||
if(!this.enabled) return;
|
||||
if (curr == undefined) curr = 0;
|
||||
if (targ== undefined) targ = 180; // prevent divide by zero
|
||||
|
||||
var progress = curr / targ;
|
||||
|
||||
progress = Math.min(progress, 1.0);
|
||||
progress = Math.max(progress, 0);
|
||||
|
||||
var h = this.thermoHeight; // 94 // px
|
||||
var paddingUnder = 15; // how far is beginpoint from bottom of thermometer
|
||||
var paddingAbove = 25; // how far is endpoint from top of thermometer
|
||||
var endPoint = h * .8;
|
||||
var p = Math.floor((h - paddingUnder - paddingAbove) * progress); // %
|
||||
// var tempHeight =
|
||||
|
||||
var currColor = this.thermoColors[0];
|
||||
if (progress > 0.98) {
|
||||
currColor = this.thermoColors[2];
|
||||
} else if (progress > 0.25) {
|
||||
currColor = this.thermoColors[1];
|
||||
}
|
||||
|
||||
// clear
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.context.font = "10pt sans-serif";
|
||||
|
||||
// draw the thermometer clipping path
|
||||
this.context.save();
|
||||
this.context.beginPath();
|
||||
this.context.arc(40, 80, 16, 0, 2 * Math.PI, false); // circle bottom of thermometer
|
||||
this.context.arc(40, 10, 4, 0, 2 * Math.PI, false); // circle at top of thermometer tube
|
||||
this.context.rect(36, 11, 8, 70); // thermometer tube
|
||||
this.context.fillStyle = '#fff';
|
||||
this.context.fill();
|
||||
this.context.clip();
|
||||
|
||||
// draw rectangle which represents temperature
|
||||
// rect will be clipped by the thermometer outlines
|
||||
this.context.beginPath();
|
||||
this.context.rect(20, h - paddingUnder - p, 60, p + paddingUnder);
|
||||
//console.log(" currColor: " + currColor);
|
||||
//todo Math.floor??
|
||||
this.context.fillStyle = "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")";
|
||||
this.context.fill();
|
||||
this.context.restore();
|
||||
|
||||
// additional text labels
|
||||
this.context.save();
|
||||
this.context.beginPath();
|
||||
this.context.moveTo(32, paddingAbove);
|
||||
this.context.lineTo(52, paddingAbove);
|
||||
this.context.lineWidth = 2;
|
||||
this.context.strokeStyle = '#000';
|
||||
this.context.stroke();
|
||||
this.context.fillStyle = '#000';
|
||||
this.context.textAlign = "left";
|
||||
this.context.textBaseline = "middle";
|
||||
this.context.fillText(targ + "°", 55, paddingAbove);
|
||||
this.context.restore();
|
||||
|
||||
// the thermometer outline png
|
||||
this.context.drawImage(this.thermoOverlayImg, 20, 0);
|
||||
|
||||
// text
|
||||
this.context.fillStyle = '#000';
|
||||
this.context.textAlign="center";
|
||||
this.context.fillText(curr + "°", 40, h + paddingUnder);
|
||||
} else {
|
||||
console.log("Thermometer.setTemperature() -> thermometer not initialized!");
|
||||
}
|
||||
}
|
||||
this.show = function() {
|
||||
this.$container.show();
|
||||
this.enabled = true;
|
||||
}
|
||||
this.hide = function() {
|
||||
this.$container.hide();
|
||||
this.enabled = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
var imgDims = [320, 320]; // width and height of image
|
||||
|
||||
function doClientAndOrientationStuff() {
|
||||
console.log("f:doClientAndOrientationStuff()");
|
||||
|
||||
$(".agentInfo").text("");
|
||||
|
||||
/*
|
||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
||||
if (window.orientation == -90 || window.orientation == 90) {
|
||||
// landscape
|
||||
// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
||||
} else {
|
||||
// portrait
|
||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
||||
}
|
||||
}
|
||||
return;
|
||||
//*/
|
||||
|
||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
||||
console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation);
|
||||
if (window.orientation == -90 || window.orientation == 90) {
|
||||
console.log(" landscape");
|
||||
// landscape
|
||||
|
||||
// var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
|
||||
var ww = 0; //get proper width
|
||||
if (window.innerWidth) {
|
||||
ww = window.innerWidth;
|
||||
// if (window.screen.availWidth) {
|
||||
// ww = window.screen.availWidth;
|
||||
|
||||
// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
||||
// ww = window.innerWidth;
|
||||
// }
|
||||
} else if($(window).width()) {
|
||||
ww = $(window).width();
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
// ww = 480;
|
||||
|
||||
var mw = imgDims[0]; // min width of site
|
||||
//*
|
||||
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
||||
var mw = imgDims[1]; // in landscape: min-width is image width
|
||||
}
|
||||
//*/
|
||||
var ratio = ww / mw; //calculate ratio
|
||||
$('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
|
||||
if( ww < mw){ //smaller than minimum size
|
||||
// $(".colmask").css("background-color", "#ff0");
|
||||
// $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
|
||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
||||
}else{ //regular size
|
||||
// $(".colmask").css("background-color", "#0ff");
|
||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
||||
}
|
||||
|
||||
console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio);
|
||||
|
||||
$(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
|
||||
$(".agentInfo").append("ratio: " + ratio + "<br/>");
|
||||
$(".agentInfo").append("<br/>");
|
||||
} else {
|
||||
console.log(" portrait");
|
||||
// portrait
|
||||
// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
|
||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no');
|
||||
}
|
||||
|
||||
} else {
|
||||
// console.log("else");
|
||||
$(".colmask").css("background-color", "#f80");
|
||||
|
||||
}
|
||||
|
||||
|
||||
$(".agentInfo").append("$(window).width(): " + $(window).width() + "<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 drawAreaContainerMaxHeight = 450;
|
||||
function doOnResize() {
|
||||
// console.log("doOnResize() >> " + new Date().getTime());
|
||||
// $(".container").css("height", window.innerHeight);
|
||||
|
||||
// code from new layouting approach... //TODO give this a more logical spot
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
||||
|
||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
||||
// canvas.width = canvas.clientWidth;
|
||||
// canvas.height = canvas.clientHeight;
|
||||
|
||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
||||
|
||||
preview.width = 150;
|
||||
preview.height = $drawAreaContainer.height();
|
||||
// preview.width = parseInt($preview.css("width"), 10);
|
||||
// preview.height = parseInt($preview.css("height"), 10);
|
||||
|
||||
canvasWidth = canvas.width;
|
||||
canvasHeight = canvas.height;
|
||||
|
||||
redrawDoodle();
|
||||
redrawPreview();
|
||||
|
||||
return;
|
||||
|
||||
// doClientAndOrientationStuff() // <-- is this necessary in this method?
|
||||
|
||||
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
|
||||
if (window.innerHeight < 768) {
|
||||
// $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
||||
var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
|
||||
newVal = Math.max(newVal, drawAreaContainerMinHeight);
|
||||
newVal = Math.min(newVal, drawAreaContainerMaxHeight);
|
||||
|
||||
$('#drawAreaContainer').innerHeight(newVal);
|
||||
|
||||
// canvas drawing area
|
||||
$canvas.css("height", newVal);
|
||||
canvas.height = newVal;
|
||||
canvasWidth = canvas.width;
|
||||
canvasHeight = canvas.height;
|
||||
|
||||
// preview area
|
||||
$preview.css("height", newVal);
|
||||
preview.height = newVal;
|
||||
layerOffsetY = preview.height - 1.75 * layerCY;
|
||||
yStep = preview.height / 150;
|
||||
|
||||
redrawDoodle();
|
||||
redrawPreview();
|
||||
}
|
||||
}
|
||||
|
||||
function initLayouting() {
|
||||
console.log("f:initLayouting()");
|
||||
|
||||
// first set the css width/height and actual width/height of the drawing area
|
||||
<!--div drawAreaContainer 650,450-->
|
||||
<!--canvas mycanvas 500, 450-->
|
||||
<!--canvas preview 150, 450-->
|
||||
|
||||
// $doodleCanvas = $("#mycanvas");
|
||||
// doodleCanvas = $("#mycanvas")[0];
|
||||
// doodleCanvasContext = doodleCanvas.getContext('2d');
|
||||
|
||||
$drawAreaContainer = $("#drawAreaContainer");
|
||||
$drawAreaContainer.css("margin", 0);
|
||||
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
||||
|
||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
||||
// canvas.width = canvas.clientWidth;
|
||||
// canvas.height = canvas.clientHeight;
|
||||
|
||||
preview.width = 150;
|
||||
preview.height = $drawAreaContainer.height();
|
||||
|
||||
// code from new layouting approach... //TODO give this a more logical spot
|
||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
||||
// preview.width = parseInt($preview.css("width"), 10);
|
||||
// preview.height = parseInt($preview.css("height"), 10);
|
||||
canvasWidth = canvas.width;
|
||||
canvasHeight = canvas.height;
|
||||
|
||||
// console.log("f:initLayouting() >> canvas height: " + canvas.height);
|
||||
|
||||
|
||||
|
||||
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
||||
// imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
|
||||
// imgDims = [1024, 768];
|
||||
|
||||
/*
|
||||
if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
|
||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
} else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
||||
imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
||||
} else {
|
||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
}
|
||||
//*/
|
||||
|
||||
// $(".container").css("height", window.innerHeight);
|
||||
|
||||
// window.innerHeight
|
||||
console.log("window.innerHeight: " + window.innerHeight);
|
||||
console.log("window.innerWidth: " + window.innerWidth);
|
||||
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
|
||||
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
|
||||
|
||||
|
||||
/* 2013-07-26 not doing this resizing stuff now, it's not working well yet
|
||||
if (window.innerHeight < 768) {
|
||||
$('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
||||
}
|
||||
//*/
|
||||
|
||||
// timeout because it SEEMS to be beneficial for initting the layout
|
||||
// 2013-09-18 seems beneficial since when?
|
||||
setTimeout(_startOrientationAndChangeEventListening, 1000);
|
||||
}
|
||||
|
||||
function _startOrientationAndChangeEventListening() {
|
||||
// Initial execution if needed
|
||||
|
||||
$(window).on('resize', doOnResize);
|
||||
|
||||
// if (!window.addEventListener) {
|
||||
// window.attachEvent('orientationchange', doOnOrientationChange, false);
|
||||
// window.attachEvent('resize', doOnResize, false);
|
||||
// } else {
|
||||
// window.addEventListener('orientationchange', doOnOrientationChange, false);
|
||||
// window.addEventListener('resize', doOnResize, false);
|
||||
// }
|
||||
|
||||
// is it necessary to call these? Aren't they called by the above eventhandlers?
|
||||
// doClientAndOrientationStuff();
|
||||
doOnResize();
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
var debugMode = false; // debug mode
|
||||
var sendPrintCommands = true; // if Doodle3d should send print commands to the 3d printer
|
||||
var communicateWithWifibox = true; // if Doodle3d should try interfacing with the wifibox (in case one is not connected)
|
||||
var wifiboxIsRemote = false; // when you want to run the client on a computer and have it remotely connect to the wifibox
|
||||
var autoUpdate = true; // auto retrieve updates about temperature and progress from printer
|
||||
|
||||
var printer = new Printer();
|
||||
var progressbar = new Progressbar();
|
||||
var thermometer = new Thermometer();
|
||||
var settingsWindow = new SettingsWindow();
|
||||
var message = new Message();
|
||||
|
||||
var firstTimeSettingsLoaded = true;
|
||||
|
||||
var wifiboxURL; // Using the uhttpd lua handler as default, because of better performance
|
||||
var wifiboxCGIBinURL; // CGI-bin, for some network stuff, where it needs to restart the webserver for example
|
||||
|
||||
var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer;
|
||||
|
||||
$(function() {
|
||||
console.log("ready");
|
||||
|
||||
|
||||
//TODO give this a more logical place in code
|
||||
|
||||
if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");
|
||||
if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1");
|
||||
if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");
|
||||
if (getURLParameter("r") != "null") wifiboxIsRemote = (getURLParameter("r") == "1");
|
||||
if (getURLParameter("u") != "null") autoUpdate = (getURLParameter("u") == "1");
|
||||
|
||||
if (wifiboxIsRemote) {
|
||||
wifiboxURL = "http://192.168.5.1/d3dapi";
|
||||
wifiboxCGIBinURL = "http://192.168.5.1/cgi-bin/d3dapi";
|
||||
} else {
|
||||
wifiboxURL = "http://" + window.location.host + "/d3dapi";
|
||||
wifiboxCGIBinURL = "http://" + window.location.host + "/cgi-bin/d3dapi";
|
||||
}
|
||||
|
||||
if (!communicateWithWifibox) {
|
||||
sendPrintCommands = false; // 'communicateWithWifibox = false' implies this
|
||||
}
|
||||
console.log("debugMode: " + debugMode);
|
||||
console.log("sendPrintCommands: " + sendPrintCommands);
|
||||
console.log("communicateWithWifibox: " + communicateWithWifibox);
|
||||
console.log("wifiboxIsRemote: " + wifiboxIsRemote);
|
||||
console.log("wifibox URL: " + wifiboxURL);
|
||||
|
||||
initDoodleDrawing();
|
||||
initPreviewRendering();
|
||||
initLayouting();
|
||||
initSidebars();
|
||||
initButtonBehavior();
|
||||
initVerticalShapes();
|
||||
|
||||
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
|
||||
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
|
||||
|
||||
message.init($("#message"));
|
||||
|
||||
printer.init();
|
||||
$(document).on(Printer.UPDATE,update);
|
||||
|
||||
settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
|
||||
$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
|
||||
|
||||
if(debugMode) {
|
||||
console.log("debug mode is true");
|
||||
$("body").css("overflow", "auto");
|
||||
$("#debug_textArea").css("display", "block");
|
||||
$("#preview_tmp").css("display", "block");
|
||||
|
||||
$("#debug_display").css("display", "block");
|
||||
|
||||
// show and hide the progressguage and thermometer
|
||||
showhideInterval = setInterval(showOrHideThermo, 2500);
|
||||
|
||||
// $("#debugContainer").css("display", "block");
|
||||
|
||||
/* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
|
||||
// todo remove this temporary code...
|
||||
/*
|
||||
setTimeout(function() {
|
||||
$("#startgcode").text("");
|
||||
$("#startgcode").append("G21 (mm) \n");
|
||||
$("#startgcode").append("G91 (relative) \n");
|
||||
$("#startgcode").append("G28 X0 Y0 Z0 (physical home) \n");
|
||||
$("#startgcode").append("M104 S230 (temperature) \n");
|
||||
$("#startgcode").append("G1 E10 F250 (flow) \n");
|
||||
$("#startgcode").append("G92 X-100 Y-100 Z0 E10 \n");
|
||||
$("#startgcode").append("G1 Z3 F5000 (prevent diagonal line) \n");
|
||||
$("#startgcode").append("G90 (absolute) \n");
|
||||
$("#startgcode").append("M106 (fan on)");
|
||||
console.log("$('#startgcode'): " + $("#startgcode").val());
|
||||
|
||||
$("#endgcode").text("");
|
||||
$("#endgcode").append("G1 X-100 Y-100 F15000 (fast homing) \n");
|
||||
$("#endgcode").append("M107 \n");
|
||||
$("#endgcode").append("M84 (disable axes) \n");
|
||||
console.log("$('#endgcode'): " + $("#endgcode").val());
|
||||
}, 1000);
|
||||
//*/
|
||||
}
|
||||
<<<<<<< .merge_file_HNcA77
|
||||
=======
|
||||
//showhideInterval = setInterval(showOrHideThermo, 2500);
|
||||
>>>>>>> .merge_file_0hlg7g
|
||||
});
|
||||
|
||||
/*var showhideInterval;
|
||||
var showOrHide = false;
|
||||
|
||||
function showOrHideThermo() {
|
||||
console.log("f:showOrHideThermo()");
|
||||
if (showOrHide) {
|
||||
thermometer.hide();
|
||||
progressbar.hide();
|
||||
} else {
|
||||
thermometer.show();
|
||||
progressbar.show();
|
||||
|
||||
}
|
||||
showOrHide = !showOrHide;
|
||||
}*/
|
||||
|
||||
function settingsLoaded() {
|
||||
console.log("settingsLoaded");
|
||||
console.log("autoHeatup: ",settings["printer.heatup.enabled"]);
|
||||
if(settings["printer.heatup.enabled"]) {
|
||||
if(firstTimeSettingsLoaded) {
|
||||
printer.preheat();
|
||||
firstTimeSettingsLoaded = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setDebugText(text) {
|
||||
$("#debug_display").text(text);
|
||||
}
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
//*
|
||||
var $preview;
|
||||
var preview;
|
||||
var previewCtx;
|
||||
|
||||
var preview_tmp;
|
||||
var previewCtx_tmp;
|
||||
|
||||
var previewDefaults = {
|
||||
rotation: Math.PI/90,
|
||||
numLayers: 10
|
||||
}
|
||||
|
||||
var svgPathRegExp = /[LM]\d* \d*/ig;
|
||||
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
||||
|
||||
var prevRedrawTime = new Date().getTime();
|
||||
var redrawInterval = 1000 / 30; // ms
|
||||
|
||||
function initPreviewRendering() {
|
||||
console.log("f:initPreviewRendering()");
|
||||
|
||||
$preview = $("#preview");
|
||||
preview = $preview[0];
|
||||
previewCtx = preview.getContext('2d');
|
||||
|
||||
// DEBUG --> mbt preview_tmp (voor de toImageData truc)
|
||||
var _ratio = preview.width / canvas.width;
|
||||
preview_tmp = document.getElementById('preview_tmp');
|
||||
preview_tmp.width = preview.width;
|
||||
preview_tmp.height = canvas.height * _ratio;
|
||||
$("#preview_tmp").css("top", -preview_tmp.height);
|
||||
|
||||
previewCtx_tmp = preview_tmp.getContext('2d');
|
||||
|
||||
calcPreviewCanvasProperties();
|
||||
redrawPreview();
|
||||
}
|
||||
|
||||
function calcPreviewCanvasProperties() {
|
||||
console.log("f:calcPreviewCanvasProperties()");
|
||||
|
||||
globalScale = preview.width / canvasWidth;
|
||||
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
// layerOffsetY = preview.height - 1.75 * layerCY;
|
||||
layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom);
|
||||
yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers;
|
||||
}
|
||||
|
||||
// TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping)
|
||||
var previewRotationLimit = Math.PI / 30; // rough estimate
|
||||
|
||||
var numLayers = previewDefaults.numLayers; // current number of preview layers
|
||||
var maxNumLayers= 100; // maximum number of preview layers
|
||||
var minNumLayers= 2; // minimum number of preview layers
|
||||
var globalScale = 0.3; // global scale of preview (width preview / width canvas)
|
||||
var globalAlpha = 0.20; // global alpha of preview
|
||||
var scaleY = 0.4; // additional vertical scale per path for 3d effect
|
||||
var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
|
||||
var previewVerticalPadding = { "top" : .15, "bottom" : 0.12 }; // %
|
||||
var strokeWidth = 2; //4;
|
||||
//var rStep = Math.PI/40; //Math.PI/40; //
|
||||
var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
|
||||
var yStep;// = preview.height / 150; // 3; //6;
|
||||
//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
|
||||
//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
|
||||
var layerCX, layerCY;
|
||||
//var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
//var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
||||
var layerOffsetY; //= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
|
||||
var prevX = 0;
|
||||
var prevY = 0;
|
||||
var highlight = true; //highlight bottom, middle and top layers
|
||||
|
||||
var linesRaw = "";
|
||||
var debug_redrawSimplification = 6;
|
||||
function redrawPreview(redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
|
||||
if (_points.length < 2) return;
|
||||
|
||||
if (!redrawLess) {
|
||||
//debug_redrawSimplification = Math.round(_points.length / 65);
|
||||
//*
|
||||
if (_points.length < 100) {
|
||||
debug_redrawSimplification = 6;
|
||||
} else if (_points.length < 250) {
|
||||
debug_redrawSimplification = 7;
|
||||
} else if (_points.length < 400) {
|
||||
debug_redrawSimplification = 8;
|
||||
} else if (_points.length < 550) {
|
||||
debug_redrawSimplification = 9;
|
||||
} else if (_points.length < 700) {
|
||||
debug_redrawSimplification = 10;
|
||||
} else {
|
||||
debug_redrawSimplification = 11;
|
||||
}
|
||||
//*/
|
||||
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
|
||||
}
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
//preview.width = preview.width;
|
||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
continue;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
// previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
||||
previewCtx.translate(layerCX, layerOffsetY + y);
|
||||
// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
|
||||
previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor);
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||
|
||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
|
||||
|
||||
previewCtx.beginPath();
|
||||
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
for(var j = 1; j < _points.length; j++) {
|
||||
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
|
||||
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
|
||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
}
|
||||
previewCtx.stroke();
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
function renderToImageDataPreview() {
|
||||
console.log("f:renderToImageDataPreview()");
|
||||
|
||||
if (_points.length < 2) return;
|
||||
|
||||
//*
|
||||
// the first step
|
||||
previewCtx_tmp.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx_tmp.lineWidth = strokeWidth;
|
||||
previewCtx_tmp.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
previewCtx_tmp.save();
|
||||
previewCtx_tmp.translate(layerCX, layerCY);
|
||||
previewCtx_tmp.scale(viewerScale, viewerScale);
|
||||
previewCtx_tmp.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||
|
||||
var adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[0]);
|
||||
|
||||
previewCtx_tmp.beginPath();
|
||||
previewCtx_tmp.moveTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
||||
for(var j = 1; j < _points.length; j++) {
|
||||
adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[j])
|
||||
previewCtx_tmp.lineTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
||||
}
|
||||
previewCtx_tmp.stroke();
|
||||
previewCtx_tmp.closePath();
|
||||
previewCtx_tmp.restore();
|
||||
//*/
|
||||
|
||||
// var saved_rect = previewCtx_tmp.getImageData(0, 0, layerCX*2, layerCY*2);
|
||||
var saved_rect_todataurl = preview_tmp.toDataURL();
|
||||
doodleImageCapture = new Image();
|
||||
doodleImageCapture.onload = function() {
|
||||
|
||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
for(var i=0;i<numLayers;i++) {
|
||||
|
||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
<<<<<<< HEAD
|
||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
||||
// previewCtx.scale(1, scaleY)
|
||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor)
|
||||
=======
|
||||
// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
||||
previewCtx.translate(layerCX,layerOffsetY+y);
|
||||
previewCtx.scale(1, scaleY)
|
||||
>>>>>>> new_layouting_approach
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate(-layerCX,-layerCY);
|
||||
|
||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
};
|
||||
doodleImageCapture.src = saved_rect_todataurl;
|
||||
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
// called by the move up/down or twist left/right buttons
|
||||
// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
|
||||
function redrawRenderedPreview(redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
console.log("f:redrawRenderedPreview()");
|
||||
|
||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
if (redrawLess && i%2 != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
continue;
|
||||
}
|
||||
previewCtx.save();
|
||||
|
||||
<<<<<<< HEAD
|
||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
||||
// previewCtx.scale(1, scaleY)
|
||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
|
||||
=======
|
||||
previewCtx.translate(layerCX,layerOffsetY+y);
|
||||
// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
||||
previewCtx.scale(1, scaleY)
|
||||
>>>>>>> new_layouting_approach
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate(-layerCX,-layerCY);
|
||||
|
||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function centeredAndScaledDoodlePoint(p) {
|
||||
var obj = { x: 0, y: 0};
|
||||
|
||||
obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
|
||||
obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
|
||||
// obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
|
||||
// obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
|
||||
// obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
|
||||
// obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
//*
|
||||
var updatePrevX = -1;
|
||||
var updatePrevY = -1;
|
||||
function updatePreview(_x, _y, redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
redrawLess = false;
|
||||
|
||||
if (_points.length < 2) return;
|
||||
if (updatePrevX == -1 || updatePrevY == -1) {
|
||||
updatePrevX = _x;
|
||||
updatePrevY = _y;
|
||||
return;
|
||||
}
|
||||
|
||||
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
continue;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
// previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
||||
previewCtx.translate(layerCX, layerOffsetY + y);
|
||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||
|
||||
|
||||
previewCtx.beginPath();
|
||||
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
|
||||
previewCtx.moveTo(prevPoint.x, prevPoint.y);
|
||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
|
||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
previewCtx.stroke();
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
updatePrevX = _x;
|
||||
updatePrevY = _y;
|
||||
|
||||
}
|
||||
//*/
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 814 B After Width: | Height: | Size: 814 B |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 726 B After Width: | Height: | Size: 726 B |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
|
|
@ -127,7 +127,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="portrait">
|
||||
<img class="vertImage" src="img/bg_vertical2.png"/>
|
||||
<img class="vertImage" src="img/bg_vertical.png"/>
|
||||
</div>
|
||||
<script src="js/libs/jquery-1.8.3.min.js"></script>
|
||||
<script src="js/SettingsWindow.js"></script>
|
||||