Added support for browsing graphs by day

Hopefully fixed issues with db connection

Author: ggilestro

smart_incubator/server/smart_controller.py

@@ -13,6 +13,7 @@
 import json
 
 import MySQLdb
+import MySQLdb.cursors
 from MySQLdb.constants import FIELD_TYPE
 
 
@@ -55,38 +56,42 @@ def connect(self):
         _db_user_name = self._db_credentials["username"]
         _db_user_pass = self._db_credentials["password"]
 
-        my_conv = { FIELD_TYPE.TIMESTAMP: str }
-
-        self.connection = MySQLdb.connect('127.0.0.1', _db_user_name, _db_user_pass, _db_name, conv=my_conv)
-        self.cursor = self.connection.cursor(MySQLdb.cursors.DictCursor)
-        self.cursor.connection.autocommit(True)
+        my_conv = { FIELD_TYPE.TIMESTAMP: str, FIELD_TYPE.FLOAT: float, FIELD_TYPE.TINY: int, FIELD_TYPE.LONG: int, FIELD_TYPE.INT24: int }
+        
+        logging.debug("Creating a new connection with the `incubators` db")
+        self.connection = MySQLdb.connect('localhost', _db_user_name, _db_user_pass, _db_name, conv=my_conv, cursorclass=MySQLdb.cursors.DictCursor)
 
     @staticmethod
     def _timestamp_to_datetime(timestamp):
         return time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(timestamp))
 
     def insert(self, query):
         try:
-            self.cursor.execute(query)
-            self.connection.commit()
-            self.connection.close()
-        except:
+            with self.connection as cursor:
+                cursor.execute(query)
+                self.connection.commit()
+
+        # For some reason, I often get a "OperationalError: (2006, 'MySQL server has gone away')"
+        # Could not debug this - so, as workaround, I create a new connection if the existing one is broken
+        # This, however, could result in a dangerous loop if connection keeps dropping
+        except (AttributeError, MySQLdb.OperationalError):
 
             self.connect()
-            self.cursor.execute(query)
-            self.connection.commit()            
-            self.connection.close()
+            self.insert(query)
 
     def query(self, query):
-        self.connect()
-        cursor = self.connection.cursor( MySQLdb.cursors.DictCursor )
-        cursor.execute(query)
-        result = cursor.fetchall()
-        
-        #self.cursor.execute(query)
-        #result = self.cursor.fetchall()
+        try:
+            
+            with self.connection as cursor:
+                cursor.execute(query)
+                result = cursor.fetchall()
 
-        self.connection.close()
+        # For some reason, I often get a "OperationalError: (2006, 'MySQL server has gone away')"
+        # Could not debug this - so, as workaround, I create a new connection if the existing one is broken
+        except (AttributeError, MySQLdb.OperationalError):
+
+            self.connect()
+            result = self.query(query)
 
         return result
 
@@ -149,7 +154,7 @@ def retrieve_last_line(self, incubator):
         else:
             select_query = "SELECT * FROM incubators WHERE id = %s ORDER BY device_time DESC LIMIT 1;" % incubator
             data = self.query(select_query)[0]
-
+            
         return data
 
 class SerialController(threading.Thread):
@@ -306,7 +311,7 @@ def getlastData(self, incubator, json_mode=True):
         """
         """
         if self._database:
-            if json_mode or (incubator != 'all' and incubator >= 0 ):
+            if json_mode or (incubator != 'all' and incubator < 0 ):
                 return json.dumps(self._database.retrieve_last_line(incubator))
             else:
                 return self._database.retrieve_last_line(incubator)
@@ -394,7 +399,7 @@ def sendCommand(self, inc_id, cmd, value):
     def update(self, inc_id, values):
         """
         """
-        current = self.getlastData( inc_id )
+        current = self.getlastData( inc_id , json_mode=False)
 
         resp = ""
 
@@ -404,7 +409,7 @@ def update(self, inc_id, values):
         if values['set_hum'] != current['set_hum'] : 
             if self.sendCommand(inc_id, cmd='set_hum', value=values['set_hum']):
                 resp += "Humidity set to %s\n" % values['set_hum']
-        if values['set_light'] != current['set_light'] : 
+        if values['set_light'] != int(current['set_light']) : # why light is not being converted by mysqldb??!
             if self.sendCommand(inc_id, cmd='set_light', value=values['set_light']):
                 resp += "Light set to %s\n" % values['set_light']
         if values['dd_mode'] != current['dd_mode'] : 
@@ -459,7 +464,7 @@ def __init__(self, host, port, serial_fetcher):
     def _route(self):
         self._app.get('/', callback=self._index)
         self._app.get('/serial', callback=self._serialmonitor)
-        self._app.route('/graph/<inc_id>', callback=self._get_graph, method=["post", "get"])
+        self._app.route('/graph/<inc_id>/<day>', callback=self._get_graph, method=["post", "get"])
 
         self._app.get('/json/<inc_id>', callback=self._incubator_json)
         self._app.get('/incubator/<inc_id>/<days>', callback=self._get_incubator)
@@ -487,7 +492,7 @@ def _send_to_serial(self):
         self._serial_fetcher.sendRaw ( myDict['line'] )
         return {"result": "OK"}
 
-    def _get_graph(self, inc_id):
+    def _get_graph(self, inc_id, day):
 
         rep = {}
         if request.forms.get("submitted"):
@@ -502,7 +507,8 @@ def _get_graph(self, inc_id):
         else:  
             rep['message'] = '' 
 
-        rep['incubator_id'] = inc_id 
+        rep['incubator_id'] = inc_id
+        rep['day'] = day
         return  template('static/graph.tpl', rep)
 
     def _incubator_json(self, inc_id=0):
@@ -558,7 +564,6 @@ def transfer_file_to_db(filename, db_credentials):
         logging.debug("Logger in DEBUG mode")
 
     db_credentials = {'username': 'incubators', 'password' : 'incubators', 'db_name' : 'incubators' }
-    db = mySQLDatabase(db_credentials)
 
     if option_dict['output']:
         serial_fetcher = SerialController(option_dict["port"], filename=option_dict['output'])

smart_incubator/server/static/css/style.css

@@ -130,6 +130,25 @@
         text-align: left;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     }
+
+    #time-buttons{
+        background: #ffffff;
+        border-color: #e7e7e7;
+        border: 2px;
+        padding: 20px;
+        float: left;
+        margin-top: 50px;
+        margin-left: 0px;
+        margin-bottom: 0px;
+        width: 100%;
+        text-align: center;
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    }
+     
+    #time-buttons a {
+        color: #777;
+        text-decoration: none;
+        }
 
     form input[type=submit] {
     background-color: #777;

smart_incubator/server/static/graph.tpl

@@ -49,9 +49,10 @@
     <script type="text/javascript">
         
     $(document).ready(function(){ 
-            loadGraphs({{incubator_id}}, 1);
+            loadGraphs({{incubator_id}}, {{day}});
             loadIncubatorForm({{incubator_id}});
             show_alert_box();
+            show_time_buttons({{incubator_id}}, {{day}});
         });  
         
     </script>
@@ -85,14 +86,19 @@
     <div class="graph lost">
         <div class="agile">
             <div class="w3l-agile">
-                <h3>Incubator {{incubator_id}}</h3>
+                <h3 id="graph-title">Incubator {{incubator_id}}</h3></h2>
             </div>
             <div id="temperature"></div>
             <div id="humidity"></div>
             <div id="light"></div>
         </div>
     </div>
 
+    <div class="agile">
+        <div id="time-buttons"></div>
+    </div>
+
+
     <div class="agile">
         <div id="incubator-data"></div>
     </div>

smart_incubator/server/static/js/script.js

@@ -14,7 +14,7 @@ function loadDashboard(){
 
                 $('#main').append('\
                     <div class="incubator" id="'+item.id+'">\
-                        <h2><a href="/graph/'+item.id+'">Incubator '+item.id+'</a></h2>\
+                        <h2><a href="/graph/'+item.id+'/1">Incubator '+item.id+'</a></h2>\
                         <div class="data">\
                             <p class="temperature">'+item.temperature+'</p><div class="light"></div></div>\
                         <div class="data">\
@@ -103,7 +103,7 @@ function refreshDashboard(){
 
             })
           }); 
-     window.setTimeout(refreshDashboard,10000);
+     window.setTimeout(refreshDashboard,1*60*1000); //we refresh once a minute
   }
 
 function refreshSerialMonitor(){
@@ -154,7 +154,18 @@ function show_alert_box() {
 
 }
 
+function show_time_buttons(incubator_id, day) {
+ 
+    $("#time-buttons").html('<a id=\"previous-day\" href="/graph/'+incubator_id+'/'+(day+1)+'">Previous Day</a> - <a id=\"next-day\" href="/graph/'+incubator_id+'/'+(day-1)+'">Next Day</a>');
+     
+}
+
 function loadGraphs(incubator_id, days){
+        
+        dateFrom = moment().subtract(days,'d').format('YYYY MMM DD dddd');
+        
+        $('#graph-title').text( $('#graph-title').text() + " - " + dateFrom )
+        
         $.ajax({
             url: "/incubator/"+incubator_id+"/"+days,
             dataType: 'JSON',