Updated to 0.5sec update interval and fixed jerky progress bar

oven.py

@@ -54,7 +54,7 @@ class Oven (threading.Thread):
                     self.power = 0.0
                 if self.runtime >= self.totaltime:
                     self.reset()
-            time.sleep(1)
+            time.sleep(0.5)
 
     def get_state(self):
         state = {
@@ -91,7 +91,7 @@ class TempSensor(threading.Thread):
                 power_delta = 8.0*self.oven.power
                 self.temperature += (time_delta+power_delta)
 
-            time.sleep(1)
+            time.sleep(0.5)
 
 class Profile():
     def __init__(self,json_data):

ovenWatcher.py

@@ -15,7 +15,7 @@ class OvenWatcher(threading.Thread):
         while True:
             oven_state = self.oven.get_state()
             self.notifyAll(oven_state)
-            time.sleep(1)
+            time.sleep(0.5)
 
     def addObserver(self,observer):
         self.observers.append(observer)

public/assets/js/picoreflow.js

@@ -4,7 +4,7 @@ function updateProgress(percentage){
     if(state=="RUNNING") {
     if(percentage > 100) percentage = 100;
     $('#progressBar').css('width', percentage+'%');
-    if(percentage>=5) $('#progressBar').html(percentage+'%');
+    if(percentage>=5) $('#progressBar').html(parseInt(percentage)+'%');
 } else {
     $('#progressBar').css('width', 0+'%');
     $('#progressBar').html('');
@@ -347,3 +347,190 @@ function update_profile(id) {
    textColor: '#E0E0E0',
    maskColor: 'rgba(255,255,255,0.3)'
 };
+
+
+
+
+function getHCOptions() {
+
+  var options =
+  {
+      title: { text: '' },
+      xAxis: {
+          title: { text: 'Time (s)' },
+          type: 'integer',
+          tickPixelInterval: 60
+      },
+      yAxis: {
+          title: { text: 'Temperature (\xB0C)' },
+          tickInterval: 25,
+          min: 0,
+          max: 300
+      },
+      tooltip: {
+            formatter: function() {
+                return Highcharts.numberFormat(this.y, 0);
+            }
+      },
+      chart: {
+          type: 'line',
+          renderTo: 'graph_container',
+          animation: true,
+          zoomType: 'x',
+          marginTop: 30,
+          marginRight: 30,
+          events: {
+              load: function() {
+                  var series = this.series[1];
+
+
+                  ws_status.onmessage = function(e)
+                  {
+                      x = JSON.parse(e.data);
+
+                      if(state!="EDIT")
+                      {
+                      state = x.state;
+                      }
+
+                      $('#state').html(state);
+
+                      updateProgress(parseFloat(x.runtime)/parseFloat(x.totaltime)*100);
+
+                      $('#act_temp').html(Highcharts.numberFormat(x.temperature, 0) + ' \xB0C');
+                      $('#power').css("background-color", (x.power > 0.5 ? "#75890c" : "#1F1E1A") );
+
+
+                      if (x.target == 0)
+                      {
+                          $('#target_temp').html('OFF');
+                      }
+                      else
+                      {
+                        $('#target_temp').html(Highcharts.numberFormat(x.target, 0) + ' \xB0C');
+                  }
+                      //console.log (e.data);
+                      //console.log('Percent finished:' + perc);
+
+                      if(state!="EDIT")
+                      {
+
+                      if(state=="RUNNING")
+                      {
+                          $("#nav_start").hide();
+                          $("#nav_stop").show();
+                        series.addPoint([x.runtime, x.temperature], true, false);
+
+                        left = parseInt(x.totaltime-x.runtime);
+                        var minutes = Math.floor(left / 60);
+                        var seconds = left - minutes * 60;
+                        $('#eta').html(minutes+':'+ (seconds < 10 ? "0" : "") + seconds);
+
+                      }
+                      else
+                      {
+                          $("#nav_start").show();
+                          $("#nav_stop").hide();
+                      }
+                  }
+
+                  }
+
+                  /*
+                  var socket = io.connect('http://10.1.1.110:8080');
+                  socket.on('sample', function (sample) {
+                      // when a sample arrives we plot it
+                      series.addPoint([sample.x, sample.y], true, false);
+                      $('#act_temp').html(Highcharts.numberFormat(sample.y, 0) + ' \xB0C');
+
+
+                  });
+
+                  socket.on('error', function () {
+
+                   $(document).trigger("add-alerts", [
+                    {
+                      'message': "No communication to control server",
+                      'priority': 'error'
+                    }
+                  ]);
+
+
+                  })
+
+                  // Called when the connection to the server is opened.
+                  socket.onopen = function () {
+                    alert("Connection with server open.");
+                  };
+
+                  // Called when the connection to the server is closed.
+                  socket.onclose = function () {
+                    alert("Connection with server closed; Maybe the server wasn't found, it shut down or you're behind a firewall/proxy.");
+                  };
+*/
+              }
+          },
+          resetZoomButton: {
+             position: {
+                 align: 'right',
+                 verticalAlign: 'top'
+             }
+          }
+      },
+
+      plotOptions: {
+         series: {
+             cursor: 'all-scroll',
+             point: {
+                 events: {
+                     /*
+                     drag: function (e) {
+                        $('#drag').html('Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 0) + '</b>');
+                     },
+                     drop: function () {
+                        $('#drop').html('In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 0) + '</b>');
+                     }*/
+                 }
+             },
+             stickyTracking: false
+         },
+
+      },
+
+      credits: {
+        enabled: false
+      },
+
+      series: [{
+        name: 'Ref',
+          data: [
+            [1, 25   ],
+            [70, 150 ],
+            [180, 183 ],
+            [210, 230 ],
+            [240, 183 ],
+            [300, 25 ]
+          ],
+          draggableX: false,
+          draggableY: false,
+          dragMinY: 0,
+          dragMaxY: 250,
+          marker: {
+            enabled: false
+          }
+        },
+        {
+          name: 'Act',
+          data: [
+            [0,0]
+          ],
+          marker: {
+            enabled: false
+          }
+        }]
+
+  };
+
+  return (options);
+
+}

public/index.html

@@ -22,7 +22,6 @@
 
  <div class="container">
 
-  <!-- Static navbar -->
   <div id="main_status">
    <div class="pull-left" style="margin: 14px">
     <span id="act_temp" class="display" style="color: #75890c">25 &deg;C</span>
@@ -41,7 +40,6 @@
    </div>
 
   </div>
-  <!-- /Static navbar -->
 
   <div class="panel panel-default">
    <div class="panel-heading">
@@ -75,8 +73,6 @@
   </div>
  </div><!-- /container -->
 
-
-
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
@@ -104,7 +100,6 @@
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 
-
 <script>
 
 var state = "IDLE";
@@ -211,9 +206,6 @@ ws_storage.onopen = function()
 
 
 
-
-
-
 $("#e2").select2({
   placeholder: "Temperature Curve",
   allowClear: false
@@ -230,9 +222,6 @@ $("#e2").on("change", function(e) {
 var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
 
 
-
-
-
 $(function() {
   Highcharts.setOptions({
       global: {
@@ -240,189 +229,7 @@ $(function() {
       }
   });
 
-
+graph = new Highcharts.Chart(getHCOptions());
-
-  var options =
-  {
-      title: { text: '' },
-      xAxis: {
-          title: { text: 'Time (s)' },
-          type: 'integer',
-          tickPixelInterval: 60
-      },
-      yAxis: {
-          title: { text: 'Temperature (\xB0C)' },
-          tickInterval: 25,
-          min: 0,
-          max: 300
-      },
-      tooltip: {
-            formatter: function() {
-                return Highcharts.numberFormat(this.y, 0);
-            }
-      },
-      chart: {
-          type: 'line',
-          renderTo: 'graph_container',
-          animation: true,
-          zoomType: 'x',
-          marginTop: 30,
-          marginRight: 30,
-          events: {
-              load: function() {
-                  var series = this.series[1];
-
-
-                  ws_status.onmessage = function(e)
-                  {
-                      x = JSON.parse(e.data);
-
-                      if(state!="EDIT")
-                      {
-                      state = x.state;
-                      }
-
-                      $('#state').html(state);
-
-                      updateProgress(parseInt(parseFloat(x.runtime)/parseFloat(x.totaltime)*100));
-
-                      $('#act_temp').html(Highcharts.numberFormat(x.temperature, 0) + ' \xB0C');
-                      $('#power').css("background-color", (x.power > 0.5 ? "#75890c" : "#1F1E1A") );
-
-
-                      if (x.target == 0)
-                      {
-                          $('#target_temp').html('OFF');
-                      }
-                      else
-                      {
-                        $('#target_temp').html(Highcharts.numberFormat(x.target, 0) + ' \xB0C');
-                  }
-                      //console.log (e.data);
-                      //console.log('Percent finished:' + perc);
-
-                      if(state!="EDIT")
-                      {
-
-                      if(state=="RUNNING")
-                      {
-                          $("#nav_start").hide();
-                          $("#nav_stop").show();
-                        series.addPoint([x.runtime, x.temperature], true, false);
-
-                        left = parseInt(x.totaltime-x.runtime);
-                        var minutes = Math.floor(left / 60);
-                        var seconds = left - minutes * 60;
-                        $('#eta').html(minutes+':'+ (seconds < 10 ? "0" : "") + seconds);
-
-
-
-                      }
-                      else
-                      {
-                          $("#nav_start").show();
-                          $("#nav_stop").hide();
-                      }
-                  }
-
-                  }
-
-                  /*
-                  var socket = io.connect('http://10.1.1.110:8080');
-                  socket.on('sample', function (sample) {
-                      // when a sample arrives we plot it
-                      series.addPoint([sample.x, sample.y], true, false);
-                      $('#act_temp').html(Highcharts.numberFormat(sample.y, 0) + ' \xB0C');
-
-
-                  });
-
-                  socket.on('error', function () {
-
-                   $(document).trigger("add-alerts", [
-                    {
-                      'message': "No communication to control server",
-                      'priority': 'error'
-                    }
-                  ]);
-
-
-                  })
-
-                  // Called when the connection to the server is opened.
-                  socket.onopen = function () {
-                    alert("Connection with server open.");
-                  };
-
-                  // Called when the connection to the server is closed.
-                  socket.onclose = function () {
-                    alert("Connection with server closed; Maybe the server wasn't found, it shut down or you're behind a firewall/proxy.");
-                  };
-*/
-              }
-          },
-          resetZoomButton: {
-             position: {
-                 align: 'right',
-                 verticalAlign: 'top'
-             }
-          }
-      },
-
-      plotOptions: {
-         series: {
-             cursor: 'all-scroll',
-             point: {
-                 events: {
-                     /*
-                     drag: function (e) {
-                        $('#drag').html('Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 0) + '</b>');
-                     },
-                     drop: function () {
-                        $('#drop').html('In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 0) + '</b>');
-                     }*/
-                 }
-             },
-             stickyTracking: false
-         },
-
-      },
-
-      credits: {
-        enabled: false
-      },
-
-      series: [{
-        name: 'Ref',
-          data: [
-            [1, 25   ],
-            [70, 150 ],
-            [180, 183 ],
-            [210, 230 ],
-            [240, 183 ],
-            [300, 25 ]
-          ],
-          draggableX: false,
-          draggableY: false,
-          dragMinY: 0,
-          dragMaxY: 250,
-          marker: {
-            enabled: false
-          }
-        },
-        {
-          name: 'Act',
-          data: [
-            [0,0]
-          ],
-          marker: {
-            enabled: false
-          }
-        }]
-
-  };
-
-graph = new Highcharts.Chart(options);
 
 
 });