From 1f7210b60f857e2674952adc890c2abf5dcfe390 Mon Sep 17 00:00:00 2001 From: johannnes <> Date: Sun, 7 Jul 2013 10:15:27 +0000 Subject: [PATCH] see thread in forums for details git-svn-id: https://svn.fhem.de/fhem/trunk@3389 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/frontend/CHANGED | 2 + fhem/www/frontend/controls_frontend.txt | 8 +- .../app/controller/ChartController.js | 151 ++++++++++++------ .../frontend/app/controller/MainController.js | 123 +++++++------- .../www/frontend/app/view/DevicePanel.js | 40 +++-- .../www/frontend/app/view/LineChartPanel.js | 28 +++- 6 files changed, 225 insertions(+), 127 deletions(-) diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED index 09aad71c9..f0ec377ea 100644 --- a/fhem/www/frontend/CHANGED +++ b/fhem/www/frontend/CHANGED @@ -1,3 +1,5 @@ +Update vom 7.7.2013 + * siehe Forumseintrag Update vom 30.6.2013 * Charts nun im Tree * Tree sortierbar diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index be5bd121d..b4742480d 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -273,13 +273,13 @@ 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-06-27_09:34:38 2201 www/frontend/app/app.js -UPD 2013-05-01_05:10:56 27200 www/frontend/app/view/LineChartPanel.js +UPD 2013-07-07_12:12:08 28202 www/frontend/app/view/LineChartPanel.js UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js -UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js +UPD 2013-07-07_12:12:08 16201 www/frontend/app/view/DevicePanel.js UPD 2013-06-30_11:47:44 11076 www/frontend/app/view/Viewport.js UPD 2013-06-27_09:35:22 10042 www/frontend/app/view/TableDataGridPanel.js -UPD 2013-06-30_12:31:20 83887 www/frontend/app/controller/ChartController.js -UPD 2013-06-30_11:46:54 18379 www/frontend/app/controller/MainController.js +UPD 2013-07-07_12:11:53 86984 www/frontend/app/controller/ChartController.js +UPD 2013-07-07_12:11:54 18373 www/frontend/app/controller/MainController.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/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js index 7f3708445..e83f92a7b 100644 --- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js +++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js @@ -128,6 +128,12 @@ Ext.define('FHEM.controller.ChartController', { var me = this; + //hiding chart for performance reasons + if (me.getChart()) { + me.getChart().getStore().removeAll(); + me.getChart().hide(); + } + //show loadmask me.getLinechartpanel().setLoading(true); @@ -292,34 +298,36 @@ Ext.define('FHEM.controller.ChartController', { var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0]; var cdg = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0]; - // disable animation as long as we resize, causes serious performance issues - lcv.animate = false; - - if (lcp && lcv && cfp && cdg) { - var lcph = lcp.getHeight(), - lcpw = lcp.getWidth(), - cfph = cfp.getHeight(), - cdgh = cdg.getHeight(); + if (lcv) { + // disable animation as long as we resize, causes serious performance issues + lcv.animate = false; - if (lcph && lcpw && cfph && cdgh) { - var chartheight = lcph - cfph - cdgh - 80; - var chartwidth = lcpw - 5; - lcv.height = chartheight; - lcv.width = chartwidth; - //render after 50ms to get component right - window.setTimeout(function() { - if (lcv.series.get(0).hideAll) { - lcv.series.get(0).hideAll(); - } - lcv.doComponentLayout(); - if (lcv.series.get(0).showAll) { - lcv.series.get(0).showAll(); - } - lcv.redraw(); - }, 50); + if (lcp && lcv && cfp && cdg) { + var lcph = lcp.getHeight(), + lcpw = lcp.getWidth(), + cfph = cfp.getHeight(), + cdgh = cdg.getHeight(); + + if (lcph && lcpw && cfph && cdgh) { + var chartheight = lcph - cfph - cdgh - 80; + var chartwidth = lcpw - 5; + lcv.height = chartheight; + lcv.width = chartwidth; + //render after 50ms to get component right + window.setTimeout(function() { + if (lcv.series.get(0).hideAll) { + lcv.series.get(0).hideAll(); + } + lcv.doComponentLayout(); + if (lcv.series.get(0).showAll) { + lcv.series.get(0).showAll(); + } + lcv.redraw(); + }, 50); + } } + lcv.animate = true; } - lcv.animate = true; }, /** @@ -817,6 +825,8 @@ Ext.define('FHEM.controller.ChartController', { me.generalizeChartData(generalizationfactor, i); } + chart.series.add(yseries); + } }, failure: function() { @@ -824,8 +834,6 @@ Ext.define('FHEM.controller.ChartController', { } }); - chart.series.add(yseries); - //check if we have added the last dataset if ((i + 1) === axeslength) { //add baselines @@ -935,14 +943,29 @@ Ext.define('FHEM.controller.ChartController', { if (timediffhrs <= 1) { chart.axes.get(2).step = [Ext.Date.MINUTE, 10]; + chart.axes.get(2).label.renderer = function(v) { + return Ext.Date.format(new Date(v), "H:i:s"); + }; } else if (timediffhrs <= 24) { chart.axes.get(2).step = [Ext.Date.HOUR, 1]; + chart.axes.get(2).label.renderer = function(v) { + return Ext.Date.format(new Date(v), "H:i:s"); + }; } else if (timediffhrs <= 168) { chart.axes.get(2).step = [Ext.Date.DAY, 1]; + chart.axes.get(2).label.renderer = function(v) { + return Ext.Date.format(new Date(v), "d-m-Y"); + }; } else if (timediffhrs <= 720) { chart.axes.get(2).step = [Ext.Date.DAY, 7]; - } else if (timediffhrs < 720) { + chart.axes.get(2).label.renderer = function(v) { + return Ext.Date.format(new Date(v), "d-m-Y"); + }; + } else if (timediffhrs > 720) { chart.axes.get(2).step = [Ext.Date.MONTH, 1]; + chart.axes.get(2).label.renderer = function(v) { + return Ext.Date.format(new Date(v), "d-m-Y"); + }; } chart.axes.get(2).processView(); @@ -954,6 +977,8 @@ Ext.define('FHEM.controller.ChartController', { //enable animation chart.animate = true; + chart.show(); + }, /** @@ -970,16 +995,24 @@ Ext.define('FHEM.controller.ChartController', { if (axisside === "left") { axis = chart.axes.get(0); + axistitle = this.getChartformpanel().down('textfield[name=leftaxistitle]').getValue(); } else if (axisside === "right") { axis = chart.axes.get(1); + axistitle = this.getChartformpanel().down('textfield[name=rightaxistitle]').getValue(); } - var currenttitle = axis.title; - if (currenttitle === "") { - axis.setTitle(title); + if (axistitle && axistitle !== "") { + axis.setTitle(axistitle); } else { - axis.setTitle(axis.title + " / " + title); + var currenttitle = axis.title; + + if (currenttitle === "") { + axis.setTitle(title); + } else { + axis.setTitle(axis.title + " / " + title); + } } + if (axis.title.length > 80) { axis.displaySprite.attr.font = "10px Arial, Helvetica, sans-serif"; } else if (axis.title.length > 50) { @@ -999,7 +1032,7 @@ Ext.define('FHEM.controller.ChartController', { axis : axisside, xField : 'TIMESTAMP', yField : yfield, - title: title, + title: axis.title, showInLegend: true, smooth: 0, highlight: true, @@ -1113,6 +1146,8 @@ Ext.define('FHEM.controller.ChartController', { Ext.ComponentQuery.query('radiogroup[name=leftaxisconfiguration]')[0].items.items[0].setValue(true); Ext.ComponentQuery.query('radiogroup[name=rightaxisconfiguration]')[0].items.items[0].setValue(true); + this.getChartformpanel().down('textfield[name=rightaxistitle]').setValue(""); + this.getChartformpanel().down('textfield[name=leftaxistitle]').setValue(""); }, @@ -1167,18 +1202,6 @@ Ext.define('FHEM.controller.ChartController', { var me = this; - //get available foldernames -// var rootNode = me.getMaintreepanel().getRootNode(), -// folderArray = []; -// rootNode.cascadeBy(function(node) { -// if (node.get('leaf') === false) { -// if (node.get('text') !== 'root') { -// folderArray.push(node.get('text')); -// } -// } -// }); -// console.log(folderArray); - Ext.Msg.prompt("Select a name", "Enter a name to save the Chart", function(action, savename) { if (action === "ok" && !Ext.isEmpty(savename)) { //replacing spaces in name @@ -1231,14 +1254,24 @@ Ext.define('FHEM.controller.ChartController', { yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(), yaxisfillcheck = yaxesfillchecks[i].checked, yaxisstepcheck = yaxesstepchecks[i].checked, - axisside = axissideradio[i].getChecked()[0].getSubmitValue(); - yaxisstatistics = yaxesstatistics[i].getValue(); + yaxisstatistics = yaxesstatistics[i].getValue(), + axisside = axissideradio[i].getChecked()[0].getSubmitValue(), + rightaxistitle = me.getChartformpanel().down('textfield[name=rightaxistitle]').getValue(), + leftaxistitle = me.getChartformpanel().down('textfield[name=leftaxistitle]').getValue(); + //replacing spaces in title + rightaxistitle = rightaxistitle.replace(/ /g, "_"); + leftaxistitle = leftaxistitle.replace(/ /g, "_"); + //replacing + in title + rightaxistitle = rightaxistitle.replace(/\+/g, "_"); + leftaxistitle = leftaxistitle.replace(/\+/g, "_"); if (i === 0) { jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",'; jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",'; jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",'; jsonConfig += '"yaxisside":"' + axisside + '",'; + jsonConfig += '"leftaxistitle":"' + leftaxistitle + '",'; + jsonConfig += '"rightaxistitle":"' + rightaxistitle + '",'; if (yaxisstatistics !== "none") { jsonConfig += '"yaxisstatistics":"' + yaxisstatistics + '",'; @@ -1362,6 +1395,8 @@ Ext.define('FHEM.controller.ChartController', { //cleanup the form before loading this.resetFormFields(); + this.getChartformpanel().collapse(); + if (chartdata && !Ext.isEmpty(chartdata)) { //reset y-axis max @@ -1511,12 +1546,32 @@ Ext.define('FHEM.controller.ChartController', { Ext.ComponentQuery.query('numberfield[name=rightaxismaximum]')[0].setValue(chartdata.rightaxismax); } + if (chartdata.rightaxistitle && chartdata.rightaxistitle !== "") { + //replacing spaces in title + var rightaxistitle = chartdata.rightaxistitle.replace(/_/g, " "); + me.getChartformpanel().down('textfield[name=rightaxistitle]').setValue(rightaxistitle); + } + + if (chartdata.leftaxistitle && chartdata.leftaxistitle !== "") { + //replacing spaces in title + var leftaxistitle = chartdata.leftaxistitle.replace(/_/g, " "); + me.getChartformpanel().down('textfield[name=leftaxistitle]').setValue(leftaxistitle); + } + this.requestChartData(); this.getLinechartpanel().setTitle(name); } else { Ext.Msg.alert("Error", "The Chart could not be loaded! RawChartdata was:
" + chartdata); } + } else if (record.raw.data.template) { + //seems we have clicked on a template chart, resetting the form... + me.resetFormFields(); + if (me.getChart()) { + me.getChart().getStore().removeAll(); + me.getChart().hide(); + this.getChartformpanel().expand(); + } } }, @@ -1760,7 +1815,7 @@ Ext.define('FHEM.controller.ChartController', { var rec = action.records[0], id = rec.raw.data.ID; - if (rec.raw.data && rec.raw.data.ID && rec.raw.data.TYPE === "savedchart") { + if (rec.raw.data && rec.raw.data.ID && rec.raw.data.TYPE === "savedchart" && !rec.raw.data.template) { var rootNode = this.getMaintreepanel().getRootNode(); rootNode.cascadeBy(function(node) { if (node.raw && node.raw.data && node.raw.data.ID && node.raw.data.ID === id) { diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js index 1484b0b26..0cb5299cf 100644 --- a/fhem/www/frontend/www/frontend/app/controller/MainController.js +++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js @@ -79,6 +79,11 @@ Ext.define('FHEM.controller.MainController', { var me = this; + me.createFHEMPanel(); + me.createDevicePanel(); + me.createLineChartPanel(); + me.createDatabaseTablePanel(); + me.getMainviewport().show(); me.getMainviewport().getEl().setOpacity(0); me.getMainviewport().getEl().animate({ @@ -90,7 +95,7 @@ Ext.define('FHEM.controller.MainController', { if (Ext.isDefined(FHEM.version)) { var sp = this.getStatustextfield(); - sp.setText(FHEM.version + "; Frontend Version: 0.8 - 2013-06-27"); + sp.setText(FHEM.version + "; Frontend Version: 0.9 - 2013-07-07"); } this.setupTree(false); @@ -204,6 +209,10 @@ Ext.define('FHEM.controller.MainController', { } }); + // at last we add a chart template to the folder which wont be saved to db and cannot be deleted + chartchild = {text: 'Create new Chart', leaf: true, data: {template: true}, iconCls:'x-tree-icon-leaf-chart'}; + chartfoldernode.appendChild(chartchild); + }); }, @@ -411,10 +420,10 @@ Ext.define('FHEM.controller.MainController', { /** * */ - destroyCenterPanels: function() { + hideCenterPanels: function() { var panels = Ext.ComponentQuery.query('panel[region=center]'); Ext.each(panels, function(panel) { - panel.destroy(); + panel.hide(); }); }, @@ -423,14 +432,11 @@ Ext.define('FHEM.controller.MainController', { */ showDeviceOrChartPanel: function(treeview, rec) { var me = this; - if (rec.get('leaf') === true && + if (rec.raw.data.template === true || rec.get('leaf') === true && rec.raw.data && rec.raw.data.TYPE && rec.raw.data.TYPE === "savedchart") { - var lcp = Ext.ComponentQuery.query('linechartpanel')[0]; - if (!lcp || lcp.isVisible === false) { - this.showLineChartPanel(); - } + this.showLineChartPanel(); } else { this.showDevicePanel(treeview, rec); } @@ -440,12 +446,22 @@ Ext.define('FHEM.controller.MainController', { * */ showFHEMPanel: function() { + var panel = Ext.ComponentQuery.query('panel[name=fhempanel]')[0]; + this.hideCenterPanels(); + panel.show(); + }, + + /** + * + */ + createFHEMPanel: function() { var panel = { xtype: 'panel', + name: 'fhempanel', title: 'FHEM', region: 'center', layout: 'fit', - hidden: false, + hidden: true, items : [ { xtype : 'component', @@ -456,7 +472,6 @@ Ext.define('FHEM.controller.MainController', { } ] }; - this.destroyCenterPanels(); this.getMainviewport().add(panel); }, @@ -466,6 +481,7 @@ Ext.define('FHEM.controller.MainController', { showDevicePanel: function(view, record) { if (record.raw.leaf === true) { + var panel = Ext.ComponentQuery.query('devicepanel')[0]; var title; if (record.raw.ATTR && record.raw.ATTR.alias && @@ -474,37 +490,43 @@ Ext.define('FHEM.controller.MainController', { } else { title = record.raw.data.NAME; } - var panel = { - xtype: 'devicepanel', - title: title, - region: 'center', - layout: 'fit', - record: record, - hidden: true - }; - this.destroyCenterPanels(); - this.getMainviewport().add(panel); + panel.setTitle(title); + panel.record = record; - var createdpanel = this.getMainviewport().down('devicepanel'); - - createdpanel.getEl().setOpacity(0); - createdpanel.show(); - - createdpanel.getEl().animate({ - opacity: 1, - easing: 'easeIn', - duration: 500, - remove: false - }); + this.hideCenterPanels(); + panel.show(); } }, + /** + * + */ + createDevicePanel: function() { + var panel = { + xtype: 'devicepanel', + title: null, + region: 'center', + layout: 'fit', + record: null, + hidden: true + }; + this.getMainviewport().add(panel); + }, + /** * */ showLineChartPanel: function() { - + var panel = Ext.ComponentQuery.query('linechartpanel')[0]; + this.hideCenterPanels(); + panel.show(); + }, + + /** + * + */ + createLineChartPanel: function() { var panel = { xtype: 'linechartpanel', name: 'linechartpanel', @@ -512,27 +534,13 @@ Ext.define('FHEM.controller.MainController', { layout: 'fit', hidden: true }; - this.destroyCenterPanels(); this.getMainviewport().add(panel); - - var createdpanel = this.getMainviewport().down('linechartpanel'); - - createdpanel.getEl().setOpacity(0); - createdpanel.show(); - - createdpanel.getEl().animate({ - opacity: 1, - easing: 'easeIn', - duration: 500, - remove: false - }); - }, /** * */ - showDatabaseTablePanel: function() { + createDatabaseTablePanel: function() { var panel = { xtype: 'tabledatagridpanel', name: 'tabledatagridpanel', @@ -540,20 +548,17 @@ Ext.define('FHEM.controller.MainController', { layout: 'fit', hidden: true }; - this.destroyCenterPanels(); this.getMainviewport().add(panel); - var createdpanel = this.getMainviewport().down('tabledatagridpanel'); - - createdpanel.getEl().setOpacity(0); - createdpanel.show(); - - createdpanel.getEl().animate({ - opacity: 1, - easing: 'easeIn', - duration: 500, - remove: false - }); + }, + + /** + * + */ + showDatabaseTablePanel: function() { + var panel = Ext.ComponentQuery.query('tabledatagridpanel')[0]; + this.hideCenterPanels(); + panel.show(); } }); \ No newline at end of file diff --git a/fhem/www/frontend/www/frontend/app/view/DevicePanel.js b/fhem/www/frontend/www/frontend/app/view/DevicePanel.js index 1d5611056..96d06929f 100644 --- a/fhem/www/frontend/www/frontend/app/view/DevicePanel.js +++ b/fhem/www/frontend/www/frontend/app/view/DevicePanel.js @@ -119,23 +119,27 @@ Ext.define('FHEM.view.DevicePanel', { }; me.down('panel[name=container]').add(devicereadingsgrid); - // Stop all old tasks - Ext.TaskManager.stopAll(); - - // Starting a task to update the device readings - var task = { - run: function(){ - me.getDeviceData(me.record.raw.data.NAME); - }, - interval: 5000 //5 seconds - }; - Ext.TaskManager.start(task); - - me.on("afterrender", function() { + me.on("show", function() { me.setLoading(true); + + // Stop all old tasks + Ext.TaskManager.stopAll(); + + //remove old controls to rerender them on devicechange + me.down('fieldset[name=controlfieldset]').removeAll(); + me.down('fieldset[name=controlfieldset]').hide(); + + // Starting a task to update the device readings + var task = { + run: function(){ + me.getDeviceData(me.record.raw.data.NAME); + }, + interval: 5000 //5 seconds + }; + Ext.TaskManager.start(task); }); - me.on("destroy", function() { + me.on("hide", function() { Ext.TaskManager.stopAll(); }); @@ -311,6 +315,7 @@ Ext.define('FHEM.view.DevicePanel', { } }); } else { // we already have controls added, just checkin the state if everything is up2date + Ext.each(controlfieldset.items.items, function(subfieldset) { Ext.each(subfieldset.items.items, function(item) { @@ -338,6 +343,12 @@ Ext.define('FHEM.view.DevicePanel', { }); }); } + if (controlfieldset.items.length <= 0) { + controlfieldset.hide(); + } else { + controlfieldset.show(); + } + }, /** @@ -418,7 +429,6 @@ Ext.define('FHEM.view.DevicePanel', { */ getDeviceData: function(name) { var me = this; - Ext.Ajax.request({ method: 'GET', disableCaching: false, diff --git a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js index 313d84640..b0c2ab328 100644 --- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js +++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js @@ -91,7 +91,7 @@ Ext.define('FHEM.view.LineChartPanel', { var chartSettingPanel = Ext.create('Ext.form.Panel', { title: 'Chart Settings - Click me to edit', name: 'chartformpanel', - maxHeight: 270, + maxHeight: 325, autoScroll: true, collapsible: true, titleCollapse: true, @@ -272,6 +272,32 @@ Ext.define('FHEM.view.LineChartPanel', { } ] }, + { + xtype: 'fieldset', + layout: 'column', + title: 'Axis Title Configuration', + defaults: { + margin: '0 0 5 10' + }, + items: [ + { + xtype: 'textfield', + fieldLabel: 'Left Axis Title', + name: 'leftaxistitle', + allowBlank: true, + labelWidth: 100, + width: 340 + }, + { + xtype: 'textfield', + fieldLabel: 'Right Axis Title', + name: 'rightaxistitle', + allowBlank: true, + labelWidth: 100, + width: 340 + } + ] + }, { xtype: 'fieldset', layout: 'column',