0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2025-02-12 07:42:41 +01:00

removed files

This commit is contained in:
Rick Companje 2014-01-09 18:10:54 +01:00
parent 2cdeaacd14
commit 0ad800b021
103 changed files with 118 additions and 8598 deletions

View File

@ -16,34 +16,34 @@ module.exports = function(grunt) {
},
js: {
src: [
'js_src/Events.js',
'js_src/Class.js',
'js_src/Button.js',
'js_src/Popup.js',
'js_src/btnMove.js',
'js_src/WordArt.js',
'js_src/Shape.js',
'js_src/Svg.js',
'js_src/Keyboard.js',
'js_src/SettingsWindow.js',
'js_src/UpdatePanel.js',
'js_src/PrinterPanel.js',
'js_src/Help.js',
'js_src/d3dServerInterfacing.js',
'js_src/verticalShapes.js',
'js_src/buttonbehaviors.js',
'js_src/canvasDrawing.js',
'js_src/previewRendering.js',
'js_src/gcodeGenerating.js',
'js_src/init_layout.js',
'js_src/Printer.js',
'js_src/Progressbar.js',
'js_src/Thermometer.js',
'js_src/utils.js',
'js_src/sidebar.js',
'js_src/Message.js',
'js_src/main.js',
'js_src/sketches.js'
'js/Events.js',
'js/Class.js',
'js/Button.js',
'js/Popup.js',
'js/btnMove.js',
'js/WordArt.js',
'js/Shape.js',
'js/Svg.js',
'js/Keyboard.js',
'js/SettingsWindow.js',
'js/UpdatePanel.js',
'js/PrinterPanel.js',
'js/Help.js',
'js/d3dServerInterfacing.js',
'js/verticalShapes.js',
'js/buttonbehaviors.js',
'js/canvasDrawing.js',
'js/previewRendering.js',
'js/gcodeGenerating.js',
'js/init_layout.js',
'js/Printer.js',
'js/Progressbar.js',
'js/Thermometer.js',
'js/utils.js',
'js/sidebar.js',
'js/Message.js',
'js/main.js',
'js/sketches.js'
],
dest: 'www/js/<%= pkg.name %>.js'
}
@ -63,8 +63,8 @@ module.exports = function(grunt) {
}
},
jslibs: {
cwd: "js_src/libs/",
// src: ['js_src/libs/*.js', '!js_src/libs/*.min.js'], // source files mask
cwd: "js/libs/",
// src: ['js/libs/*.js', '!js/libs/*.min.js'], // source files mask
src: ['*.js', '!*.min.js'], // source files mask
dest: 'www/js/libs/', // destination folder
expand: true, // allow dynamic building
@ -112,12 +112,12 @@ module.exports = function(grunt) {
},
watch: {
javascript: {
files: ["js_src/*", '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js'],
files: ["js/*", '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js'],
tasks: ["concat:js", "uglify:js"]
// tasks: ["jshint", "concat", "uglify"]
},
javascriptLibs: {
files: ["js_src/libs/*"],
files: ["js/libs/*"],
tasks: ["uglify:jslibs"]
// tasks: ["jshint", "concat", "uglify"]
},

View File

@ -1,154 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>settings</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="css/settings.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="settingsContainer">
<form id="settingsForm">
<!--<fieldset>
<legend>3D printer</legend>
<label for="printerType">Type:</label>
<select id="printerType" name="printer.type">
<option value="rigidbot">Rigidbot</option>
<option value="ultimaker">Ultimaker</option>
<option value="makerbot_replicator2">MakerBot Replicator2</option>
<option value="makerbot_thingomatic">MakerBot Thing-o-matic</option>
<option value="printrbot">Printrbot</option>
<option value="bukobot">Bukobot</option>
<option value="cartesio">Cartesio</option>
<option value="cyrus">Cyrus</option>
<option value="delta_rostockmax">Delta RostockMax</option>
<option value="deltamaker">Deltamaker</option>
<option value="eventorbot">EventorBot</option>
<option value="felix">Felix</option>
<option value="gigabot">Gigabot</option>
<option value="kossel">Kossel</option>
<option value="leapfrog_creatr">LeapFrog Creatr</option>
<option value="lulzbot_aO_101">LulzBot AO-101</option>
<option value="makergear_m2">MakerGear M2</option>
<option value="makergear_prusa">MakerGear Prusa</option>
<option value="makibox">Makibox</option>
<option value="orca_0_3">Orca 0.3</option>
<option value="ord_bot_hadron">ORD Bot Hadron</option>
<option value="printxel_3d">Printxel 3D</option>
<option value="prusa_i3">Prusa I3</option>
<option value="prusa_iteration_2">Prusa Iteration 2</option>
<option value="rapman">RapMan</option>
<option value="reprappro_huxley">RepRapPro Huxley</option>
<option value="reprappro_mendel">RepRapPro Mendel</option>
<option value="robo_3d_printer">RoBo 3D Printer</option>
<option value="shapercube">ShaperCube</option>
<option value="tantillus">Tantillus</option>
<option value="vision_3d_printer">Vision 3D Printer</option>
</select>
<br>
<label for="printerBaudrate">Baud rate:</label>
<select id="printerBaudrate" name="printer.baudrate">
<option value="115200">115200 bps</option>
<option value="2500000">2500000 bps</option>
</select>
</fieldset>-->
<fieldset id="printersettings">
<legend>Print settings</legend>
<label for="layerHeight">Layer height:</label><input id="layerHeight" type="number" step="0.01" class="small" name="printer.layerHeight">mm<br>
<label for="wallThickness">Wall thickness:</label><input id="wallThickness" type="number" step="0.1" class="small" name="printer.wallThickness">mm<br>
<label for="filamentThickness">Filament thickness:</label><input id="filamentThickness" step="0.01" type="number" class="small" name="printer.filamentThickness">mm<br>
<label for="temperature">Temperature:</label><input id="temperature" type="number" class="small" name="printer.temperature">degrees C<br>
<br>
<label for="speed">Speed:</label><input id="speed" type="number" name="printer.speed" class="small">mm/s<br>
<label for="travelSpeed">Travel speed:</label><input id="travelSpeed" type="number" name="printer.travelSpeed" class="small">mm/s<br>
<label for="enableTraveling">Enable traveling:</label><input id="enableTraveling" type="checkbox" name="printer.enableTraveling" value="enableTraveling"><br>
<label for="firstLayerSlow">First layer slow:</label><input id="firstLayerSlow" type="checkbox" name="printer.firstLayerSlow" value="firstLayerSlow"><br>
<label for="useSubLayers">Use sub-layers*:</label><input id="useSubLayers" type="checkbox" name="printer.useSubLayers" value="firstLayerSlow"><br>
<small>* Continuously move platform while printing instead of once per layer</small>
<br>
<label for="useRetraction">Use retraction:</label><input id="useRetraction" type="checkbox" name="printer.retraction.enabled" value="useRetraction"><br>
<label for="retractionAmount">Retraction amount:</label><input id="retractionAmount" type="number" class="small" name="printer.retraction.amount">mm<br>
<label for="retractionMinDistance">Retraction min distance:</label><input id="retractionMinDistance" type="number" class="small" name="printer.retraction.minDistance">mm<br>
<label for="retractionSpeed">Retraction speed:</label><input id="retractionSpeed" type="number" class="small" name="printer.retraction.speed">mm/s<br>
<br>
<label for="autoWarmUp">Auto warm-up:</label><input id="autoWarmUp" type="checkbox" name="printer.autoWarmUp" value="autoWarmUp"><br>
<label for="autoWarmUpCommand">Auto Warm up command:</label><input id="autoWarmUpCommand" type="text" name="printer.autoWarmUpCommand"><br>
</fieldset>
<fieldset id="doodlesettings">
<legend>Doodle3D settings</legend>
<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
</fieldset>
<fieldset>
<legend>Network settings</legend>
<label>Connection type:</label>
<div>
<label for="ap"><input type="radio" name="connectiontype" value="ap" id="ap">Access point mode</label>
<label for="client"><input type="radio" name="connectiontype" value="client" id="client">Client mode</label>
</div>
<fieldset id="apSettings">
<legend>Access point settings</legend>
<label for="ipaddress">Wi-Fi box IP address:</label><input type="text" name="network.ap.address" id="ipaddress"><br>
<label for="netmask">Wi-Fi box netmask:</label><input type="text" name="network.ap.netmask" id="netmask"><br>
<label for="ssid">Wi-Fi box ssid*:</label><input type="text" class="large" name="network.ap.ssid" id="ssid"> <br>
<small>* The text <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.</small>
<input type="button" name="create" value="Create" class="button" id="createAP"/>
<span id="apModeState"></span>
</fieldset>
<fieldset id="clientSettings">
<legend>Client mode settings</legend>
<label for="network">Network:</label>
<select id="network" name="network.client.network">
<option value="rigidbot">Fablab Amersfoort</option>
<option value="ultimaker">Globe4D</option>
</select>
<input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br>
<label for="password" id="passwordLabel">Password:</label><input type="password" name="network.client.password" id="password"><br>
<input type="button" name="connect" value="Connect" class="button" id="connectToNetwork"/>
<span id="clientModeState"></span>
</fieldset>
</fieldset>
<fieldset>
<legend>GCODE settings</legend>
<div class="startgcode_left">
<label for="startgcode">Start:</label><br/>
<textarea id="startgcode" class="gcode" name="printer.startgcode">
</textarea>
</div>
<div>
<label for="endgcode">End:</label><br/>
<textarea id="endgcode" class="gcode" name="printer.endgcode">
</textarea>
</div>
<!-- 2013-10-09 replaced by DIV solution (but keeping here in comments temporarily as lookup...)
<table>
<tr>
<td>
<label for="startgcode">Start:</label><br>
<textarea id="startgcode" class="gcode" name="printer.startgcode">
</textarea>
</td>
<td>
<label for="endgcode">End:</label><br>
<textarea id="endgcode" class="gcode" name="printer.endgcode">
</textarea>
</td>
</tr>
</table>
-->
</fieldset>
</form><br/>
</div>
</body>
</html>

View File

@ -1,179 +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 */
/*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;
}
*/

View File

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

View File

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

View File

@ -1,329 +0,0 @@
body {
/* This chops off any overhanging divs */
overflow:hidden;
}
.button {
display: table;
}
/*#landscape {*/
/*position:relative;*/
/*width: 1024px;*/
/*max-height: 768px;*/
/*background-color: #808;*/
/*border: 10px solid #ff0;*/
/*margin: 0px auto;*/
/*}*/
#verticalShapes {
position:absolute;
right: -56px;
bottom: 15px;
/*background-color: #fff;*/
}
.verticalshape {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 0px 5px 5px 0px;
margin-top: 4px;
/*background-color: #f0f;*/
cursor: pointer;
}
.straight {
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
.diverging {
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
.converging {
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
.sinus {
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
}
/* Portrait */
@media screen and (orientation:portrait) {
body {
/* background-color: #08F;*/
}
#landscape {
display: none;
}
#portrait {
display: block;
}
}
/* Landscape */
@media screen and (orientation:landscape) {
body {
/* background-color: #8F0;*/
}
#landscape {
display: block;
}
#portrait {
display: none;
}
}
.uiButtonsContainer {
position: fixed;
top: 0px;
left: 0px;
width: 1024px;
min-height: 500px;
max-height: 768px;
height: 100%;
/* height: 768px;*/
}
.uiButtonsContainer:before {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border: 2px solid #333;
}
#d3dlogo {
position: absolute;
top: 15px;
left: 31%;
width: 399px;
height: 139px;
background-image: url('../img/logo_full.png');
cursor: pointer;
}
#drawAreaContainer {
position: absolute;
top: 193px;
left: 193px;
width: 650px;
height: 450px;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
}
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
#mycanvas, #preview {
/*border: 1px solid #08c;*/
float: left;
}
#mycanvas {
width: 500px;
height: 450px;
border: 0px solid #333;
border-right: 2px solid #333;
}
#preview {
/*border: 1px solid #f8c;*/
position: absolute;
right: 0px;
top: 0px;
width: 150px;
height: 450px;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}
.bgTop {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
}
.bgMiddle {
display: block;
position: absolute;
top: 30%;
left: 0px;
z-index: -5;
}
.bgBottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: -5;
}
/* PRINT PROGRESS DISPLAY */
#printProgressContainer {
position: absolute;
right: 30px;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display:none;
}
#progressbarContainer {
margin: 3px 0px;
width: inherit;
height: 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.progressAmount {
margin: 0px 5px;
}
#progressbar {
position: relative;
/*margin-bottom: -20px;*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* THERMOMETER */
#thermometerContainer {
position: absolute;
right: 5px;
top: 360px;
}
#thermometerCanvas {
/*background: #59b2b8;*/
/*zoom: 2;*/
}
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
#d3dlogo {
width: 399px;
height: 74px;
background-image: url('../img/logo_small.png');
margin-top: 9px;
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.94;
-moz-transform: translate(0px,-5px) scale(.94);
}
#btnNew {
zoom: 0.94;
-moz-transform: translate(-5px,-5px) scale(.94);
/*-moz-transform: translate(-3px,-3px);*/
}
#btnOops {
zoom: 0.94;
-moz-transform: translate(-5px,-10px) scale(0.94);
}
#btnPrint {
right: 10px;
top: 10px;
-moz-transform: translate(5px,-5px);
}
.btn {
zoom: 0.94;
-moz-transform: scale(.94);
}
#drawAreaContainer {
top: 128px;
height: 350px;
}
}
@media screen and (max-height: 560px) {
#d3dlogo {
width: 399px;
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
margin-top: 14px;
/*zoom: 0.8;*/
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
/*-moz-transform: ;*/
/*left: 34%;*/
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.86;
-moz-transform: translate(0px,-7px) scale(0.86);
}
#btnPrint {
right: 6px;
-moz-transform: translate(10px,-10px);
}
#btnNew {
zoom: 0.86;
-moz-transform: translate(-10px,-10px) scale(.86);
}
.btn {
zoom: 0.86;
-moz-transform: scale(.86);
}
#btnOops {
top: 350px;
zoom: 0.86;
-moz-transform: translate(-10px,-25px) scale(.86);
}
#btnSave {
-moz-transform: translate(-5px,-13px);
}
#btnPrevious, #btnNext {
/*top: 200px;*/
-moz-transform: translate(-5px,-10px);
}
#drawAreaContainer {
top: 110px;
height: 350px;
}
}

View File

@ -1,329 +0,0 @@
body {
/* This chops off any overhanging divs */
overflow:hidden;
}
.button {
display: table;
}
/*#landscape {*/
/*position:relative;*/
/*width: 1024px;*/
/*max-height: 768px;*/
/*background-color: #808;*/
/*border: 10px solid #ff0;*/
/*margin: 0px auto;*/
/*}*/
#verticalShapes {
position:absolute;
right: -56px;
bottom: 15px;
/*background-color: #fff;*/
}
.verticalshape {
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 0px 5px 5px 0px;
margin-top: 4px;
/*background-color: #f0f;*/
cursor: pointer;
}
.straight {
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
}
.diverging {
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
}
.converging {
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
}
.sinus {
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
}
/* Portrait */
@media screen and (orientation:portrait) {
body {
/* background-color: #08F;*/
}
#landscape {
display: none;
}
#portrait {
display: block;
}
}
/* Landscape */
@media screen and (orientation:landscape) {
body {
/* background-color: #8F0;*/
}
#landscape {
display: block;
}
#portrait {
display: none;
}
}
.uiButtonsContainer {
position: fixed;
top: 0px;
left: 0px;
width: 1024px;
min-height: 500px;
max-height: 768px;
height: 100%;
/* height: 768px;*/
}
.uiButtonsContainer:before {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border: 2px solid #333;
}
#d3dlogo {
position: absolute;
top: 15px;
left: 31%;
width: 399px;
height: 139px;
background-image: url('../img/logo_full.png');
cursor: pointer;
}
#drawAreaContainer {
position: absolute;
top: 193px;
left: 193px;
width: 650px;
height: 450px;
background-color: #fff;
border: 4px solid #000;
border-radius: 15px;
}
#preview_tmp {
position: absolute;
top: 0px;
left: 0px;
z-index: 500;
border: 1px solid #f80;
display: none;
}
#mycanvas, #preview {
/*border: 1px solid #08c;*/
float: left;
}
#mycanvas {
width: 500px;
height: 450px;
border: 0px solid #333;
border-right: 2px solid #333;
}
#preview {
/*border: 1px solid #f8c;*/
position: absolute;
right: 0px;
top: 0px;
width: 150px;
height: 450px;
}
.vertImage {
margin: 0px;
padding: 0px;
/*border: 2px solid #f0f;*/
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
}
.bgTop {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
}
.bgMiddle {
display: block;
position: absolute;
top: 30%;
left: 0px;
z-index: -5;
}
.bgBottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: -5;
}
/* PRINT PROGRESS DISPLAY */
#printProgressContainer {
position: absolute;
right: 30px;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display:none;
}
#progressbarContainer {
margin: 3px 0px;
width: inherit;
height: 20px;
background-color: #fff;
border: 2px solid #333;
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.progressAmount {
margin: 0px 5px;
}
#progressbar {
position: relative;
/*margin-bottom: -20px;*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* THERMOMETER */
#thermometerContainer {
position: absolute;
right: 5px;
top: 360px;
}
#thermometerCanvas {
/*background: #59b2b8;*/
/*zoom: 2;*/
}
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
#d3dlogo {
width: 399px;
height: 74px;
background-image: url('../img/logo_small.png');
margin-top: 9px;
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.94;
-moz-transform: translate(0px,-5px) scale(.94);
}
#btnNew {
zoom: 0.94;
-moz-transform: translate(-5px,-5px) scale(.94);
/*-moz-transform: translate(-3px,-3px);*/
}
#btnOops {
zoom: 0.94;
-moz-transform: translate(-5px,-10px) scale(0.94);
}
#btnPrint {
right: 10px;
top: 10px;
-moz-transform: translate(5px,-5px);
}
.btn {
zoom: 0.94;
-moz-transform: scale(.94);
}
#drawAreaContainer {
top: 128px;
height: 350px;
}
}
@media screen and (max-height: 560px) {
#d3dlogo {
width: 399px;
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
margin-top: 14px;
/*zoom: 0.8;*/
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
/*-moz-transform: ;*/
/*left: 34%;*/
}
#btnsUpDown, #btnsTurnLeftRight {
zoom: 0.86;
-moz-transform: translate(0px,-7px) scale(0.86);
}
#btnPrint {
right: 6px;
-moz-transform: translate(10px,-10px);
}
#btnNew {
zoom: 0.86;
-moz-transform: translate(-10px,-10px) scale(.86);
}
.btn {
zoom: 0.86;
-moz-transform: scale(.86);
}
#btnOops {
top: 350px;
zoom: 0.86;
-moz-transform: translate(-10px,-25px) scale(.86);
}
#btnSave {
-moz-transform: translate(-5px,-13px);
}
#btnPrevious, #btnNext {
/*top: 200px;*/
-moz-transform: translate(-5px,-10px);
}
#drawAreaContainer {
top: 110px;
height: 350px;
}
}

View File

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