diff --git a/public/assets/css/picoreflow.css b/public/assets/css/picoreflow.css index 3300972..00c7cf3 100644 --- a/public/assets/css/picoreflow.css +++ b/public/assets/css/picoreflow.css @@ -115,7 +115,14 @@ background: #3F3E3A; } .btn-success { - background-image: linear-gradient(to bottom,#5c6b09 100%,#75890c 100%); +background: rgb(164,179,87); +background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%); +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1))); +background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); background-color: #75890c; } @@ -142,14 +149,40 @@ background: #3F3E3A; } .alert { -background-image: -webkit-gradient(linear,left 0,left 100%,from(#d9534f),to(#c12e2a)); -background-image: -webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%); -background-image: -moz-linear-gradient(top,#d9534f 0,#c12e2a 100%); -background-image: linear-gradient(to bottom,#d9534f 0,#c12e2a 100%); -background-repeat: repeat-x; -border-color: #b92c28; + background-image: -webkit-gradient(linear,left 0,left 100%,from(#f5f5f5),to(#e8e8e8)); + background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%); + background-image: -moz-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%); + background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#ffe8e8e8',GradientType=0); + -moz-box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75); + -webkit-box-shadow: 0 0 1.5em 0 rgba(0,0,0,0.75); + box-shadow: 0 0 1.1em 0 rgba(0,0,0,0.75); } +.alert-success { +background: rgb(164,179,87); +background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%); +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(164,179,87,1)), color-stop(100%,rgba(117,137,12,1))); +background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +background: -o-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +background: -ms-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); + color: #fff; +} + +.alert-error { +background: rgb(206,57,20); +background: -moz-linear-gradient(top, rgba(206,57,20,1) 0%, rgba(163,38,0,1) 100%); +background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,57,20,1)), color-stop(100%,rgba(163,38,0,1))); +background: -webkit-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); +background: -o-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); +background: -ms-linear-gradient(top, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); +background: linear-gradient(to bottom, rgba(206,57,20,1) 0%,rgba(163,38,0,1) 100%); +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce3914', endColorstr='#a32600',GradientType=0 ); + color: #fff; +} .graph { width: 100%; diff --git a/public/assets/js/picoreflow.js b/public/assets/js/picoreflow.js index 4652b0a..9cebc12 100644 --- a/public/assets/js/picoreflow.js +++ b/public/assets/js/picoreflow.js @@ -35,7 +35,14 @@ graph.live = function update_profile(id) { selected_profile = id; + job_time = parseInt(profiles[id].data[profiles[id].data.length-1][0]); + var kwh = (3850*job_time/3600/1000).toFixed(2); + var cost = (kwh*0.26).toFixed(2); + var minutes = Math.floor(job_time/60), seconds = job_time-minutes*60; + job_time = minutes+':'+ (seconds < 10 ? "0" : "") + seconds; $('#sel_prof').html(profiles[id].name); + $('#sel_prof_eta').html(job_time); + $('#sel_prof_cost').html(kwh + ' kWh (EUR: '+ cost +')'); graph.profile.data = profiles[id].data; graph.plot = $.plot("#graph_container", [ graph.profile, graph.live ] , getOptions()); } @@ -294,8 +301,21 @@ $(document).ready(function() if (state!=state_last) { - if(state_last == "RUNNING") - updateProgress(0); + if(state_last == "RUNNING") + { + $('#target_temp').html('---'); + updateProgress(0); + $.bootstrapGrowl(" Run completed", { + ele: 'body', // which element to append to + type: 'success', // (null, 'info', 'error', 'success') + offset: {from: 'top', amount: 250}, // 'top', or 'bottom' + align: 'center', // ('left', 'right', or 'center') + width: 385, // (integer, or 'auto') + delay: 0, + allow_dismiss: true, + stackup_spacing: 10 // spacing between consecutively stacked growls. + }); + } } if(state=="RUNNING") @@ -312,7 +332,7 @@ $(document).ready(function() eta = minutes+':'+ (seconds < 10 ? "0" : "") + seconds; updateProgress(parseFloat(x.runtime)/parseFloat(x.totaltime)*100); - $('#state').html(parseInt(parseFloat(x.runtime)/parseFloat(x.totaltime)*100) + '% ' + eta); + $('#state').html(parseInt(parseFloat(x.runtime)/parseFloat(x.totaltime)*100) + '% ' + eta); $('#target_temp').html(parseInt(x.target) + ' \xB0C'); } diff --git a/public/index.html b/public/index.html index 6c25a15..40db960 100644 --- a/public/index.html +++ b/public/index.html @@ -28,8 +28,8 @@
25 °C - OFF - Idle + 000 °C + Idle n t , @@ -68,7 +68,7 @@
- +
@@ -81,18 +81,18 @@
-