I am developing a drawing app based on mrdoob harmony which is a web application drawing on html canvas.
In my web app, it detects the location of touch finger 1 and touch finger 2, and then determine the location of a cursor between them to mark the point of drawing. It works fine on most of smartphones as a web app, but after converting it into android app by PhoneGap I can find some kind of a delay in drawing.. in web app when I put two fingers touching screen the cursor appears but in the PhoneGap app the cursor and starting of drawing happens after moving my fingers and with a time delay which makes drawing hard.
What can I fix to make the PhoneGap run like the web application? Are there any code modification instead of using some kind of plugins?
Related
I have a desktop web app (skyviewcafe.com) that I’m trying to make more mobile-friendly. As one step in that process, I’ve taken a star chart and made it touch-draggable, and also made a view of the orbits of the planets both draggable and zoomable with touch gestures.
But here’s an interesting problem that I imagine must have happened to others before: It’s possible to use the default panning and zooming behavior of a mobile web browser to move my web page around until the only thing in view is a component that itself takes over touch gestures using preventDefault.
Once this happens, it’s impossible to zoom back out and bring the whole web page back into view. All pinch/spread zooming is sucked in by my component. For lack of a better term, I’m calling this a “zoom trap”. I’ve tried to search online for any discussion of this problem, but can’t find the right words to match anything.
I came up with an ad hoc solution that’s currently deployed at http://test.skyviewcafe.com. If I’m in a “zoom trap” I can touch the screen with three fingers and a translucent gray panel comes up to block touch gestures from reaching my touch-responsive canvas. Normal default web browser pan and zoom then becomes possible again, and the user can zoom back out. After that, touching with three fingers again clears the gray panel out of the way.
While this solves the problem in a way, it’s not a standard well-known gesture, and it would be hard to provide enough on-screen prompting to make necessary gesture clear.
Ideally I’d like to be able to respond to a standard gesture like a double-tap by zooming out the web page, but as far as I can tell, other than the initial zoom factor when a web page loads, web browser zooming isn’t something a web app can control dynamically.
Has anyone else run into this problem? Are there standard touch gestures for dealing with this? Are there ways in JavaScript that I haven’t discovered yet to dynamically control mobile web browser zooming?
I am creating a cordova phonegap app using html (ofc.), in iOS 7 the back of the carrier, signal strength, battery and clock, is a part of the app itself. this means that if you have some content that is supposed to be at the top of the screen will be behind that topbar. i'm not a fan of moving everything down to fit, because in iOS6 and android (and properly everybody else), this top bar is not a part of the app.
is there a way to make the app window a bit smaller on iOS7 only, preferable a setting somewhere, or should i do some javascript to edit the css if the device is iOS7. and in this case, how do i do that?
Your phonegap app is running on a UIWebView, you can access its frame and resize it accordingly. If I understood you well, you can do that natively. Open up your phonegap project in Xcode, in MainViewController, in viewWillAppear:
// Apply this only for iOS7 running devices and later..
if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7) {
CGRect frame = self.webView.frame;
frame.origin.y = 20;// move the webview down to 20 px
frame.size.height = frame.size.height - 20;
self.webView.frame = frame;
}
There is a jQuery solution as well, but since this is only iOS7 related, the native way seems to be the most efficient.
I am using phonegap to develop an android app and writing a photo-taking module.
I have followed phonegap's API and it works (Full screen camera open automatically, snap picture and display in an tag).
However I would like to resize the camera screen when it open up, that is I do not want the camera screen being full screen, but an small rectangle size which can be put inside some tag.
I wonder if it is possible, and if yes how would I do it? Please give me any hints! Thanks!
Phonegap does not control the camera screen. What it does is start the phone's camera app and get the result back, so there's no way you can resize it.
If you want a camera view that does not take all the screen you can either build a phonegap plugin using native code (not sure how to make a plugin only taking part of the screen) or use HTML 5 camera api instead of phonegap's api. The down side is it will only work with recent versions of android.
Have a look at Raymond Camden's blog for a sample of how to use html5 camera api : http://www.raymondcamden.com/index.cfm/2013/5/20/Capturing-camerapicture-data-without-PhoneGap
I am creating an application that allows users to draw on the screen using the HTML5 Canvas tag.
This works great when using a mouse, and I even got it working on android using jquery touch.
The problem comes when using a windows 7 or 8 tablet. The reason for why it wont work is simple, the browser tries to scroll instead of mousedown and drag.
The reason why it works on android and not windows is due to the fact that android supports ontouchstart and ontouchend while I can't get it to work on windows tablets.
So, is there any way to get the browser to stop trying to scroll and draw on the screen?
Thanks.
Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.
Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...