Results 1 to 7 of 7

Thread: VERY SLOW interactions in android webview

    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

    Default 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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    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 @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    3

    Default

    But i need Sencha Touch CHARTS

    Sencha Touch Charts 2 Beta has better performance?

  4. #4

    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

    Default

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

  6. #6
    Sencha Premium User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    811
    Answers
    23

    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
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

  7. #7
    Sencha Premium User vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    811
    Answers
    23

    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
    Github https://github.com/vadimpopa
    Blogging @ : http://vadimpopa.com
    Twitter: @vadimvpopa

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •