Refactored edit points feature and added slope calculation + indictator

public/assets/css/picoreflow.css

@@ -98,6 +98,21 @@ body {
     text-shadow: 0 0 25px rgba(0, 0, 0, 1);
 }
 
+.ds-input {
+    color: #d8d3c5;
+    font-family: "Digi";
+    font-size: 24px;
+    text-shadow: 0 0 12px rgba(0, 0, 0, 1);
+    background: #3F3E3A url('/picoreflow/assets/images/panel_bg.png') repeat;
+    -moz-box-shadow: inset 0 0 12px 0 #000;
+    -webkit-box-shadow: inset 0 0 12px 0 #000;
+    box-shadow: inset 0 0 12px 0 #000;
+    text-align: right;
+    padding: 0;
+    padding-right: 7px;
+
+}
+
 .ds-unit {
     font-family: "Arial";
     font-size: 22px;
@@ -107,7 +122,7 @@ body {
 }
 
 .ds-led {
-margin: 0;
+    margin: 0;
     margin-top: 1px;
     padding-top: 1px;
     font-family: "NoticeStd";
@@ -298,6 +313,6 @@ margin: 0;
     color: #fff;
 }
 
-td {
+.modal-body td {
     width: 50%;
 }

public/assets/js/picoreflow.js

@@ -66,25 +66,29 @@ function updateProgress(percentage)
 
 function updateProfileTable()
 {
-    var html = '<div class="edit-points"><h3>Profile Points</h3>';
     var dps = 0;
+    var slope = "";
+    var color = [];
+
+    var html = '<h3>Profile Points</h3><div class="table-responsive" style="scroll: none"><table class="table table-striped">';
+        html += '<tr><th style="width: 50px">#</th><th>Target Time</th><th>Target Temperature</th><th>Slope in &deg;C/s</th><th></th></tr>';
 
     for(var i=0; i<graph.profile.data.length;i++)
     {
-        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-xs-4">';
-        html += '<input type="text" class="form-control" value="'+ graph.profile.data[i][1] + '" />';
-        html += '</div><div class="col-xs-4">';
+        if (i>=1) dps = Math.round( (graph.profile.data[i][1]-graph.profile.data[i-1][1])/(graph.profile.data[i][0]-graph.profile.data[i-1][0]) * 10) / 10;
+        if (dps  > 0) { slope = "up";     color[0]="red";  color[1]="rgba(233, 28, 0, 0.54)"; } else
+        if (dps  < 0) { slope = "down";   color[0]="blue";  color[1]="rgba(74, 159, 255, 0.54)"; dps *= -1; } else
+        if (dps == 0) { slope = "right";  color[0]="white";  color[1]="grey"; }
 
-        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 += '<tr><td><h4>' + i + '</h4></td>';
+        html += '<td><input type="text" class="form-control" value="'+ graph.profile.data[i][0] + '" style="width: 60px" /></td>';
+        html += '<td><input type="text" class="form-control" value="'+ graph.profile.data[i][1] + '" style="width: 60px" /></td>';
+        html += '<td><div class="input-group"><span class="glyphicon glyphicon-arrow-' + slope +
+                ' input-group-addon" style="top: 0; text-shadow: 1px 1px 0 rgba(255, 255, 255, 1), -1px -1px 0 rgba(0, 0, 0, 1); font-weight: bold; color: '+color[0]+'; background: '+color[1]+'"></span><input type="text" class="form-control ds-input" value="' + dps + '" style="width: 50px" /></div></td>';
+        html += '<td>&nbsp;</td></tr>';
     }
 
-    html += '</div>';
+    html += '</table></div>';
 
     $('#profile_table').html(html);
 }
@@ -453,7 +457,7 @@ $(document).ready(function()
 
         ws_control.onopen = function()
         {
-            
+
         };
 
         ws_control.onmessage = function(e)

storage/profiles/leadfree.json

@@ -1 +1 @@
-{"type": "profile", "data": [[0, 20], [71.39490824491047, 115.00000000000001], [209.77995110024452, 248.12734082397003], [300, 0]], "name": "leadfree"}
+{"type": "profile", "data": [[0, 25], [90, 150], [180, 183], [211, 237], [234, 184], [280, 25]], "name": "leadfree"}