From c40561ce7c28a595f2d3667c0f9621db80036246 Mon Sep 17 00:00:00 2001 From: Nedyalko Nikolov Date: Fri, 17 Apr 2015 16:05:21 +0300 Subject: [PATCH] Added article for camera. --- application-management.md | 2 +- bindings.md | 2 +- camera.md | 78 +++++++++++++++++++++++++++++++++++++++ events.md | 2 +- faq.md | 2 +- gestures.md | 2 +- index.md | 1 + layouts.md | 2 +- location.md | 2 +- modules.md | 2 +- navigation.md | 2 +- properties.md | 2 +- styling.md | 2 +- troubleshooting.md | 2 +- ui-dialogs.md | 2 +- ui-views.md | 2 +- ui-with-xml.md | 2 +- 17 files changed, 94 insertions(+), 15 deletions(-) create mode 100644 camera.md diff --git a/application-management.md b/application-management.md index b2bd741..b0f6f0e 100644 --- a/application-management.md +++ b/application-management.md @@ -2,7 +2,7 @@ nav-title: Application Management in NativeScript title: "App: Management" description: Learn how to manage the life cycle of NativeScript applications from application start to storing user-defined settings. -position: 6 +position: 4 --- # Application Management diff --git a/bindings.md b/bindings.md index 46edab8..93a9709 100644 --- a/bindings.md +++ b/bindings.md @@ -2,7 +2,7 @@ nav-title: "NativeScript Data Binding" title: "App: Data Binding" description: "NativeScript Documentation: Data Binding" -position: 8 +position: 6 --- #Data Binding diff --git a/camera.md b/camera.md new file mode 100644 index 0000000..1376780 --- /dev/null +++ b/camera.md @@ -0,0 +1,78 @@ +--- +nav-title: "NativeScript Camera" +title: "App: Camera" +description: "NativeScript Documentation: Camera" +position: 10 +--- + +#Camera + +## Overview + +Almost every mobile application need an option to capture an image and then share it. NativeScript camera module is dedicated for the first part of the job (taking picture). + +### Using the camera module to take a picture + +Using camera module is relative simple, however there are some points that need a little bit more explanation. + +In order to use the camera module just require it like that: + +``` JavaScript +var cameraModule = require("camera"); +``` +``` TypeScript +import cameraModule = require("camera"); +``` + +Then we are ready to use it: + +``` JavaScript +var imageModule = require("ui/image"); +camera.takePicture().then(picture => { + console.log("Result is an image source instance"); + var image = new imageModule.Image(); + image.imageSource = picture; +}); +``` +``` TypeScript +import imageModule = require("ui/image"); +camera.takePicture().then(picture => { + console.log("Result is an image source instance"); + var image = new imageModule.Image(); + image.imageSource = picture; +}); +``` + +The above code will start the native platform camera application. After taking the picture and tapping the button `Save` (Android) or `use image` (iOS) the promise will resolve the `then` part and image source will be set as `imageSource` of the `ui/image` control. + +> Note: Android specific - Android native camera application actually uses a file to store the image and then anybody (with granted access) could read the file and load the picture. By default NativeScript camera application uses a external files directory given by `Context.getExternalFilesDir(null)` to store a picture with name similar to `cameraPicture_ddmmyyyyHHMMSS.jpg`. The actual path to these files is `/sdcard/Android/data/applicationName/files/cameraPicture_ddmmyyyyHHMMSS.jpg`. Keep in mind that this file will not be deleted by camera module automatically, so developer must clear it out (if it is a critical manner). By default this directory will be deleted when the application is uninstalled. + +### Taking a memory efficient picture + +Previous example shows how to take a picture using the NativeScript camera module. However it takes a huge image (even mid-level devices has a 5MP camera which results in a image 2580x2048 which in bitmap means approximately 15 MB). In many cases we don't need such huge picture to show an image with 100x100 size, so taking a big picture is just a waste of memory. Camera module takePicture() method accepts an option parameter that could help in that case. With that option parameter we could set some properties like: + +* width - The desired width of the picture (in device independent pixels). +* height - The desired height of the picture (in device independent pixels). +* keepAspectRatio - A boolean parameter that indicates if aspect ratio should be kept. + +What `device independent pixels` means? NativeScript layout mechanism uses device independent pixels when measuring UI controls. This allows to declare one layout and this layout will look similar to all devices (no matter device display resolution). In order to get a proper image quality for high resolution devices (like iPhone retina and Android Full HD), camera module will return an image with bigger dimensions. For example if we request an image 100x100 on iPhone 6 actual image will be 200x200 (since its display density factor is 2 -> 100*2x100*2). +Setting `keepAspectRatio` property could result in a different than requested width or height. Camera module will return an image will correct aspect ratio but generally only one (from width and height) will be same as requested, the other value will be calculated in order to preserve the aspect of the original image. + +Using the options parameter: + +``` JavaScript +var imageModule = require("ui/image"); +camera.takePicture({width: 300, height: 300, keepAspectRatio: true}).then(picture => { + console.log("Result is an image source instance"); + var image = new imageModule.Image(); + image.imageSource = picture; +}); +``` +``` TypeScript +import imageModule = require("ui/image"); +camera.takePicture({width: 300, height: 300, keepAspectRatio: true}).then(picture => { + console.log("Result is an image source instance"); + var image = new imageModule.Image(); + image.imageSource = picture; +}); +``` diff --git a/events.md b/events.md index a81fb2d..1de6789 100644 --- a/events.md +++ b/events.md @@ -2,7 +2,7 @@ nav-title: Events in NativeScript title: "App: Events" description: How to handle events in NativeScript. -position: 9 +position: 7 --- # Events diff --git a/faq.md b/faq.md index aeb40ca..6629d13 100644 --- a/faq.md +++ b/faq.md @@ -2,7 +2,7 @@ nav-title: FAQ title: "FAQ" description: A list of frequently asked NativeScript questions and answers -position: 19 +position: 18 --- # NativeScript FAQ diff --git a/gestures.md b/gestures.md index 95ff0c5..b1e7585 100644 --- a/gestures.md +++ b/gestures.md @@ -2,7 +2,7 @@ nav-title: Gestures in NativeScript title: "UI: Gestures" description: Learn what are the touch gestures that NativeScript supports and how to make use of them. -position: 16 +position: 15 --- diff --git a/index.md b/index.md index e51ce00..b519fa0 100644 --- a/index.md +++ b/index.md @@ -36,6 +36,7 @@ Start exploring the documentation resources for NativeScript. * [App: Handle Events](events.md) * [App: Properties](properties.md) * [App: Location](location.md) +* [App: Camera](camera.md) * [UI: The Basics](ui-with-xml.md) * [UI: Layouts](layouts.md) * [UI: Widgets](modules.md) diff --git a/layouts.md b/layouts.md index 2dc3a20..8799021 100644 --- a/layouts.md +++ b/layouts.md @@ -2,7 +2,7 @@ nav-title: User Interface Layouts in NativeScript title: "UI: Layouts" description: Learn the basic principles of designing and positioning the UI elements inside your apps. -position: 13 +position: 12 --- # User Interface Layouts diff --git a/location.md b/location.md index bdadf79..4b8fcf6 100644 --- a/location.md +++ b/location.md @@ -2,7 +2,7 @@ nav-title: Location in NativeScript title: "App: Location" description: How to work with geographical location data in NativeScript. -position: 11 +position: 9 --- # Location diff --git a/modules.md b/modules.md index e203ac5..fdd33e3 100644 --- a/modules.md +++ b/modules.md @@ -2,7 +2,7 @@ nav-title: Modules in NativeScript title: Modules description: You can access the native device and platform capabilities of your target platform with the help of the NativeScript modules. -position: 5 +position: 3 --- # Modules diff --git a/navigation.md b/navigation.md index 1ff0e92..d9a3bbe 100644 --- a/navigation.md +++ b/navigation.md @@ -2,7 +2,7 @@ nav-title: Architecture and Navigation in NativeScript title: "App: Architecture and Navigation" description: Learn the basic application structure of NativeScript apps and how to navigate inside your app. -position: 7 +position: 5 --- # Architecture and Navigation diff --git a/properties.md b/properties.md index c27f3e9..74b9c74 100644 --- a/properties.md +++ b/properties.md @@ -2,7 +2,7 @@ nav-title: Properties in NativeScript title: "App: Properties" description: What is a property in NativeScript, what types of properties are available, and how to use them. -position: 10 +position: 8 --- # Properties diff --git a/styling.md b/styling.md index 2ca027e..b55ad0b 100644 --- a/styling.md +++ b/styling.md @@ -2,7 +2,7 @@ nav-title: Styling in NativeScript title: "UI: Styling" description: How to use Cascading Style Sheets (CSS) in NativeScript to change the appearance of GUI elements -position: 17 +position: 16 --- # Styling diff --git a/troubleshooting.md b/troubleshooting.md index 15797f0..f1ec722 100644 --- a/troubleshooting.md +++ b/troubleshooting.md @@ -2,7 +2,7 @@ nav-title: Troubleshooting title: Troubleshooting description: Known issues with NativeScript and their workarounds -position: 18 +position: 17 --- # Known Issues and Limitations diff --git a/ui-dialogs.md b/ui-dialogs.md index 3d99388..4243e94 100644 --- a/ui-dialogs.md +++ b/ui-dialogs.md @@ -2,7 +2,7 @@ nav-title: User Interface Dialogs in NativeScript title: "UI: Dialogs" description: Learn how to create alerts, confirmations, prompts, logins and other dialogs in your NativeScript apps. -position: 15 +position: 14 --- # User Interface Dialogs diff --git a/ui-views.md b/ui-views.md index fef1725..7db1479 100644 --- a/ui-views.md +++ b/ui-views.md @@ -2,7 +2,7 @@ nav-title: User Interface Widgets in NativeScript title: "UI: Widgets" description: Get familiar with the default user interface elements (widgets) in NativeScript. -position: 14 +position: 13 --- # User Interface Widgets diff --git a/ui-with-xml.md b/ui-with-xml.md index 35d0acc..4b68dca 100644 --- a/ui-with-xml.md +++ b/ui-with-xml.md @@ -2,7 +2,7 @@ nav-title: The User Interface in NativeScript title: "UI: The Basics" description: Learn the basic principles of designing a user interface with NativeScript. In NativeScript, you can design the UI using XML and CSS. -position: 12 +position: 11 --- # The User Interface