PolyCraft/kiln-controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI Display

Browse Source
This commit is contained in:
chrono 2013-12-06 00:47:43 +01:00
parent 80234fb0dd
commit 37ee896309
3 changed files with 79 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
public/assets/css/picoreflow.css
View File

@ -18,30 +18,63 @@ body {
background: #b9b6af;
}
#status {
margin-top: 15px;
color: #d8d3c5;
font-weight: normal;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.85),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.85),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.85),inset 0 0 9px 2px #000;
border-color: #282828;
height: 65px;
}
.display {
display: inline-block;
text-align: right;
padding-right: 10px;
font-size: 20px;
height: 35px;
line-height: 35px;
width: 80px;
font-size: 28px;
font-weight: normal;
text-shadow: 0px 0px 10px #000000, -1px -1px #000;
height: 45px;
line-height: 45px;
width: 90px;
vertical-align: middle;
color: #d8d3c5;
font-weight: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #1F1E1A;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
border-color: #000000;
}
.ds-panel {
background-color: rgba(33, 32, 28, 0.55);
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.ds-title {
display: inline-block;
font-size: 10px;
}
.ds-title p {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.ds-num {
font-family: "LCDN";
line-height: 38px;
line-height: 48px;
border-right: 1px solid #b9b6af;
}
.ds-led {
@ -55,21 +88,7 @@ body {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#main_status {
margin-top: 15px;
color: #d8d3c5;
font-weight: normal;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.35),inset 0 0 9px 2px #000;
border-color: #282828;
height: 97px;
text-shadow: none;
}
@ -129,14 +148,16 @@ body {
}
.progress {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #1F1E1A;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75),inset 0 0 9px 2px #000;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background: none;
border-color: #000000;
border-top: 1px solid #b9b6af;
margin: 0;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
}
.progress-bar {

6
public/assets/js/picoreflow.js
View File

@ -111,7 +111,7 @@ function abortTask()
function enterNewMode()
{
state="EDIT"
$('#main_status').slideUp();
$('#status').slideUp();
$('#edit').show();
$('#profile_selector').hide();
$('#btn_controls').hide();
@ -127,7 +127,7 @@ function enterNewMode()
function enterEditMode()
{
state="EDIT"
$('#main_status').slideUp();
$('#status').slideUp();
$('#edit').show();
$('#profile_selector').hide();
$('#btn_controls').hide();
@ -144,7 +144,7 @@ function leaveEditMode()
$('#edit').hide();
$('#profile_selector').show();
$('#btn_controls').show();
$('#main_status').slideDown();
$('#status').slideDown();
$('#profile_table').slideUp();
graph.profile.points.show = false;
graph.profile.draggable = false;

37
public/index.html
View File

@ -27,25 +27,28 @@
<div class="container">
<div id="main_status">
<div class="pull-left" style="margin: 14px">
<span id="act_temp" class="display ds-num">25 &deg;C</span>
<span id="target_temp" class="display ds-num" style="color: #75890c">000 &deg;C</span>
<span id="state" class="display ds-num" style="width: 120px; text-align: center; padding-right:0">Idle</span>
<span class="display" style="width: 95px; padding-right: 0; text-align: center">
<span id="heat" class="ds-led" style="width: 35px; background: rgba(46, 12, 12, 0.62)">&#110;</span>
<span id="air" class="ds-led" style="width: 35px; background: rgba(46, 38, 12, 0.62)">&#116;</span>
<span id="cool" class="ds-led" style="width: 35px; background: rgba(12, 28, 46, 0.62)">&#44;</span>
</span>
</div>
<div class="clearfix"></div>
<div class="progress progress-striped active" style="margin: 14px; margin-top: 0">
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only"></span>
<div id="status">
<div class="ds-panel">
<div class="ds-title"><p>Real</p></div>
<div id="act_temp" class="display ds-num">25 &deg;C</div>
<div class="ds-title"><p style="color: #75890c">Target</p></div>
<div id="target_temp" class="display ds-num" style="color: #75890c">000 &deg;C</div>
<div id="state" class="display ds-num" style="width: 150px; text-align: center; padding-right:0">Idle</div>
<div class="display">
<div style="width: 95px; padding-right: 0; text-align: center">
<span id="heat" class="ds-led" style="width: 35px; background: rgba(46, 12, 12, 0.62)">&#110;</span>
<span id="air" class="ds-led" style="width: 35px; background: rgba(46, 38, 12, 0.62)">&#116;</span>
<span id="cool" class="ds-led" style="width: 35px; background: rgba(12, 28, 46, 0.62)">&#44;</span>
</div>
</div>
</div>
<div>
<div class="progress progress-striped active">
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
</div>
</div>
<div class="panel panel-default">