I have a problem developing a web application for iPhone. When I visit a simple example like http://code.google.com/intl/sv-SE/apis/maps/documentation/javascript/examples/map-simple.html in an iPhone and do pinch zoom the map pans when I release the fingers from the screen. This makes the map end up somewhere else than the place I zoomed to.
Is there some way to prevent the map from panning after pinch zoom release?
Unfortunately, the iPhone's use of touch screen technology - especially Cocoa - can have some odd effects when it comes to viewing a web app on a mobile device.
I cannot fathom why, but it seems like such multi-touch gestures, such as pinching, have a relatively odd effect on non-native applications.
The only thing I can suggest is using Objective-C and getting to work on porting your application to run as an app on the iDevice. This will remove the problems you are having, but it will not rid you of the issue that you are trying to develop a web app.
Related
Background
I am building a proof of concept for a webvr project. After attending the react amsterdam conference last month and seeing react vr in action I thought this would be a good place to start.
I have setup a demo page here. It's just an image added to the hello world example.
Inside the Chrome browser (desktop & mobile) it looks fine, not choppy. The I visit the page with my gear vr. When in the samsung browser window the app runs fine but once I press the view in vr button (bottom left) the frame rate drops quite a lot. Enough to give you a headache after a few minutes. I have the same choppy experience with the react-vr examples here
Specs
I am using
Gear vr
Samsung Internet
Samsung galaxy S6
Android 6
The mobile device is a little old now (over a year) maybe that is causing the issue but it works very smooth before entering vr mode.
Question
Is there a way to force more processing power out of a device (Something like adding will-change: transform; or transform: translateZ(0);)?
or
Is this purely a limitation of the hardware?
or
Is react-vr adding too much overhead, is there a way to optimise? I do have a very smooth experience with the three.js cubes example
I have this tetris game I programmed with the intention of learning a bit more on javascript: elcodedocle.github.io/tetrominos
I can play it in most tablet/smartphone browsers, but on my Android 2.3.6 stock browser (Samsung Galaxy Ace ST5830) it has two problems:
Zoom events are not exactly canceled by user-scalable=no viewport property: double click and two-finger zooming still work. Sometimes.
The canvas freezes, also sometimes (I'm going mad trying to determine the cause: How the heck you debug a web app running on an android browser??). I'm guessing because of a swipe or drag event triggered that shouldn't be, so it's somehow related to the above. Tapping out of the canvas makes it work again.
I'm using Kineticjs to manipulate the canvas and bind the touch events, on top of jquery-ui for the dialogs and jQuery (not jQuery mobile).
Any suggestions/ideas?
the problem is with the device's processing speed.. evrery device has its own processing speed. canvas animations are based on javascript's setInterval and setTimeout methods..which performs as per the device's processing speed..thats why canvas games are sometimes laggy on handhelds.
I have a flash application written in actionscript 2.0 that shows vector architectural maps and works perfectly on common web browsers. There are many interactions with javascript functions called by user events on the webpage, such as zooming to a certain x,y point. This event is usually accomplished via the mouse wheel.
Now I have to make sure that the thing works on tablet pc, in particular the Galaxy Tab. The first thing I have to fix is that, obviously, there is no mouse wheel and the user naturally tries to pinch zoom the flash application, with the result of zooming the entire web browser.
What I need is to listen to the multitouch gesture and, when a pinch zoom event is called, disable the default zooming event and call a javascript/flash function that allows my flash app to zoom only the objects that need to be zoomed: in few words, the browser stays still and only a part of the flash zooms in or out.
Consider that I am totally new to Android and that I already have working javascript functions to call flash object functions for the zooming purpose, so I just need to connect them to some android things that tell me when the user tries to pinch zoom in and when he tries to pinch zoom out (and possibly the x,y point of zoom).
Thanks a lot for your help!
Max (Italy)
Passing a JavaScript call from android to flash is a very very hard task as far as I know.
Not because of android (follow this tutorial http://code.google.com/p/openmobster/wiki/JavascriptBridge to pass a JavaScript call to a web page ), but because of flash securities for local content.
It is not too much of an issue on a local computer, but the flashplayer on android is very very buggy.
I think the best is to try to find an other solution if possible...
Has anyone gotten pinch to zoom to work for a Google Map in the Android Browser? It works fine in Android applications and I hear it works in iPhone's Safari Browser but I'm interested in getting it to work in a web app that's viewed via the Android Browser. Currently you can pinch zoom in but the map does not redraw (i.e. it just gets larger and pixelated). You cannot pinch zoom out.
Edit: It seems to be different on each phone:
Evo - Problem discussed above
Epic - Pinch to zoom out works, zoom in has problem discussed above
Galaxy S - Pinch to zoom in and out both work fine
At the current time, Google Maps API v3 (and any other JavaScript code, for that matter) cannot rely on receiving events related to pinch-to-zoom in JavaScript on Android browsers. See http://code.google.com/p/android/issues/detail?id=11909
If this issue is important to you, I recommend logging in, starring the issue, and leaving a good comment.
For what it's worth, I have not run across this problem in Honeycomb, which makes me at least slightly hopeful that Ice Cream Sandwich will fix this for the phones.
It seems that Android doesnt support multitoches events for javascript. It support only touchstart/mode/end events, but not gesture events so it dont support zoom in out, (for me doesnt work even on galaxy s). Maybe in the android 3.0 they will add this event to browser.
On my website, which is loaded in the webview, there is a map. There are also java scripts that detects double tap for zoom, dragging etc. But is it possible to have a javascript that detects the use of pinch zoom ? there are several examples of it working on an iphone, and on my website there is a script for the pinch zoom but it is only working on iphone.....
Is it possible to get it to work on Android ?
Thanks
When you would like to scale web content in you WebView and enable pinch and zoom, I prefer the simple android way.
webView.getSettings().setBuiltInZoomControls(true);
and you can even hide the controls if you are using API 11 or higher
webView.getSettings().setDisplayZoomControls(false)
There's an open-source library called android-pinch that you can include in your project to enable pinch zoom if you switch your WebView to a WebImageView. Here's an example of usage...
// create the WebImageView object from xml
WebImageView img = (WebImageView) findViewById(R.id.main_pic);
// fetches the image in a background thread
img.setImageFromURL("http://www.mysite.com/mypicture.jpg");
// enable pinch-zoom abilities on the image
new PinchImageView(img);
It's not exactly in a webview, but in any layout, that I wrote a piece of code for detecting pinch in an Android view.
It took me days to find out a solution for this, so I made my own custom pinch gesture detector.
You can see it in Github: http://github.com/luisfer/Neckar
Hope it helps.
This excellent tutorial shows how to implement the Pinch gesture.