Adding plotting interface

raspberry-backend/app.py

+#!/usr/bin/env python3
+
 # Python monitoring code
 # USAGE:  python3 app.py
 #
-# Last update: March 28, 2020
+# Last update: March 29, 2020
 
-
-#!/usr/bin/env python3
-
-import json
 from time import time
-from random import random
+import json
 from flask import Flask, render_template, make_response
-import operator
 import sqlite3
+import json
 
 WEBAPP = Flask(__name__)
 
-
 @WEBAPP.route('/')
 def hello_world():
-    return render_template('index.html', data='test')
+    return render_template('index.html', result=live_data())
 
 @WEBAPP.route('/live-data')
 def live_data():
     """
     Query the sqlite3 table
-    Output in json format    
+    Output in json format
     """
-     
-    data = {'ts' : None, 'temperature' : None, 'pressure' : None}  
-  
-    sqlite_file = 'database/HEC_monitoringDB.sqlite'    
+
+    data = {'created_at' : None, 'temperature' : None, 'pressure' : None}
+
+    sqlite_file = 'database/HEC_monitoringDB.sqlite'
     with sqlite3.connect(sqlite_file) as conn:
         cursor = conn.cursor()
-        cursor.execute("SELECT time, temperature, pressure FROM HEC_monitor ORDER BY ROWID DESC LIMIT 1")
+        cursor.execute("SELECT created_at, temperature, pressure FROM hec_monitor ORDER BY ROWID DESC LIMIT 1")
         fetched = cursor.fetchone()
-        data['ts'] = float(fetched[0])
+        data['created_at'] = fetched[0]
         data['temperature'] = fetched[1]
-        data['pressure'] = fetched[2]       
+        data['pressure'] = fetched[2]
 
-    response = make_response(json.dumps(data))  
+    response = make_response(json.dumps(data).encode('utf-8'))
     response.content_type = 'application/json'
     return response
 
-
-
 if __name__ == '__main__':
     WEBAPP.run(debug=True, host='127.0.0.1', port=5000)
 

raspberry-backend/arduino_recorder.py

+#!/usr/bin/env python3
+
 # HEV monitoring application
 # USAGE:  python3 arduino_recorder.py
 #
-# Last update: March 28, 2020
-
-
-#!/usr/bin/env python3
+# Last update: March 29, 2020
 
-
-import os
 import sys
 import time
 import argparse
 import sqlite3
-from datetime import datetime
 from random import random
+from datetime import datetime
 
 
 SQLITE_FILE = 'database/HEC_monitoringDB.sqlite'  # name of the sqlite database file
-TABLE_NAME = 'HEC_monitor'  # name of the table to be created
-FIELD_TYPE = 'INTEGER' 
-
-
-COLUMNS = []
-COLUMNS.append('time')
-COLUMNS.append('temperature')
-COLUMNS.append('pressure')
-
-
+TABLE_NAME = 'hec_monitor'  # name of the table to be created
 
 def get_temperature():
     """
     Returns a random number to simulate data obtained from a sensor
     """
-    return random()*20
-
+    return random() * 20
 
 def get_pressure():
     """
     Returns a random number to simulate data obtained from a sensor
     """
-    return random()*10
-
-
+    return random() * 10
 
 def database_setup():
-   '''
-   This function creates the sqlite3 table with the timestamp column 
-   and the columns for temperature and humidity
-   '''
-   sql_command = 'CREATE TABLE IF NOT EXISTS {tn} ({tc} {ft}'.format(
-           tn=TABLE_NAME, ft=FIELD_TYPE, tc=COLUMNS[0]
-   )
-   for col in COLUMNS[1:]:
-       sql_command += ', {} {}'.format(col, FIELD_TYPE)
-   sql_command += ')'
-
-
-
-   # Create the table if it does not exist
-   try:
-       # Connecting to the database file
-       conn = sqlite3.connect(SQLITE_FILE)
-       c = conn.cursor()
-       c.execute(sql_command)
-       conn.commit()
-       conn.close()
-   except sqlite3.Error as err:
-       raise Exception("sqlite3 Error. Create failed: {}".format(str(err)))
-
-
+    '''
+    This function creates the sqlite3 table with the timestamp column 
+    and the columns for temperature and humidity
+    '''
+    print('Creating ' + TABLE_NAME + ' table..' )
+
+    # Create the table if it does not exist
+    try:
+        # Connecting to the database file
+        conn = sqlite3.connect(SQLITE_FILE)
+        conn.execute('''CREATE TABLE IF NOT EXISTS ''' + TABLE_NAME + ''' (
+           created_at     INTEGER        NOT NULL,
+           temperature    FLOAT           NOT NULL,
+           pressure       FLOAT           NOT NULL
+           );'''
+        )
+        conn.commit()
+        conn.close()
+    except sqlite3.Error as err:
+        raise Exception("sqlite3 Error. Create failed: {}".format(str(err)))
+    finally:
+        print('Table ' + TABLE_NAME + ' created successfully!')
 
 def monitoring(source_address):
-   '''
-   Store arduino data in the sqlite3 table. 
-   '''
-  
-   epoch = datetime(1970, 1, 1)
-   
-   with sqlite3.connect(SQLITE_FILE) as conn:
-       cursor = conn.cursor()
-       while True:
-           current_time = datetime.now()
-           # Computing the time in seconds since the epoch because easier to manipulate. 
-           timestamp = (current_time -epoch).total_seconds() * 1000
-       
-           try:
-               cursor.execute(
-                       'INSERT INTO {tn} VALUES '
-                       '(:time, :temperature, :pressure)'
-                       .format(tn=TABLE_NAME),
-                       {
-                           'time':timestamp,
-                           'temperature':get_temperature(),
-                           'pressure':get_pressure()                           
-                       })
-               conn.commit()
-           except sqlite3.Error as err:
-                raise Exception("sqlite3 error. Insert into database failed: {}".format(str(err)))
-       
- 
-           print("Writing to database...")
-           sys.stdout.flush()
-           time.sleep(1)
-   
+    '''
+    Store arduino data in the sqlite3 table. 
+    '''
+
+    epoch = datetime(1970, 1, 1)
+
+    with sqlite3.connect(SQLITE_FILE) as conn:
+        cursor = conn.cursor()
+        while True:
+            current_time = datetime.now()
+            # Computing the time in seconds since the epoch because easier to manipulate. 
+            timestamp = (current_time -epoch).total_seconds() * 1000
+
+            random_data = {
+                'time' : timestamp,
+                'temperature': get_temperature(),
+                'pressure': get_pressure()
+            }
+            print("Writing to database...")
+            try:
+                cursor.execute(
+                        'INSERT INTO {tn} VALUES '
+                        '(:time, :temperature, :pressure)'
+                        .format(tn=TABLE_NAME),
+                        random_data
+                )
+                conn.commit()
+            except sqlite3.Error as err:
+                 raise Exception("sqlite3 error. Insert into database failed: {}".format(str(err)))
+            finally:
+                print("temperature: {temperature}  pressure: {pressure}".format(**random_data))
+                sys.stdout.flush()
+                time.sleep(1)
 
 def parse_args():
     parser = argparse.ArgumentParser(description='Python script monitorign Arduino data')
-    parser.add_argument('--source', default='192.168.0.10') 
-    return parser.parse_args()    
-
-
+    parser.add_argument('--source', default='ttys0 or similar')
+    return parser.parse_args()
 
 if __name__ == "__main__":
-   ARGS = parse_args()
-   database_setup()
-   monitoring(ARGS.source)
-   get_sensor_data()
-
-
-
-
-
-
-
-
-
-
-
-
+    ARGS = parse_args()
+    database_setup()
+    monitoring(ARGS.source)
+    get_sensor_data()

raspberry-backend/static/css/main.css

+.chart {
+  height: 200px;
+}
+
+.spacer {
+  height: 20px;
+}

raspberry-backend/static/js/exporting.js

+/*
+ Highcharts JS v7.1.1 (2019-04-09)
+
+ Exporting module
+
+ (c) 2010-2019 Torstein Honsi
+
+ License: www.highcharts.com/license
+*/
+(function(f){"object"===typeof module&&module.exports?(f["default"]=f,module.exports=f):"function"===typeof define&&define.amd?define("highcharts/modules/exporting",["highcharts"],function(h){f(h);f.Highcharts=h;return f}):f("undefined"!==typeof Highcharts?Highcharts:void 0)})(function(f){function h(c,C,f,n){c.hasOwnProperty(C)||(c[C]=n.apply(null,f))}f=f?f._modules:{};h(f,"modules/full-screen.src.js",[f["parts/Globals.js"]],function(c){c.FullScreen=function(c){this.init(c.parentNode)};c.FullScreen.prototype=
+{init:function(c){c.requestFullscreen?c.requestFullscreen():c.mozRequestFullScreen?c.mozRequestFullScreen():c.webkitRequestFullscreen?c.webkitRequestFullscreen():c.msRequestFullscreen&&c.msRequestFullscreen()}}});h(f,"mixins/navigation.js",[],function(){return{initUpdate:function(c){c.navigation||(c.navigation={updates:[],update:function(c,f){this.updates.forEach(function(n){n.update.call(n.context,c,f)})}})},addUpdate:function(c,f){f.navigation||this.initUpdate(f);f.navigation.updates.push({update:c,
+context:f})}}});h(f,"modules/exporting.src.js",[f["parts/Globals.js"],f["mixins/navigation.js"]],function(c,f){var h=c.defaultOptions,n=c.doc,A=c.Chart,v=c.addEvent,C=c.removeEvent,D=c.fireEvent,r=c.createElement,E=c.discardElement,w=c.css,p=c.merge,t=c.pick,F=c.objectEach,y=c.extend,J=c.isTouchDevice,z=c.win,H=z.navigator.userAgent,G=c.SVGRenderer,I=c.Renderer.prototype.symbols,K=/Edge\/|Trident\/|MSIE /.test(H),L=/firefox/i.test(H);y(h.lang,{viewFullscreen:"View in full screen",printChart:"Print chart",
+downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",downloadPDF:"Download PDF document",downloadSVG:"Download SVG vector image",contextButtonTitle:"Chart context menu"});h.navigation||(h.navigation={});p(!0,h.navigation,{buttonOptions:{theme:{},symbolSize:14,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,verticalAlign:"top",width:24}});p(!0,h.navigation,{menuStyle:{border:"1px solid #999999",background:"#ffffff",padding:"5px 0"},menuItemStyle:{padding:"0.5em 1em",
+color:"#333333",background:"none",fontSize:J?"14px":"11px",transition:"background 250ms, color 250ms"},menuItemHoverStyle:{background:"#335cad",color:"#ffffff"},buttonOptions:{symbolFill:"#666666",symbolStroke:"#666666",symbolStrokeWidth:3,theme:{padding:5}}});h.exporting={type:"image/png",url:"https://export.highcharts.com/",printMaxWidth:780,scale:2,buttons:{contextButton:{className:"highcharts-contextbutton",menuClassName:"highcharts-contextmenu",symbol:"menu",titleKey:"contextButtonTitle",menuItems:"viewFullscreen printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split(" ")}},
+menuItemDefinitions:{viewFullscreen:{textKey:"viewFullscreen",onclick:function(){this.fullscreen=new c.FullScreen(this.container)}},printChart:{textKey:"printChart",onclick:function(){this.print()}},separator:{separator:!0},downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChart()}},downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},downloadSVG:{textKey:"downloadSVG",
+onclick:function(){this.exportChart({type:"image/svg+xml"})}}}};c.post=function(b,a,c){var d=r("form",p({method:"post",action:b,enctype:"multipart/form-data"},c),{display:"none"},n.body);F(a,function(a,b){r("input",{type:"hidden",name:b,value:a},null,d)});d.submit();E(d)};y(A.prototype,{sanitizeSVG:function(b,a){var c=b.indexOf("\x3c/svg\x3e")+6,d=b.substr(c);b=b.substr(0,c);a&&a.exporting&&a.exporting.allowHTML&&d&&(d='\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"'+a.chart.width+'" height\x3d"'+
+a.chart.height+'"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e'+d+"\x3c/body\x3e\x3c/foreignObject\x3e",b=b.replace("\x3c/svg\x3e",d+"\x3c/svg\x3e"));b=b.replace(/zIndex="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/url\(("|&quot;)(\S+)("|&quot;)\)/g,"url($2)").replace(/url\([^#]+#/g,"url(#").replace(/<svg /,'\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" ').replace(/ (|NS[0-9]+\:)href=/g," xlink:href\x3d").replace(/\n/," ").replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g,
+'$1\x3d"rgb($2)" $1-opacity\x3d"$3"').replace(/&nbsp;/g,"\u00a0").replace(/&shy;/g,"\u00ad");this.ieSanitizeSVG&&(b=this.ieSanitizeSVG(b));return b},getChartHTML:function(){this.styledMode&&this.inlineStyles();return this.container.innerHTML},getSVG:function(b){var a,u,d,f,m,k=p(this.options,b);u=r("div",null,{position:"absolute",top:"-9999em",width:this.chartWidth+"px",height:this.chartHeight+"px"},n.body);d=this.renderTo.style.width;m=this.renderTo.style.height;d=k.exporting.sourceWidth||k.chart.width||
+/px$/.test(d)&&parseInt(d,10)||(k.isGantt?800:600);m=k.exporting.sourceHeight||k.chart.height||/px$/.test(m)&&parseInt(m,10)||400;y(k.chart,{animation:!1,renderTo:u,forExport:!0,renderer:"SVGRenderer",width:d,height:m});k.exporting.enabled=!1;delete k.data;k.series=[];this.series.forEach(function(a){f=p(a.userOptions,{animation:!1,enableMouseTracking:!1,showCheckbox:!1,visible:a.visible});f.isInternal||k.series.push(f)});this.axes.forEach(function(a){a.userOptions.internalKey||(a.userOptions.internalKey=
+c.uniqueKey())});a=new c.Chart(k,this.callback);b&&["xAxis","yAxis","series"].forEach(function(d){var c={};b[d]&&(c[d]=b[d],a.update(c))});this.axes.forEach(function(b){var d=c.find(a.axes,function(a){return a.options.internalKey===b.userOptions.internalKey}),e=b.getExtremes(),u=e.userMin,e=e.userMax;d&&(void 0!==u&&u!==d.min||void 0!==e&&e!==d.max)&&d.setExtremes(u,e,!0,!1)});d=a.getChartHTML();D(this,"getSVG",{chartCopy:a});d=this.sanitizeSVG(d,k);k=null;a.destroy();E(u);return d},getSVGForExport:function(b,
+a){var c=this.options.exporting;return this.getSVG(p({chart:{borderRadius:0}},c.chartOptions,a,{exporting:{sourceWidth:b&&b.sourceWidth||c.sourceWidth,sourceHeight:b&&b.sourceHeight||c.sourceHeight}}))},getFilename:function(){var b=this.userOptions.title&&this.userOptions.title.text,a=this.options.exporting.filename;if(a)return a;"string"===typeof b&&(a=b.toLowerCase().replace(/<\/?[^>]+(>|$)/g,"").replace(/[\s_]+/g,"-").replace(/[^a-z0-9\-]/g,"").replace(/^[\-]+/g,"").replace(/[\-]+/g,"-").substr(0,
+24).replace(/[\-]+$/g,""));if(!a||5>a.length)a="chart";return a},exportChart:function(b,a){a=this.getSVGForExport(b,a);b=p(this.options.exporting,b);c.post(b.url,{filename:b.filename||this.getFilename(),type:b.type,width:b.width||0,scale:b.scale,svg:a},b.formAttributes)},print:function(){function b(b){(a.fixedDiv?[a.fixedDiv,a.scrollingContainer]:[a.container]).forEach(function(a){b.appendChild(a)})}var a=this,c=[],d=n.body,f=d.childNodes,m=a.options.exporting.printMaxWidth,k,e;if(!a.isPrinting){a.isPrinting=
+!0;a.pointer.reset(null,0);D(a,"beforePrint");if(e=m&&a.chartWidth>m)k=[a.options.chart.width,void 0,!1],a.setSize(m,void 0,!1);[].forEach.call(f,function(a,b){1===a.nodeType&&(c[b]=a.style.display,a.style.display="none")});b(d);setTimeout(function(){z.focus();z.print();setTimeout(function(){b(a.renderTo);[].forEach.call(f,function(a,b){1===a.nodeType&&(a.style.display=c[b])});a.isPrinting=!1;e&&a.setSize.apply(a,k);D(a,"afterPrint")},1E3)},1)}},contextMenu:function(b,a,u,d,f,m,k){var e=this,x=e.options.navigation,
+l=e.chartWidth,q=e.chartHeight,h="cache-"+b,g=e[h],B=Math.max(f,m),p;g||(e.exportContextMenu=e[h]=g=r("div",{className:b},{position:"absolute",zIndex:1E3,padding:B+"px",pointerEvents:"auto"},e.fixedDiv||e.container),p=r("div",{className:"highcharts-menu"},null,g),e.styledMode||w(p,y({MozBoxShadow:"3px 3px 10px #888",WebkitBoxShadow:"3px 3px 10px #888",boxShadow:"3px 3px 10px #888"},x.menuStyle)),g.hideMenu=function(){w(g,{display:"none"});k&&k.setState(0);e.openMenu=!1;c.clearTimeout(g.hideTimer);
+D(e,"exportMenuHidden")},e.exportEvents.push(v(g,"mouseleave",function(){g.hideTimer=setTimeout(g.hideMenu,500)}),v(g,"mouseenter",function(){c.clearTimeout(g.hideTimer)}),v(n,"mouseup",function(a){e.pointer.inClass(a.target,b)||g.hideMenu()}),v(g,"click",function(){e.openMenu&&g.hideMenu()})),a.forEach(function(a){"string"===typeof a&&(a=e.options.exporting.menuItemDefinitions[a]);if(c.isObject(a,!0)){var b;a.separator?b=r("hr",null,null,p):(b=r("div",{className:"highcharts-menu-item",onclick:function(b){b&&
+b.stopPropagation();g.hideMenu();a.onclick&&a.onclick.apply(e,arguments)},innerHTML:a.text||e.options.lang[a.textKey]},null,p),e.styledMode||(b.onmouseover=function(){w(this,x.menuItemHoverStyle)},b.onmouseout=function(){w(this,x.menuItemStyle)},w(b,y({cursor:"pointer"},x.menuItemStyle))));e.exportDivElements.push(b)}}),e.exportDivElements.push(p,g),e.exportMenuWidth=g.offsetWidth,e.exportMenuHeight=g.offsetHeight);a={display:"block"};u+e.exportMenuWidth>l?a.right=l-u-f-B+"px":a.left=u-B+"px";d+m+
+e.exportMenuHeight>q&&"top"!==k.alignOptions.verticalAlign?a.bottom=q-d-B+"px":a.top=d+m-B+"px";w(g,a);e.openMenu=!0},addButton:function(b){var a=this,c=a.renderer,d=p(a.options.navigation.buttonOptions,b),f=d.onclick,m=d.menuItems,k,e,h=d.symbolSize||12;a.btnCount||(a.btnCount=0);a.exportDivElements||(a.exportDivElements=[],a.exportSVGElements=[]);if(!1!==d.enabled){var l=d.theme,q=l.states,n=q&&q.hover,q=q&&q.select,g;a.styledMode||(l.fill=t(l.fill,"#ffffff"),l.stroke=t(l.stroke,"none"));delete l.states;
+f?g=function(b){b&&b.stopPropagation();f.call(a,b)}:m&&(g=function(b){b&&b.stopPropagation();a.contextMenu(e.menuClassName,m,e.translateX,e.translateY,e.width,e.height,e);e.setState(2)});d.text&&d.symbol?l.paddingLeft=t(l.paddingLeft,25):d.text||y(l,{width:d.width,height:d.height,padding:0});a.styledMode||(l["stroke-linecap"]="round",l.fill=t(l.fill,"#ffffff"),l.stroke=t(l.stroke,"none"));e=c.button(d.text,0,0,g,l,n,q).addClass(b.className).attr({title:t(a.options.lang[d._titleKey||d.titleKey],"")});
+e.menuClassName=b.menuClassName||"highcharts-menu-"+a.btnCount++;d.symbol&&(k=c.symbol(d.symbol,d.symbolX-h/2,d.symbolY-h/2,h,h,{width:h,height:h}).addClass("highcharts-button-symbol").attr({zIndex:1}).add(e),a.styledMode||k.attr({stroke:d.symbolStroke,fill:d.symbolFill,"stroke-width":d.symbolStrokeWidth||1}));e.add(a.exportingGroup).align(y(d,{width:e.width,x:t(d.x,a.buttonOffset)}),!0,"spacingBox");a.buttonOffset+=(e.width+d.buttonSpacing)*("right"===d.align?-1:1);a.exportSVGElements.push(e,k)}},
+destroyExport:function(b){var a=b?b.target:this;b=a.exportSVGElements;var f=a.exportDivElements,d=a.exportEvents,h;b&&(b.forEach(function(b,d){b&&(b.onclick=b.ontouchstart=null,h="cache-"+b.menuClassName,a[h]&&delete a[h],a.exportSVGElements[d]=b.destroy())}),b.length=0);a.exportingGroup&&(a.exportingGroup.destroy(),delete a.exportingGroup);f&&(f.forEach(function(b,d){c.clearTimeout(b.hideTimer);C(b,"mouseleave");a.exportDivElements[d]=b.onmouseout=b.onmouseover=b.ontouchstart=b.onclick=null;E(b)}),
+f.length=0);d&&(d.forEach(function(b){b()}),d.length=0)}});G.prototype.inlineToAttributes="fill stroke strokeLinecap strokeLinejoin strokeWidth textAnchor x y".split(" ");G.prototype.inlineBlacklist=[/-/,/^(clipPath|cssText|d|height|width)$/,/^font$/,/[lL]ogical(Width|Height)$/,/perspective/,/TapHighlightColor/,/^transition/,/^length$/];G.prototype.unstyledElements=["clipPath","defs","desc"];A.prototype.inlineStyles=function(){function b(b){return b.replace(/([A-Z])/g,function(b,a){return"-"+a.toLowerCase()})}
+function a(c){function u(a,g){q=v=!1;if(h){for(r=h.length;r--&&!v;)v=h[r].test(g);q=!v}"transform"===g&&"none"===a&&(q=!0);for(r=f.length;r--&&!q;)q=f[r].test(g)||"function"===typeof a;q||m[g]===a&&"svg"!==c.nodeName||e[c.nodeName][g]===a||(-1!==d.indexOf(g)?c.setAttribute(b(g),a):n+=b(g)+":"+a+";")}var g,m,n="",t,q,v,r;if(1===c.nodeType&&-1===k.indexOf(c.nodeName)){g=z.getComputedStyle(c,null);m="svg"===c.nodeName?{}:z.getComputedStyle(c.parentNode,null);e[c.nodeName]||(x=l.getElementsByTagName("svg")[0],
+t=l.createElementNS(c.namespaceURI,c.nodeName),x.appendChild(t),e[c.nodeName]=p(z.getComputedStyle(t,null)),"text"===c.nodeName&&delete e.text.fill,x.removeChild(t));if(L||K)for(var w in g)u(g[w],w);else F(g,u);n&&(g=c.getAttribute("style"),c.setAttribute("style",(g?g+";":"")+n));"svg"===c.nodeName&&c.setAttribute("stroke-width","1px");"text"!==c.nodeName&&[].forEach.call(c.children||c.childNodes,a)}}var c=this.renderer,d=c.inlineToAttributes,f=c.inlineBlacklist,h=c.inlineWhitelist,k=c.unstyledElements,
+e={},x,l,c=n.createElement("iframe");w(c,{width:"1px",height:"1px",visibility:"hidden"});n.body.appendChild(c);l=c.contentWindow.document;l.open();l.write('\x3csvg xmlns\x3d"http://www.w3.org/2000/svg"\x3e\x3c/svg\x3e');l.close();a(this.container.querySelector("svg"));x.parentNode.removeChild(x)};I.menu=function(b,a,c,d){return["M",b,a+2.5,"L",b+c,a+2.5,"M",b,a+d/2+.5,"L",b+c,a+d/2+.5,"M",b,a+d-1.5,"L",b+c,a+d-1.5]};I.menuball=function(b,a,c,d){b=[];d=d/3-2;return b=b.concat(this.circle(c-d,a,d,d),
+this.circle(c-d,a+d+4,d,d),this.circle(c-d,a+2*(d+4),d,d))};A.prototype.renderExporting=function(){var b=this,a=b.options.exporting,c=a.buttons,d=b.isDirtyExporting||!b.exportSVGElements;b.buttonOffset=0;b.isDirtyExporting&&b.destroyExport();d&&!1!==a.enabled&&(b.exportEvents=[],b.exportingGroup=b.exportingGroup||b.renderer.g("exporting-group").attr({zIndex:3}).add(),F(c,function(a){b.addButton(a)}),b.isDirtyExporting=!1);v(b,"destroy",b.destroyExport)};v(A,"init",function(){var b=this;b.exporting=
+{update:function(a,c){b.isDirtyExporting=!0;p(!0,b.options.exporting,a);t(c,!0)&&b.redraw()}};f.addUpdate(function(a,c){b.isDirtyExporting=!0;p(!0,b.options.navigation,a);t(c,!0)&&b.redraw()},b)});A.prototype.callbacks.push(function(b){b.renderExporting();v(b,"redraw",b.renderExporting)})});h(f,"masters/modules/exporting.src.js",[],function(){})});
+//# sourceMappingURL=exporting.js.map

raspberry-backend/static/js/highcharts.js

+var chart;
+
+/**
+ * Request data from the server, add it to the graph and set a timeout
+ * to request again
+ */
+function requestDataVar1() {
+    $.ajax({
+        url: '/live-data',
+        success: function(point) {
+            var series = chart.series[0],
+                shift = series.data.length > 20; // shift if the series is
+                                                 // longer than 20
+
+            // add the point
+            chart.series[0].addPoint([point.created_at, point.temperature], true, shift);
+
+
+            // call it again after one second
+            setTimeout(requestDataVar1, 1000);
+        },
+        cache: false
+    });
+}
+
+
+function requestDataVar2() {
+    $.ajax({ 
+        url: '/live-data',
+        success: function(point) {
+            var series = chart2.series[0], 
+                shift = series.data.length > 20; // shift if the series is
+                                                 // longer than 20
+
+            // add the point
+            chart2.series[0].addPoint([point.created_at, point.pressure], true, shift);
+
+            // call it again after one second
+            setTimeout(requestDataVar2, 1000);
+        },
+        cache: false
+    });
+}
+
+function requestDataVar3() {
+    $.ajax({ 
+        url: '/live-data',
+        success: function(point) {
+            var series = chart3.series[0], 
+                shift = series.data.length > 20; // shift if the series is
+                                                 // longer than 20
+
+            // add the point
+            chart3.series[0].addPoint([point.created_at, point.temperature], true, shift);
+
+            // call it again after one second
+            setTimeout(requestDataVar3, 1000);
+        },
+        cache: false
+    });
+}
+
+
+
+
+
+$(document).ready(function() {
+    chart = new Highcharts.Chart({
+        chart: {
+            renderTo: 'data-container-var-1',
+            defaultSeriesType: 'spline',
+            events: {
+                load: requestDataVar1
+            }
+        },
+        title: {
+            text: 'VARIABLE 1'
+        },
+        xAxis: {
+            minPadding: 0.4,
+            maxPadding: 0.4,
+            title: {
+                text: 'Time',
+                margin: 20
+            },
+            type: 'datetime',
+            tickPixelInterval: 150,
+            maxZoom: 20 * 1000
+        },
+        yAxis: {
+            minPadding: 0.2,
+            maxPadding: 0.2,
+            title: {
+                text: 'Reading',
+                margin: 80
+            }
+        },
+        series: [{
+            name: 'INPUT',
+            data: []
+        }]
+    });
+});
+
+
+
+
+
+
+
+$(document).ready(function() {
+    chart2 = new Highcharts.Chart({
+        chart: {
+            renderTo: 'data-container-var-2',
+            defaultSeriesType: 'spline',
+            events: {
+                load: requestDataVar2
+            }
+        },
+        title: {
+            text: 'VARIABLE 2'
+        },
+        xAxis: {
+            minPadding: 0.4,
+            maxPadding: 0.4,
+            title: {
+                text: 'Time',
+                margin: 20
+            },
+            type: 'datetime',
+            tickPixelInterval: 150,
+            maxZoom: 20 * 1000
+        },
+        yAxis: {
+            minPadding: 0.2,
+            maxPadding: 0.2,
+            title: {
+                text: 'Reading',
+                margin: 80
+            }
+        },
+        series: [{
+            name: 'INPUT',
+            data: []
+        }]
+    });
+});
+
+
+$(document).ready(function() {
+    chart3 = new Highcharts.Chart({
+        chart: {
+            renderTo: 'data-container-var-3',
+            defaultSeriesType: 'spline',
+            events: {
+                load: requestDataVar3
+            }
+        },
+        title: {
+            text: 'VARIABLE 3'
+        },
+        xAxis: {
+            minPadding: 0.4,
+            maxPadding: 0.4,
+            title: {
+                text: 'Time',
+                margin: 20
+            },
+            type: 'datetime',
+            tickPixelInterval: 150,
+            maxZoom: 20 * 1000
+        },
+        yAxis: {
+            minPadding: 0.2,
+            maxPadding: 0.2,
+            title: {
+                text: 'Reading',
+                margin: 80
+            }
+        },
+        series: [{
+            name: 'INPUT',
+            data: []
+        }]
+    });
+});
+
+

raspberry-backend/templates/index.html

@@ -4,12 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script type="text/javascript" src="../static/js/gauge.min.js"></script>
     <link rel="stylesheet" href="../static/css/style.css">
     <title>HEV monitoring</title>
 
           <!-- Bootstrap -->
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
  
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -18,24 +18,100 @@
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
   </head>
-  <body>
+  <body onload="startTime()">
    
-<div class="topnav">
-  <a class="active">High Energy Ventilator</a>
-  <div class="topnav-right" Text color: black>
-  <span id="datetime"></span> &emsp; 
+  <div class="topnav">
+    <a class="active">High Energy Ventilator</a>
+    <div class="topnav-right" Text color: black>
+    <span id="time"></span> &emsp; 
+    </div>
   </div>
-</div>
 
-  
+
+  </div>
+
+
+  <div class="container-fluid" style="display: inline-block" >
+    <!-- Example row of columns -->
+    <div class="row" style="width: 200%">
+        <div class="container-fluid" id="data-container-var-1" ></div>
+    </div>
+  </div>
+
+<br> </br>
+<!-- <div id="demo"></div> -->
+ 
+  <div class="container-fluid" style="display: inline-block" >
+    <!-- Example row of columns -->
+    <div class="row" style="width: 200%">
+        <div class="container-fluid" id="data-container-var-2" ></div>
+    </div>
+  </div>
+
+
+<br> </br>
+
+  <div class="container-fluid" style="display: inline-block" >
+    <!-- Example row of columns -->
+    <div class="row" style="width: 200%">
+        <div class="container-fluid" id="data-container-var-3" ></div>
+    </div>
+  </div>
+
+  <div class="spacer"></div>
+
+
+
+
+
 
 
 
   </body>
+<!-- external libraries -->
+    <script src="../static/js/jquery.min.js"></script>
+    <script src="../static/js/highcharts_lib.js"></script>
+    <script src="../static/js/highcharts-more.js"></script>
+    <script src="../static/js/exporting.js"></script>
+
+    <script src="../static/js/highcharts.js"></script>
+
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="../static/js/bootstrap.min.js"></script>
+
+
 
 
 <script>
-var dt = new Date();
-document.getElementById("datetime").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +"  &emsp;  "   + (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
+function startTime() {
+  var today = new Date();
+  var h = today.getHours();
+  var m = today.getMinutes();
+  var s = today.getSeconds();
+  m = checkTime(m);
+  s = checkTime(s);
+  document.getElementById('time').innerHTML = (("0"+today.getDate()).slice(-2)) +"."+ (("0"+(today.getMonth()+1)).slice(-2)) +"."+ (today.getFullYear()) + ' &emsp; ' +
+  h + ":" + m + ":" + s;
+  var t = setTimeout(startTime, 500);
+}
+function checkTime(i) {
+  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
+  return i;
+}
 </script>
+
+<script>
+
+//var txt = '{ "fruit": "pineapple", "fingers": 10 }';
+//var obj = JSON.parse(txt);
+//console.log(obj.fruit);
+//document.getElementById("demo").innerHTML = obj.fruit;
+
+//var txt = '{{result.data}}' ;
+//var obj = JSON.stringify(txt)
+//var obj = JSON.parse(txt[]);
+//console.log(obj);
+</script>
+
+
 </html>