vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-25 18:47:57 +01:00
Code Issues Releases Wiki Activity

styles and html pertaining to the new Progressbar and Thermometer look and feel

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-10-16 23:11:06 +02:00
parent 7d9b099aec
commit e01175ed81
7 changed files with 283 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
css/styles.css
View File

@ -386,9 +386,9 @@ RIGHT PANEL
position: absolute; position: absolute;
width: 17%; /* background-color: rgba(255, 0, 254, 0.4); width: 17%; /* background-color: rgba(255, 0, 254, 0.4);
*/ */
top: 0px; top: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
} }
.btnPrint { .btnPrint {
@ -431,40 +431,59 @@ top: 0px;
/* /*
PRINT PROGRESS DISPLAY PROGRESSGUAGE AND THERMOMETER SHARED STYLES
*/ */
#printProgressContainer { .progressbarAppear,.thermometerAppear {
position: absolute; right: 1.5% !important;
right: 30px;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display: none;
} }
#progressbarContainer { /*
margin: 3px 0px;
width: inherit; PROGRESS GUAGE
height: 20px;
*/
.progressbarCanvasContainerParent {
position: relative;
width: 100%;
}
#progressbarCanvasContainer {
/*position: absolute;
*/
position: relative; /*right: 0;
*/
/*top: 10%;
*/
width: 30%;
float: right; /*height: auto;
*/
-webkit-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -36%;
}
#progressbarCanvas {
/*position: absolute;
*/
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-color: #fff; background-color: #fff;
border: 2px solid #333; border: solid #000;
border-radius: 5px; border-width: 2px 0 2px 2px;
} border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px;
.progressAmount { -webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
margin: 0px 5px; box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
}
#progressbar {
position: relative; /*margin-bottom: -20px;
*/
width: 0%;
height: 100%;
background-color: #4c4;
border: 0px solid #f0f;
border-radius: 3px;
} }
/* /*
@ -472,17 +491,46 @@ width: 0%;
THERMOMETER THERMOMETER
*/ */
.thermometerContainerParent {
position: relative;
width: 100%;
}
#thermometerContainer { #thermometerContainer {
position: absolute; /*position: absolute;
right: 25px; */
top: 370px; position: relative; /*right: 0;
*/
/*top: 40%;
*/
width: 25%;
float: right;
-webkit-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -30%;
} }
#thermometerCanvas { #thermometerCanvas {
/*background: #59b2b8; /*position: absolute;
*/
/*zoom: 2;
*/ */
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
} }
/* /*

2
css/styles.min.css vendored
View File

File diff suppressed because one or more lines are too long

29
index.html
View File

@ -39,9 +39,15 @@
<!-- right panel --> <!-- right panel -->
<div class="rightpanel shadowleft"> <div class="rightpanel shadowleft">
<div class='sidebutton shadowleft'></div> <!--<div class='sidebutton shadowleft'></div>-->
<img class="btnPrint btn" src="img/buttons/btnPrint.png" /><br/> <!--<div><img class="btnPrint btn" src="img/buttons/btnPrint.png" /></div>-->
<img class="btnStop btn disabled" src="img/buttons/btnStop.png" /><br/> <!--<div><img class="btnStop btn disabled" src="img/buttons/btnStop.png" /></div>-->
<div class="clearfix">
<img class="btnPrint btn" src="img/buttons/btnPrint.png" />
</div>
<div class="clearfix">
<img class="btnStop btn disabled" src="img/buttons/btnStop.png" />
</div>
<!-- not now <!-- not now
<div id="printProgressContainer"> <div id="printProgressContainer">
<label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span> <label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
@ -50,9 +56,25 @@
</div> </div>
</div> </div>
--> -->
<div class="progressbarCanvasContainerParent clearfix">
<div id="progressbarCanvasContainer">
<canvas id="progressbarCanvas" width="93" height="82"></canvas>
</div>
</div>
<div class="thermometerContainerParent clearfix">
<div id="thermometerContainer">
<canvas id="thermometerCanvas" width="90" height="120"></canvas>
</div>
</div>
<!--<div id="thermometerContainer" class="clearfix">-->
<!--<canvas id="thermometerCanvas" width="90" height="120"></canvas>-->
<!--</div>-->
<!-- 2013-10-16 tmp backup
<div id="thermometerContainer"> <div id="thermometerContainer">
<canvas id="thermometerCanvas" width="100" height="125"></canvas> <canvas id="thermometerCanvas" width="100" height="125"></canvas>
</div> </div>
-->
<div class="btnsSettingsInfo"> <div class="btnsSettingsInfo">
<img class="btnSettings btn" src="img/buttons/btnSettings.png"> <img class="btnSettings btn" src="img/buttons/btnSettings.png">
<img class="btnInfo btn" src="img/buttons/btnInfo.png"> <img class="btnInfo btn" src="img/buttons/btnInfo.png">
@ -128,6 +150,7 @@
<script src="js/gcodeGenerating.js"></script> <script src="js/gcodeGenerating.js"></script>
<script src="js/init_layout.js"></script> <script src="js/init_layout.js"></script>
<script src="js/Printer.js"></script> <script src="js/Printer.js"></script>
<script src="js/Progressbar.js"></script>
<script src="js/Thermometer.js"></script> <script src="js/Thermometer.js"></script>
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
<script src="js/sidebar.js"></script> <script src="js/sidebar.js"></script>

17
js/Progressbar.js
View File

@ -16,12 +16,17 @@ function Progressbar() {
this.$canvas; this.$canvas;
this.canvas; this.canvas;
this.context; this.context;
this.$container;
this.isInitted = false; this.isInitted = false;
this.init = function(targCanvas) { this.enabled = true;
this.init = function(targCanvas, targCanvasContainer) {
console.log("Thermometer.init()"); console.log("Thermometer.init()");
this.$container = targCanvasContainer;
this.$canvas = targCanvas; this.$canvas = targCanvas;
this.canvas = this.$canvas[0]; this.canvas = this.$canvas[0];
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
@ -88,4 +93,14 @@ function Progressbar() {
console.log("Progressbar.setTemperature() -> thermometer not initialized!"); console.log("Progressbar.setTemperature() -> thermometer not initialized!");
} }
} }
this.show = function() {
this.$container.addClass("progressbarAppear");
// this.$container.show();
this.enabled = true;
}
this.hide = function() {
this.$container.removeClass("progressbarAppear");
// this.$container.hide();
this.enabled = false;
}
} }

8
js/Thermometer.js
View File

@ -124,11 +124,15 @@ function Thermometer() {
} }
} }
this.show = function() { this.show = function() {
this.$container.show(); this.$container.addClass("thermometerAppear");
// $("#progressbarCanvasContainer").addClass("thermometerAppear");
// this.$container.show();
this.enabled = true; this.enabled = true;
} }
this.hide = function() { this.hide = function() {
this.$container.hide(); this.$container.removeClass("thermometerAppear");
// $("#progressbarCanvasContainer").removeClass("thermometerAppear");
// this.$container.hide();
this.enabled = false; this.enabled = false;
} }
} }

24
js/main.js
View File

@ -5,6 +5,7 @@ var wifiboxIsRemote = false; // when you want to run the client on a comp
var autoUpdate = true; // auto retrieve updates about temperature and progress from printer var autoUpdate = true; // auto retrieve updates about temperature and progress from printer
var printer = new Printer(); var printer = new Printer();
var progressbar = new Progressbar();
var thermometer = new Thermometer(); var thermometer = new Thermometer();
var settingsWindow = new SettingsWindow(); var settingsWindow = new SettingsWindow();
@ -53,6 +54,10 @@ $(function() {
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer")); thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
progressbar = new Progressbar();
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
printer.init(); printer.init();
$(document).on(Printer.UPDATE,update); $(document).on(Printer.UPDATE,update);
@ -93,8 +98,25 @@ $(function() {
}, 1000); }, 1000);
//*/ //*/
} }
showhideInterval = setInterval(showOrHideThermo, 2500);
});
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() { function settingsLoaded() {
console.log("settingsLoaded"); console.log("settingsLoaded");
console.log("autoHeatup: ",settings["printer.heatup.enabled"]); console.log("autoHeatup: ",settings["printer.heatup.enabled"]);

163
less/base_rightpanel.less
View File

@ -3,9 +3,9 @@
position: absolute; position: absolute;
width: 17%; width: 17%;
/* background-color: rgba(255, 0, 254, 0.4);*/ /* background-color: rgba(255, 0, 254, 0.4);*/
top: 0px; top: 0;
right: 0px; right: 0;
bottom: 0px; bottom: 0;
} }
.btnPrint { .btnPrint {
margin: 1% 5% 5% 0%; margin: 1% 5% 5% 0%;
@ -41,59 +41,140 @@
float: right; float: right;
} }
/*
PROGRESSGUAGE AND THERMOMETER SHARED STYLES
*/
.progressbarAppear, .thermometerAppear {
// margin-right: 1.5% !important;
right: 1.5% !important;
}
/* /*
PRINT PROGRESS DISPLAY PROGRESS GUAGE
*/ */
#printProgressContainer { .progressbarCanvasContainerParent {
position: absolute; position:relative;
right: 30px; width:100%;
top: 370px;
width: 110px;
margin: 5px 0px;
font-weight: bold;
display:none;
} }
#progressbarContainer { #progressbarCanvasContainer {
margin: 3px 0px; /*position: absolute;*/
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; position: relative;
/*margin-bottom: -20px;*/ /*right: 0;*/
width: 0%; /*top: 10%;*/
height: 100%; width: 30%;
background-color: #4c4; float:right;
border: 0px solid #f0f; /*height: auto;*/
border-radius: 3px;
-o-border-radius: 3px; transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-border-radius: 3px; right: -36%;
-webkit-border-radius: 3px;
} }
#progressbarCanvas {
/*position: absolute;*/
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
}
//#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 THERMOMETER
*/ */
.thermometerContainerParent {
position:relative;
width:100%;
}
#thermometerContainer { #thermometerContainer {
position: absolute; /*position: absolute;*/
right: 25px; position: relative;
top: 370px; /*right: 0;*/
/*top: 40%;*/
width: 25%;
float: right;
transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
right: -30%;
} }
#thermometerCanvas { #thermometerCanvas {
/*background: #59b2b8;*/ /*position: absolute;*/
/*zoom: 2;*/ top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-color: #fff;
border: solid #000;
border-width: 2px 0 2px 2px;
border-radius: 15px 0 0 15px;
padding: 5px 0px 5px 5px;
-webkit-box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
} }
//#thermometerContainer {
// position: absolute;
// right: 25px;
// top: 370px;
//}
//#thermometerCanvas {
///*background: #59b2b8;*/
///*zoom: 2;*/
//}