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

More UI status update fixes

Browse Source
This commit is contained in:
chrono 2013-12-10 14:10:56 +00:00
parent 7865cf40c1
commit 1dbe03c0a1
4 changed files with 70 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,7 @@ body {
-moz-border-radius: 7px;
border-radius: 7px;
border: 1px solid #ddd;
height: 81px;
height: 80px;
-moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55);
-webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.55);
box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.55);
@ -46,7 +46,6 @@ body {
}
.ds-panel {
border-top: 1px solid #000;
background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
-moz-box-shadow: inset 0 0 42px 0 #000;
-webkit-box-shadow: inset 0 0 42px 0 #000;
@ -114,11 +113,56 @@ body {
}
.ds-led {
margin: -5px;
font-family: "Tables";
font-size: 38px;
text-align: center;
color: #1F1E1A;
text-shadow: 0 0 5px #000, 0 0 5px #000;
border-left: 1px solid #b9b6af;
height: 40px;
width: 42px;
display: inline-block;
}
.ds-led-hazard-active {
color: rgb(255, 204, 0);
background: -moz-radial-gradient(center, ellipse cover, rgba(242,195,67,1) 0%, rgba(241,218,54,0.26) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(242,195,67,1)), color-stop(100%,rgba(241,218,54,0.26))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(242,195,67,1) 0%,rgba(241,218,54,0.26) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(242,195,67,1) 0%,rgba(241,218,54,0.26) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(242,195,67,1) 0%,rgba(241,218,54,0.26) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(242,195,67,1) 0%,rgba(241,218,54,0.26) 100%); /* W3C */
}
.ds-led-cool-active {
color: rgb(74, 159, 255);
background: -moz-radial-gradient(center, ellipse cover, rgba(124,197,239,1) 0%, rgba(48,144,209,0.26) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(124,197,239,1)), color-stop(100%,rgba(48,144,209,0.26))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(124,197,239,1) 0%,rgba(48,144,209,0.26) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(124,197,239,1) 0%,rgba(48,144,209,0.26) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(124,197,239,1) 0%,rgba(48,144,209,0.26) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(124,197,239,1) 0%,rgba(48,144,209,0.26) 100%); /* W3C */
}
.ds-led-heat-active {
color: rgb(214, 42, 0);
background: -moz-radial-gradient(center, ellipse cover, rgba(214,25,25,1) 0%, rgba(214,42,0,0.26) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(214,25,25,1)), color-stop(100%,rgba(214,42,0,0.26))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(214,25,25,1) 0%,rgba(214,42,0,0.26) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(214,25,25,1) 0%,rgba(214,42,0,0.26) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(214,25,25,1) 0%,rgba(214,42,0,0.26) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(214,25,25,1) 0%,rgba(214,42,0,0.26) 100%); /* W3C */
}
.ds-led-air-active {
color: rgb(240, 240, 240);
background: -moz-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(221,221,221,0.26) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(221,221,221,0.26))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%,rgba(221,221,221,0.26) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%,rgba(221,221,221,0.26) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%,rgba(221,221,221,0.26) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(221,221,221,1) 0%,rgba(221,221,221,0.26) 100%); /* W3C */
}
.ds-trend {
@ -135,9 +179,22 @@ body {
.ds-state {
border: none;
width: initial;
text-align: center;
width: 168px;
padding: 0;
}
.ds-state {
border: none;
width: initial;
text-align: center;
width: 168px;
padding: 0;
}
.ds-text {
border: none;
width: initial;
font-family: sans-serif;
font-size: 32px;
}

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

@ -456,7 +456,7 @@ $(document).ready(function()
eta = minutes+':'+ (seconds < 10 ? "0" : "") + seconds;
updateProgress(parseFloat(x.runtime)/parseFloat(x.totaltime)*100);
$('#state').html(eta);
$('#state').html('<span class="glyphicon glyphicon-time" style="font-size: 22px; font-weight: normal"></span><span style="font-family: Digi; font-size: 40px;">' + eta + '</span>');
$('#target_temp').html(parseInt(x.target));
}
@ -468,25 +468,19 @@ $(document).ready(function()
}
$('#act_temp').html(parseInt(x.temperature));
$('#hazard').css("color", (x.temperature > 45 ? "rgb(255, 204, 0)" : "rgba(12, 12, 12, 0.62") );
$('#heat').css("color", (x.heat > 0.5 ? "rgba(233, 28, 0, 0.84)" : "rgba(46, 12, 12, 0.62") );
//$('#heat').css("text-shadow", (x.heat > 0.5 ? "0 0 5px rgba(233, 28, 0, 0.84), inset 0 0 5px 2px rgba(255,255,255,0.25)" : "0 0 1.1em rgba(0,0,0,0.75)") );
$('#air').css("color", (x.air > 0.5 ? "rgba(216, 211, 197, 1)" : "rgba(55, 55, 55, 0.62)") );
//$('#air').css("text-shadow", (x.air > 0.5 ? "0 0 5px rgba(240, 199, 67, 0.84), inset 0 0 5px 2px rgba(255,255,255,0.25)" : "0 0 1.1em rgba(0,0,0,0.75)") );
$('#cool').css("color", (x.cool > 0.5 ? "rgba(74, 159, 255, 0.84)" : "rgba(12, 28, 46, 0.62)") );
//$('#cool').css("text-shadow", (x.cool > 0.5 ? "0 0 5px rgba(74, 159, 255, 0.84), inset 0 0 5px 2px rgba(255,255,255,0.25)" : "0 0 1.1em rgba(0,0,0,0.75)") );
if (x.heat > 0.5) { $('#heat').addClass("ds-led-heat-active"); } else { $('#heat').removeClass("ds-led-heat-active"); }
if (x.cool > 0.5) { $('#cool').addClass("ds-led-cool-active"); } else { $('#cool').removeClass("ds-led-cool-active"); }
if (x.air > 0.5) { $('#air').addClass("ds-led-air-active"); } else { $('#air').removeClass("ds-led-air-active"); }
if (x.temperature > 45) { $('#hazard').addClass("ds-led-hazard-active"); } else { $('#hazard').removeClass("ds-led-hazard-active"); }
state_last = state;
}
};
// Control Socket ////////////////////////////////
ws_control.onopen = function()
{
@ -552,9 +546,7 @@ $(document).ready(function()
$('#e2').select2('val', i);
updateProfile(i);
}
}
};

12
public/index.html
View File

@ -30,18 +30,14 @@
<div class="ds-title-panel">
<div class="ds-title">Sensor Temp</div>
<div class="ds-title">Target Temp</div>
<div class="ds-title ds-state">Status</div>
<div class="ds-title ds-state pull-right" style="border-left: 1px solid #ccc;">Status</div>
</div>
<div class="clearfix"></div>
<div class="ds-panel">
<div class="display ds-num"><span id="act_temp">25</span><span class="ds-unit">&deg;C</span></div>
<div class="display ds-num ds-target"><span id="target_temp">---</span><span class="ds-unit">&deg;C</span></div>
<div class="display ds-num ds-state" id="state"></div>
<div class="display pull-right">
<span class="ds-led" id="hazard">&#73;</span>
<span class="ds-led" id="air">&#91;</span>
<span class="ds-led" id="heat">&#92;</span>
<span class="ds-led" id="cool">&#108;</span>
</div>
<div class="display ds-num ds-text" id="state"></div>
<div class="display pull-right ds-state" style="padding-right:0"><span class="ds-led" id="heat">&#92;</span><span class="ds-led" id="cool">&#108;</span><span class="ds-led" id="air">&#91;</span><span class="ds-led" id="hazard">&#73;</span></div>
</div>
<div class="clearfix"></div>
<div>

2
storage/profiles/leadfree.json
View File

@ -1 +1 @@
{"type": "profile", "data": [[0, 25], [90, 150], [180, 183], [211, 237], [234, 184], [2297420, 137]], "name": "leadfree"}
{"type": "profile", "data": [[0, 25], [90, 150], [180, 183], [211, 237], [234, 184], [313, 26]], "name": "leadfree"}