ziver/hal
1
1
Fork 0
Code Pull requests Releases Activity

Created Json endpoints and separated json stuff from http pages, moved chart JS to common file.

Browse source
This commit is contained in:
Ziver Koc 2016-11-28 17:11:17 +01:00
parent 969f089a9e
commit 92f402a07b
12 changed files with 348 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

77
resource/web/js/hal.js
View file

@ -44,3 +44,80 @@ $.fn.relTimestamp = function() {
return this;
});
};
////////////////////////////////////// Hal functions
////////////// Chart functions
function createChart(elementId, url, updateTime=-1){
var tickConf = {count: 20};
if (updateTime < 60*60*1000)
tickConf['format'] = '%H:%M';
else if (updateTime < 24*60*60*1000)
tickConf['format'] = '%Y-%m-%d %H:%M';
else
tickConf['format'] = '%Y-%m-%d';
var chart = c3.generate({
bindto: elementId,
data: {json: []}, // set empty data, data will be loaded later
axis : {
x : {
type : 'timeseries',
label: 'Timestamp',
tick: tickConf,
},
y: {
label: 'Power (kWh)',
min: 0,
},
y2: {
show: true,
label: 'Temperature (C)',
min: 0,
}
},
grid: {
y: {show: true}
},
point: {
show: false
}
});
updateChart(chart, url, updateTime);;
}
function updateChart(chart, url, updateTime){
$.getJSON(url, function(json){
chart.load(getChartData(json));
});
if (updateTime > 0)
setTimeout(function(){ updateChart(chart, url, updateTime); }, updateTime);
}
function getChartData(json){
var dataXaxis = {};
var dataYaxis = {};
var data = [];
var labels = [];
json.forEach(function(sensor, i) {
var index = 'data'+i;
labels[index] = sensor.user +": "+ sensor.name;
dataXaxis[index] = 'data'+i+'x';
data.push([index+'x'].concat(sensor.timestamps));
data.push([index].concat(sensor.data));
if (sensor.type == "PowerConsumptionSensorData")
dataYaxis[index] = 'y';
else //if (sensor.type == "TemperatureSensorData")
dataYaxis[index] = 'y2';
});
return {
xs: dataXaxis,
columns: data,
names: labels,
type: 'spline',
axes: dataYaxis,
};
}

4
resource/web/map.tmpl
View file

@ -136,7 +136,7 @@
function drawMap(){
// Get map data
$.getJSON("?json&action=getdata", function(json){
$.getJSON("/data/map?action=getdata", function(json){
// reset map
svg.clear();
@ -183,7 +183,7 @@
$.ajax({
async: false,
dataType: "json",
url: "?json",
url: "/data/map?",
data: {
action: "save",
id: element.attr("device-id"),

81
resource/web/pc_overview.tmpl
View file

@ -20,83 +20,10 @@
<script>
$(function(){
initChart("#minute-power-chart", "?json&data=minute", 5*60*1000);
initChart("#hour-power-chart", "?json&data=hour", 60*60*1000);
initChart("#day-power-chart", "?json&data=day", 24*60*60*1000);
initChart("#week-power-chart", "?json&data=week", 7*24*60*60*1000);
createChart("#minute-power-chart", "/data/sensor?aggr=minute", 5*60*1000);
createChart("#hour-power-chart", "/data/sensor?aggr=hour", 60*60*1000);
createChart("#day-power-chart", "/data/sensor?aggr=day", 24*60*60*1000);
createChart("#week-power-chart", "/data/sensor?aggr=week", 7*24*60*60*1000);
});
function initChart(elementId, url, updateTime){
var tickConf = {count: 20};
if (updateTime < 60*60*1000)
tickConf['format'] = '%H:%M';
else if (updateTime < 24*60*60*1000)
tickConf['format'] = '%Y-%m-%d %H:%M';
else
tickConf['format'] = '%Y-%m-%d';
var chart = c3.generate({
bindto: elementId,
data: {json: []}, // set empty data, data will be loaded later
axis : {
x : {
type : 'timeseries',
label: 'Timestamp',
tick: tickConf,
},
y: {
label: 'Power (kWh)',
min: 0,
},
y2: {
show: true,
label: 'Temperature (C)',
min: 0,
}
},
grid: {
y: {show: true}
},
point: {
show: false
}
});
updateChart(chart, url, updateTime);;
}
function updateChart(chart, url, updateTime){
$.getJSON(url, function(json){
chart.load(getChartData(json));
});
setTimeout(function(){ updateChart(chart, url, updateTime); }, updateTime);
}
function getChartData(json){
var dataXaxis = {};
var dataYaxis = {};
var data = [];
var labels = [];
json.forEach(function(sensor, i) {
var index = 'data'+i;
labels[index] = sensor.user +": "+ sensor.name;
dataXaxis[index] = 'data'+i+'x';
data.push([index+'x'].concat(sensor.timestamps));
data.push([index].concat(sensor.data));
if (sensor.type == "PowerConsumptionSensorData")
dataYaxis[index] = 'y';
else //if (sensor.type == "TemperatureSensorData")
dataYaxis[index] = 'y2';
});
return {
xs: dataXaxis,
columns: data,
names: labels,
type: 'spline',
axes: dataYaxis,
};
}
</script>

27
resource/web/sensor_detail.tmpl
View file

@ -1,26 +1,5 @@
<h1 class="page-header">Details for <a href="#">{{sensor.getName()}}</a></h1>
<script>
$(function(){
Morris.Line({
element: "chart",
data: [
{ x: (Date.now()-24*60*60*1000) },
{{#aggregation}}
{ x: {{.timestamp}}, data: {{.data}} },
{{/aggregation}}
{ x: Date.now() }
],
xkey: 'x',
ykeys: ['data'],
labels: ['Data'],
continuousLine: false,
resize: true,
hideHover: 'auto',
});
});
</script>
<div class="col-md-12">
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Last 24 hours</div>
@ -29,7 +8,11 @@
</div>
</div>
</div>
<script>
$(function(){
createChart("#chart", "/data/sensor?aggr=minute&sensor_id={{sensor.getID()}}", 5*60*1000);
});
</script>
<div class="col-md-5">
<div class="panel panel-default drop-shadow">