Unresponsive touch in android webview - javascript

I need to display four realtime smooth graphs representing user's biodata in my android application. I tried every free android library but they were not as smooth as their javascript counterparts. So I decided to use the highcharts js in webview.
Four graphs in the same screen works smoothly. But webview is not recognising touch events quickly. I tried playing with H/w accelartion, touch events etc. but it did not help.
Whenever I touch a button on the webview logcat says :-
"12-13 16:13:37.436: V/WebViewInputDispatcher(9308): blockWebkitDraw"
"12-13 16:13:37.441: V/WebViewInputDispatcher(9308): blockWebkitDraw lockedfalse"
After touching buttons multiple times it says :-
"12-13 16:13:37.806: V/WebViewInputDispatcher(9308): blockWebkitDraw lockedtrue"
So basically any touch on highcharts graph or the buttons does not work quickly. I am loading html/js/css from assets folder.
What fixes I need to perform in webview to resolve this? I don't think there is any problem with my html/js/css code because it runs perfectly fine on Chrome mobile.

Having your app an important delay is a possible indicator that probably you're doing some hard work in the UIThread that you should probably sepparate in a Thread or an AsyncTask.
You don't mention what is supposed to happen when you touch a chart, but some code would probably clarify that.
I strongly recommend installing Eclipse Memory Analyzer Tool (assuming you use Eclipse, otherwise you should find a similar tool for the environment you use) and combine it's usage with DDMS. This will give you some clues of where the bottleneck might be.
This is a good tutorial on how to use them: http://therockncoder.blogspot.com.es/2012/09/fixing-android-memory-leak.html
This one's very clarifying too: http://eclipsesource.com/blogs/2013/01/21/10-tips-for-using-the-eclipse-memory-analyzer/

Related

Odd dropdown/select behavior in phonegap on iOS

We have a phonegap/ionic application targeting iOS. We have been testing with the ipad air simulator (xcode) and ipad air (10.3.3), ipad Pro (11.0.3).
The app is an ionic (v1) app that downloads and loads stand alone html files (the files contain css, html, js in one doc). The documents are typically long forms. In all test environments we are getting odd behavior with selects/drop downs.
When you click/tap on a select the options will appear correctly.
Then when you click/tap somewhere else, blank space or another input field you will usually get the select options bubble again but it will be empty.
In the above image I made my selection from the options and then clicked into the next field.
This was intermittent at first and now it seems to happen all the time. It seems like it has something to do with losing focus but I am unable to see why this is popping back up. I haven't found anything very useful from searching online in regards to this problem.
UPDATE 11/7/17
After more thorough searching this seems to be due to building the app with xcode 9 and/or the use of UIWebView vs WKWebview. I also looked through the code more to see we were already using WKWebView not UIWebView and the problem is still present. As someone mentioned in this thread.
Good thing is Cordova has support for WKWebView too. You have to install the plugin: cordova-plugin-wkwebview-engine

Leaflet MultipolygonField widget, not receiving touch events

On my desktop using Django-1.9 admin, on Firefox, the django-leaflet MultipolygonField widget works as expected.
However, on a Samsung tablet using either Chrome or Firefox or the native browser, although I can select the tool to start drawing the polygon, by touching it, it is impossible to place any point on the map.
It seems like the widget does not respond to any touch/hit/punch event.
Is anybody else experiencing something like that? I have posted a relevant question in django-leaflet and I am still waiting for a hint.
Leaflet-draw 0.2.4, which is used to enable drawing in django-leaflet, doesn't support touch yet.
Leaflet-draw 0.3.0 adds touch support, and a pull request exists to update it in django-leaflet. Not much activity there though.
You should be able to override the file by downloading the new version of leaflet-draw and add that to a directory static/leaflet/draw/ in your Django app.

Why my digital signage solution with Raspberry doesn't correctly works?

I am trying to achieve a Digital Signage using Raspbian OS on my Raspberry. I set my r-pi to open in kiosk mode chromium browser and to shows a slideshow od ads and scrolling news within my web application.
I created the ads slideshow using jquery image slideshow and scrolling news with marquee html tag.
The result is jerkily scrolling news.
I think the problem is due to the couple "jquery-marquee" because if I run only jquery or only marquee it works!
Can you give me some ideas?
I thought to only use CSS3 to realize scrolling news and scrolling ads
UPDATE: You can see my work here
From normal browser it works. From chromium v.22 on raspbian-raspberry it is a disaster.
I have already choosen little images (not bigegr than 200kb) but the problem remains.
I utilised jquery image slideshow and jquery.marquee
I hope you can help me to solve this issue.
I just read a bit from http://blogs.wcode.org/2013/09/howto-boot-your-raspberry-pi-into-a-fullscreen-browser-kiosk/ and noticed:
Optional bonus Step 4: Accelerated X11 Server
Currently (Sep 2013), the default X11 server isn’t exactly optimised
for the Raspberry Pi; however, work is afoot and you can install a
work-in-progress version fairly easily. This has worked for us and has
been nice and stable. YMMV.
UPDATE: Comments have suggested possible problems with newer Rasbian
releases. We’ve not verified this either way. You don’t need to
install this, everything will work just fine without it; at the time,
we were trying to squeeze every last ounce of performance from the Pi,
so it seemed pertinent to install this patch.
The blog mentions an accellerated X11 server
https://github.com/simonjhall/fbdev_exa/ , or in particular
https://github.com/simonjhall/fbdev_exa/tree/master/releases/20130401
Maybe following the instructions on that blog link might help.

'Firebug' for iPad

I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)

GWT Widget does not allow long-touch-to-copy selections

We're developing a mobile application using GWT and are facing the following problem:
iPhone offer a long touch function to do copy&paste for all kinds of stuff. But when we're using the HTML widget or another widget that has explicit ClickHandlers, those events are not forwarded. This even occurs, when there is no clickhandler defined.
How can we monitor long touches (since there is no click/touchup, the onclick method is not being triggered) and how can we prevent the prevention of such events?
There seems to be no method for removing all events on a widget.
We found many more problems with GWT on mobile platforms - basically performance issues with long tables or large contents which made us sit down, think about it and finally throw the stuff away.
We've now developed a native client for Android and iOS - which took in turn about the same time for development as an optimized pseudo-single-html-all-in-all-solution.

Categories