Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    mikxman is on a distinguished road

      0  

    Default Unanswered: VERY SLOW interactions in android webview

    Unanswered: VERY SLOW interactions in android webview


    Hi!
    I'm trying to use sencha charts in my android application, but i have some problem with it. It works, but it works EXTREMELY slow.
    I tried it in virtual device, ZTE blade and Samsung Galaxy Spica.
    How can I improve performance or what am I doing wrong?


    I create android app (for 2.1 sdk). The code of main activity:
    Code:
    public class WebView_testActivity extends Activity{
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            WebView myWebView = (WebView) findViewById(R.id.webview);        
            WebSettings webSettings = myWebView.getSettings();        
            webSettings.setJavaScriptEnabled(true);
            webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
            myWebView.loadUrl("file:///android_asset/index.html");
        }
    }
    In my java code I load index.html page, which is placed in my project.
    index.html I took from examples:

    Code:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <meta charset="utf-8"> 
            <title>Hello World</title>         
            <link href="lib/touch/resources/css/touch-charts-demo.css" rel="stylesheet" type="text/css" /> 
    		<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
    		<script src="lib/touch/touch-charts.js" type="text/javascript"></script> 
    		<script src="index.js" type="text/javascript"></script>  
        </head> 
        <body></body> 
    </html>
    Index.js file I also took from examples:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.jpg',
        phoneStartupScreen: 'phone_startup.jpg',
        tabletIcon: 'icon-ipad.png',
        phoneIcon: 'icon-iphone.png',
        glossOnIcon: false,
        onReady: function() {
            window.generateData = function(n, floor) {
                var data = [],
                    p = (Math.random() * 11) + 1,
                    i;
    
                floor = (!floor && floor !== 0) ? 20 : floor;
    
                for (i = 0; i < (n || 12); i++) {
                    data.push({
                        name: Date.monthNames[i % 12],
                        2008: Math.floor(Math.max((Math.random() * 100), floor)),
                        2009: Math.floor(Math.max((Math.random() * 100), floor)),
                        2010: Math.floor(Math.max((Math.random() * 100), floor)),
                        data4: Math.floor(Math.max((Math.random() * 100), floor)),
                        data5: Math.floor(Math.max((Math.random() * 100), floor)),
                        data6: Math.floor(Math.max((Math.random() * 100), floor)),
                        data7: Math.floor(Math.max((Math.random() * 100), floor)),
                        data8: Math.floor(Math.max((Math.random() * 100), floor)),
                        data9: Math.floor(Math.max((Math.random() * 100), floor))
                    });
                }
                return data;
            };
            window.store1 = new Ext.data.JsonStore({
                fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
                data: generateData(5, 20)
            });
    
            var onRefreshTap = function() {
                window.store1.loadData(generateData(5, 20));
            };
            var onHelpTap = function() {
    			new Ext.Panel({
     		          floating: true,
    		           modal: true,
    		           centered: true,
    		           width: 300,
    		           height: 250,
    		           styleHtmlContent: true,
    		           scroll: 'vertical',
    		           dockedItems: [{
    		               dock: 'top',
    		               xtype: 'toolbar',
    		               title: 'Bar Chart'
    		           }],
    		           stopMaskTapEvent: false,
    		           fullscreen: false,
    				   html: "This example's uses many interactions.<br><ul>" +
    							"<li>A horizontal swipe will change between a grouped and stacked bar chart.</li>" +
    							"<li>Tapping two items will overlay an arrow and show a comparison in the Title area.</li>" +
    							"<li>The chart can be zoomed vertically with a pinch gesture, and the panned by dragging.  For devices which do not support multi-touch, an extra toggle button is made available to switch between pan and zoom.  When zoomed in, arrow indicators will be overlayed on the chart to show that more data is available</li>" +
    							"<li>Double-Tap will reset the chart back to the initial state</li>"
    		       }).show('pop');
    		}
    
            var chartPanel = new Ext.chart.Panel({
                title: 'Bar Chart',
                fullscreen: true,
                dockedItems: [{
                    xtype: 'button',
                    iconCls: 'help',
                    iconMask: true,
                    ui: 'plain',
                    handler: onHelpTap
                }, {
    				xtype: 'button',
    				iconCls: 'shuffle',
    				iconMask: true,
    				ui: 'plain',
                    handler: onRefreshTap
    			}],
                items: {
                    cls: 'bar1',
                    theme: 'Demo',
                    store: store1,
                    animate: true,
                    shadow: false,
                    legend: {
                        position: {
                            portrait: 'right',
                            landscape: 'top'
                        },
                        labelFont: '17px Arial'
                    },
                    interactions: [{
                        type: 'reset'
                    },
                    {
                        type: 'togglestacked'
                    },
                    {
                        type: 'panzoom',
                        axes: {
                            left: {}
                        }
                    },
                    {
                        type: 'iteminfo',
                        gesture: 'taphold',
                        panel: {
                            dockedItems: [{
                                dock: 'top',
                                xtype: 'toolbar',
                                title: 'Details'
                            }],
    
                            html: 'Testing'
                        },
                        listeners: {
                            'show': function(me, item, panel) {
                                panel.update('<ul><li><b>Month:</b> ' + item.value[0] + '</li><li><b>Value: </b> ' + item.value[1] + '</li></ul>');
                            }
                        }
                    },
                    {
                        type: 'itemcompare',
                        offset: {
                            x: -10
                        },
                        listeners: {
                            'show': function(interaction) {
                                var val1 = interaction.item1.value,
                                    val2 = interaction.item2.value;
    
                                chartPanel.descriptionPanel.setTitle(val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
                                chartPanel.headerPanel.setActiveItem(1, {
                                    type: 'slide',
                                    direction: 'left'
                                });
                            },
                            'hide': function() {
                                chartPanel.headerPanel.setActiveItem(0, {
                                    type: 'slide',
                                    direction: 'right'
                                });
                            }
                        }
                    }],
                    axes: [{
                        type: 'Numeric',
                        position: 'bottom',
                        fields: ['2008', '2009', '2010'],
                        label: {
                            renderer: function(v) {
                                return v.toFixed(0);
                            }
                        },
                        title: 'Number of Hits',
                        minimum: 0
                    },
                    {
                        type: 'Category',
                        position: 'left',
                        fields: ['name'],
                        title: 'Month of the Year'
                    }],
                    series: [{
                        type: 'bar',
                        xField: 'name',
                        yField: ['2008', '2009', '2010'],
                        axis: 'bottom',
                        highlight: true,
                        showInLegend: true
                    }]
                }
            });
        }
    });

  2. #2
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,744
    Vote Rating
    927
    Answers
    3585
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sencha Touch doesn't support Android 2.1. Also Sencha Touch 2 has a lot better performance for Android, it's like night and day if you ask me.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    mikxman is on a distinguished road

      0  

    Default


    But i need Sencha Touch CHARTS

    Sencha Touch Charts 2 Beta has better performance?

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    danielvermaasen is on a distinguished road

      0  

    Default


    Pretty old thread, but regardless:
    It is a known bug, that WebViews have performance issues with hardwareacceleration. Disable the acceleration for the view by doing this:
    Code:
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    mikxman is on a distinguished road

      0  

    Default


    but android 2.x doesn't have hardware acceleration for webview. or it does?

  6. #6
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    655
    Vote Rating
    34
    Answers
    21
    vadimv has a spectacular aura about vadimv has a spectacular aura about

      0  

    Default


    This line of code just improved responsiveness of my testapp, android 4.0.3 release 5:
    Code:
    webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
    And it's more an android's webkit problem, testing ST 2.1 rc1's kitchensink in chrome on android confirms this, besides the complaints on net about the slowness of android's webview

  7. #7
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    655
    Vote Rating
    34
    Answers
    21
    vadimv has a spectacular aura about vadimv has a spectacular aura about

      0  

    Default


    Quote Originally Posted by mikxman View Post
    but android 2.x doesn't have hardware acceleration for webview. or it does?
    it doesn't
    http://developer.android.com/guide/t...t.html#hwaccel