From 95ee68f7d17e26d227192d3fa6142a498fbba817 Mon Sep 17 00:00:00 2001
From: chrono <chrono@open-resource.org>
Date: Fri, 6 Dec 2013 23:36:40 +0100
Subject: [PATCH] Profile point inputs update on graph change now

---
 public/assets/css/picoreflow.css          | 82 ++++++++++++++---------
 public/assets/js/jquery.flot.draggable.js |  1 +
 public/assets/js/picoreflow.js            | 18 ++---
 public/index.html                         | 12 ++--
 4 files changed, 69 insertions(+), 44 deletions(-)

diff --git a/public/assets/css/picoreflow.css b/public/assets/css/picoreflow.css
index 067abac..d89dcf7 100644
--- a/public/assets/css/picoreflow.css
+++ b/public/assets/css/picoreflow.css
@@ -48,7 +48,7 @@ body {
     font-weight: normal;
     height: 45px;
     line-height: 45px;
-    width: 100px;
+    width: 105px;
     vertical-align: middle;
     color: #d8d3c5;
     border-color: #000000;
@@ -57,9 +57,9 @@ body {
 .ds-panel {
     border-top: 1px solid #000;
     background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
-    -moz-box-shadow: inset 0 0 10px 0 #000;
-    -webkit-box-shadow: inset 0 0 10px 0 #000;
-    box-shadow: inset 0 0 10px 0 #000;
+    -moz-box-shadow: inset 0 0 42px 0 #000;
+    -webkit-box-shadow: inset 0 0 42px 0 #000;
+    box-shadow: inset 0 0 42px 0 #000;
 }
 
 .ds-title-panel {
@@ -83,7 +83,7 @@ body {
     font-size: 10px;
     height: 18px;
     line-height: 18px;
-    width: 100px;
+    width: 105px;
     border-right: 1px solid #b9b6af;
     vertical-align: top;
     text-align: center;
@@ -95,20 +95,19 @@ body {
     font-family: "Digi";
     border-right: 1px solid #b9b6af;
     white-space: nowrap;
+    text-shadow: 0 0 25px rgba(0, 0, 0, 1);
 }
 
 .ds-unit {
     font-family: "Arial";
     font-size: 22px;
-    text-shadow:
-    -1px -1px 0 #000,
-    1px 1px 0 #000;
     vertical-align: top;
     line-height: 35px;
     margin-left: 4px;
 }
 
 .ds-led {
+margin: 0;
     margin-top: 1px;
     padding-top: 1px;
     font-family: "NoticeStd";
@@ -123,6 +122,27 @@ body {
 }
 
 
+.progress {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    background: #3f3e3a;
+    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 {
+    background-color: #75890c;
+    font-family: "LCDN";
+    color: #D6FC13;
+    text-shadow: 0 -1px #333, 1px 0 #333, 0 1px #333, -1px 0 #333;
+}
+
+
 .panel-default {
     -webkit-border-radius: 7px;
     -moz-border-radius: 7px;
@@ -131,7 +151,7 @@ body {
     -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);
     margin-top: 15px;
-    background: #3F3E3A;
+    background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
 }
 
 .panel-heading {
@@ -146,6 +166,17 @@ body {
     border-top-right-radius: 5px;
 }
 
+.panel-body {
+    -moz-box-shadow: inset 0 0 42px 0 #000;
+    -webkit-box-shadow: inset 0 0 42px 0 #000;
+    box-shadow: inset 0 0 42px 0 #000;
+    -webkit-border-bottom-left-radius: 7px;
+    -webkit-border-bottom-right-radius: 7px;
+    -moz-border-radius-bottomleft: 7px;
+    -moz-border-radius-bottomright: 7px;
+    background: rgba(0,0,0,0.2)
+}
+
 #profile_selector {
     border: 1px solid rgb(194, 194, 194);
     -webkit-border-radius: 5px;
@@ -178,27 +209,6 @@ body {
     line-height: 32px;
 }
 
-.progress {
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    background: #3f3e3a;
-    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 {
-    background-color: #75890c;
-    font-family: "LCDN";
-    color: #D6FC13;
-    text-shadow: 0 -1px #333, 1px 0 #333, 0 1px #333, -1px 0 #333;
-}
-
-
 .graph {
     width: 100%;
     height: 300px;
@@ -206,6 +216,18 @@ body {
     line-height: 1.2em;
 }
 
+.edit-points {
+    margin-bottom: 5px;
+}
+
+.edit-points h3 {
+    margin-top: 5px;
+    margin-bottom: 15px;
+}
+
+.edit-points .row{
+    margin-bottom: 5px;
+}
 
 .btn-success {
     background: rgb(164,179,87);
diff --git a/public/assets/js/jquery.flot.draggable.js b/public/assets/js/jquery.flot.draggable.js
index 35952c5..f6cd1a5 100644
--- a/public/assets/js/jquery.flot.draggable.js
+++ b/public/assets/js/jquery.flot.draggable.js
@@ -77,6 +77,7 @@
                     }
 
                     plot.draw();
+                    updateProfileTable();
 
                     var retx = points[didx*ps];
                     var rety = points[didx*ps+1];
diff --git a/public/assets/js/picoreflow.js b/public/assets/js/picoreflow.js
index d7db97a..4486944 100644
--- a/public/assets/js/picoreflow.js
+++ b/public/assets/js/picoreflow.js
@@ -66,20 +66,22 @@ function updateProgress(percentage)
 
 function updateProfileTable()
 {
-    var html = '<div class="container"><h3>Profile Points</h3>';
+    var html = '<div class="edit-points"><h3>Profile Points</h3>';
+    var dps = 0;
 
     for(var i=0; i<graph.profile.data.length;i++)
     {
-        html += '<div class="row"><div class="col-md-2"><div class="input-group">';
+        html += '<div class="row"><div class="col-xs-4"><div class="input-group">';
         html += '<span class="input-group-addon">' + i + '</span>';
         html += '<input type="text" class="form-control" value="'+ graph.profile.data[i][0] + '" />';
-        html += '</div></div><div class="col-md-2"><div class="input-group">';
-        html += '<span class="input-group-addon">' + i + '</span>';
+        html += '</div></div><div class="col-xs-4">';
         html += '<input type="text" class="form-control" value="'+ graph.profile.data[i][1] + '" />';
-        html += '</div></div><div class="col-md-2"><div class="input-group">';
-        html += '<span class="input-group-addon">' + i + '</span>';
-        html += '<input type="text" class="form-control" value="degpersec" />';
-        html += '</div></div></div>'
+        html += '</div><div class="col-xs-4">';
+
+        if (i>=1) dps = (graph.profile.data[i][1]-graph.profile.data[i-1][1])/(graph.profile.data[i][0]-graph.profile.data[i-1][0]);
+
+        html += '<input type="text" class="form-control" value="' + dps + '" />';
+        html += '</div></div>';
     }
 
     html += '</div>';
diff --git a/public/index.html b/public/index.html
index 6d430ed..5f0c0a2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,19 +30,19 @@
   <div id="status">
    <div class="ds-title-panel">
     <div class="ds-title">Real Temp</div>
-    <div class="ds-title" style="width: 95px">Target Temp</div>
+    <div class="ds-title" style="width: 100px">Target Temp</div>
     <div class="ds-title" style="width: 70px">Progress</div>
     <div class="ds-title">ETA</div>
    </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" style="color: #75890c; width: 95px"><span id="target_temp">---</span><span class="ds-unit">&deg;C</span></div>
+    <div class="display ds-num" style="color: #75890c; width: 100px"><span id="target_temp">---</span><span class="ds-unit">&deg;C</span></div>
     <div id="state_prg" class="display ds-num" style="width: 70px">---</div>
     <div id="state_eta" class="display ds-num">--:--</div>
-    <div class="display pull-right" style="width: 115px; 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 class="display pull-right" style="width: 115px; padding-right: 0; text-align: center; white-space: nobreak">
+     <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>