* Zoomen in Charts nun möglich mit aufziehbarer Box

* Erweiterung der Anzahl der möglichen Y-Achsen von 3 auf 10 * Jede Achse kann nun mit Statistikfunktionen einzeln versehen werden * Bibliotheksupdate auf ExtJS 4.2.0 * Kleine Verbesserungen in der Unterstützung mobiler Geräte * Bugfixes git-svn-id: https://svn.fhem.de/fhem/trunk@3013 2b470e98-0d58-463d-a4d8-8e2adae1ed80
2025-03-12 16:46:35 +00:00 · 2013-04-01 17:39:51 +00:00 · 2013-04-01 17:39:51 +00:00 · e252cb8b94
commit e252cb8b94
parent 218975d39b
944 changed files with 197979 additions and 11281 deletions
--- a/fhem/www/frontend/CHANGED
+++ b/fhem/www/frontend/CHANGED
@ -1,3 +1,10 @@
+Update vom 01.4.2013
+  * Zoomen in Charts nun möglich mit aufziehbarer Box
+  * Erweiterung der Anzahl der möglichen Y-Achsen von 3 auf 10
+  * Jede Achse kann nun mit Statistikfunktionen einzeln versehen werden
+  * Bibliotheksupdate auf ExtJS 4.2.0
+  * Kleine Verbesserungen in der Unterstützung mobiler Geräte
+  * Bugfixes
 Update vom 23.3.2013
  * Integration von Buttons und Dropdownlisten, um einzelene Geräte steuern zu können
  * Aktualisierung aller Geräteinformationen über kontinuierliche AJAX Requests
--- a/fhem/www/frontend/www/frontend/app/app.js
+++ b/fhem/www/frontend/www/frontend/app/app.js
@ -26,7 +26,7 @@ Ext.application({
        // Gather information from FHEM to display status, devices, etc.
        var me = this,
            url = '../../../fhem?cmd=jsonlist&XHR=1';
-        Ext.getBody().mask("Please wait while the Frontend is starting...");
+        
        Ext.Ajax.request({
            method: 'GET',
            async: false,
@ -35,6 +35,7 @@ Ext.application({
            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) {
@ -43,10 +44,17 @@ Ext.application({
                        FHEM.dblogname = result.devices[0].NAME;
                    }
                });
-                if (!FHEM.dblogname && Ext.isEmpty(FHEM.dblogname)) {
+                if (!FHEM.dblogname && Ext.isEmpty(FHEM.dblogname) && FHEM.dblogname != "undefined") {
                    Ext.Msg.alert("Error", "Could not find a DbLog Configuration. Do you have DbLog already running?");
                } else {
-                    Ext.create("FHEM.view.Viewport");
+                    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
                }
            },
--- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js
+++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js
--- a/fhem/www/frontend/www/frontend/app/controller/MainController.js
+++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js
@ -27,8 +27,11 @@ Ext.define('FHEM.controller.MainController', {
           {
               selector: 'textfield[name=commandfield]',
               ref: 'commandfield' //this.getCommandfield()
+           },
+           {
+               selector: 'grid[name=savedchartsgrid]',
+               ref: 'savedchartsgrid' //this.getSavedchartsgrid()
           }
-           
    ],

    /**
@ -68,12 +71,26 @@ Ext.define('FHEM.controller.MainController', {
    },
    
    /**
-     * load the FHEM devices and state on viewport render completion
+     * fade-in viewport, load the FHEM devices and state on viewport render completion
     */
    viewportRendered: function() {
        
        var me = this;
        
+        me.getMainviewport().show();
+        me.getMainviewport().getEl().setOpacity(0);
+        me.getMainviewport().getEl().animate({
+            opacity: 1, 
+            easing: 'easeIn',
+            duration: 500,
+            remove: false
+        });
+        
+        //load the saved charts store with configured dblog name
+        var store = this.getSavedchartsgrid().getStore();
+        store.getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getcharts&XHR=1';
+        store.load();
+        
        if (Ext.isDefined(FHEM.version)) {
            var sp = this.getStatustextfield();
            sp.setText(FHEM.version + "; Frontend Version: 0.4 - 2013-03-23");
@ -335,24 +352,53 @@ Ext.define('FHEM.controller.MainController', {
            title: title,
            region: 'center',
            layout: 'fit',
-            record: record
+            record: record,
+            hidden: true
        };
        this.destroyCenterPanels();
        this.getMainviewport().add(panel);
+        
+        var createdpanel = this.getMainviewport().down('devicepanel');
+        
+        createdpanel.getEl().setOpacity(0);
+        createdpanel.show();
+        
+        createdpanel.getEl().animate({
+            opacity: 1, 
+            easing: 'easeIn',
+            duration: 500,
+            remove: false
+        });
+        
    },
    
    /**
     * 
     */
    showLineChartPanel: function() {
+        
        var panel = {
            xtype: 'linechartpanel',
            name: 'linechartpanel',
            region: 'center',
-            layout: 'fit'
+            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
+        });
+        
    },
    
    /**
@ -363,10 +409,23 @@ Ext.define('FHEM.controller.MainController', {
            xtype: 'tabledatagridpanel',
            name: 'tabledatagridpanel',
            region: 'center',
-            layout: 'fit'
+            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
+        });
    }
    
 });
--- a/fhem/www/frontend/www/frontend/app/model/ChartModel.js
+++ b/fhem/www/frontend/www/frontend/app/model/ChartModel.js
@ -20,47 +20,408 @@ Ext.define('FHEM.model.ChartModel', {
            type: 'date',
            dateFormat: "Y-m-d H:i:s"
        },
+        {
+            name: 'TIMESTAMP4',
+            type: 'date',
+            dateFormat: "Y-m-d H:i:s"
+        },
+        {
+            name: 'TIMESTAMP5',
+            type: 'date',
+            dateFormat: "Y-m-d H:i:s"
+        },
+        {
+            name: 'TIMESTAMP6',
+            type: 'date',
+            dateFormat: "Y-m-d H:i:s"
+        },
+        {
+            name: 'TIMESTAMP7',
+            type: 'date',
+            dateFormat: "Y-m-d H:i:s"
+        },
+        {
+            name: 'TIMESTAMP8',
+            type: 'date',
+            dateFormat: "Y-m-d H:i:s"
+        },
+        {
+            name: 'TIMESTAMP9',
+            type: 'date',
+            dateFormat: "Y-m-d H:i:s"
+        },
        {
            name: 'VALUE',
            type: 'float',
            convert: function(v,record) {
-                return record.parseToNumber(v, 1, record);
+                return record.parseToNumber(v);
            }
        },{
            name: 'VALUE2',
            type: 'float',
            convert: function(v,record) {
-                return record.parseToNumber(v, 2, record);
+                return record.parseToNumber(v);
            }
        },{
            name: 'VALUE3',
            type: 'float',
            convert: function(v,record) {
-                return record.parseToNumber(v, 3, record);
+                return record.parseToNumber(v);
+            }
+        },{
+            name: 'VALUE4',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },{
+            name: 'VALUE5',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },{
+            name: 'VALUE6',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },{
+            name: 'VALUE7',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },{
+            name: 'VALUE8',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },{
+            name: 'VALUE9',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
            }
        },
        {
            name: 'SUM',
-            type: 'float'
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM2',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM3',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM4',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM5',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM6',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM7',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM8',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'SUM9',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
        },
        {
            name: 'AVG',
-            type: 'float'
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG2',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG3',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG4',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG5',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG6',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG7',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG8',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'AVG9',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
        },
        {
            name: 'MIN',
-            type: 'float'
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN2',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN3',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN4',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN5',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN6',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN7',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN8',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MIN9',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
        },
        {
            name: 'MAX',
-            type: 'float'
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX2',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX3',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX4',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX5',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX6',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX7',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX8',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'MAX9',
+            type: 'float',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
        },
        {
            name: 'COUNT',
-            type: 'integer'
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT2',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT3',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT4',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT5',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT6',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT7',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT8',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
+        },
+        {
+            name: 'COUNT9',
+            type: 'integer',
+            convert: function(v,record) {
+                return record.parseToNumber(v);
+            }
        }
    ],
-    parseToNumber: function(value, idx, rec) {
+    parseToNumber: function(value) {
        
        if (value === "") {
            //we will return nothing
--- a/fhem/www/frontend/www/frontend/app/store/DeviceStore.js
+++ b/fhem/www/frontend/www/frontend/app/store/DeviceStore.js
@ -4,10 +4,11 @@
 Ext.define('FHEM.store.DeviceStore', {
    extend: 'Ext.data.Store',
    model: 'FHEM.model.DeviceModel',
+    id: 'devicestore',
    proxy: {
        type: 'ajax',
        method: 'POST',
-        url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1',
+        url: '', //gets set by controller
        reader: {
            type: 'json',
            root: 'data',
--- a/fhem/www/frontend/www/frontend/app/store/SavedChartsStore.js
+++ b/fhem/www/frontend/www/frontend/app/store/SavedChartsStore.js
@ -7,12 +7,12 @@ Ext.define('FHEM.store.SavedChartsStore', {
        proxy: {
            type: 'ajax',
             method: 'POST',
-             url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getcharts&XHR=1',
+             url: '', //gets set by controller
             reader: {
                 type: 'json',
                 root: 'data',
                 totalProperty: 'totalCount'
             }
     },
-     autoLoad: true
+     autoLoad: false
 });
--- a/fhem/www/frontend/www/frontend/app/view/DevicePanel.js
+++ b/fhem/www/frontend/www/frontend/app/view/DevicePanel.js
@ -5,6 +5,12 @@ Ext.define('FHEM.view.DevicePanel', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.devicepanel',
    
+    requires: [
+           'Ext.form.FieldSet',
+           'Ext.layout.container.Column',
+           'Ext.form.field.ComboBox'
+    ],
+    
    /**
     * 
     */
--- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
+++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
@ -5,95 +5,62 @@ Ext.define('FHEM.view.LineChartPanel', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.linechartpanel',
    requires: [
-        'FHEM.view.LineChartView',
-        'FHEM.store.ChartStore'
+        'FHEM.store.ChartStore',
+        'FHEM.store.DeviceStore',
+        'FHEM.store.ReadingsStore',
+        'Ext.form.Panel',
+        'Ext.form.field.Radio',
+        'Ext.form.field.Date',
+        'Ext.form.RadioGroup',
+        'Ext.chart.Chart',
+        'Ext.chart.axis.Numeric',
+        'Ext.chart.axis.Time',
+        'Ext.chart.series.Line'
    ],
    
+    /**
+     * generating getters and setters
+     */
+    config: {
+        /**
+         * last max value of Y axis before zoom was applied
+         */
+        lastYmax: null,
+        
+        /**
+         * last min value of Y axis before zoom was applied
+         */
+        lastYmin: null,
+        
+        /**
+         * last max value of Y axis before zoom was applied
+         */
+        lastXmax: null,
+        
+        /**
+         * last min value of Y axis before zoom was applied
+         */
+        lastXmin: null
+    },
+    
+    artifactSeries: [],
+    
+    /**
+     * the title
+     */
    title: 'Line Chart',
    
    /**
     * init function
     */
-    initComponent: function() {
+    initComponent: function(cfg) {
        
        var me = this;
        
-        // set up the local db columnname store
-        // as these columns are fixed, we dont have to request them
-        me.comboAxesStore = Ext.create('Ext.data.Store', {
-            fields: ['name'],
-            data : [
-                {'name':'TIMESTAMP'},
-                {'name':'DEVICE'},
-                {'name':'TYPE'},
-                {'name':'EVENT'},
-                {'name':'READING'},
-                {'name':'VALUE'},
-                {'name':'UNIT'}
-            ]
-        });
-        
-        me.comboColorStore = Ext.create('Ext.data.Store', {
-            fields: ['name', 'value'],
-            data : [
-                {'name':'Blue','value':'#2F40FA'},
-                {'name':'Green', 'value':'#46E01B'},
-                {'name':'Orange','value':'#F0A800'},
-                {'name':'Red','value':'#E0321B'},
-                {'name':'Yellow','value':'#F5ED16'}
-            ]
-        });
-        
-        me.comboDeviceStore = Ext.create('FHEM.store.DeviceStore');
-        me.comboDevice2Store = Ext.create('FHEM.store.DeviceStore');
-        me.comboDevice3Store = Ext.create('FHEM.store.DeviceStore');
-        
-        me.comboDeviceStore.on("load", function(store, recs, success, operation) {
-            if(!success) {
-                Ext.Msg.alert("Error", "Something went wrong. Store Items: " + store.getCount() + ", loaded Items: " + recs.length + ", Reader rawrecords: " + store.getProxy().getReader().rawData.data.length + ", proxyURL: " + store.getProxy().url);
-            }
-        });
-        
-        me.comboReadingsStore = Ext.create('FHEM.store.ReadingsStore');
-        me.comboReadings2Store = Ext.create('FHEM.store.ReadingsStore');
-        me.comboReadings3Store = Ext.create('FHEM.store.ReadingsStore');
-        
-        me.comboStatisticsStore = Ext.create('Ext.data.Store', {
-            fields: ['name', 'value'],
-            data : [
-                {'name':'None','value':'none'},
-                {'name':'Hour Sum', 'value':'hoursum'},
-                {'name':'Hour Average', 'value':'houraverage'},
-                {'name':'Hour Min','value':'hourmin'},
-                {'name':'Hour Max','value':'hourmax'},
-                {'name':'Hour Count','value':'hourcount'},
-                {'name':'Day Sum', 'value':'daysum'},
-                {'name':'Day Average', 'value':'dayaverage'},
-                {'name':'Day Min','value':'daymin'},
-                {'name':'Day Max','value':'daymax'},
-                {'name':'Day Count','value':'daycount'},
-                {'name':'Week Sum', 'value':'weeksum'},
-                {'name':'Week Average', 'value':'weekaverage'},
-                {'name':'Week Min','value':'weekmin'},
-                {'name':'Week Max','value':'weekmax'},
-                {'name':'Week Count','value':'weekcount'},
-                {'name':'Month Sum', 'value':'monthsum'},
-                {'name':'Month Average', 'value':'monthaverage'},
-                {'name':'Month Min','value':'monthmin'},
-                {'name':'Month Max','value':'monthmax'},
-                {'name':'Month Count','value':'monthcount'},
-                {'name':'Year Sum', 'value':'yearsum'},
-                {'name':'Year Average', 'value':'yearaverage'},
-                {'name':'Year Min','value':'yearmin'},
-                {'name':'Year Max','value':'yearmax'},
-                {'name':'Year Count','value':'yearcount'}
-            ]
-        });
-        
        var chartSettingPanel = Ext.create('Ext.form.Panel', {
            title: 'Chart Settings - Click me to edit',
            name: 'chartformpanel',
-            maxHeight: 285,
+            maxHeight: 230,
            autoScroll: true,
            collapsible: true,
            titleCollapse: true,
@ -106,320 +73,11 @@ Ext.define('FHEM.view.LineChartPanel', {
                    xtype: 'fieldset',
                    layout: 'column',
                    title: 'Select data',
+                    name: 'axesfieldset',
                    defaults: {
                        margin: '0 10 10 10'
                    },
-                    items: [
-                        {  
-                          xtype: 'combobox', 
-                          name: 'devicecombo',
-                          fieldLabel: 'Select Device',
-                          labelWidth: 90,
-                          store: me.comboDeviceStore,
-                          displayField: 'DEVICE',
-                          valueField: 'DEVICE'
-                        },
-                        {  
-                          xtype: 'combobox', 
-                          name: 'xaxiscombo',
-                          fieldLabel: 'Select X Axis',
-                          labelWidth: 90,
-                          inputWidth: 100,
-                          store: me.comboAxesStore,
-                          displayField: 'name',
-                          valueField: 'name'
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'yaxiscombo',
-                            fieldLabel: 'Select Y-Axis',
-                            labelWidth: 90,
-                            inputWidth: 110,
-                            store: me.comboReadingsStore,
-                            displayField: 'READING',
-                            valueField: 'READING'
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'yaxiscolorcombo',
-                            fieldLabel: 'Y-Color',
-                            labelWidth: 50,
-                            inputWidth: 70,
-                            store: me.comboColorStore,
-                            displayField: 'name',
-                            valueField: 'value',
-                            value: me.comboColorStore.getAt(0)
-                        },
-                        {  
-                            xtype: 'checkboxfield', 
-                            name: 'yaxisfillcheck',
-                            boxLabel: 'Fill'
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'yaxisstatisticscombo',
-                            fieldLabel: 'Statistics',
-                            labelWidth: 70,
-                            inputWidth: 120,
-                            store: me.comboStatisticsStore,
-                            displayField: 'name',
-                            valueField: 'value',
-                            value: me.comboStatisticsStore.getAt(0)
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'device2combo',
-                            fieldLabel: 'Select 2. Device',
-                            labelWidth: 100,
-                            store: me.comboDevice2Store,
-                            displayField: 'DEVICE',
-                            valueField: 'DEVICE',
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'y2axiscombo',
-                            fieldLabel: 'Y2',
-                            labelWidth: 20,
-                            store: me.comboReadings2Store,
-                            displayField: 'READING',
-                            valueField: 'READING',
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'y2axiscolorcombo',
-                            fieldLabel: 'Y2-Color',
-                            labelWidth: 60,
-                            inputWidth: 70,
-                            store: me.comboColorStore,
-                            displayField: 'name',
-                            valueField: 'value',
-                            value: me.comboColorStore.getAt(1),
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'checkboxfield', 
-                            name: 'y2axisfillcheck',
-                            boxLabel: 'Fill',
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'device3combo',
-                            fieldLabel: 'Select 3. Device',
-                            labelWidth: 100,
-                            store: me.comboDevice3Store,
-                            displayField: 'DEVICE',
-                            valueField: 'DEVICE',
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'y3axiscombo',
-                            fieldLabel: 'Y3',
-                            labelWidth: 20,
-                            store: me.comboReadings3Store,
-                            displayField: 'READING',
-                            valueField: 'READING',
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'y3axiscolorcombo',
-                            fieldLabel: 'Y3-Color',
-                            labelWidth: 60,
-                            inputWidth: 70,
-                            store: me.comboColorStore,
-                            displayField: 'name',
-                            valueField: 'value',
-                            value: me.comboColorStore.getAt(2),
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'checkboxfield', 
-                            name: 'y3axisfillcheck',
-                            boxLabel: 'Fill',
-                            hidden: true
-                        },
-                        {
-                          xtype: 'button',
-                          width: 110,
-                          text: 'Add another Y-Axis',
-                          name: 'addyaxisbtn',
-                          handler: function(btn) {
-                              var y2device = btn.up().down('combobox[name=device2combo]');
-                              var y2 = btn.up().down('combobox[name=y2axiscombo]');
-                              var y2color = btn.up().down('combobox[name=y2axiscolorcombo]');
-                              var y2fill = btn.up().down('checkboxfield[name=y2axisfillcheck]');
-                              
-                              var y3device = btn.up().down('combobox[name=device3combo]');
-                              var y3 = btn.up().down('combobox[name=y3axiscombo]');
-                              var y3color = btn.up().down('combobox[name=y3axiscolorcombo]');
-                              var y3fill = btn.up().down('checkboxfield[name=y3axisfillcheck]');
-                              
-                              if (y2.hidden) {
-                                  y2device.show();
-                                  y2.show();
-                                  y2color.show();
-                                  y2fill.show();
-                              } else if (y3.hidden) {
-                                  y3device.show();
-                                  y3.show(); 
-                                  y3color.show();
-                                  y3fill.show();
-                                  btn.setDisabled(true);
-                              }
-                          }
-                        },
-                        {
-                            xtype: 'numberfield',
-                            fieldLabel: 'Startvalue',
-                            name: 'base1start',
-                            allowBlank: false,
-                            labelWidth: 60,
-                            width: 120,
-                            hidden: true
-                        },
-                        {
-                            xtype: 'numberfield',
-                            fieldLabel: 'Endvalue',
-                            name: 'base1end',
-                            allowBlank: false,
-                            labelWidth: 60,
-                            width: 120,
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'baseline1colorcombo',
-                            fieldLabel: 'Baseline 1 Color',
-                            labelWidth: 100,
-                            inputWidth: 70,
-                            store: me.comboColorStore,
-                            displayField: 'name',
-                            valueField: 'value',
-                            value: me.comboColorStore.getAt(0),
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'checkboxfield', 
-                            name: 'baseline1fillcheck',
-                            boxLabel: 'Fill',
-                            hidden: true
-                        },
-                        {
-                            xtype: 'numberfield',
-                            fieldLabel: 'Startvalue',
-                            name: 'base2start',
-                            allowBlank: false,
-                            labelWidth: 60,
-                            width: 120,
-                            hidden: true
-                        },
-                        {
-                            xtype: 'numberfield',
-                            fieldLabel: 'Endvalue',
-                            name: 'base2end',
-                            allowBlank: false,
-                            labelWidth: 60,
-                            width: 120,
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'baseline2colorcombo',
-                            fieldLabel: 'Baseline 2 Color',
-                            labelWidth: 100,
-                            inputWidth: 70,
-                            store: me.comboColorStore,
-                            displayField: 'name',
-                            valueField: 'value',
-                            value: me.comboColorStore.getAt(1),
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'checkboxfield', 
-                            name: 'baseline2fillcheck',
-                            boxLabel: 'Fill',
-                            hidden: true
-                        },
-                        {
-                            xtype: 'numberfield',
-                            fieldLabel: 'Startvalue',
-                            name: 'base3start',
-                            allowBlank: false,
-                            labelWidth: 60,
-                            width: 120,
-                            hidden: true
-                        },
-                        {
-                            xtype: 'numberfield',
-                            fieldLabel: 'Endvalue',
-                            name: 'base3end',
-                            allowBlank: false,
-                            labelWidth: 60,
-                            width: 120,
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'combobox', 
-                            name: 'baseline3colorcombo',
-                            fieldLabel: 'Baseline 3 Color',
-                            labelWidth: 100,
-                            inputWidth: 70,
-                            store: me.comboColorStore,
-                            displayField: 'name',
-                            valueField: 'value',
-                            value: me.comboColorStore.getAt(2),
-                            hidden: true
-                        },
-                        {  
-                            xtype: 'checkboxfield', 
-                            name: 'baseline3fillcheck',
-                            boxLabel: 'Fill',
-                            hidden: true
-                        },
-                        {
-                            xtype: 'button',
-                            width: 110,
-                            text: 'Add Baseline',
-                            name: 'addbaselinebtn',
-                            handler: function(btn) {
-                                var b1start = btn.up().down('numberfield[name=base1start]');
-                                var b1end = btn.up().down('numberfield[name=base1end]');
-                                var b1color = btn.up().down('combobox[name=baseline1colorcombo]');
-                                var b1fill = btn.up().down('checkboxfield[name=baseline1fillcheck]');
-                                var b2start = btn.up().down('numberfield[name=base2start]');
-                                var b2end = btn.up().down('numberfield[name=base2end]');
-                                var b2color = btn.up().down('combobox[name=baseline2colorcombo]');
-                                var b2fill = btn.up().down('checkboxfield[name=baseline2fillcheck]');
-                                var b3start = btn.up().down('numberfield[name=base3start]');
-                                var b3end = btn.up().down('numberfield[name=base3end]');
-                                var b3color = btn.up().down('combobox[name=baseline3colorcombo]');
-                                var b3fill = btn.up().down('checkboxfield[name=baseline3fillcheck]');
-                                
-                                if (b1start.hidden) {
-                                    b1start.show();
-                                    b1end.show();
-                                    b1color.show();
-                                    b1fill.show();
-                                } else if (b2start.hidden) {
-                                    b2start.show();
-                                    b2end.show();
-                                    b2color.show();
-                                    b2fill.show();
-                                } else if (b3start.hidden) {
-                                    b3start.show();
-                                    b3end.show();
-                                    b3color.show();
-                                    b3fill.show();
-                                    btn.setDisabled(true);
-                                }
-                                    
-                            }
-                         }
-                    ]
+                    items: [] //get filled in own function
                },
                {
                    xtype: 'fieldset',
@ -487,7 +145,7 @@ Ext.define('FHEM.view.LineChartPanel', {
                    xtype: 'fieldset',
                    layout: 'column',
                    defaults: {
-                        margin: '0 0 0 10'
+                        margin: '10 10 10 10'
                    },
                    items: [
                        {
@ -508,18 +166,6 @@ Ext.define('FHEM.view.LineChartPanel', {
                            text: 'Reset Fields',
                            name: 'resetchartform'
                        },
-                        {
-                          xtype: 'button',
-                          width: 100,
-                          text: 'Step back',
-                          name: 'stepback'
-                        },
-                        {
-                          xtype: 'button',
-                          width: 100,
-                          text: 'Step forward',
-                          name: 'stepforward'
-                        },
                        {
                            xtype: 'radio',
                            width: 160,
@ -574,6 +220,11 @@ Ext.define('FHEM.view.LineChartPanel', {
            ]
        });
        
+        //add the first yaxis line
+        me.createNewYAxis();
+        
+        //creating the chart
+        var chartstore = Ext.create('FHEM.store.ChartStore');
        var linechartview = Ext.create('Ext.panel.Panel', {
            title: 'Chart',
            autoScroll: true,
@ -581,14 +232,128 @@ Ext.define('FHEM.view.LineChartPanel', {
            titleCollapse: true,
            items: [
                {
-                  xtype: 'linechartview'
+                    xtype: 'toolbar',
+                    items: [
+                        {
+                            xtype: 'button',
+                            width: 100,
+                            text: 'Step back',
+                            name: 'stepback'
+                        },
+                        {
+                            xtype: 'button',
+                            width: 100,
+                            text: 'Step forward',
+                            name: 'stepforward'
+                        },
+                        {
+                            xtype: 'button',
+                            width: 100,
+                            text: 'Reset Zoom',
+                            name: 'resetzoom',
+                            scope: me,
+                            handler: function(btn) {
+                                var chart = me.down('chart');
+                                chart.restoreZoom();
+                                chart.axes.get(0).minimum = me.getLastYmin();
+                                chart.axes.get(0).maximum = me.getLastYmax();
+                                chart.axes.get(1).minimum = me.getLastXmin();
+                                chart.axes.get(1).maximum = me.getLastXmax();
+                                
+                                chart.redraw();
+                                //helper to reshow the hidden items after zooming back out
+                                if (me.artifactSeries && me.artifactSeries.length > 0) {
+                                    Ext.each(me.artifactSeries, function(serie) {
+                                        serie.showAll();
+                                        Ext.each(serie.group.items, function(item) {
+                                            if (item.type === "circle") {
+                                                item.show();
+                                                item.redraw();
+                                            }
+                                        });
+                                    });
+                                    me.artifactSeries = [];
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    xtype: 'chart',
+                    legend: {
+                        position: 'right'
+                    },
+                    axes: [ 
+                        {
+                            type : 'Numeric',
+                            name : 'yaxe',
+                            position : 'left',
+                            fields : [ 'VALUE', 'VALUE2' ],
+                            title : 'VALUE',
+                            grid : {
+                                odd : {
+                                    opacity : 1,
+                                    fill : '#ddd',
+                                    stroke : '#bbb',
+                                    'stroke-width' : 0.5
+                                }
+                            }
+                        }, 
+                        {
+                            type : 'Time',
+                            name : 'xaxe',
+                            position : 'bottom',
+                            fields : [ 'TIMESTAMP' ],
+                            dateFormat : "Y-m-d H:i:s",
+                            title : 'Time'
+                        }
+                    ],
+                    animate: true,
+                    store: chartstore,
+                    enableMask: true,
+                    mask: true,//'vertical',//true, //'horizontal',
+                    listeners: {
+                        mousedown: function(evt) {
+                            // fix for firefox, not dragging images
+                            evt.preventDefault();
+                        },
+                        select: {
+                            fn: function(chart, selection, evt) {
+                                delete chart.axes.get(1).fromDate;
+                                delete chart.axes.get(1).toDate;
+                                if (Ext.isEmpty(me.getLastYmax())) {
+                                    me.setLastYmax(chart.axes.get(0).maximum);
+                                    me.setLastYmin(chart.axes.get(0).minimum);
+                                }
+                                if (Ext.isEmpty(me.getLastXmax())) {
+                                    me.setLastXmax(chart.axes.get(1).maximum);
+                                    me.setLastXmin(chart.axes.get(1).minimum);
+                                }
+                                chart.axes.get(1).processView();
+                                chart.redraw();
+                                chart.setZoom(selection);
+                                chart.mask.hide();
+                                //helper hiding series and items which are out of scope
+                                Ext.each(chart.series.items, function(serie) {
+                                    if (serie.items.length === 0) {
+                                        me.artifactSeries.push(serie);
+                                        Ext.each(serie.group.items, function(item) {
+                                            item.hide();
+                                            item.redraw();
+                                        });
+                                        serie.hideAll();
+                                    }
+                                });
+                            }
+                        }
+                    }
                }    
            ]
        });
            
        me.items = [
-                chartSettingPanel,
-                linechartview
+            chartSettingPanel,
+            linechartview
        ];
        
        me.callParent(arguments);
@ -602,12 +367,251 @@ Ext.define('FHEM.view.LineChartPanel', {
     */
    layoutChart: function() {
        var lcp = Ext.ComponentQuery.query('linechartpanel')[0];
-        var lcv = Ext.ComponentQuery.query('linechartview')[0];
+        var lcv = Ext.ComponentQuery.query('chart')[0];
        var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0];
        var chartheight = lcp.getHeight() - cfp.getHeight() - 85;
        var chartwidth = lcp.getWidth() - 25;
        lcv.setHeight(chartheight);
        lcv.setWidth(chartwidth);
-    }
+    },
    
+    /**
+     * create a new fieldset for a new chart y axis
+     */
+    createNewYAxis: function() {
+        
+        var me = this;
+        
+        var components = 
+            {
+                xtype: 'fieldset',
+                name: 'singlerowfieldset',
+                layout: 'column',
+                defaults: {
+                    margin: '5 5 5 5'
+                },
+                items: 
+                    [
+                        {  
+                          xtype: 'combobox', 
+                          name: 'devicecombo',
+                          fieldLabel: 'Select Device',
+                          labelWidth: 90,
+                          store: Ext.create('FHEM.store.DeviceStore', {
+                              proxy: {
+                                  type: 'ajax',
+                                  method: 'POST',
+                                  url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1',
+                                  reader: {
+                                      type: 'json',
+                                      root: 'data',
+                                      totalProperty: 'totalCount'
+                                  }
+                              },
+                              autoLoad: true
+                          }),
+                          displayField: 'DEVICE',
+                          valueField: 'DEVICE',
+                          listeners: {
+                              select: function(combo) {
+                                  var device = combo.getValue(),
+                                      readingscombo = combo.up().down('combobox[name=yaxiscombo]'),
+                                      readingsstore = readingscombo.getStore(),
+                                      readingsproxy = readingsstore.getProxy();
+                                  
+                                  readingsproxy.url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + device + '+getreadings&XHR=1';
+                                  readingsstore.load();
+                                  readingscombo.setDisabled(false);
+                              }
+                          }
+                        },
+                        {  
+                            xtype: 'combobox', 
+                            name: 'xaxiscombo',
+                            fieldLabel: 'Select X Axis',
+                            labelWidth: 90,
+                            inputWidth: 100,
+                            store: Ext.create('Ext.data.Store', {
+                                fields: ['name'],
+                                data : [
+                                    {'name':'TIMESTAMP'},
+                                    {'name':'DEVICE'},
+                                    {'name':'TYPE'},
+                                    {'name':'EVENT'},
+                                    {'name':'READING'},
+                                    {'name':'VALUE'},
+                                    {'name':'UNIT'}
+                                ]
+                            }),
+                            displayField: 'name',
+                            valueField: 'name'
+                        },
+                        {  
+                            xtype: 'combobox', 
+                            name: 'yaxiscombo',
+                            fieldLabel: 'Select Y-Axis',
+                            disabled: true,
+                            labelWidth: 90,
+                            inputWidth: 110,
+                            store: Ext.create('FHEM.store.ReadingsStore', {
+                                proxy: {
+                                    type: 'ajax',
+                                    method: 'POST',
+                                    url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+-+getreadings&XHR=1',
+                                    reader: {
+                                        type: 'json',
+                                        root: 'data',
+                                        totalProperty: 'totalCount'
+                                    }
+                                },
+                                autoLoad: false
+                            }),
+                            displayField: 'READING',
+                            valueField: 'READING'
+                        },
+                        {  
+                            xtype: 'combobox', 
+                            name: 'yaxiscolorcombo',
+                            fieldLabel: 'Y-Color',
+                            labelWidth: 50,
+                            inputWidth: 70,
+                            store: Ext.create('Ext.data.Store', {
+                                fields: ['name', 'value'],
+                                data : [
+                                    {'name':'Blue','value':'#2F40FA'},
+                                    {'name':'Green', 'value':'#46E01B'},
+                                    {'name':'Orange','value':'#F0A800'},
+                                    {'name':'Red','value':'#E0321B'},
+                                    {'name':'Yellow','value':'#F5ED16'}
+                                ]
+                            }),
+                            displayField: 'name',
+                            valueField: 'value',
+                            value: '#2F40FA'
+                        },
+                        {  
+                            xtype: 'checkboxfield', 
+                            name: 'yaxisfillcheck',
+                            boxLabel: 'Fill'
+                        },
+                        {  
+                            xtype: 'combobox', 
+                            name: 'yaxisstatisticscombo',
+                            fieldLabel: 'Statistics',
+                            labelWidth: 70,
+                            inputWidth: 120,
+                            store: Ext.create('Ext.data.Store', {
+                                fields: ['name', 'value'],
+                                data : [
+                                    {'name':'None','value':'none'},
+                                    {'name':'Hour Sum', 'value':'hoursum'},
+                                    {'name':'Hour Average', 'value':'houraverage'},
+                                    {'name':'Hour Min','value':'hourmin'},
+                                    {'name':'Hour Max','value':'hourmax'},
+                                    {'name':'Hour Count','value':'hourcount'},
+                                    {'name':'Day Sum', 'value':'daysum'},
+                                    {'name':'Day Average', 'value':'dayaverage'},
+                                    {'name':'Day Min','value':'daymin'},
+                                    {'name':'Day Max','value':'daymax'},
+                                    {'name':'Day Count','value':'daycount'},
+                                    {'name':'Week Sum', 'value':'weeksum'},
+                                    {'name':'Week Average', 'value':'weekaverage'},
+                                    {'name':'Week Min','value':'weekmin'},
+                                    {'name':'Week Max','value':'weekmax'},
+                                    {'name':'Week Count','value':'weekcount'},
+                                    {'name':'Month Sum', 'value':'monthsum'},
+                                    {'name':'Month Average', 'value':'monthaverage'},
+                                    {'name':'Month Min','value':'monthmin'},
+                                    {'name':'Month Max','value':'monthmax'},
+                                    {'name':'Month Count','value':'monthcount'},
+                                    {'name':'Year Sum', 'value':'yearsum'},
+                                    {'name':'Year Average', 'value':'yearaverage'},
+                                    {'name':'Year Min','value':'yearmin'},
+                                    {'name':'Year Max','value':'yearmax'},
+                                    {'name':'Year Count','value':'yearcount'}
+                                ]
+                            }),
+                            displayField: 'name',
+                            valueField: 'value',
+                            value: 'none'
+                        },
+                        {
+                            xtype: 'button',
+                            width: 110,
+                            text: 'Add another Y-Axis',
+                            name: 'addyaxisbtn',
+                            handler: function(btn) {
+                                me.createNewYAxis();
+                            }
+                        },
+                        {
+                            xtype: 'button',
+                            width: 110,
+                            text: 'Add Baseline',
+                            name: 'addbaselinebtn',
+                            handler: function(btn) {
+                                me.createNewBaseLineFields(btn);
+                            }      
+                        }
+                ]
+            };
+        
+        Ext.ComponentQuery.query('fieldset[name=axesfieldset]')[0].add(components);
+        
+    },
+    
+    /**
+     * 
+     */
+    createNewBaseLineFields: function(btn) {
+        var itemsToAdd = [
+            {
+                xtype: 'numberfield',
+                fieldLabel: 'Startvalue',
+                name: 'basestart',
+                allowBlank: false,
+                labelWidth: 60,
+                width: 120
+            },
+            {
+                xtype: 'numberfield',
+                fieldLabel: 'Endvalue',
+                name: 'baseend',
+                allowBlank: false,
+                labelWidth: 60,
+                width: 120
+            },
+            {  
+                xtype: 'combobox', 
+                name: 'baselinecolorcombo',
+                fieldLabel: 'Baseline Color',
+                labelWidth: 100,
+                inputWidth: 70,
+                store: Ext.create('Ext.data.Store', {
+                    fields: ['name', 'value'],
+                    data : [
+                        {'name':'Blue','value':'#2F40FA'},
+                        {'name':'Green', 'value':'#46E01B'},
+                        {'name':'Orange','value':'#F0A800'},
+                        {'name':'Red','value':'#E0321B'},
+                        {'name':'Yellow','value':'#F5ED16'}
+                    ]
+                }),
+                displayField: 'name',
+                valueField: 'value',
+                value: '#46E01B'
+            },
+            {  
+                xtype: 'checkboxfield', 
+                name: 'baselinefillcheck',
+                boxLabel: 'Fill'
+            }
+        ];
+        if (Ext.isDefined(btn)) {
+            btn.up().add(itemsToAdd);
+        } else {
+            this.down('fieldset[name=singlerowfieldset]').add(itemsToAdd);
+        }
+        
+    }
 });
--- a/fhem/www/frontend/www/frontend/app/view/LineChartView.js
+++ b/fhem/www/frontend/www/frontend/app/view/LineChartView.js
@ -1,50 +0,0 @@
-/**
- * The View for the Line Charts
- */
-Ext.define('FHEM.view.LineChartView', {
-    extend : 'Ext.chart.Chart',
-    alias : 'widget.linechartview',
-    xtype : 'chart',
-    requires : [ 'FHEM.store.ChartStore' ],
-    animate : true,
-    legend: {
-        position: 'right'
-    },
-
-    initComponent : function() {
-        var me = this;
-        me.store = Ext.create('FHEM.store.ChartStore');
-
-        me.axes = [ 
-            {
-                type : 'Numeric',
-                name : 'yaxe',
-                position : 'left',
-                fields : [ 'VALUE', 'VALUE2', 'VALUE3', 'VALUEBASE1', 'VALUEBASE2', 'VALUEBASE3' ],
-                title : 'VALUE',
-                grid : {
-                    odd : {
-                        opacity : 1,
-                        fill : '#ddd',
-                        stroke : '#bbb',
-                        'stroke-width' : 0.5
-                    }
-                }
-            }, 
-            {
-                type : 'Time',
-                name : 'xaxe',
-                position : 'bottom',
-                fields : [ 'TIMESTAMP' ],
-                dateFormat : "Y-m-d H:i:s",
-                minorTickSteps : 12,
-                title : 'Time'
-            } ];
-
-        me.series = null;
-        
-        me.callParent(arguments);
-        
-    }
-    
-});
--- a/fhem/www/frontend/www/frontend/app/view/TableDataGridPanel.js
+++ b/fhem/www/frontend/www/frontend/app/view/TableDataGridPanel.js
@ -4,7 +4,6 @@
 Ext.define('FHEM.view.TableDataGridPanel', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.tabledatagridpanel',
-    //xtype : 'gridpanel',
    requires: [
        'FHEM.store.TableDataStore'
    ],
--- a/fhem/www/frontend/www/frontend/app/view/Viewport.js
+++ b/fhem/www/frontend/www/frontend/app/view/Viewport.js
@ -9,7 +9,16 @@ Ext.define('FHEM.view.Viewport', {
    requires: [
        'FHEM.view.LineChartPanel',
        'FHEM.view.TableDataGridPanel',
-        'FHEM.controller.ChartController'
+        'FHEM.controller.ChartController',
+        'FHEM.store.SavedChartsStore',
+        'Ext.layout.container.Border',
+        'Ext.form.field.Text',
+        'Ext.layout.container.Accordion',
+        'Ext.tree.Panel',
+        'Ext.grid.Panel',
+        'Ext.grid.Column',
+        'Ext.grid.column.Action',
+        'Ext.draw.Text'
    ],

    initComponent: function() {
@ -133,7 +142,7 @@ Ext.define('FHEM.view.Viewport', {
                                             name: 'savedchartsactioncolumn',
                                             width:'15%',
                                             items: [{
-                                                 icon: 'lib/ext-4.1.1a/images/gray/dd/drop-no.gif',
+                                                 icon: 'lib/ext-4.2.0.663/images/dd/drop-no.gif',
                                                 tooltip: 'Delete'
                                             }]
                                         }
--- a/fhem/www/frontend/www/frontend/index.html
+++ b/fhem/www/frontend/www/frontend/index.html
@ -5,11 +5,25 @@
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Frontend</title>
-    <link rel="stylesheet" type="text/css" href="lib/ext-4.1.1a/ext-all-gray-debug.css" />
-    <script type="text/javascript" src="lib/ext-4.1.1a/ext-all.js"></script>
+    
+    <style type="text/css">
+        #loading-overlay {
+			text-align: center;
+			position: absolute;
+			display: block;
+			top: 50%;
+			left: 43%;
+        }
+    </style>
+    <p class="loader">
+        <img src="app/resources/loading.png" alt="Please wait..." height="31" width="248" id="loading-overlay">
+    </p>
+    
+    <link rel="stylesheet" type="text/css" href="lib/ext-4.2.0.663/ext-theme-gray-all.css" />
+    <script type="text/javascript" src="lib/ext-4.2.0.663/ext-all.js"></script>
    <script type="text/javascript" src="app/userconfig.js"></script>
    <script type="text/javascript" src="app/app.js"></script>
 </head>
    <body>
    </body>
-</html>
+</html>
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/ext-all-gray-debug.css
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/ext-all-gray-debug.css
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/ext-all.js
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/ext-all.js
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn-group/btn-group-default-framed-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn-group/btn-group-default-framed-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn-group/btn-group-default-framed-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn-group/btn-group-default-framed-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-disabled-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-disabled-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-disabled-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-disabled-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-disabled-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-disabled-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-focus-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-focus-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-focus-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-focus-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-focus-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-focus-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-over-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-over-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-over-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-over-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-over-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-over-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-pressed-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-pressed-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-pressed-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-pressed-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-pressed-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-pressed-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-large-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-disabled-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-disabled-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-disabled-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-disabled-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-disabled-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-disabled-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-focus-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-focus-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-focus-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-focus-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-focus-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-focus-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-over-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-over-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-over-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-over-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-over-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-over-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-pressed-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-pressed-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-pressed-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-pressed-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-pressed-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-pressed-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-medium-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-disabled-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-disabled-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-disabled-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-disabled-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-disabled-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-disabled-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-focus-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-focus-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-focus-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-focus-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-focus-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-focus-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-over-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-over-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-over-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-over-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-over-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-over-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-pressed-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-pressed-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-pressed-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-pressed-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-pressed-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-pressed-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-small-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-disabled-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-disabled-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-disabled-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-disabled-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-focus-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-focus-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-focus-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-focus-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-focus-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-focus-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-over-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-over-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-over-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-over-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-over-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-over-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-pressed-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-pressed-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-pressed-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-pressed-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-pressed-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-pressed-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-large-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-disabled-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-disabled-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-disabled-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-disabled-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-focus-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-focus-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-focus-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-focus-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-focus-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-focus-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-over-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-over-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-over-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-over-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-over-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-over-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-pressed-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-pressed-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-pressed-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-pressed-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-pressed-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-pressed-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-medium-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-disabled-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-disabled-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-disabled-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-disabled-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-focus-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-focus-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-focus-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-focus-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-focus-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-focus-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-over-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-over-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-over-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-over-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-over-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-over-sides.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-pressed-bg.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-pressed-bg.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-pressed-corners.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-pressed-corners.gif
--- a/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-pressed-sides.gif
+++ b/fhem/www/frontend/www/frontend/lib/ext-4.1.1a/images/gray/btn/btn-default-toolbar-small-pressed-sides.gif
--- a/Show More
+++ b/Show More