diff --git a/mdot/mDotServer.censis/mDotServer.censis/app.js b/mdot/mDotServer.censis/mDotServer.censis/app.js index 5381ba4..ddd8ad9 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/app.js +++ b/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'; -staticDir = 'app'; -var graphFile = 'test2'; +var graphFile = isProduction ? 'graph-release' : 'test2'; app.use(express.static(path.join(__dirname, staticDir))); app.use(errorhandler({dumpExceptions: true, showStack: true})); diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/css/test.css b/mdot/mDotServer.censis/mDotServer.censis/app/css/test.css index c2d12f0..a2dd4f1 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/app/css/test.css +++ b/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; + } diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/fonts/weathericons-regular-webfont.woff2 b/mdot/mDotServer.censis/mDotServer.censis/app/fonts/weathericons-regular-webfont.woff2 new file mode 100755 index 0000000..bb0c19d Binary files /dev/null and b/mdot/mDotServer.censis/mDotServer.censis/app/fonts/weathericons-regular-webfont.woff2 differ diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/gfx/CarbonDioxide.png b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/CarbonDioxide.png new file mode 100644 index 0000000..5e8674a Binary files /dev/null and b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/CarbonDioxide.png differ diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Humidity.png b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Humidity.png new file mode 100644 index 0000000..a21cc57 Binary files /dev/null and b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Humidity.png differ diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Lux.png b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Lux.png new file mode 100644 index 0000000..fe9b40a Binary files /dev/null and b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Lux.png differ diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/gfx/SB_logo.png b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/SB_logo.png new file mode 100644 index 0000000..bb8e817 Binary files /dev/null and b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/SB_logo.png differ diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Temperature.png b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Temperature.png new file mode 100644 index 0000000..c37f37c Binary files /dev/null and b/mdot/mDotServer.censis/mDotServer.censis/app/gfx/Temperature.png differ diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/js/clock.js b/mdot/mDotServer.censis/mDotServer.censis/app/js/clock.js index 575d645..7ffb6f9 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/app/js/clock.js +++ b/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 = $('').addClass('wi mui--align-middle'); newElm.addClass('wi-forecast-io-'.concat(data.icon)); - console.log(parseInt(data.temperature) + '°c'); - this.$weatherText.html(parseInt(data.temperature) + '°c'); - console.log ('Weather icon should be ', data.icon); + this.$weatherText.html(Math.round(parseFloat(data.temperature)) + '°c'); this.$weatherIcon.empty().html(newElm); - // skycons.remove('icon1'); - // skycons.add('icon1', data.icon); + this.$weatherSummary.html(data.summary); } }); diff --git a/mdot/mDotServer.censis/mDotServer.censis/app/js/mdot.js b/mdot/mDotServer.censis/mDotServer.censis/app/js/mdot.js index c5604b3..61d4e50 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/app/js/mdot.js +++ b/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'), diff --git a/mdot/mDotServer.censis/mDotServer.censis/gulpfile.js b/mdot/mDotServer.censis/mDotServer.censis/gulpfile.js index 6935238..d927071 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/gulpfile.js +++ b/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/flipclock.min.js', - 'app/lib/jquery.flatWeatherPlugin.min.js' -]) + 'app/lib/dateTime.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/flipclock.css', - 'css/flatWeatherPlugin.css']) + 'app/css/weather-icons.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')) diff --git a/mdot/mDotServer.censis/mDotServer.censis/package.json b/mdot/mDotServer.censis/mDotServer.censis/package.json index 3c7e1b9..4572174 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/package.json +++ b/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", - "prepublish": "" + "start": "node app.js" }, "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" + } } diff --git a/mdot/mDotServer.censis/mDotServer.censis/views/graph-release.ejs b/mdot/mDotServer.censis/mDotServer.censis/views/graph-release.ejs index 219f917..0d19c38 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/views/graph-release.ejs +++ b/mdot/mDotServer.censis/mDotServer.censis/views/graph-release.ejs @@ -6,6 +6,7 @@ + @@ -37,95 +38,307 @@ + - -
+ +
-
-
-
-
-
-
-
-
-
-
- - + + + + + + - - - - +
--> + + + diff --git a/mdot/mDotServer.censis/mDotServer.censis/views/test2.ejs b/mdot/mDotServer.censis/mDotServer.censis/views/test2.ejs index d3fe24c..59f9409 100644 --- a/mdot/mDotServer.censis/mDotServer.censis/views/test2.ejs +++ b/mdot/mDotServer.censis/mDotServer.censis/views/test2.ejs @@ -5,14 +5,44 @@ Graph + + + + + + + + + + + + + + + + + + + + + + - - @@ -125,7 +172,7 @@
-
@@ -148,6 +195,9 @@
+
+ Glasgow +
@@ -156,13 +206,20 @@
+
+ +
+
+
+
+
-
@@ -180,34 +237,60 @@
-
-
- +
+
+
+ +
+ +
-
- -
+
+
+ +
+ + +
-
- -
+
+
+ +
+ + +
+
-
- -
+
+
+ +
+ + +
+
@@ -395,5 +478,7 @@ crossorigin="anonymous">--> + +