From 158a0bbf58749fbf53d58e43092968acdd8d2374 Mon Sep 17 00:00:00 2001
From: johannnes <>
Date: Fri, 3 Jan 2014 12:44:40 +0000
Subject: [PATCH] chartingfrontend: fixed bug in zoom, device and
readingselection
git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@4545 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
www/frontend/controls_frontend.txt | 8 +-
www/frontend/www/frontend/app/app.js | 46 +++--
.../app/controller/ChartController.js | 191 ++++++------------
.../frontend/app/controller/MainController.js | 2 +-
.../www/frontend/app/view/LineChartPanel.js | 5 +
5 files changed, 96 insertions(+), 156 deletions(-)
diff --git a/www/frontend/controls_frontend.txt b/www/frontend/controls_frontend.txt
index 131e7eee8..5978c6dec 100644
--- a/www/frontend/controls_frontend.txt
+++ b/www/frontend/controls_frontend.txt
@@ -272,14 +272,14 @@ UPD 2013-03-02_01:53:05 524 www/frontend/app/resources/icons/resultset_last.png
UPD 2013-04-03_07:27:17 733 www/frontend/app/resources/icons/add.png
UPD 2013-04-03_07:27:17 389 www/frontend/app/resources/icons/resultset_previous.png
UPD 2013-06-30_11:47:12 101 www/frontend/app/resources/application.css
-UPD 2013-12-07_12:24:10 2270 www/frontend/app/app.js
+UPD 2014-01-03_12:47:07 2714 www/frontend/app/app.js
UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js
UPD 2013-07-07_12:12:08 16201 www/frontend/app/view/DevicePanel.js
UPD 2013-12-26_08:39:37 10257 www/frontend/app/view/TableDataGridPanel.js
-UPD 2014-01-02_09:38:25 64890 www/frontend/app/view/LineChartPanel.js
+UPD 2014-01-03_01:24:06 65039 www/frontend/app/view/LineChartPanel.js
UPD 2013-12-27_01:39:11 9980 www/frontend/app/view/Viewport.js
-UPD 2014-01-02_02:26:30 19171 www/frontend/app/controller/MainController.js
-UPD 2014-01-02_09:34:38 113012 www/frontend/app/controller/ChartController.js
+UPD 2014-01-03_01:38:11 19171 www/frontend/app/controller/MainController.js
+UPD 2014-01-03_01:30:11 107834 www/frontend/app/controller/ChartController.js
UPD 2013-06-30_11:46:54 5415 www/frontend/app/controller/TableDataController.js
UPD 2013-04-01_07:04:35 202 www/frontend/app/model/ReadingsModel.js
UPD 2013-04-01_07:04:36 338 www/frontend/app/model/SavedChartsModel.js
diff --git a/www/frontend/www/frontend/app/app.js b/www/frontend/www/frontend/app/app.js
index f319fdd08..e7324b71a 100644
--- a/www/frontend/www/frontend/app/app.js
+++ b/www/frontend/www/frontend/app/app.js
@@ -35,28 +35,32 @@ Ext.application({
url: url,
success: function(response){
Ext.getBody().unmask();
- FHEM.info = Ext.decode(response.responseText);
- FHEM.version = FHEM.info.Results[0].devices[0].ATTR.version;
- Ext.each(FHEM.info.Results, function(result) {
- if (result.list === "DbLog" && result.devices[0].NAME) {
- FHEM.dblogname = result.devices[0].NAME;
- }
- if (result.list === "FileLog" && result.devices.length > 0) {
- FHEM.filelogs = result.devices;
- }
- });
- if ((!FHEM.dblogname || Ext.isEmpty(FHEM.dblogname)) && !FHEM.filelogs) {
- Ext.Msg.alert("Error", "Could not find a DbLog or FileLog Configuration. Do you have them already defined?");
- } else {
- Ext.create("FHEM.view.Viewport", {
- hidden: true
+ try {
+ FHEM.info = Ext.decode(response.responseText);
+ FHEM.version = FHEM.info.Results[0].devices[0].ATTR.version;
+ Ext.each(FHEM.info.Results, function(result) {
+ if (result.list === "DbLog" && result.devices[0].NAME) {
+ FHEM.dblogname = result.devices[0].NAME;
+ }
+ if (result.list === "FileLog" && result.devices.length > 0) {
+ FHEM.filelogs = result.devices;
+ }
});
-
- //removing the loadingimage
- var p = Ext.DomQuery.select('p[class=loader]')[0],
- img = Ext.DomQuery.select('#loading-overlay')[0];
- p.removeChild(img);
- // further configuration of viewport starts in maincontroller
+ if ((!FHEM.dblogname || Ext.isEmpty(FHEM.dblogname)) && !FHEM.filelogs) {
+ Ext.Msg.alert("Error", "Could not find a DbLog or FileLog Configuration. Do you have them already defined?");
+ } else {
+ Ext.create("FHEM.view.Viewport", {
+ hidden: true
+ });
+
+ //removing the loadingimage
+ var p = Ext.DomQuery.select('p[class=loader]')[0],
+ img = Ext.DomQuery.select('#loading-overlay')[0];
+ p.removeChild(img);
+ // further configuration of viewport starts in maincontroller
+ }
+ } catch (e) {
+ Ext.Msg.alert("Oh no!", "JsonList did not respond correctly. This is a bug in FHEM. This Frontend cannot work without a valid JsonList response. See this link for details and complain there: http://forum.fhem.de/index.php/topic,17292.msg113132.html#msg113132");
}
},
failure: function() {
diff --git a/www/frontend/www/frontend/app/controller/ChartController.js b/www/frontend/www/frontend/app/controller/ChartController.js
index da5b41989..c27b7dd1a 100644
--- a/www/frontend/www/frontend/app/controller/ChartController.js
+++ b/www/frontend/www/frontend/app/controller/ChartController.js
@@ -132,7 +132,6 @@ Ext.define('FHEM.controller.ChartController', {
* reconfigure combos to handle dblog / filelog
*/
dataSourceChanged: function(radio, newval, oldval) {
-
var selection;
if (radio.getChecked()[0]) {
selection = radio.getChecked()[0].inputValue;
@@ -144,7 +143,6 @@ Ext.define('FHEM.controller.ChartController', {
readingscombo = radio.up().down("combobox[name=yaxiscombo]");
if (selection === "filelog") {
-
// disable statistics for the moment
radio.up().down("combobox[name=yaxisstatisticscombo]").setDisabled(true);
@@ -164,7 +162,7 @@ Ext.define('FHEM.controller.ChartController', {
devicecombo.queryMode = 'local';
devicecombo.on("select", me.fileLogSelected);
- readingscombo.setValue();
+ readingscombo.setValue("");
readingscombo.getStore().removeAll();
} else {
@@ -187,19 +185,22 @@ Ext.define('FHEM.controller.ChartController', {
* gather filelog information to fill combos
*/
fileLogSelected: function(combo, selectionArray) {
-
var readingscombo = combo.up().down("combobox[name=yaxiscombo]"),
- currentlogfile;
- if (selectionArray[0]) {
- var logname = selectionArray[0].data.DEVICE;
- Ext.each(FHEM.filelogs, function(log) {
- if (log.NAME === logname) {
- // found the filelog entry, getting the logfile to load values
- currentlogfile = log.currentlogfile;
- return false;
- }
- });
+ currentlogfile,
+ logname;
+ if (selectionArray[0] && selectionArray[0].data) {
+ logname = selectionArray[0].data.DEVICE;
+ } else {
+ logname = selectionArray[0];
}
+ Ext.each(FHEM.filelogs, function(log) {
+ if (log.NAME === logname) {
+ // found the filelog entry, getting the logfile to load values
+ currentlogfile = log.currentlogfile;
+ return false;
+ }
+ });
+
if (!Ext.isEmpty(currentlogfile)) {
// retrieve the filelog, parse its containing fields
readingscombo.setLoading(true);
@@ -316,11 +317,6 @@ Ext.define('FHEM.controller.ChartController', {
chart = me.getChart();
//cleanup chartpanel
- var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]');
- Ext.each(existingwins, function(existingwin) {
- existingwin.destroy();
- });
-
var existingchartgrid = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
if (!existingchartgrid) {
var chartdatagrid = Ext.create('FHEM.view.ChartGridPanel', {
@@ -532,36 +528,41 @@ Ext.define('FHEM.controller.ChartController', {
icon: 'app/resources/icons/delete.png',
scope: me,
handler: function(btn) {
- var chart = btn.up().up().down('chart');
-
- var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]');
- Ext.each(existingwins, function(existingwin) {
- existingwin.destroy();
- });
+ var chart = btn.up().up().down('chart'),
+ cp = chart.up().up();
chart.restoreZoom();
- chart.axes.get(0).minimum = chart.up().up().getLastYmin();
- chart.axes.get(0).maximum = chart.up().up().getLastYmax();
- chart.axes.get(1).minimum = chart.up().up().getLastY2min();
- chart.axes.get(1).maximum = chart.up().up().getLastY2max();
- chart.axes.get(2).minimum = chart.up().up().getLastXmin();
- chart.axes.get(2).maximum = chart.up().up().getLastXmax();
+ chart.axes.get(0).minimum = cp.getLastYmin();
+ chart.axes.get(0).maximum = cp.getLastYmax();
+ chart.axes.get(1).minimum = cp.getLastY2min();
+ chart.axes.get(1).maximum = cp.getLastY2max();
+ chart.axes.get(2).minimum = cp.getLastXmin();
+ chart.axes.get(2).maximum = cp.getLastXmax();
- chart.redraw();
//helper to reshow the hidden items after zooming back out
- if (chart.up().up().artifactSeries && chart.up().up().artifactSeries.length > 0) {
- Ext.each(chart.up().up().artifactSeries, function(serie) {
+ if (cp.artifactSeries && cp.artifactSeries.length > 0) {
+ Ext.each(cp.artifactSeries, function(serie) {
serie.showAll();
+ var showMarkers = false;
Ext.each(serie.group.items, function(item) {
- if (item.type === "circle") {
+ // make sure we hit the points
+ if (item.radius && item.radius > 0) {
item.show();
item.redraw();
+ showMarkers = true;
}
});
+ if (showMarkers) {
+ serie.showMarkers = true;
+ }
});
- chart.up().up().artifactSeries = [];
+ cp.artifactSeries = [];
}
+
+ chart.redraw();
+ // restore the counter as we have zoomed out
+ cp.timesZoomed = 0;
}
}
]
@@ -641,14 +642,20 @@ Ext.define('FHEM.controller.ChartController', {
select: {
fn: function(chart, zoomConfig, evt) {
+ var cp = chart.up().up();
+
delete chart.axes.get(2).fromDate;
delete chart.axes.get(2).toDate;
- chart.up().up().setLastYmax(chart.axes.get(0).maximum);
- chart.up().up().setLastYmin(chart.axes.get(0).minimum);
- chart.up().up().setLastY2max(chart.axes.get(1).maximum);
- chart.up().up().setLastY2min(chart.axes.get(1).minimum);
- chart.up().up().setLastXmax(chart.axes.get(2).maximum);
- chart.up().up().setLastXmin(chart.axes.get(2).minimum);
+
+ //only save the state when we zoom the first time
+ if (cp.timesZoomed === 0) {
+ chart.up().up().setLastYmax(chart.axes.get(0).maximum);
+ chart.up().up().setLastYmin(chart.axes.get(0).minimum);
+ chart.up().up().setLastY2max(chart.axes.get(1).maximum);
+ chart.up().up().setLastY2min(chart.axes.get(1).minimum);
+ chart.up().up().setLastXmax(chart.axes.get(2).maximum);
+ chart.up().up().setLastXmin(chart.axes.get(2).minimum);
+ }
chart.setZoom(zoomConfig);
chart.mask.hide();
@@ -656,99 +663,15 @@ Ext.define('FHEM.controller.ChartController', {
//helper hiding series and items which are out of scope
Ext.each(chart.series.items, function(serie) {
if (serie.items.length === 0) {
- chart.up().up().artifactSeries.push(serie);
+ cp.artifactSeries.push(serie);
Ext.each(serie.group.items, function(item) {
item.hide();
item.redraw();
});
serie.hideAll();
-
- } else {
- //creating statistic windows after zooming
- var html,
- count = 0,
- sum = 0,
- average = 0,
- min = 99999999,
- max = 0,
- lastrec,
- diffkwh = 0,
- winwidth = 125,
- winheight = 105;
- Ext.each(serie.items, function(item) {
- if (Ext.isNumeric(item.value[1])) {
- count++;
- sum = sum + item.value[1];
- if (min > item.value[1]) {
- min = item.value[1];
- }
- if (max < item.value[1]) {
- max = item.value[1];
- }
- if (serie.title.indexOf('actual_kwh') >= 0) {
- if (lastrec) {
- var diffhrs = Ext.Date.getElapsed(lastrec.value[0], item.value[0]) / 1000 / 3600;
- diffkwh = diffkwh + diffhrs * lastrec.value[1];
- }
- lastrec = item;
- winwidth = 165,
- winheight = 130;
- }
- }
- });
- average = sum / count;
-
- html = 'Selected Items: ' + count + '
';
- html += 'Sum: ' + Ext.util.Format.round(sum, 5) + '
';
- html += 'Average: ' + Ext.util.Format.round(average, 5) + '
';
- html += 'Min: ' + min + '
';
- html += 'Max: ' + max + '
';
- if (serie.title.indexOf('actual_kwh') >= 0) {
- html += 'Used kW/h: ' + Ext.util.Format.round(diffkwh, 3) + '
';
- html += 'Costs (at 25c/kWh): ' + Ext.util.Format.round(diffkwh * 0.25, 2) + '€
';
- }
-
- var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]'),
- matchfound = false,
- lastwin,
- win;
- if (existingwins.length > 0) {
- Ext.each(existingwins, function(existingwin) {
- lastwin = existingwin;
- if (existingwin.title === serie.title) {
- existingwin.update(html);
- existingwin.showAt(chart.getWidth() - 145, chart.getPosition()[1] + 8);
- matchfound = true;
- }
- });
- if (!matchfound) {
- win = Ext.create('Ext.window.Window', {
- width: winwidth,
- height: winheight,
- html: html,
- title: serie.title,
- name: 'statisticswin',
- preventHeader: true,
- border: false,
- plain: true
- });
- win.showAt(chart.getWidth() - 145, lastwin.getPosition()[1] + lastwin.getHeight());
- }
- } else {
- win = Ext.create('Ext.window.Window', {
- width: winwidth,
- height: winheight,
- html: html,
- title: serie.title,
- name: 'statisticswin',
- preventHeader: true,
- border: false,
- plain: true
- });
- win.showAt(chart.getWidth() - 145, chart.getPosition()[1] + 8);
- }
}
});
+ cp.timesZoomed++;
}
}
}
@@ -1820,7 +1743,11 @@ Ext.define('FHEM.controller.ChartController', {
logtypename = logtypes[i].getChecked()[0].name;
eval('logtypes[i].setValue({' + logtypename + ': "' + chartdata.logtype + '"})');
devices[i].setValue(chartdata.device);
- yaxes[i].getStore().getProxy().url = url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + chartdata.device + '+getreadings&XHR=1';
+ if (chartdata.logtype === "filelog") {
+ me.fileLogSelected(devices[i], [chartdata.device]);
+ } else {
+ yaxes[i].getStore().getProxy().url = url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + chartdata.device + '+getreadings&XHR=1';
+ }
yaxes[i].setDisabled(false);
yaxes[i].setValue(chartdata.y);
rowFieldSets[i].styleConfig.linestrokewidth = chartdata.linestrokewidth || 2;
@@ -1868,7 +1795,11 @@ Ext.define('FHEM.controller.ChartController', {
}
eval('logtypes[i].setValue({' + logtypename + ' : chartdata.' + logtype + '})');
eval('devices[i].setValue(chartdata.' + axisdevice + ')');
- yaxes[i].getStore().getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + eval('chartdata.' + axisdevice) + '+getreadings&XHR=1';
+ if (eval('chartdata.' + logtype) === "filelog") {
+ me.fileLogSelected(devices[i], [eval('chartdata.' + axisdevice)]);
+ } else {
+ yaxes[i].getStore().getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + eval('chartdata.' + axisdevice) + '+getreadings&XHR=1';
+ }
yaxes[i].setDisabled(false);
eval('yaxes[i].setValue(chartdata.' + axisname + ')');
rowFieldSets[i].styleConfig.linestrokewidth = eval('chartdata.' + prefix + 'linestrokewidth') || 2;
diff --git a/www/frontend/www/frontend/app/controller/MainController.js b/www/frontend/www/frontend/app/controller/MainController.js
index c60382387..7aa693801 100644
--- a/www/frontend/www/frontend/app/controller/MainController.js
+++ b/www/frontend/www/frontend/app/controller/MainController.js
@@ -95,7 +95,7 @@ Ext.define('FHEM.controller.MainController', {
if (Ext.isDefined(FHEM.version)) {
var sp = this.getStatustextfield();
- sp.setText(FHEM.version + "; Frontend Version: 1.0.6 - 2014-01-02");
+ sp.setText(FHEM.version + "; Frontend Version: 1.0.7 - 2014-01-03");
}
this.setupTree(false);
diff --git a/www/frontend/www/frontend/app/view/LineChartPanel.js b/www/frontend/www/frontend/app/view/LineChartPanel.js
index 2582a764e..bdf62b3fa 100644
--- a/www/frontend/www/frontend/app/view/LineChartPanel.js
+++ b/www/frontend/www/frontend/app/view/LineChartPanel.js
@@ -53,6 +53,11 @@ Ext.define('FHEM.view.LineChartPanel', {
*/
lastXmin: null,
+ /**
+ * used to suppress setting new lastmin and max values when zooming multiple times
+ */
+ timesZoomed: 0,
+
/**
*
*/