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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    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 Forum Manager
    ________________
    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
    Chisinau, Moldova
    Posts
    642
    Answers
    21
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      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
    Chisinau, Moldova
    Posts
    642
    Answers
    21
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      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