”2016-09-22”

mdot/mDotServer.censis/mDotServer.censis/app.js

@@ -132,9 +132,7 @@ app.use(function(req, res, next) {
 
 // Run npm start --production to use dist
 var staticDir = isProduction ? 'dist' : 'app';
-//var graphFile = isProduction ? 'graph-release' : 'test2';
+var graphFile = isProduction ? 'graph-release' : 'test2';
-staticDir =  'app';
-var graphFile = 'test2';
 
 app.use(express.static(path.join(__dirname, staticDir)));
 app.use(errorhandler({dumpExceptions: true, showStack: true}));

mdot/mDotServer.censis/mDotServer.censis/app/css/test.css

@@ -23,3 +23,119 @@
   margin-top: 15px;
 
   }
+
+html, body { height: 100%; width: 100%; color: white; }
+
+    h1 {
+
+      /*color: #FD5F00;*/
+      /*color: #ff0063;*/
+      font-family: 'Ubuntu Condensed';;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 70px;
+      font-variant: normal;
+      text-align: center;
+      }
+
+    #example {
+      position: relative;
+      color: #ff0063;
+      background: #00000;
+      /*padding: 10px;
+      margin: 30px auto;*/
+      width: auto;
+      border-radius: 1px;
+      height: auto;
+      font-size: xx-small;
+      }
+
+    .item_content {
+      height: 100px;
+      /* border: 1px solid grey;*/
+      min-height: 100px;
+      overflow: hidden;
+      }
+
+    .item_content a.title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #ffffff;
+      }
+
+    .item_content div.body, .item_content div.site, .item_content div.tags {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #313131;
+      }
+
+    .time, .date, .temp, .weather {
+      text-align: center;
+      font-family: 'Ubuntu Condensed', sans-serif;
+      font-size: 40px;
+      width: 100%;
+      }
+
+    .time span.hour:after {
+      content: ":";
+      }
+
+    .time { margin-top: 10%; }
+
+    .date {
+      font-size: 18px;
+      line-height: 1;
+      margin-top: 10%;
+      min-height: 57px;
+      height: 57px;
+      }
+
+    .temp::after {
+      content: "°c";
+      }
+
+    .item_content div.tags {
+      color: blue;
+      }
+
+    .noConnection {
+      color: rgb(244, 150, 26);
+      }
+
+    #caltext {
+      color: #fff;
+      }
+
+    .fourpcNudge {
+      margin-top: 4% !important;
+      }
+
+    .widget {
+      height: 255px;
+      padding-left: 1em;
+      padding-right: 1em;
+      }
+
+    #chartdiv {
+      height: 600px;
+      }
+
+    .logo {
+      height: 100%; width: 100%; margin-top: 0%
+      }
+
+    .widgeticon {
+
+          font-size: 50px;
+      padding-left: 0px;
+      margin-left:-20px;
+      color:#00ffb6;
+          }
+    .widgetLogo {
+      font-family: 'Ubuntu Condensed', sans-serif;
+      font-size: 16px;padding-left:20px;
+      padding-right:0px;
+      color:#00ffb6;
+      }

mdot/mDotServer.censis/mDotServer.censis/app/js/clock.js

@@ -9,7 +9,8 @@
 
 var WeatherModel = Backbone.Model.extend({
   initialize: function() {
-    this.set('url','https://api.forecast.io/forecast/342205f1e6b0281ee3ec89a4eff8a568/' + this.get('lat').toString() + ',' + this.get('long').toString() + '?units=uk2&exclude=minutely,hourly,daily,alerts,flags');
+    //this.set('url','https://api.forecast.io/forecast/342205f1e6b0281ee3ec89a4eff8a568/' + this.get('lat').toString() + ',' + this.get('long').toString() + '?units=uk2&exclude=minutely,hourly,daily,alerts,flags');
+    this.set('url','https://api.forecast.io/forecast/342205f1e6b0281ee3ec89a4eff8a568/' + this.get('lat').toString() + ',' + this.get('long').toString() + '?units=uk2&exclude=minutely,hourly,alerts,flags');
 
     console.log(this.get('url'));
     this.update();
@@ -40,10 +41,14 @@ var WeatherModel = Backbone.Model.extend({
               'Access-Control-Allow-Headers': 'Content-Type'
             },
             success: function(data) {
+              console.log(data);
               var stored = {
                 temperature: data.currently.temperature,
-                icon: data.currently.icon
+                icon: data.currently.icon,
+                summary: data.currently.summary
               };
+
+              stored = data.currently;
               self.set('data',stored);
             },
             error: function(xhr, type) {
@@ -107,6 +112,7 @@ var Weather = Backbone.View.extend({
     this.model.bind('change', this.render);
     this.$weatherText = $('#weatherText');
     this.$weatherIcon = $('#weatherIcon');
+    this.$weatherSummary = $('#weatherSummary');
   },
   render: function() {
     console.log('Weather:Render');
@@ -114,12 +120,9 @@ var Weather = Backbone.View.extend({
     var data = this.model.get('data');
     let newElm = $('<i></i>').addClass('wi mui--align-middle');
     newElm.addClass('wi-forecast-io-'.concat(data.icon));
-    console.log(parseInt(data.temperature) + '&deg;c');
+    this.$weatherText.html(Math.round(parseFloat(data.temperature)) + '&deg;c');
-    this.$weatherText.html(parseInt(data.temperature) + '&deg;c');
-    console.log ('Weather icon should be ',  data.icon);
     this.$weatherIcon.empty().html(newElm);
-   // skycons.remove('icon1');
+    this.$weatherSummary.html(data.summary);
-   // skycons.add('icon1', data.icon);
   }
 
 });

mdot/mDotServer.censis/mDotServer.censis/app/js/mdot.js

@@ -1,5 +1,5 @@
 'use strict';
-/* global Backbone, _, $, AmCharts, notification */
+/* global Backbone, _, $, jQuery, AmCharts, notification, SOCKETMANAGER, Clock, ClockModel, Weather, WeatherModel */
 /* global  mainview */
 /* jshint browser: true , devel: true*/
 
@@ -186,7 +186,7 @@
         });
 
         if (_occupancy !== 0) {
-          let mm = minmaxes[_occupancy.toString()];
+          const mm = minmaxes[_occupancy.toString()];
           if (mm.low === 0 && mm.high === 0) {
             mm.low = i.co2;
             mm.high = i.co2;
@@ -204,15 +204,11 @@
           minmaxes[_occupancy.toString()] = mm;
         }
       }, this);
-      console.log(minmaxes);
-      console.log(JSON.stringify(minmaxes));
       DeviceCollection.models = tempCollection.models;
 
       console.timeEnd('processAdd');
       DeviceCollection.trigger('update');
 
-      // Notification.notify('success', 'Data loaded');
-
     }, decoder: function() {
       return {};
     }, dateTime: function($date) {
@@ -276,14 +272,6 @@
   });
 
 
-  ///////////////////
-  ///  Colors ///////
-  ///////////////////
-  var mainColors = ['#404040', '#ff0063', '#33ffad']; //Panel, text, logo, cs1, cs2, cs3, cs4, cs5, cs6
-  var chartColors = ['#b3b3ff', '#ff66b3', '#e600e6', '#80dfff', '#33ffad']; //Panel, text, logo, cs1, cs2, cs3, cs4, cs5, cs6
-
-
-
   var MainView = Backbone.View.extend({
     el: $('#main'), template: _.template($('#main-template').html()), events: {
       'change select#device': 'changeDevice',
@@ -309,17 +297,25 @@
       }
     }, updateDevice: function() {
       var fetchObj = {beforeSend: sendAuthentication};
-      console.log('this:',this);
 
       if (this.socketHandler) {
         this.socketHandler.turnOff();
       }
 
-      //  Notification.clearAll();
       if (this.model.has('device')) {
-        this.collection.url = '/apiv2/mdot/' + this.model.get('device');
+        var http = location.protocol;
+        console.log(location);
+        var slashes = http.concat("//");
+
+        var host = slashes.concat(window.location.hostname);
+        if (location.port !== "") {
+          host = host + ':' + location.port;
+        }
+
+        host = 'https://mdotserver.mybluemix.net';
+
+        this.collection.url = host + '/apiv2/mdot/' + this.model.get('device');
         $('#output').empty();
-        //   Notification.notify('info', 'Loading...');
         this.collection.fetch(fetchObj);
       } else {
         console.error('Nothing to get!');
@@ -360,19 +356,11 @@
     }, events: {
       'change select#displaymode': 'changeMode'
     }, setupChart: function() {
-      //This.categoryAxesSettings.minPeriod = 'mm';
-      //this.chart.categoryAxesSettings = this.categoryAxesSettings;
-
-      //this.dataSet.color = '#b0de09';
-
-      //this.chart.dataSets = [this.dataSet];
     },
 
     doChartV2: function(chartData) {
-      var self = this;
       console.time('doChartV2');
       var chart = new AmCharts.AmStockChart();
-      //chart.pathToImages = "http://www.amcharts.com/lib/images/";
       chart.categoryAxesSettings.minPeriod = '15mm';
       chart.categoryAxesSettings.minorGridEnabled = true;
       chart.theme = 'dark';
@@ -415,8 +403,6 @@
       stockPanel1.showCategoryAxis = false;
       stockPanel1.title = 'Environment';
       stockPanel1.percentHeight = 60;
-      //StockPanel1.backgroundColor = "#696969";
-
 
       // add value axes
       var valueAxis1 = new AmCharts.ValueAxis();
@@ -425,7 +411,6 @@
       valueAxis1.offset = 0;
       valueAxis1.minorGridEnabled = true;
       valueAxis1.minorTickLength = 8;
-      //ValueAxis1.title = "ppm";
 
       stockPanel1.addValueAxis(valueAxis1);
 
@@ -456,11 +441,6 @@
       valueAxis4.minorTickLength = 8;
       stockPanel1.addValueAxis(valueAxis4);
 
-
-
-
-
-
       // Graph of first stock panel
       var graph1 = new AmCharts.StockGraph();
       graph1.title = 'CO2';
@@ -521,8 +501,6 @@
       valueAxis5.minorTickLength = 8;
       stockPanel2.addValueAxis(valueAxis5);
 
-
-
       var graph5 = new AmCharts.StockGraph();
       graph5.title = 'Count';
       graph5.type = 'column';
@@ -530,7 +508,6 @@
       graph5.cornerRadiusTop = 1;
       graph5.fillAlphas = 1;
       graph5.lineColor = '#33ffad';
-      //Graph4.fillColors = "#ff66ff";
       graph5.useDataSetColors = false;
 
       stockPanel2.addStockGraph(graph5);
@@ -540,9 +517,6 @@
       stockPanel2.stockLegend.color = '#f0f5f5';
 
       chart.addPanelAt(stockPanel2, 1);
-      //Chart.validateNow();
-
-      //  chart.panels = [stockPanel2];
 
       // OTHER SETTINGS ////////////////////////////////////
       var sbsettings = new AmCharts.ChartScrollbarSettings();
@@ -552,7 +526,6 @@
       sbsettings.graph = graph5;
       sbsettings.graphFillColor = '#33ffad';
       sbsettings.selectedBackgroundColor = '#333333';
-      //Sbsettings.selectedGraphLineColor = "#ff0063";
       chart.chartScrollbarSettings = sbsettings;
 
 
@@ -584,7 +557,7 @@
       this.socketHandler.set({data: this.getLastChunk()});
       _(this.collection.models).each(function(i) {
         const co2 = i.get('co2');
-        let chunk = {
+        const chunk = {
                   date: i.get('dt'),
                   co2: co2,
                   humid: i.get('humid'),
@@ -600,7 +573,7 @@
         filter.push(co2);
 
         if (filter.length >= max) {
-          let sub100 = filter.reduce((prev, cur) => prev + cur);
+          const sub100 = filter.reduce((prev, cur) => prev + cur);
           chunk.sub100 = sub100 / max;
         }
 
@@ -614,12 +587,11 @@
     setSocket: function(newSocket) {
           this.socketHandler = newSocket;
           this.socketHandler.on('update', function() {
-            console.log('Model updated:', this.get('data'));
           });
 
         },
     getLastChunk: function() {
-      let lastItem = this.collection.models[this.collection.models.length - 1];
+      const lastItem = this.collection.models[this.collection.models.length - 1];
       return {
         date: lastItem.get('dt'),
         co2: lastItem.get('co2'),

mdot/mDotServer.censis/mDotServer.censis/gulpfile.js

@@ -15,6 +15,7 @@ var atob = require('atob');
 var del = require('del');
 var htmlreplace = require('gulp-html-replace');
 var stripDebug = require('gulp-strip-debug');
+var babel  = require('gulp-babel');
 
 
 var filePath = {
@@ -24,10 +25,11 @@ var filePath = {
 var fontOptions = { };
 
 gulp.task('appJS', function() {
-  return gulp.src(['app/js/websocket.js','app/js/socketmanager.js','app/js/mdot.js'])
+  return gulp.src(['app/js/clock.js','app/js/websocket.js','app/js/socketmanager.js','app/js/mdot.js'])
      .pipe(stripDebug())
     .pipe(jshint('.jshintrc'))
     .pipe(jshint.reporter('default'))
+    .pipe(babel({presets: ['es2015']}))
     .pipe(concat('app.js'))
       .pipe(uglify({mangle: true, compress: {sequences: true,  // Join consecutive statemets with the “comma operator”
       properties: true,  // Optimize property access: a["foo"] → a.foo
@@ -66,22 +68,18 @@ gulp.task('vendor', function() {
                      'src/bower_modules/amstock3/amcharts/serial.js',
                      'src/bower_modules/amstock3/amcharts/amstock.js',
                      'app/lib/themes/dark.js',
-                     'app/lib/dateTime.js',
+                     'app/lib/dateTime.js'])
-                     'app/lib/flipclock.min.js',
-                     'app/lib/jquery.flatWeatherPlugin.min.js'
-])
         .pipe(concat('vendor.js'))
         .pipe(uglify({mangle: false}))
         .pipe(gulp.dest('dist/js'));
   });
 
 gulp.task('styles', function() {
-    return gulp.src(['src/bower_modules/mui/packages/cdn/css/mui.min.css',
+    return gulp.src([
+      'app/css/custom.css',
                      'app/css/test.css',
                      'app/css/style.css',
-                     'src/bower_modules/notification-js/build/notification.min.css',
+                     'app/css/weather-icons.css'])
-                     'app/css/flipclock.css',
-                     'css/flatWeatherPlugin.css'])
         .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
         .pipe(cssnano())
         .pipe(concat('app.css'))

mdot/mDotServer.censis/mDotServer.censis/package.json

@@ -8,27 +8,29 @@
   },
   "dependencies": {
     "atob": "^2.0.3",
+    "babel-preset-es2015": "^6.14.0",
     "basic-authentication": "^1.6.2",
     "body-parser": "^1.15.1",
     "btoa": "^1.1.2",
     "cfenv": "1.0.x",
     "cookie-parser": "*",
-    "ejs": "*",
+    "ejs": "^2.5.2",
     "errorhandler": "*",
     "events": "^1.1.1",
     "express": "^4.13.4",
     "express-session": "*",
+    "gulp-babel": "^6.1.2",
     "gulp-banner": "^0.1.3",
     "htmlparser": "^1.7.7",
     "log4js": "^0.6.36",
     "method-override": "*",
     "minibus": "^3.1.0",
     "morgan": "*",
-    "mqtt": "^1.10.0",
+    "mqtt": "^2.0.0",
     "mqtt_over_websockets": "0.0.1",
     "node-localstorage": "^1.1.2",
     "pg-promise": "^5.2.7",
-    "request": "^2.74.0",
+    "request": "^2.75.0",
     "request-promise": "^4.1.1",
     "sugar-date": "^2.0.0",
     "uuid-pure": "^1.0.10",
@@ -37,11 +39,11 @@
   },
   "devDependencies": {
     "after": "^0.8.1",
-    "apn": "^1.7.5",
+    "apn": "^2.0.0",
     "apns": "^0.1.0",
-    "basic-authentication": "^1.6.2",
+    "basic-authentication": "^1.7.0",
     "chai": "^3.5.0",
-    "cheerio": "^0.20.0",
+    "cheerio": "^0.22.0",
     "clone": "^1.0.2",
     "del": "^2.2.0",
     "elapsed": "0.0.7",
@@ -52,9 +54,9 @@
     "gulp-cssmin": "^0.1.7",
     "gulp-cssnano": "^2.1.2",
     "gulp-debug": "^2.1.2",
-    "gulp-google-webfonts": "0.0.13",
+    "gulp-google-webfonts": "0.0.14",
     "gulp-html-replace": "^1.5.5",
-    "gulp-htmlmin": "^2.0.0",
+    "gulp-htmlmin": "^3.0.0",
     "gulp-inject": "^4.0.0",
     "gulp-jshint": "^2.0.1",
     "gulp-jsmin": "^0.1.5",
@@ -65,7 +67,7 @@
     "gulp-strip-debug": "^1.1.0",
     "gulp-uglify": "^2.0.0",
     "jshint": "^2.9.2",
-    "jsonfile": "^2.3.1",
+    "jsonfile": "^2.4.0",
     "log4js": "^0.6.36",
     "mocha": "^3.0.2",
     "mqtt-ws": "^0.2.0",
@@ -75,13 +77,12 @@
     "string": "^3.3.1",
     "sugar": "^2.0.1",
     "sugar-date": "^2.0.0",
-    "superagent": "^2.1.0",
+    "superagent": "^2.3.0",
     "supertest": "^2.0.0"
   },
   "scripts": {
     "test": "mocha --recursive --reporter spec --bail --check-leaks --timeout 3000",
-    "start": "node app.js",
+    "start": "node app.js"
-    "prepublish": ""
   },
   "author": "Martin Donnelly",
   "license": "ISC",
@@ -90,6 +91,6 @@
     "url": "git+http://gitlab.silvrtree.co.uk/martind2000/mdot_server.git"
   },
   "engines": {
-      "node": "6.x"
+    "node": "6.x"
-    }
+  }
 }

mdot/mDotServer.censis/mDotServer.censis/views/graph-release.ejs

@@ -6,6 +6,7 @@
   <meta name="viewport"
           content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 
+  <link href="fonts/fonts.css" rel="stylesheet" type="text/css"/>
   <link href="css/app.css" rel="stylesheet" type="text/css"/>
   <link rel="apple-touch-icon" sizes="57x57"
           href="/fav/apple-touch-icon-57x57.png">
@@ -37,95 +38,307 @@
     <meta name="msapplication-TileImage" content="/fav/mstile-144x144.png">
     <meta name="msapplication-config" content="/fav/browserconfig.xml">
     <meta name="theme-color" content="#00aeef">
+
 </head>
-<body style="background-color:#171d25" class="mui--no-user-select">
+<body>
-<div class="mui-container">
+<div class="mui-container" style="width:100%; ">
   <div class='mui-row'>
-    <div class="mui-col-md-3 panel">
+    <div class="mui-col-md-3">
-      <div class='mui-panel' id="main"></div>
-      <div id="output"></div>
-    </div>
-    <div class="mui-col-md-9">
-      <div class="mui-container">
-        <div id="chartdiv" style="width:100%; height:600px;"></div>
-      </div>
-    </div>
-  </div>
-  <script type="text/template" id="loaded-template">
-    <div
-      style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
-    </div>
-  </script>
-  <script type="text/template" id="main-template">
-    <div class="mui-container">
       <div class="mui-row">
-        <div class="mui-select">
+        <div class="mui-col-md-12">
-          <select id="device" name="device">
+          <div class=" mui--bg-primary-dark " style="height:15%;">
-            <option></option>
+            <img src="gfx/SB_logo.png"
-            <option>
+                 style="height:70%; width:100%;margin-top:10%"/>
-              HIE-mobile-1
+          </div>
-            </option>
+        </div>
-            <option>
+        <div class="mui-col-md-12 spacer">
-              HIE-demo
+          <div class=" mui--bg-primary-dark " style="height:15%;">
-            </option>
+            <div class='' id="main"></div>
-            <option>
+            <!--<div id="output"></div>-->
-              HIE-mobile-2
+          </div>
-            </option>
+        </div>
-            <option>
+        <div class="mui-col-md-12 spacer">
-              HIE-smart-campus-1
+          <div class=" mui--bg-primary-dark " style="height:15%;">
-            </option>
+            <div class="mui-col-xs-6 mui--bg-primary-dark">
-            <option>
+              <div id="time"
-              HIE-smart-campus-2
+                   class="mui--text-center time mui--text-accent"></div>
-            </option>
+            </div>
-            <option>
+            <div class="mui-col-xs-6 mui--bg-primary-dark">
-              HIE-smart-campus-3
+              <div id="date"
-            </option>
+                   class="mui--text-center date mui--text-accent"></div>
-            <option>
+            </div>
-              HIE-smart-campus-4
+          </div>
-            </option>
+        </div>
-            <option>
+        <div class="mui-col-md-12 spacer">
-              HIE-smart-campus-5
+          <div class=" mui--bg-primary-dark  weather mui--text-accent" style="font-size: 150%;">
-            </option>
+            Glasgow
-            <option>
+          </div>
-              HIE-smart-campus-6
+          <div
-            </option>
+            class=" mui--bg-primary-dark mui--text-center weather mui--text-accent"
-            <option>
+            style="height:15%;">
-              HIE-smart-campus-7
+            <div id="weatherIcon"
-            </option>
+                 class="mui-col-xs-6 mui--bg-primary-dark"></div>
-            <option>
+            <div id="weatherText"
-              CENSIS-LoRa-1
+                 class="mui-col-xs-6 mui--bg-primary-dark"></div>
-            </option>
+          </div>
-            <option>
+          <div class=" mui--bg-primary-dark  weather mui--text-accent" style="font-size: 150%;" id="weatherSummary">
-              CENSIS-LoRa-2
+
-            </option>
+                    </div>
-            <option>
+        </div>
-              CENSIS-LoRa-3
+        <div class="mui-col-md-12 spacer">
-            </option>
+                 <div class=" mui--bg-primary-dark mui--text-accent" style="font-size: 100%;" id="example">
-            <option>
+                 </div>
-              CENSIS-LoRa-4
+               </div>
-            </option>
+        <div class="mui-col-md-12 spacer">
-            <option>
+          <div
-              HIE-mDot-1
+            class=" mui--bg-primary-dark mui--text-center weather mui--text-accent"
-            </option>
+            style="height:15%;">
-          </select> <label>Device</label>
+            <div id="censisLogo" class="mui-col-xs-12 ">
+              <img src="gfx/censis_logo_white.png"
+                   style="height:70%; width:80%;margin-top:5%;margin-left:10%"/>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <div class="mui-row">
+    <div class="mui-col-md-9 ">
+      <div class="mui-row ">
+        <div class="mui-col-md-12" style="height:70%;">
+          <div class='divfix mui--bg-primary-dark' id="chartdiv"
+               style="width:100%; margin-bottom: 15px;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class='mui-row'>
+    <div class="mui-col-md-3">
+      <div class="mui--bg-primary-dark widget">
+        <!--<div class="mui-col-md-12">
+          <div class="mui-col-md-3 mui&#45;&#45;align-middle">
+            <i class="wi wi-smog widgeticon mui&#45;&#45;text-left mui&#45;&#45;align-middle"></i>
+          </div>
+          <div class="mui-col-md-9 widgetLogo mui&#45;&#45;align-middle">
+            Carbon Dioxide
+          </div>
+
+        </div>-->
+        <div style="height:40%">
+          <img src="gfx/CarbonDioxide.png" class="logo"/>
+        </div>
+        <div class="mui-row" style="height:50%;" id="widget-co2"></div>
+      </div>
+    </div>
+    <div class="mui-col-md-3">
+      <div class=" mui--bg-primary-dark widget">
+       <!-- <div class="mui-col-md-12">
+                  <div class="mui-col-md-3 mui&#45;&#45;align-middle">
+                    <i class="wi wi-thermometer widgeticon mui&#45;&#45;text-left mui&#45;&#45;align-middle"></i>
+                  </div>
+                  <div class="mui-col-md-9 widgetLogo mui&#45;&#45;align-middle">
+                    Temperature
+                  </div>
+
+                </div>-->
+        <div style="height:40%">
+          <img src="gfx/Temperature.png" class="logo"/>
+        </div>
+        <div class="mui-row" style="height:50%" id="widget-temp"></div>
+      </div>
+    </div>
+    <div class="mui-col-md-3">
+      <div class=" mui--bg-primary-dark widget">
+       <!-- <div class="mui-col-md-12">
+                          <div class="mui-col-md-3 mui&#45;&#45;align-middle">
+                            <i class="wi wi-humidity widgeticon mui&#45;&#45;text-left mui&#45;&#45;align-middle"></i>
+                          </div>
+                          <div class="mui-col-md-9 widgetLogo mui&#45;&#45;align-middle">
+                            Humidity
+                          </div>
+
+                        </div>-->
+        <div style="height:40%">
+          <img src="gfx/Humidity.png" class="logo"/>
+        </div>
+        <div class="mui-row" style="height:50%;" id="widget-humidity"></div>
+      </div>
+    </div>
+    <div class="mui-col-md-3">
+      <div class=" mui--bg-primary-dark widget">
+      <!--  <div class="mui-col-md-12">
+                                  <div class="mui-col-md-3 mui&#45;&#45;align-middle">
+                                    <i class="wi wi-horizon-alt widgeticon mui&#45;&#45;text-left mui&#45;&#45;align-middle"></i>
+                                  </div>
+                                  <div class="mui-col-md-9 widgetLogo mui&#45;&#45;align-middle">
+                                    Light
+                                  </div>
+
+                                </div>-->
+        <div style="height:40%">
+          <img src="gfx/Lux.png" class="logo"/>
+        </div>
+        <div class="mui-row" style="height:100%;" id="widget-lux"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="text/template" id="loaded-template">
+  <!--<div
+    style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
+  </div>-->
+</script>
+<script>
+  var openport ='<^=port^>';
+  console.log('Using port:',openport);
+</script>
+
+<script type="text/template" id="main-template">
+  <div class="mui-select mui--bg-primary-dark  mui--text-accent">
+    <select id="device" name="device">
+      <option>Select Room</option>
+      <option>
+        HIE-mobile-1
+      </option>
+      <option>
+        HIE-demo
+      </option>
+      <option>
+        HIE-mobile-2
+      </option>
+      <option>
+        HIE-smart-campus-1
+      </option>
+      <option>
+        HIE-smart-campus-2
+      </option>
+      <option>
+        HIE-smart-campus-3
+      </option>
+      <option>
+        HIE-smart-campus-4
+      </option>
+      <option>
+        HIE-smart-campus-5
+      </option>
+      <option>
+        HIE-smart-campus-6
+      </option>
+      <option>
+        HIE-smart-campus-7
+      </option>
+      <option>
+        CENSIS-LoRa-1
+      </option>
+      <option>
+        CENSIS-LoRa-2
+      </option>
+      <option>
+        CENSIS-LoRa-3
+      </option>
+      <option>
+        CENSIS-LoRa-4
+      </option>
+      <option>
+        HIE-mDot-1
+      </option>
+    </select>
+  </div><!--<div class="mui-row">
       <div class="mui-col-md-12">
         <button id='refresh'
                 class="mui-btn mui-btn--small mui-btn--primary">Refresh
         </button>
 
         </div>
+    </div>-->
+</script>
+<script type="text/template" id="list-template">
+
+  </script>
+<script type="text/template" id="item-template">
+  <!--<div class="mui-row">
+      <div class="mui-col-md-2"><%= item.timestamp %></div>
+      <div class="mui-col-md-2"><%= item.lux %></div>
+      <div class="mui-col-md-2"><%= item.co2 %></div>
+      <div class="mui-col-md-2"><%= item.temp %></div>
+      <div class="mui-col-md-2"><%= item.humidity %></div>
+      <div class="mui-col-md-2"><%= item.sound %></div>
+    </div>-->
+</script>
+<script type="text/template" id="AMChart-template">
+  <!--<div class="mui-container">
+    <div class="mui-row">
+      <div class="mui-select mui-col-md-12">
+        <select id="displaymode" name="displaymode">
+          <option value="0"></option>
+          <option value="1">
+            Light
+          </option>
+          <option value="2">
+            Temp
+          </option>
+          <option value="3">
+            Co2
+          </option>
+          <option value="4">
+            Humidity
+          </option>
+          <option value="5">
+            Noise
+          </option>
+          <option value="6">
+            Light & Co2
+          </option>
+          <option value="7">
+            Temperature & Humidity
+          </option>
+
+        </select> <label>Graph</label>
+      </div>
     </div>
-  </script>
+  </div>-->
-  <script type="text/template" id="list-template">
+</script>
-    <ul></ul>
+<script type="text/template" id="graph-template">
-  </script>
+  <!--<div class="mui-container">
-
+    <div class="mui-row">
-
+      <div class="mui-select mui-col-md-6">
-
+        <select id="displaymode" name="displaymode">
+          <option value="0"></option>
+          <option value="1">
+            Light
+          </option>
+          <option value="2">
+            Temp
+          </option>
+          <option value="3">
+            Co2
+          </option>
+          <option value="4">
+            Humidity
+          </option>
+          <option value="5">
+            Noise
+          </option>
+        </select> <label>Graph</label>
+      </div>
+      <div class="mui-col-md-6">
+        <svg id="graphSVG" width="300" height="150" fill="blue">
+          <line x1="46" y1="12" x2="280" y2="12"
+                style="stroke:#004c6d;stroke-width:2;"></line>
+          <text id="maxY" x="36" y="15" text-anchor="end">--</text>
+          <line x1="46" y1="136" x2="280" y2="136"
+                style="stroke:#004c6d;stroke-width:2;"></line>
+          <text id="MinY" x="36" y="139" text-anchor="end">0</text>
+          <polyline id="line" fill="none" stroke="#2196F3" text-anchor="end"
+                    stroke-width="1" points=""></polyline>
+          <g id="datapoints"></g>
+          <g id="baseline"></g>
+        </svg>
+      </div>
+    </div>
+  </div>-->
+</script>
+<script type="text/template" id="widget-template">
+  <h1 class="mui--text-accent"><%= value %></h1>
+</script>
 
   <script src="js/vendor.js"></script>
   <script src="js/app.js"></script>

mdot/mDotServer.censis/mDotServer.censis/views/test2.ejs

@@ -5,14 +5,44 @@
   <title>Graph</title>
   <meta name="viewport"
         content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
+
+    <link rel="apple-touch-icon" sizes="57x57"
+            href="/fav/apple-touch-icon-57x57.png">
+      <link rel="apple-touch-icon" sizes="60x60"
+            href="/fav/apple-touch-icon-60x60.png">
+      <link rel="apple-touch-icon" sizes="72x72"
+            href="/fav/apple-touch-icon-72x72.png">
+      <link rel="apple-touch-icon" sizes="76x76"
+            href="/fav/apple-touch-icon-76x76.png">
+      <link rel="apple-touch-icon" sizes="114x114"
+            href="/fav/apple-touch-icon-114x114.png">
+      <link rel="apple-touch-icon" sizes="120x120"
+            href="/fav/apple-touch-icon-120x120.png">
+      <link rel="apple-touch-icon" sizes="144x144"
+            href="/fav/apple-touch-icon-144x144.png">
+      <link rel="apple-touch-icon" sizes="152x152"
+            href="/fav/apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" sizes="180x180"
+            href="/fav/apple-touch-icon-180x180.png">
+      <link rel="icon" type="image/png" href="/fav/favicon-32x32.png" sizes="32x32">
+      <link rel="icon" type="image/png" href="/fav/android-chrome-192x192.png"
+            sizes="192x192">
+      <link rel="icon" type="image/png" href="/fav/favicon-96x96.png" sizes="96x96">
+      <link rel="icon" type="image/png" href="/fav/favicon-16x16.png" sizes="16x16">
+      <link rel="manifest" href="/fav/manifest.json">
+      <link rel="mask-icon" href="/fav/safari-pinned-tab.svg" color="#5bbad5">
+      <link rel="shortcut icon" href="/fav/favicon.ico">
+      <meta name="msapplication-TileColor" content="#da532c">
+      <meta name="msapplication-TileImage" content="/fav/mstile-144x144.png">
+      <meta name="msapplication-config" content="/fav/browserconfig.xml">
+      <meta name="theme-color" content="#00aeef">
+
   <!-- build:css -->
   <link rel="stylesheet" href="fonts/fonts.css"/>
   <link href="css/custom.css" rel="stylesheet" type="text/css"/>
   <link href="css/test.css" rel="stylesheet" type="text/css"/>
   <link href="css/style.css" rel="stylesheet" type="text/css"/>
   <link href="css/weather-icons.css" rel="stylesheet" type="text/css"/>
-  <link rel="stylesheet" href="css/notification.css">
-  <link href="css/flatWeatherPlugin.css" rel="stylesheet"/>
   <!-- endbuild -->
   <style>
     html, body { height: 100%; width: 100%; color: white; }
@@ -116,6 +146,23 @@
     .logo {
       height: 100%; width: 100%; margin-top: 0%
       }
+
+    .widgeticon {
+
+          font-size: 50px;
+      padding-left: 0px;
+      margin-left:-20px;
+      color:#00ffb6;
+      margin-top:-10px;
+          }
+    .widgetLogo {
+      font-family: 'Ubuntu Condensed', sans-serif;
+      font-size: 16px;padding-left:20px;
+      padding-right:0px;
+      color:#00ffb6;
+      font-size: 160% !important;
+          margin-top: -10px;
+      }
   </style>
 </head>
 <body>
@@ -125,7 +172,7 @@
       <div class="mui-row">
         <div class="mui-col-md-12">
           <div class=" mui--bg-primary-dark " style="height:15%;">
-            <img src="lib/images/SB_logo.png"
+            <img src="gfx/SB_logo.png"
                  style="height:70%; width:100%;margin-top:10%"/>
           </div>
         </div>
@@ -148,6 +195,9 @@
           </div>
         </div>
         <div class="mui-col-md-12 spacer">
+          <div class=" mui--bg-primary-dark  weather mui--text-accent" style="font-size: 150%;">
+            Glasgow
+          </div>
           <div
             class=" mui--bg-primary-dark mui--text-center weather mui--text-accent"
             style="height:15%;">
@@ -156,13 +206,20 @@
             <div id="weatherText"
                  class="mui-col-xs-6 mui--bg-primary-dark"></div>
           </div>
+          <div class=" mui--bg-primary-dark  weather mui--text-accent" style="font-size: 150%;" id="weatherSummary">
+
+                    </div>
         </div>
+        <div class="mui-col-md-12 spacer">
+                 <div class=" mui--bg-primary-dark mui--text-accent" style="font-size: 100%;" id="example">
+                 </div>
+               </div>
         <div class="mui-col-md-12 spacer">
           <div
             class=" mui--bg-primary-dark mui--text-center weather mui--text-accent"
             style="height:15%;">
-            <div id="censisLogo" class="mui-col-xs-12 mui--bg-primary-dark">
+            <div id="censisLogo" class="mui-col-xs-12 ">
-              <img src="lib/images/censis_logo_white.png"
+              <img src="gfx/censis_logo_white.png"
                    style="height:70%; width:80%;margin-top:5%;margin-left:10%"/>
             </div>
           </div>
@@ -180,34 +237,60 @@
   </div>
   <div class='mui-row'>
     <div class="mui-col-md-3">
-      <div class=" mui--bg-primary-dark widget">
+      <div class="mui--bg-primary-dark widget">
-        <div style="height:40%">
+        <div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
-          <img src="lib/images/CarbonDioxide.png" class="logo"/>
+          <div class="mui-col-md-3 mui--align-middle">
+            <i class="wi wi-smog widgeticon mui--text-left mui--align-middle"></i>
+          </div>
+          <div class="mui-col-md-9 widgetLogo mui--align-middle">
+            Carbon Dioxide
+          </div>
+
         </div>
         <div class="mui-row" style="height:50%;" id="widget-co2"></div>
       </div>
     </div>
     <div class="mui-col-md-3">
       <div class=" mui--bg-primary-dark widget">
-        <div style="height:40%">
+        <div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
-          <img src="lib/images/Temperature.png" class="logo"/>
+                  <div class="mui-col-md-3 mui--align-middle">
-        </div>
+                    <i class="wi wi-thermometer widgeticon mui--text-left mui--align-middle"></i>
+                  </div>
+                  <div class="mui-col-md-9 widgetLogo mui--align-middle">
+                    Temperature
+                  </div>
+
+                </div>
         <div class="mui-row" style="height:50%" id="widget-temp"></div>
       </div>
     </div>
     <div class="mui-col-md-3">
       <div class=" mui--bg-primary-dark widget">
-        <div style="height:40%">
+        <div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
-          <img src="lib/images/Humidity.png" class="logo"/>
+                  <div class="mui-col-md-3 mui--align-middle">
-        </div>
+                    <i class="wi wi-humidity widgeticon mui--text-left mui--align-middle"></i>
+                  </div>
+                  <div class="mui-col-md-9 widgetLogo mui--align-middle">
+                    Humidity
+                  </div>
+
+                </div>
+
         <div class="mui-row" style="height:50%;" id="widget-humidity"></div>
       </div>
     </div>
     <div class="mui-col-md-3">
       <div class=" mui--bg-primary-dark widget">
-        <div style="height:40%">
+        <div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
-          <img src="lib/images/Lux.png" class="logo"/>
+                  <div class="mui-col-md-3 mui--align-middle">
-        </div>
+                    <i class="wi  wi-horizon-alt widgeticon mui--text-left mui--align-middle"></i>
+                  </div>
+                  <div class="mui-col-md-9 widgetLogo mui--align-middle">
+                    Light Level
+                  </div>
+
+                </div>
+
         <div class="mui-row" style="height:100%;" id="widget-lux"></div>
       </div>
     </div>
@@ -395,5 +478,7 @@ crossorigin="anonymous"></script>-->
 <script src="js/socketmanager.js"></script>
 <script src="js/mdot.js"></script>
 <!-- endbuild -->
+
+
 </body>
 </html>