styles and html pertaining to the new Progressbar and Thermometer look and feel
This commit is contained in:
Adriaan Wormgoor
parent
7d9b099aec
commit
e01175ed81
120
css/styles.css
120
css/styles.css
|
|
@ -386,9 +386,9 @@ RIGHT PANEL
|
|||
position: absolute;
|
||||
width: 17%; /* background-color: rgba(255, 0, 254, 0.4);
|
||||
*/
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.btnPrint {
|
||||
|
|
@ -431,40 +431,59 @@ top: 0px;
|
|||
|
||||
/*
|
||||
|
||||
PRINT PROGRESS DISPLAY
|
||||
PROGRESSGUAGE AND THERMOMETER SHARED STYLES
|
||||
|
||||
*/
|
||||
#printProgressContainer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 370px;
|
||||
width: 110px;
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
.progressbarAppear,.thermometerAppear {
|
||||
right: 1.5% !important;
|
||||
}
|
||||
|
||||
#progressbarContainer {
|
||||
margin: 3px 0px;
|
||||
width: inherit;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #333;
|
||||
border-radius: 5px;
|
||||
/*
|
||||
|
||||
PROGRESS GUAGE
|
||||
|
||||
*/
|
||||
.progressbarCanvasContainerParent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progressAmount {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
#progressbar {
|
||||
position: relative; /*margin-bottom: -20px;
|
||||
#progressbarCanvasContainer {
|
||||
/*position: absolute;
|
||||
*/
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #4c4;
|
||||
border: 0px solid #f0f;
|
||||
border-radius: 3px;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -472,17 +491,46 @@ width: 0%;
|
|||
THERMOMETER
|
||||
|
||||
*/
|
||||
.thermometerContainerParent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#thermometerContainer {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 370px;
|
||||
/*position: absolute;
|
||||
*/
|
||||
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 {
|
||||
/*background: #59b2b8;
|
||||
*/
|
||||
/*zoom: 2;
|
||||
/*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);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
29
index.html
29
index.html
|
|
@ -39,9 +39,15 @@
|
|||
|
||||
<!-- right panel -->
|
||||
<div class="rightpanel shadowleft">
|
||||
<div class='sidebutton shadowleft'></div>
|
||||
<img class="btnPrint btn" src="img/buttons/btnPrint.png" /><br/>
|
||||
<img class="btnStop btn disabled" src="img/buttons/btnStop.png" /><br/>
|
||||
<!--<div class='sidebutton shadowleft'></div>-->
|
||||
<!--<div><img class="btnPrint btn" src="img/buttons/btnPrint.png" /></div>-->
|
||||
<!--<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
|
||||
<div id="printProgressContainer">
|
||||
<label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
|
||||
|
|
@ -50,9 +56,25 @@
|
|||
</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">
|
||||
<canvas id="thermometerCanvas" width="100" height="125"></canvas>
|
||||
</div>
|
||||
-->
|
||||
<div class="btnsSettingsInfo">
|
||||
<img class="btnSettings btn" src="img/buttons/btnSettings.png">
|
||||
<img class="btnInfo btn" src="img/buttons/btnInfo.png">
|
||||
|
|
@ -128,6 +150,7 @@
|
|||
<script src="js/gcodeGenerating.js"></script>
|
||||
<script src="js/init_layout.js"></script>
|
||||
<script src="js/Printer.js"></script>
|
||||
<script src="js/Progressbar.js"></script>
|
||||
<script src="js/Thermometer.js"></script>
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/sidebar.js"></script>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,17 @@ function Progressbar() {
|
|||
this.$canvas;
|
||||
this.canvas;
|
||||
this.context;
|
||||
this.$container;
|
||||
|
||||
this.isInitted = false;
|
||||
|
||||
this.init = function(targCanvas) {
|
||||
this.enabled = true;
|
||||
|
||||
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');
|
||||
|
|
@ -88,4 +93,14 @@ function Progressbar() {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,11 +124,15 @@ function Thermometer() {
|
|||
}
|
||||
}
|
||||
this.show = function() {
|
||||
this.$container.show();
|
||||
this.$container.addClass("thermometerAppear");
|
||||
// $("#progressbarCanvasContainer").addClass("thermometerAppear");
|
||||
// this.$container.show();
|
||||
this.enabled = true;
|
||||
}
|
||||
this.hide = function() {
|
||||
this.$container.hide();
|
||||
this.$container.removeClass("thermometerAppear");
|
||||
// $("#progressbarCanvasContainer").removeClass("thermometerAppear");
|
||||
// this.$container.hide();
|
||||
this.enabled = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
24
js/main.js
24
js/main.js
|
|
@ -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 printer = new Printer();
|
||||
var progressbar = new Progressbar();
|
||||
var thermometer = new Thermometer();
|
||||
var settingsWindow = new SettingsWindow();
|
||||
|
||||
|
|
@ -53,6 +54,10 @@ $(function() {
|
|||
|
||||
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
|
||||
|
||||
progressbar = new Progressbar();
|
||||
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
|
||||
|
||||
|
||||
printer.init();
|
||||
$(document).on(Printer.UPDATE,update);
|
||||
|
||||
|
|
@ -93,8 +98,25 @@ $(function() {
|
|||
}, 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() {
|
||||
console.log("settingsLoaded");
|
||||
console.log("autoHeatup: ",settings["printer.heatup.enabled"]);
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
position: absolute;
|
||||
width: 17%;
|
||||
/* background-color: rgba(255, 0, 254, 0.4);*/
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.btnPrint {
|
||||
margin: 1% 5% 5% 0%;
|
||||
|
|
@ -22,12 +22,12 @@
|
|||
height: auto;
|
||||
}
|
||||
.btnsSettingsInfo {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
right: 5px;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
right: 5px;
|
||||
width: 80%;
|
||||
margin: 1% 5%;
|
||||
max-width: 160px;
|
||||
max-width: 160px;
|
||||
}
|
||||
.btnInfo {
|
||||
width: 40%;
|
||||
|
|
@ -41,59 +41,140 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
PROGRESSGUAGE AND THERMOMETER SHARED STYLES
|
||||
|
||||
*/
|
||||
.progressbarAppear, .thermometerAppear {
|
||||
// margin-right: 1.5% !important;
|
||||
right: 1.5% !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
PRINT PROGRESS DISPLAY
|
||||
PROGRESS GUAGE
|
||||
|
||||
*/
|
||||
#printProgressContainer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 370px;
|
||||
width: 110px;
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
display:none;
|
||||
.progressbarCanvasContainerParent {
|
||||
position:relative;
|
||||
width:100%;
|
||||
}
|
||||
#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 {
|
||||
#progressbarCanvasContainer {
|
||||
/*position: absolute;*/
|
||||
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;
|
||||
/*right: 0;*/
|
||||
/*top: 10%;*/
|
||||
width: 30%;
|
||||
float:right;
|
||||
/*height: auto;*/
|
||||
|
||||
transition: right .40s 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;
|
||||
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
|
||||
|
||||
*/
|
||||
.thermometerContainerParent {
|
||||
position:relative;
|
||||
width:100%;
|
||||
}
|
||||
#thermometerContainer {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 370px;
|
||||
/*position: absolute;*/
|
||||
position: relative;
|
||||
/*right: 0;*/
|
||||
/*top: 40%;*/
|
||||
width: 25%;
|
||||
float: right;
|
||||
|
||||
transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
right: -30%;
|
||||
}
|
||||
|
||||
#thermometerCanvas {
|
||||
/*background: #59b2b8;*/
|
||||
/*zoom: 2;*/
|
||||
/*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);
|
||||
}
|
||||
|
||||
|
||||
//#thermometerContainer {
|
||||
// position: absolute;
|
||||
// right: 25px;
|
||||
// top: 370px;
|
||||
//}
|
||||
//#thermometerCanvas {
|
||||
///*background: #59b2b8;*/
|
||||
///*zoom: 2;*/
|
||||
//}
|
||||
|
|
|
|||
Loading…
Reference in New Issue