mirror of
https://gitlab.silvrtree.co.uk/martind2000/censis-archive.git
synced 2025-01-26 20:36:17 +00:00
”2016-09-22”
This commit is contained in:
Martin Donnelly
parent
40b338f836
commit
7ae80679a8
@ -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}));
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/Humidity.png
Normal file
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/Humidity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/Lux.png
Normal file
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/Lux.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/SB_logo.png
Normal file
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/SB_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/Temperature.png
Normal file
BIN
mdot/mDotServer.censis/mDotServer.censis/app/gfx/Temperature.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -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) + '°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);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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'))
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<div class="mui-container">
|
||||
<body>
|
||||
<div class="mui-container" style="width:100%; ">
|
||||
<div class='mui-row'>
|
||||
<div class="mui-col-md-3 panel">
|
||||
<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-col-md-3">
|
||||
<div class="mui-row">
|
||||
<div class="mui-select">
|
||||
<select id="device" name="device">
|
||||
<option></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> <label>Device</label>
|
||||
<div class="mui-col-md-12">
|
||||
<div class=" mui--bg-primary-dark " style="height:15%;">
|
||||
<img src="gfx/SB_logo.png"
|
||||
style="height:70%; width:100%;margin-top:10%"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-col-md-12 spacer">
|
||||
<div class=" mui--bg-primary-dark " style="height:15%;">
|
||||
<div class='' id="main"></div>
|
||||
<!--<div id="output"></div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-col-md-12 spacer">
|
||||
<div class=" mui--bg-primary-dark " style="height:15%;">
|
||||
<div class="mui-col-xs-6 mui--bg-primary-dark">
|
||||
<div id="time"
|
||||
class="mui--text-center time mui--text-accent"></div>
|
||||
</div>
|
||||
<div class="mui-col-xs-6 mui--bg-primary-dark">
|
||||
<div id="date"
|
||||
class="mui--text-center date mui--text-accent"></div>
|
||||
</div>
|
||||
</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%;">
|
||||
<div id="weatherIcon"
|
||||
class="mui-col-xs-6 mui--bg-primary-dark"></div>
|
||||
<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 ">
|
||||
<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--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 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--align-middle">
|
||||
<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 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--align-middle">
|
||||
<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 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--align-middle">
|
||||
<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
|
||||
</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>
|
||||
<script type="text/template" id="list-template">
|
||||
<ul></ul>
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>-->
|
||||
</script>
|
||||
<script type="text/template" id="graph-template">
|
||||
<!--<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>
|
||||
|
||||
@ -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">
|
||||
<img src="lib/images/censis_logo_white.png"
|
||||
<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>
|
||||
@ -180,34 +237,60 @@
|
||||
</div>
|
||||
<div class='mui-row'>
|
||||
<div class="mui-col-md-3">
|
||||
<div class=" mui--bg-primary-dark widget">
|
||||
<div style="height:40%">
|
||||
<img src="lib/images/CarbonDioxide.png" class="logo"/>
|
||||
<div class="mui--bg-primary-dark widget">
|
||||
<div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
|
||||
<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%">
|
||||
<img src="lib/images/Temperature.png" class="logo"/>
|
||||
</div>
|
||||
<div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
|
||||
<div class="mui-col-md-3 mui--align-middle">
|
||||
<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%">
|
||||
<img src="lib/images/Humidity.png" class="logo"/>
|
||||
</div>
|
||||
<div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
|
||||
<div class="mui-col-md-3 mui--align-middle">
|
||||
<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%">
|
||||
<img src="lib/images/Lux.png" class="logo"/>
|
||||
</div>
|
||||
<div class="mui-col-md-12 mui--align-middle" style="height:40%;padding-top: 30px;">
|
||||
<div class="mui-col-md-3 mui--align-middle">
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user