”2016-08-15”

This commit is contained in:
Martin Donnelly 2016-08-15 16:45:10 +01:00
parent d35aff8eeb
commit 23ff8d2cdf
66 changed files with 865 additions and 333 deletions

View File

@ -0,0 +1,66 @@
.amChartsDataSetSelector
{
font-size:12px;
font-family:verdana,helvetica,arial,sans-serif;
}
.amChartsPeriodSelector
{
font-size:12px;
font-family:verdana,helvetica,arial,sans-serif;
}
.amChartsButtonSelected
{
background-color:#CC0000;
border-style:solid;
border-color:#CC0000;
border-width:1px;
color:#FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
outline: none;
box-sizing: border-box;
}
.amChartsButton
{
color: #000000;
background: transparent;
opacity: 0.7;
border: 1px solid rgba(0, 0, 0, .3);
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
outline: none;
box-sizing: border-box;
}
.amChartsCompareList
{
border-style:solid;
border-color:#CCCCCC;
border-width:1px;
}
.amChartsCompareList div
{
-webkit-box-sizing: initial;
box-sizing: initial;
}
.amChartsInputField
{
}
.amChartsLegend
{
}
.amChartsPanel
{
}

View File

@ -1,9 +1,8 @@
'use strict';
/* global Backbone, _, $ */
/* global Backbone, _, $, AmCharts */
/* global mainview */
/* jshint browser: true , devel: true*/
(function($) {
var mqttConfig = {
@ -25,24 +24,26 @@
var EventsModel = Backbone.Model.extend({
initialize: function() {
_.bindAll(this, 'processAdded');
this.on('all',function(d) {
console.log('model:all',d);
this.temporal = {low: 0,high: 0};
this.on('all', function(d) {
console.log('model:all', d);
this.temporal = {low: 0, high: 0};
});
this.on('remove', function() {
$('#output').empty();
});
this.on('add',function() {
this.on('add', function() {
this.processAdded();
});
},
processAdded: function() {
}, processAdded: function() {
console.log('Model:ProcessAdded');
var tempCollection = new Backbone.Collection();
_.invoke(DeviceCollection.toArray(), 'destroy');
this.temporal = {low: 0,high: 0};
this.temporal = {low: 0, high: 0};
_(this.get('events')).each(function(i) {
if (this.temporal.low === 0 || this.temporal.low > i.timestamp) {
@ -53,7 +54,14 @@
this.temporal.high = i.timestamp;
}
tempCollection.add({dt: i.timestamp,lux: i.lux, temp: i.temp, co2: i.co2, humid: i.humidity, noise: i.sound});
tempCollection.add({
dt: i.timestamp,
lux: i.lux,
temp: i.temp,
co2: i.co2,
humid: i.humidity,
noise: i.sound
});
}, this);
DeviceCollection.temporal = this.temporal;
@ -61,26 +69,33 @@
DeviceCollection.models = tempCollection.models;
DeviceCollection.trigger('update');
console.log('temporal:', this.temporal);
},
decoder: function(data) {
}, decoder: function(data) {
var _obj = {};
var _data = window.atob(data).split('');
var bytes = _data.map(i => i.charCodeAt());
_obj.light = parseInt('0x' + ('0' + bytes[0]).substr(-2) + ('0' + bytes[1]).substr(-2));
_obj.co2 = parseInt(_data[2] + _data[3] + _data[4] + _data[5] + _data[6], 10);
_obj.temp = (parseInt(_data[7] + _data[8] + _data[9] + _data[10] + _data[11], 10) - 1000) / 10;
_obj.humid = (parseInt(_data[12] + _data[13] + _data[14] + _data[15] + _data[16], 10) / 10);
_obj.noise = parseInt('0x' + ('0' + bytes[17]).substr(-2) + ('0' + bytes[18]).substr(-2));
_obj.light = parseInt('0x' + ('0' + bytes[0]).substr(-2) + ('0' + bytes[1]).substr(
-2));
_obj.co2 = parseInt(_data[2] + _data[3] + _data[4] + _data[5] + _data[6],
10);
_obj.temp = (parseInt(_data[7] + _data[8] + _data[9] + _data[10] + _data[11],
10) - 1000) / 10;
_obj.humid = (parseInt(_data[12] + _data[13] + _data[14] + _data[15] + _data[16],
10) / 10);
_obj.noise = parseInt('0x' + ('0' + bytes[17]).substr(-2) + ('0' + bytes[18]).substr(
-2));
_obj.binData = bytes;
return _obj;
},
dateTime: function($date) {
}, dateTime: function($date) {
var dateTime = new Date.create($date);
var date = dateTime.format('{yyyy}-{MM}-{dd}');
var time = dateTime.format('{HH}:{mm}:{ss}');
return {dateTime: dateTime.format('{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'), date: date, time: time};
return {
dateTime: dateTime.format('{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'),
date: date,
time: time
};
}
});
@ -111,8 +126,6 @@
}
});
var MDOT = Backbone.View.extend({
model: EventsModel, el: $('#output'),
@ -122,8 +135,9 @@
_.bindAll(this, 'render', 'refresh', 'update');
this.collection.bind('change reset add remove', this.render, this);
this.template = _.template($('#list-template').html());
this.render();
//This.template = _.template($('#list-template').html());
this.template = _.template($('#loaded-template').html());
//This.render();
}, refresh: function() {
}, update: function() {
@ -136,64 +150,60 @@
}, render: function() {
console.log('MDOT:render');
$('#output').empty();
var that = this;
this.$el.empty();
this.collection.each(function(model) {
var events = model.get('events');
var e = new ItemView({model: model.toJSON()}).render().el;
that.$el.append(this.template);
console.log('render:done:');
that.$el.append(e);
/* Var that = this;
this.$el.empty();
this.collection.each(function(model) {
var events = model.get('events');
var e = new ItemView({model: model.toJSON()}).render().el;
});
console.log('bah');
console.log('render:done:');
that.$el.append(e);
});
console.log('bah');*/
return this;
}
});
var MainModel = Backbone.Model.extend({});
var MainView = Backbone.View.extend({
el: $('#main'),
template: _.template($('#main-template').html()),
events: {
'change select#device': 'changeDevice',
'click button#refresh': 'updateDevice',
'change input#from': 'changeDate',
'change input#to': 'changeDate',
submit: function(event) {}
el: $('#main'), template: _.template($('#main-template').html()), events: {
'change select#device': 'changeDevice',
'click button#refresh': 'updateDevice',
'change input#from': 'changeDate',
'change input#to': 'changeDate',
submit: function(event) {}
},
initialize: function() {
_.bindAll(this, 'render','changeDevice', 'updateDevice');
}, initialize: function() {
_.bindAll(this, 'render', 'changeDevice', 'updateDevice');
this.model.on('change',this.updateDevice);
console.log('MainView:', this);
this.render();
},
render: function() {
this.model.on('change', this.updateDevice);
console.log('MainView:', this);
this.render();
}, render: function() {
$(this.el).html(this.template());
return this;
},changeDate: function(elm) {
console.log('ChangeDate', elm);
}, changeDate: function(elm) {
console.log('ChangeDate', elm);
if (elm.currentTarget.valueAsDate === null) {
this.model.unset(elm.currentTarget.id);
} else {
this.model.set(elm.currentTarget.id, elm.currentTarget.valueAsDate);
}
if (elm.currentTarget.valueAsDate === null) {
this.model.unset(elm.currentTarget.id);
} else {
this.model.set(elm.currentTarget.id, elm.currentTarget.valueAsDate);
}
},
changeDevice: function() {
}, changeDevice: function() {
var newDevice;
console.log('MainView:ChangeDevice');
newDevice = this.$el.find('#device')[0].value;
this.model.set('device', newDevice);
},
updateDevice: function() {
}, updateDevice: function() {
var fetchObj = {beforeSend: sendAuthentication};
var rangeObj = {start: null, end: null};
console.log('MainView:Updatedevice');
@ -206,8 +216,10 @@
// FetchObj.data = $.param({key:'"'+ this.model.get('device') + '"'});
// this.collection.url = 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + this.model.get('device');
// this.collection.url = '/api/mdot/' + this.model.get('device');
this.collection.url = '/apiv2/mdot/' + this.model.get('device');
this.collection.url = '/apiv2/mdot/' + this.model.get('device');
// this.collection.url = 'http://127.0.0.1:5984/mdot/_design/getDevice/_view/getDevice';
$('#output').empty();
this.collection.fetch(fetchObj);
} else {
console.error('Nothing to get!');
@ -221,32 +233,32 @@
el: $('#graph'),
template: _.template($('#AMChart-template').html()),
initialize: function() {
this.modes = ['','lux','temp','co2','humid','noise'];
this.mode = 0;
this.modes = ['', 'lux', 'temp', 'co2', 'humid', 'noise'];
this.titles = ['','Light Levels','Temperature','Co2 Levels','Humidity','Sound'];
this.mode = 0;
// Config AMChart
this.chart = new AmCharts.AmStockChart();
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
this.dataSet = new AmCharts.DataSet();
// Config AMChart
this.chart = new AmCharts.AmStockChart();
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
this.dataSet = new AmCharts.DataSet();
console.log('GraphView!');
_.bindAll(this, 'render', 'changeMode', 'updateGraph','setupChart');
this.collection.on('update',function(d) {
if (this.mode > 0) {
this.updateGraph();
}
}, this);
console.log('GraphView!');
_.bindAll(this, 'render', 'changeMode', 'updateGraph', 'setupChart');
this.collection.on('update', function(d) {
if (this.mode > 0) {
this.updateGraph();
}
}, this);
this.render();
// This.setupChart();
},
this.render();
// This.setupChart();
},
events: {
'change select#displaymode': 'changeMode'
},
'change select#displaymode': 'changeMode'
},
render: function() {
$(this.el).html(this.template());
return this;
},
setupChart: function() {
@ -262,78 +274,209 @@
},
changeMode: function() {
this.mode = this.$el.find('#displaymode')[0].value;
this.updateGraph();
console.log('new mode:', this.mode);
this.mode = this.$el.find('#displaymode')[0].value;
this.updateGraph();
console.log('new mode:', this.mode);
},
},
updateGraph: function() {
var self = this;
let getMode = this.modes[this.mode];
var calcArray;
var startX;
var xstep;
var scale;
let ceiling, ceilingLimit;
let points = [];
let data = [];
let circle, title;
let getMode = this.modes[this.mode];
var occupied;
var chartData = [];
var chartData = [];
var temporal = {high: 0, low: 0};
var HL = {high: 0, low: 0};
_(this.collection.models).each(function(i) {
chartData.push({
date: i.get('dt'),
value: i.get(getMode)
});
var mode = parseInt(this.mode);
console.log('mode:', mode, this.mode);
}, this);
_(this.collection.models).each(function(i) {
var dt = i.get('dt');
var obj;
var value, valueB;
if (mode < 6) {
value = i.get(getMode);
} else {
if (mode === 6) {
value = i.get(this.modes[1]);
valueB = i.get(this.modes[3]);
} else {
value = i.get(this.modes[2]);
valueB = i.get(this.modes[4]);
}
}
if (temporal.low === 0 || dt < temporal.low) {
temporal.low = dt;
}
if (temporal.high === 0 || dt > temporal.high) {
temporal.high = dt;
}
if (HL.low === 0 || value < HL.low) {
HL.low = value;
}
if (HL.high === 0 || value > HL.high) {
HL.high = value;
}
obj = {date: dt, value: value};
if (mode => 6) {
obj.valueB = valueB;
}
chartData.push(obj);
}, this);
console.log(chartData);
this.dataSet.fieldMappings = [{
fromField: 'value',
toField: 'value'
}];
console.log('Doing chart now');
this.dataSet.dataProvider = chartData;
this.chart.dataSets = [this.dataSet];
//Debugger;
// SERIAL CHART
self.chart = new AmCharts.AmSerialChart();
//"2016-08-10T23:04:31.000Z"
self.chart.dataProvider = chartData;
self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
self.chart.categoryField = 'date';
// AXES
// category
var categoryAxis = self.chart.categoryAxis;
categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true
categoryAxis.minPeriod = 'mm'; // Our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0.1;
categoryAxis.minorGridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.minorGridEnabled = true;
categoryAxis.inside = true;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
valueAxis.showFirstLabel = false;
valueAxis.showLastLabel = false;
valueAxis.title = this.titles[this.mode];
valueAxis.position = 'left';
self.chart.addValueAxis(valueAxis);
if (mode === 6) {
var co2Axis = new AmCharts.ValueAxis();
co2Axis.tickLength = 0;
co2Axis.axisAlpha = 0;
co2Axis.showFirstLabel = false;
co2Axis.showLastLabel = false;
co2Axis.title = 'Co2 Levels';
co2Axis.position = 'right';
self.chart.addValueAxis(co2Axis);
}
if (mode === 7) {
var otherAxis = new AmCharts.ValueAxis();
otherAxis.tickLength = 0;
otherAxis.axisAlpha = 0;
otherAxis.showFirstLabel = false;
otherAxis.showLastLabel = false;
otherAxis.title = 'Humidity';
otherAxis.position = 'right';
self.chart.addValueAxis(otherAxis);
}
var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = false;
stockPanel1.title = 'Value';
stockPanel1.percentHeight = 70;
// Graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = 'value';
graph1.type = 'smoothedLine';
graph1.lineThickness = 2;
graph1.bullet = 'round';
graph1.bulletBorderColor = '#FFFFFF';
graph1.bulletBorderAlpha = 1;
graph1.bulletBorderThickness = 3;
stockPanel1.addStockGraph(graph1);
// Create stock legend
var stockLegend1 = new AmCharts.StockLegend();
stockLegend1.valueTextRegular = ' ';
stockLegend1.markerType = 'none';
stockPanel1.stockLegend = stockLegend1;
this.chart.panels = [stockPanel1];
// GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 3;
graph.lineColor = '#00CC00';
graph.valueField = 'value';
graph.dashLength = 3;
graph.bullet = 'round';
graph.balloonText = '[[category]]<br><b><span style=\'font-size:14px;\'>value:[[value]]</span></b>';
self.chart.addGraph(graph);
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.mouseWheelZoomEnabled = true;
panelsSettings.usePrefixes = true;
this.chart.panelsSettings = panelsSettings;
if (mode === 6) {
var co2graph = new AmCharts.AmGraph();
co2graph.valueField = 'valueB';
co2graph.title = 'Co2';
co2graph.type = 'line';
co2graph.valueAxis = co2Axis; // Indicate which axis should be used
co2graph.lineColor = '#786c56';
co2graph.lineThickness = 1;
co2graph.legendValueText = '[[description]]/[[value]]';
this.chart.write('chartdiv');
co2graph.bullet = 'round';
co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
co2graph.bulletBorderColor = '#786c56';
co2graph.bulletBorderAlpha = 1;
co2graph.bulletBorderThickness = 2;
co2graph.bulletColor = '#000000';
//Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
co2graph.labelPosition = 'right';
//Co2graph.balloonText = "latitude:[[value]]";
co2graph.showBalloon = true;
co2graph.dashLengthField = 'dashLength';
self.chart.addGraph(co2graph);
}
}
if (mode === 7) {
var otherGraph = new AmCharts.AmGraph();
otherGraph.valueField = 'valueB';
otherGraph.title = 'Humidity';
otherGraph.type = 'line';
otherGraph.valueAxis = otherAxis; // Indicate which axis should be used
otherGraph.lineColor = '#786c56';
otherGraph.lineThickness = 1;
otherGraph.legendValueText = '[[description]]/[[value]]';
otherGraph.bullet = 'round';
otherGraph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
otherGraph.bulletBorderColor = '#786c56';
otherGraph.bulletBorderAlpha = 1;
otherGraph.bulletBorderThickness = 2;
otherGraph.bulletColor = '#000000';
//Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
otherGraph.labelPosition = 'right';
//Co2graph.balloonText = "latitude:[[value]]";
otherGraph.showBalloon = true;
otherGraph.dashLengthField = 'dashLength';
self.chart.addGraph(otherGraph);
}
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.valueLineEnabled = true;
chartCursor.valueLineBalloonEnabled = true;
self.chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
self.chart.addChartScrollbar(chartScrollbar);
/* // HORIZONTAL GREEN RANGE
var guide = new AmCharts.Guide();
guide.value = 525;
guide.toValue = 575;
guide.fillColor = '#00CC00';
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);*/
// WRITE
$('#chartdiv').empty();
self.chart.write('chartdiv');
}
});
@ -342,7 +485,10 @@
var mdotCollection = new mDotCollection();
var mainSettings = new MainModel();
var mainview = new MainView({collection: mdotCollection, model: mainSettings});
var mainview = new MainView({
collection: mdotCollection,
model: mainSettings
});
var mdot = new MDOT({collection: mdotCollection});

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24px" height="32px" viewBox="0 0 24 32">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="2" y="4" fill="#000000" opacity="0.3" width="20" height="26" rx="3" ry="3" filter="url(#f1)"/>
<rect x="2" y="3" fill="#ffffff" width="20" height="26" rx="3" ry="3"/>
<line x1="10.5" y1="11" x2="10.5" y2="21" stroke="#A9A9A9"/>
<line x1="13.5" y1="11" x2="13.5" y2="21" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 700 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24px" height="32px" viewBox="0 0 24 32">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="2" y="4" fill="#000000" opacity="0.3" width="20" height="26" rx="3" ry="3" filter="url(#f1)"/>
<rect x="2" y="3" fill="#000000" width="20" height="26" rx="3" ry="3"/>
<line x1="10.5" y1="11" x2="10.5" y2="21" stroke="#A9A9A9"/>
<line x1="13.5" y1="11" x2="13.5" y2="21" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 699 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 681 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="32px" height="24px" viewBox="0 0 32 24">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="3" y="4" fill="#000000" opacity="0.3" width="26" height="20" rx="3" ry="3" filter="url(#f1)"/>
<rect x="3" y="3" fill="#000000" width="26" height="20" rx="3" ry="3"/>
<line x1="10" y1="11.5" x2="21" y2="11.5" stroke="#A9A9A9"/>
<line x1="10" y1="14.5" x2="21" y2="14.5" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 698 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 715 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="32px" height="24px" viewBox="0 0 32 24">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="3" y="4" fill="#000000" opacity="0.3" width="26" height="20" rx="3" ry="3" filter="url(#f1)"/>
<rect x="3" y="3" fill="#FFFFFF" width="26" height="20" rx="3" ry="3"/>
<line x1="10" y1="11.5" x2="21" y2="11.5" stroke="#A9A9A9"/>
<line x1="10" y1="14.5" x2="21" y2="14.5" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 698 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="2" y="2" fill="#000000" opacity="0.3" width="16" height="18" rx="3" ry="3" filter="url(#f1)"/>
<rect x="2" y="1" fill="#ffffff" width="16" height="18" rx="3" ry="3"/>
<line x1="8.5" y1="5" x2="8.5" y2="15" stroke="#A9A9A9"/>
<line x1="11.5" y1="5" x2="11.5" y2="15" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="2" y="2" fill="#000000" opacity="0.3" width="16" height="18" rx="3" ry="3" filter="url(#f1)"/>
<rect x="2" y="1" fill="#000000" width="16" height="18" rx="3" ry="3"/>
<line x1="8.5" y1="5" x2="8.5" y2="15" stroke="#A9A9A9"/>
<line x1="11.5" y1="5" x2="11.5" y2="15" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="1" y="3" fill="#000000" opacity="0.3" width="18" height="16" rx="3" ry="3" filter="url(#f1)"/>
<rect x="1" y="2" fill="#000000" width="18" height="16" rx="3" ry="3"/>
<line x1="5" y1="8.5" x2="15" y2="8.5" stroke="#A9A9A9"/>
<line x1="5" y1="11.5" x2="15" y2="11.5" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<rect x="1" y="3" fill="#000000" opacity="0.3" width="18" height="16" rx="3" ry="3" filter="url(#f1)"/>
<rect x="1" y="2" fill="#ffffff" width="18" height="16" rx="3" ry="3"/>
<line x1="5" y1="8.5" x2="15" y2="8.5" stroke="#A9A9A9"/>
<line x1="5" y1="11.5" x2="15" y2="11.5" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="35px" height="35px" viewBox="0 0 35 35">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17.5" cy="18.5" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17.5" cy="17.5" fill="#ffffff" r="15.5"/>
<line x1="16.5" y1="12" x2="16.5" y2="23" stroke="#A9A9A9"/>
<line x1="19.5" y1="12" x2="19.5" y2="23" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="35px" height="35px" viewBox="0 0 35 35">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17.5" cy="18.5" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17.5" cy="17.5" fill="#000000" r="15.5"/>
<line x1="16.5" y1="12" x2="16.5" y2="23" stroke="#A9A9A9"/>
<line x1="19.5" y1="12" x2="19.5" y2="23" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="35px" height="35px" viewBox="0 0 35 35">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17.5" cy="18.5" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17.5" cy="17.5" fill="#000000" r="15.5"/>
<line y1="16.5" x1="12" y2="16.5" x2="23" stroke="#A9A9A9"/>
<line y1="19.5" x1="12" y2="19.5" x2="23" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="35px" height="35px" viewBox="0 0 35 35">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17.5" cy="18.5" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17.5" cy="17.5" fill="#ffffff" r="15.5"/>
<line y1="16.5" x1="12" y2="16.5" x2="23" stroke="#A9A9A9"/>
<line y1="19.5" x1="12" y2="19.5" x2="23" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="10" cy="11" fill="#000000" opacity="0.3" r="9" filter="url(#f1)"/>
<circle cx="10" cy="10" fill="#ffffff" r="9"/>
<line x1="8.5" y1="5" x2="8.5" y2="15" stroke="#A9A9A9"/>
<line x1="11.5" y1="5" x2="11.5" y2="15" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="10" cy="11" fill="#000000" opacity="0.3" r="9" filter="url(#f1)"/>
<circle cx="10" cy="10" fill="#000000" r="9"/>
<line x1="8.5" y1="5" x2="8.5" y2="15" stroke="#A9A9A9"/>
<line x1="11.5" y1="5" x2="11.5" y2="15" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="10" cy="11" fill="#000000" opacity="0.3" r="9" filter="url(#f1)"/>
<circle cx="10" cy="10" fill="#000000" r="9"/>
<line y1="8.5" x1="5" y2="8.5" x2="15" stroke="#A9A9A9"/>
<line y1="11.5" x1="5" y2="11.5" x2="15" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20px" height="20px" viewBox="0 0 20 20">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="10" cy="11" fill="#000000" opacity="0.3" r="9" filter="url(#f1)"/>
<circle cx="10" cy="10" fill="#ffffff" r="9"/>
<line y1="8.5" x1="5" y2="8.5" x2="15" stroke="#A9A9A9"/>
<line y1="11.5" x1="5" y2="11.5" x2="15" stroke="#A9A9A9"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="38px" height="38px" viewBox="0 0 38 38">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17" cy="20" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17" cy="19" fill="#FFFFFF" r="15.5"/>
<rect x="12" y="26" fill="#CCCCCC" width="14" height="1"/>
<path transform="translate(-2,0)" d="M21.716,10.329L10.594,21.451l3.957,3.962h4.966l8.64-8.642L21.716,10.329z M19.073,24.347h-4.081l-2.896-2.899l4.768-4.766 l4.936,4.938L19.073,24.347z"/>
</svg>

After

Width:  |  Height:  |  Size: 781 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="38px" height="38px" viewBox="0 0 38 38">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17" cy="20" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17" cy="19" stroke="#000000" stroke-width="1.7" fill="#FFFFFF" r="15.5"/>
<rect x="12" y="26" fill="#CCCCCC" width="14" height="1"/>
<path transform="translate(-2,0)" d="M21.716,10.329L10.594,21.451l3.957,3.962h4.966l8.64-8.642L21.716,10.329z M19.073,24.347h-4.081l-2.896-2.899l4.768-4.766 l4.936,4.938L19.073,24.347z"/>
</svg>

After

Width:  |  Height:  |  Size: 817 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="19px" height="19px" viewBox="0 0 19 19">
<circle cx="8.5" cy="8.5" r="7.5" stroke="#000000" stroke-width="1.5" fill-opacity="0"/>
<line x1="5" y1="9" x2="12" y2="9" stroke="#000000" stroke-width="1.5"/>
<line x1="14" y1="14" x2="19" y2="19" stroke="#000000" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 533 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="19px" height="19px" viewBox="0 0 19 19">
<circle cx="8.5" cy="8.5" r="7.5" stroke="#ffffff" stroke-width="1.5" fill-opacity="0"/>
<line x1="5" y1="9" x2="12" y2="9" stroke="#ffffff" stroke-width="1.5"/>
<line x1="14" y1="14" x2="19" y2="19" stroke="#ffffff" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 533 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 257 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="38px" height="38px" viewBox="0 0 38 38">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17" cy="20" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17" cy="19" fill="#FFFFFF" r="15.5"/>
<rect x="11" y="26" fill="#CCCCCC" width="14" height="1"/>
<path transform="translate(-1,0)" d="M17.098,20.305c-0.142,0.146,0.101,0.04,0.137,0.004c0.027-0.028,0.204-0.09,0.484-0.09c0.338,0,0.626,0.092,0.787,0.255
c0.473,0.472,0.424,0.932,0.393,1.078l-2.521,1.055l-1.577-1.577l1.054-2.52c0.039-0.009,0.105-0.018,0.188-0.018
c0.219,0,0.555,0.069,0.893,0.407c0.378,0.378,0.246,1.188,0.166,1.271C17.062,20.207,17.062,20.269,17.098,20.305z
M26.984,14.472c-0.008-0.674-0.61-1.257-1.31-1.933c-0.134-0.129-0.679-0.673-0.809-0.808c-0.679-0.702-1.266-1.31-1.943-1.31
c-0.37,0-0.734,0.207-1.114,0.587l-6.852,6.847c-0.012,0.016-2.877,7.354-2.877,7.354c-0.012,0.032,0,0.063,0.022,0.091
c0.021,0.021,0.044,0.029,0.067,0.029c0.01,0,0.018-0.003,0.028-0.007c0,0,7.357-2.864,7.369-2.877l6.854-6.847
C26.803,15.216,26.988,14.848,26.984,14.472z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="38px" height="38px" viewBox="0 0 38 38">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
<circle cx="17" cy="20" fill="#000000" opacity="0.3" r="15.5" filter="url(#f1)"/>
<circle cx="17" cy="19" stroke="#000000" stroke-width="1.7" fill="#FFFFFF" r="15.5"/>
<rect x="11" y="26" fill="#CCCCCC" width="14" height="1"/>
<path transform="translate(-1,0)" d="M17.098,20.305c-0.142,0.146,0.101,0.04,0.137,0.004c0.027-0.028,0.204-0.09,0.484-0.09c0.338,0,0.626,0.092,0.787,0.255
c0.473,0.472,0.424,0.932,0.393,1.078l-2.521,1.055l-1.577-1.577l1.054-2.52c0.039-0.009,0.105-0.018,0.188-0.018
c0.219,0,0.555,0.069,0.893,0.407c0.378,0.378,0.246,1.188,0.166,1.271C17.062,20.207,17.062,20.269,17.098,20.305z
M26.984,14.472c-0.008-0.674-0.61-1.257-1.31-1.933c-0.134-0.129-0.679-0.673-0.809-0.808c-0.679-0.702-1.266-1.31-1.943-1.31
c-0.37,0-0.734,0.207-1.114,0.587l-6.852,6.847c-0.012,0.016-2.877,7.354-2.877,7.354c-0.012,0.032,0,0.063,0.022,0.091
c0.021,0.021,0.044,0.029,0.067,0.029c0.01,0,0.018-0.003,0.028-0.007c0,0,7.357-2.864,7.369-2.877l6.854-6.847
C26.803,15.216,26.988,14.848,26.984,14.472z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24px" height="24px" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="11" fill="#FFFFFF" stroke="rgba(0,0,0,0.15)"/>
<line x1="7" y1="7" x2="17" y2="17" stroke="#000000"/>
<line x1="17" y1="7" x2="7" y2="17" stroke="#000000"/>
</svg>

After

Width:  |  Height:  |  Size: 479 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24px" height="24px" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="11" fill="#DADADA" stroke="rgba(0,0,0,0.15)"/>
<line x1="7" y1="7" x2="17" y2="17" stroke="#000000"/>
<line x1="17" y1="7" x2="7" y2="17" stroke="#000000"/>
</svg>

After

Width:  |  Height:  |  Size: 479 B

View File

@ -3,220 +3,203 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/mui.css" rel="stylesheet"
type="text/css"/>
<link href="css/mui.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="lib/notification.js"></script>
<link rel="stylesheet" href="css/notification.css">
</head>
<body>
<div id="main"></div>
<div id="graph"></div>
<div id="output"></div>
<script type="text/template" id="main-template">
<div class="mui-container">
<div class="mui-row">
<div class="mui-select mui-col-md-6">
<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>
<div class="mui-col-md-3">
<div class="mui-textfield">
<input type="date" placeholder="" id='from' name="from" /> <label>From</label>
</div>
</div>
<div class="mui-col-md-3">
<div class="mui-textfield">
<input type="date" placeholder="" id='to' name="to" /> <label>To</label>
</div>
<div class="mui-container">
<div class='mui-row'>
<div class="mui-col-md-3">
<div id="main"></div>
<div id="graph"></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>
<!--<div id="main"></div>-->
<!--<div id="graph"></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">
<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>
</div>
<div class="mui-row">
<div class="mui-col-md-6">
<div class="mui-textfield">
<input type="date" placeholder="" id='from' name="from"/>
<label>From</label>
</div>
</div>
<div class="mui-col-md-6">
<div class="mui-textfield">
<input type="date" placeholder="" id='to' name="to"/>
<label>To</label>
</div>
</div>
</div>
</div>
<div class="mui-row">
<button id='refresh' class="mui-btn mui-btn--small mui-btn--primary">Refresh</button>
<button id='refresh'
class="mui-btn mui-btn--small mui-btn--primary">Refresh
</button>
</div>
</div>
</script>
<script type="text/template" id="list-template">
<ul></ul>
</script>
<script type="text/template" id="item-template">
<div class="mui-row">
<div class="mui-col-md-2"><%= item.timestamp %></div>
</script>
<script type="text/template" id="list-template">
<ul></ul>
</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>
<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>
<script type="text/template" id="AMChart-template">
<div class="mui-container">
</select> <label>Graph</label>
</div>
</div>
</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 value="0"></option>
<option value="1">
Light
</option>
<option value="2">
Temp
</option>
<option value="3">
Co2
</option>
<option value="4">
Humidity
Humidity
</option>
<option value="5">
Noise
Noise
</option>
</select> <label>Graph</label>
</div>
</select> <label>Graph</label>
</div>
</div>
<div class="mui-container">
<div id="chartdiv" style="width:100%; height:600px;"></div>
</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 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 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 src="lib/jquery.js"
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
crossorigin="anonymous"></script>
<script src="lib/base64.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/sugar-date.js"></script>
<script src="lib/amcharts.js"></script>
<script src="lib/serial.js"></script>
<script src="lib/amstock.js"></script>
<script src="js/mdot.js"></script>
</script>
<script src="lib/jquery.js"
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
crossorigin="anonymous"></script>
<script src="lib/base64.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/sugar-date.js"></script>
<script src="lib/amcharts.js"></script>
<script src="lib/serial.js"></script>
<script src="lib/amstock.js"></script>
<script src="js/mdot.js"></script>
</body>
</html>

View File

@ -13,7 +13,7 @@ module.exports = function(db) {
module.sqlAllGetDecoded = function(deviceId) {
logger.debug('mdot:sqlAllGetDecoded');
return new Promise(function(resolve, reject) {
db.any('select * from decoded where deviceid=$1;', [deviceId])
db.any('select * from decoded where deviceid=$1 order by timestamp asc;', [deviceId])
.then(function(d) {
return resolve(d);
})
@ -27,7 +27,7 @@ module.exports = function(db) {
module.sqlRangedGetDecoded = function(params) {
logger.debug('mdot:sqlRangedGetDecoded');
return new Promise(function(resolve, reject) {
db.any('select * from decoded where deviceid=$1 and timestamp between $2 and $3;', [params.deviceID, params.startTS, params.endTS])
db.any('select * from decoded where deviceid=$1 and timestamp between $2 and $3 order by timestamp asc;', [params.deviceID, params.startTS, params.endTS])
.then(function(d) {
return resolve(d);
})