Is it able to resize the camera screen size using phonegap? - javascript

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

Related

Difference between web a app and phonegap touch response

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?

Is there a way to access the camera of a mobile device in Phonegap without actually opening the camera screen?

I'm attempting to make an app with Phonegap to be used on Android devices and I need a way to take pictures without actually opening the camera screen. I know how to access the camera normally with Phonegap but that involves opening the camera screen, pressing the take picture button and then confirming your picture. I want to be able to directly access the camera and take a picture without having to go to the camera screen and have the user press all those buttons. Is this possible using just html and javascript?
I've looked into getUserMedia and that does exactly what I want but it doesn't work in Phonegap. It only works with certain browsers.

three.js - Help adding pinch zoom to css3d_youtube demo - trackball controls messing up camera position

I'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.
Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.
The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.
I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here
The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.
If it would be more helpful I can remove that condition so it can be seen in a desktop browser.
If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.
I also tried just regular JavaScript gesture events by adding this function:
function onPinch(e) {
move(e.scale)
}
and calling it in an event handler:
`document.body.addEventListener('gestureend', onPinch, false)`
but that was a disaster. The CSS3D objects rendered very slowly.
Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing
Looks like TrackballControls.js has been updated to support touch zoom gestures.
If any one else is having this problem, just get the latest version.
The CSS3D periodic table and youtube examples seem to have been updated too.

Enable zoom in Trigger.io mobile app

We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?
yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.

How to perfectly display full-screen google maps on both iPad and iPhone?

What is the best way to show a full-screen google map on both iPad and iPhone and even when the orientation changed as well.
Edit: I'm implementing mobile application in jQuery mobile. not iOS application.
Thanks.
Basically Google Mps API renders the map into an div(some cases in an iframe). Anyway you should specify an div to be your Map Canvas. if you change size of the div, then size of the map will change.
So if you define width and height of the canvas to 100%, it will always show the map covering whole screen.
#mapCanvas{
width:100%;
height:100%;
}
You need to create what is called as universal app if your intention is to develop a single app for ipad and iphone.
Check this link out on some tricks on creating such an app
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/AdvancedAppTricks/AdvancedAppTricks.html#//apple_ref/doc/uid/TP40007072-CH7-SW6

Categories

Resources