martin/censis-archive
martin/censis-archive
1
0
Fork 0
mirror of https://gitlab.silvrtree.co.uk/martind2000/censis-archive.git synced 2025-01-26 20:36:17 +00:00
Code Issues Projects Releases Wiki Activity

”2016-09-16”

Browse Source
This commit is contained in:
Martin Donnelly 2016-09-16 16:45:03 +01:00
parent 8b205091db
commit 5305418f5e
5 changed files with 2137 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1838
mdot/mDotServer.censis/mDotServer.censis/app/css/weather-icons.css Normal file
View File

File diff suppressed because it is too large Load Diff

125
mdot/mDotServer.censis/mDotServer.censis/app/js/clock.js Normal file
View File

@ -0,0 +1,125 @@
'use strict';
/**
*
* User: Martin Donnelly
* Date: 2016-07-27
* Time: 09:23
*
*/
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');
console.log(this.get('url'));
this.update();
},
update: function() {
this.getWeather();
var now = new Date;
var mod = 1800000 - (now.getTime() % 1800000);
var weatherTrigger = function() {
this.update();
};
setTimeout(weatherTrigger.bind(this), mod + 10);
},
getWeather: function() {
var self = this;
$.ajax({
type: 'GET',
url: self.get('url'),
data: '',
dataType: 'jsonp',
timeout: 30000,
context: $('body'),
contentType: ('application/json'),
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
},
success: function(data) {
var stored = {
temperature: data.currently.temperature,
icon: data.currently.icon
};
self.set('data',stored);
},
error: function(xhr, type) {
console.error('ajax error');
console.error(xhr);
console.error(type);
}
});
}
});
var ClockModel = Backbone.Model.extend({
initialize: function() {
this.set('now',new Date);
this.update();
},
update: function() {
var now = new Date;
var mod = 60000 - (now.getTime() % 60000);
this.set('now',now);
var clockFn = function() {
this.update();
};
setTimeout(clockFn.bind(this), mod + 10);
}
});
var Clock = Backbone.View.extend({
tagName: 'div',
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.$date = $('#date');
this.$time = $('#time');
this.render();
},
render: function() {
var now = this.model.get('now');
var curTime = now.format('<span class="hour">{24hr}</span>{mm}');
var curDate = now.format('{yyyy}-{MM}-{dd}');
if (this.prevTime !== curTime) {
this.$time.html(curTime);
this.prevTime = curTime;
}
if (this.prevDate !== curDate) {
this.$date.html(now.format(
//'<span class="wd-{do}">{Weekday}</span><br><span class="mo mo-{M}">{Month} {dd}</span><br>{yyyy}'));
'<span class="wd-{do}">{Weekday}</span><br><span class="mo mo-{M}">{Month} {dd}</span>'));
this.prevDate = curDate;
}
}
});
var Weather = Backbone.View.extend({
tagName: 'div',
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.$weatherText = $('#weatherText');
this.$weatherIcon = $('#weatherIcon');
},
render: function() {
console.log('Weather:Render');
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(parseInt(data.temperature) + '&deg;c');
console.log ('Weather icon should be ', data.icon);
this.$weatherIcon.empty().html(newElm);
// skycons.remove('icon1');
// skycons.add('icon1', data.icon);
}
});

136
mdot/mDotServer.censis/mDotServer.censis/app/js/mdot.js
View File

@ -116,6 +116,37 @@
var skipOccupancy = false;
console.time('processAdd');
var tempCollection = new Backbone.Collection();
var minmaxes = {
'1':{low:578,high:656, mp:617},
'2':{low:657,high:709, mp:695},
'3':{low:710,high:737, mp:723},
'4':{low:738,high:778, mp:752},
'5':{low:779,high:824, mp:804},
'6':{low:825,high:860, mp:844},
'7':{low:861,high:892, mp:876},
'8':{low:0,high:0, mp:0},
'9':{low:0,high:0, mp:0},
'10':{low:0,high:0, mp:0},
'11':{low:0,high:0, mp:0},
'12':{low:0,high:0, mp:0},
'13':{low:0,high:0, mp:0},
'14':{low:0,high:0, mp:0},
'15':{low:0,high:0, mp:0},
'16':{low:0,high:0, mp:0},
'17':{low:0,high:0, mp:0},
'18':{low:0,high:0, mp:0},
'19':{low:0,high:0, mp:0},
};
var minmaxesA = [
{low:578,high:656, mp:617, count:1},
{low:657,high:709, mp:695, count:2},
{low:710,high:737, mp:723, count:3},
{low:738,high:778, mp:752, count:4},
{low:779,high:824, mp:804, count:5},
{low:825,high:860, mp:844, count:6},
{low:861,high:892, mp:876, count:7}
];
var events;
@ -134,6 +165,13 @@
if (!skipOccupancy) {
_occupancy = this.findOccupancy(i.timestamp, events.occupancy);
} else {
for(let _of=0;_of < 7;_of++)
{
if ((i.co2 >= minmaxesA[_of].low) && (i.co2 <= minmaxesA[_of].high)) {
_occupancy = minmaxesA[_of].count;
}
}
}
tempCollection.add({
@ -145,14 +183,34 @@
noise: i.sound,
occupancy: _occupancy
});
}, this);
if (_occupancy !== 0) {
let mm = minmaxes[_occupancy.toString()];
if (mm.low === 0 && mm.high === 0) {
mm.low = i.co2;
mm.high = i.co2;
}
if (mm.low > i.co2) {
mm.low = i.co2;
}
if (mm.high < i.co2) {
mm.high = i.co2;
}
mm.mp = ~~((mm.low + mm.high) / 2);
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');
// Notification.notify('success', 'Data loaded');
}, decoder: function() {
return {};
@ -256,11 +314,11 @@
this.socketHandler.turnOff();
}
notification.clearAll();
// Notification.clearAll();
if (this.model.has('device')) {
this.collection.url = '/apiv2/mdot/' + this.model.get('device');
$('#output').empty();
notification.notify('info', 'Loading...');
// Notification.notify('info', 'Loading...');
this.collection.fetch(fetchObj);
} else {
console.error('Nothing to get!');
@ -287,7 +345,7 @@
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
this.dataSet = new AmCharts.DataSet();
_.bindAll(this, 'render', 'updateGraphV2', 'setupChart');
_.bindAll(this, 'render', 'updateGraphV2', 'setupChart','getLastChunk');
this.collection.on('update', function() {
// Trigger the redraw
this.updateGraphV2();
@ -512,49 +570,17 @@
chart.panelsSettings = panelsSettings;
// PERIOD SELECTOR ///////////////////////////////////
// var periodSelector = new AmCharts.PeriodSelector();
// periodSelector.position = "bottom";
// periodSelector.inputFieldsEnabled = false;
// periodSelector.width = 20;
// //periodSelector.dateFormat = "YYYY-MM-DD JJ:NN"
// periodSelector.periods = [
// {
// period: "hh",
// count: 1,
// label: "1 hour",
// },
// {
// period: "hh",
// count: 12,
// label: "12 hours",
// },
// {
// period: "DD",
// count: 5,
// label: "10 days",
// selected: true
// },
//];
// chart.periodSelector = periodSelector;
//$('#chartdiv').empty();
chart.write('chartdiv');
console.timeEnd('doChartV2');
}, updateGraphV2: function() {
console.time('updateGraphV2');
var self = this;
var chartData = [];
var filter = [];
console.time('chartData');
var step = 0;
const max = 20;
this.socketHandler.set({data: this.getLastChunk()});
_(this.collection.models).each(function(i) {
const co2 = i.get('co2');
let chunk = {
@ -572,8 +598,6 @@
}
filter.push(co2);
//If (step % 100 === 0) {
if (filter.length >= max) {
let sub100 = filter.reduce((prev, cur) => prev + cur);
chunk.sub100 = sub100 / max;
@ -582,7 +606,6 @@
chartData.push(chunk);
step++;
});
console.timeEnd('chartData');
self.doChartV2(chartData);
console.timeEnd('updateGraphV2');
@ -593,7 +616,19 @@
console.log('Model updated:', this.get('data'));
});
}
},
getLastChunk: function() {
let lastItem = this.collection.models[this.collection.models.length - 1];
return {
date: lastItem.get('dt'),
co2: lastItem.get('co2'),
humidity: lastItem.get('humid'),
lux: lastItem.get('lux'),
noise: lastItem.get('noise'),
temp: lastItem.get('temp'),
occupancy: lastItem.get('occupancy')
};
}
});
@ -614,11 +649,11 @@
this.suffix = this.suffixList[this.modes.indexOf(this.widgetMode)];
this.render();
}, render: function() {
let data = this.model.get('data');
// console.log(data);
let html;
const data = this.model.get('data');
let value = (typeof data !== 'undefined') ? data[this.widgetMode] : 0;
value = value.toString().concat(this.suffix);
var html = this.template({value: value});
html = this.template({value: value});
this.$el.html(html);
return this;
@ -637,6 +672,7 @@
var mainSettings = new MainModel();
var views = {};
views.clock = new Clock({model: new ClockModel()});
views.mainview = new MainView({
collection: mdotCollection, model: mainSettings
});
@ -656,5 +692,15 @@
views.luxWidget = new Widget({model: webSocketModel, id: 'widget-lux', el: $('#widget-lux')});
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
views.weather = new Weather({model: new WeatherModel({lat: latitude, long: longitude})});
},
function(e) {console.error(e.code + ' / ' + e.message);});
})(jQuery);

2
mdot/mDotServer.censis/mDotServer.censis/app/js/socketmanager.js
View File

@ -27,7 +27,6 @@ var SOCKETMANAGER = (function() {
}
});
},
turnOn: function() {
this.listening = true;
@ -43,6 +42,7 @@ var SOCKETMANAGER = (function() {
// Ticks are ignored
} else {
if (item.data.deviceid === this.listeningID) {
console.log('Updated', item.data);
this.set({data: item.data});
}
}

122
mdot/mDotServer.censis/mDotServer.censis/views/test.ejs
View File

@ -10,8 +10,9 @@
<link href="css/mui.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/flipclock.css" rel="stylesheet" />
<link href="css/flatWeatherPlugin.css" rel="stylesheet" />
<!-- endbuild -->
@ -53,6 +54,68 @@
margin-bottom: 0px;
}
.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;
color: #ff0063;
width:100%;
}
.time span.hour:after {
content: ":";
}
.time {margin-top:10%;}
.date {
font-size: 18px;
line-height: 1;
margin-top:10%;
}
.temp::after {
content: "°c";
}
.item_content div.tags {
color: blue;
}
.noConnection {
color: rgb(244, 150, 26);
}
#caltext {
color: #fff;
}
.fourpcNudge {
margin-top:4% !important;
}
</style>
</head>
@ -71,24 +134,31 @@
</div>
<div class="mui-col-md-12 panel" style="height:10%; border-width:10px;border-style:solid;border-color:black; background-color:#404040">
<span id="date_time"></span>
<!--<div class="mui-row">-->
<div class="mui-col-xs-6 ">
<div id="time" class="mui--text-center time"></div>
</div>
<div class="mui-col-xs-6 item_content">
<div id="date" class="mui--text-center date"></div>
</div>
<!--</div>-->
</div>
<div class="mui-col-md-12 panel" style="height:10%; border-width:10px;border-style:solid;border-color:black; background-color:#404040">
<div class="mui-col-md-12 panel" style="height:30%; border-width:10px;border-style:solid;border-color:black; background-color:#404040">
<div id="weather" class="mui--text-center weather">
<div id="weatherIcon" class="mui-col-xs-6 mui--text-center mui--align-middle fourpcNudge">
<!--<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=42.3583&lon=-71.0603&name=Downtown Boston&color=#00aaff&units=uk"> </iframe>-->
<div class="mui-row" style="margin:5%" >
<div id="example"></div>
</div>
<div class="mui-col-xs-6 mui--text-center mui--align-middle fourpcNudge" id="weatherText"></div>
</div>
</div>
</div>
</div>
<div class="mui-col-md-12 panel" style="height:10%; border-width:10px;border-style:solid;border-color:black; background-color:#000">
<img src="lib/images/censis_logo_white.png" style="height:70%; width:80%;margin-top:5%;margin-left:10%" />
</div>
@ -334,13 +404,12 @@
<script src="lib/serial.js"></script>
<script src="lib/amstock.js"></script>
<script src="lib/themes/dark.js"></script>
<script src="lib/dateTime.js"></script>
<script src="lib/flipclock.min.js"></script>
<!--<script src="lib/jquery.flatWeatherPlugin.min.js"></script>-->
<script src="lib/jquery.flatWeatherPlugin.js"></script>
<!-- endbuild -->
<!-- build:js -->
<script src="js/clock.js"></script>
<script src="js/websocket.js"></script>
<script src="js/socketmanager.js"></script>
<script src="js/mdot.js"></script>
@ -348,30 +417,3 @@
<!-- endbuild -->
</body>
</html>
<script type="text/javascript">window.onload = date_time('date_time');</script>
<script type="text/javascript">
var clock = $('.clock').FlipClock({
clockFace: 'TwentyFourHourClock'
});
$(document).ready(function () {
//Setup the plugin, see readme for more examples
var example = $("#example").flatWeatherPlugin({
location: "Glasgow, UK", //city and region *required
country: "UK", //country *required
//optional:
api: "openweathermap", //default: openweathermap (openweathermap or yahoo)
apikey: "72c7b00d1918c6cdd5f2d11a5a6fc0b8", //optional api key for openweather
view: "full", //default: full (partial, full, simple, today or forecast)
displayCityNameOnly: true, //default: false (true/false) if you want to display only city name
forecast: 4, //default: 5 (0 -5) how many days you want forecast
render: true, //default: true (true/false) if you want plugin to generate markup
loadingAnimation: true //default: true (true/false) if you want plugin to show loading animation
//units : "metric", //or "imperial" default: "auto"
});
});
</script>