CIS 136 Building Mobile Apps

Slides:



Advertisements
Similar presentations
Creating posters and flyers Lesson -IV. Editing pictures inside Office Office 2007 has tools to edit photos and pictures in the document. Office 2007.
Advertisements

The Web Wizards Guide to HTML Chapter Five Working with Images.
Managing and Editing Your Photos
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
ActEyes IP Cam Training Part 2: Basic Camera Features.
Chpater 3 Resolution, File Formats and Storage. Introduction There are two factors that determine the quality of the picture you take; The resolution.
Programming with Microsoft Visual Basic 2012 Chapter 13: Working with Access Databases and LINQ.
Phonegap Bridge – Telephony CIS 136 Building Mobile Apps 1.
CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.
Images Inserting an image on a web page. chcslonline.org2 ITEMS REQUIRED Go to the course download page on the course website and download the 3 images.
CS378 - Mobile Computing Persistence. Saving State We have already seen saving app state into a Bundle on orientation changes or when an app is killed.
Digital Camera Basics Misty Freeman Georgia CTAE Resource Network 2010.
What is Digital Photography? Lesson One Mrs. Johnson Winter/Spring 2012 Digital Photography Course.
Creating Multimedia Interaction with Windows Media Technologies 7.
Digital Camera Overview IT 130 Web Graphics and Multimedia.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
Tutorial 7 Working with Multimedia
Tutorial 7 Designing a Multimedia Web Site
Replay Compilation: Improving Debuggability of a Just-in Time Complier Presenter: Jun Tao.
Laboratory Exercise # 9 – Inserting Graphics to Documents Office Productivity Tools 1 Laboratory Exercise # 9 Inserting Graphics to Documents Objectives:
CONFIGURING YOUR CAMERA. IMAGE SIZE AND COMPRESSION  Your camera probably allows you to select a number of different size and compression settings. 
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.
Creating User Interfaces Recap HTML/HTML5 JavaScript features Homework: keep working on user observation studies. Review JavaScript.
Phonegap Bridge – File System CIS 136 Building Mobile Apps 1.
Introduction to Photoshop Altering photos 1 pixel at a time.
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Multimedia Capture & storage. Introduction A rich set of API for recording of audio & video. A developer has two choices  launch the built-in app using.
®® Microsoft Windows 7 Windows Tutorial 7 Managing Multimedia Files.
Information Systems Design and Development Media Types Computing Science.
Phonegap Bridge –Geolocation and Google maps CIS 136 Building Mobile Apps 1.
JQuery form submission CIS 136 Building Mobile Apps 1.
FILES AND EXCEPTIONS Topics Introduction to File Input and Output Using Loops to Process Files Processing Records Exceptions.
Phonegap Bridge – Storage CIS 136 Building Mobile Apps 1.
 Many people like the flexibility of digital images. For example:  They can be shared by attaching to /uploading to Internet  Sent via mobiles.
Photoshop CS6 – Nelson Unit 3: Photoshop CS6. Objectives Define photo editing software Start Photoshop and view the workspace Use the Zoom tool and the.
Digital Cameras in the Classroom Day Two Details Ann Howden UEN Professional Development
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 4.
Getting and displaying
Getting Started with Adobe Photoshop CS6
Using Panopto to Record Presentations
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Prepared by Yaman A. Salman Eman M. Masarweh
Image Formats.
Responsive Images.
Chapter 3 Image Files © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Using DataStore Plus ActiveX in FactoryTalk View Studio ME Projects
CIS 136 Building Mobile Apps
A computer display is made up of small squares, called pixels.
CIS 136 Building Mobile Apps
Topics Introduction to File Input and Output
Representing Images 2.6 – Data Representation.
CONFIGURING YOUR CAMERA
Topic 3: Data Compression.
CIS 136 Building Mobile Apps
jQuery form submission
CIS 136 Building Mobile Apps
Phonegap Bridge Configuration file
Format String.
CIS 136 Building Mobile Apps
CIS 136 Building Mobile Apps
Windows Tutorial 7 Managing Multimedia Files
ICT Spreadsheets Lesson 1: Introduction to Spreadsheets
Timelapse with the Veho VMS-001 Microscope
Creating Online Presentations
Creating User Interfaces
TO EDIT BUTTON 1 1 Locate the page where the button is located
Device,Network, Vibration, Console, Accelerometer
Topics Introduction to File Input and Output
This presentation document has been prepared by Vault Intelligence Limited (“Vault") and is intended for off line demonstration, presentation and educational.
Professor Jodi Neely-Ritz University of Florida
Presentation transcript:

CIS 136 Building Mobile Apps Camera CIS 136 Building Mobile Apps

Camera API cordova.plugin.camera Provides the application with the ability to work with images Capture directly from camera choosing images from the devices photo gallery Accesses only the devices camera application Does not access the devices audio and video recording application Available once the deviceready event fires

Camera API One method: Methods navigator.camera object getPicture() Takes a photo using the camera Retrieves a photo from the device's image gallery The image is passed to the success callback as a Base64-encoded String, or as the URI for the image file.cleanup()

Syntax getPicture(…) takes three arguments: navigator.camera.getPicture(success,error,options); getPicture(…) takes three arguments: the name of the function to run when a picture is successfully taken the name of a function to run when an attempt to take a picture fails some optional arguments which define the parameters on how the image is obtained, formatted, etc.

Options

Options for quality Higher resolution lenses plus limited storage and bandwidth, required images to be compressed. JPEG specification includes support for image quality to control compression Different quality percentages affect the physical size of the image Image at 100% is full capcity

Options for quality When images are returned they are either saved in storage (image file) or returned as the raw, base64- endoced image file data Image files are just pointers to stored location Raw data files , must think about size, quality High-res cameras at 100% quality might crash the device Reducing quality reduces image data Photo resolution on newer devices is quite good Photos selected from the device's gallery are not downscaled to a lower quality, even if a quality parameter is specified

DestinationType Defines the output format 

Options for pictureSourceType Defines where the picture is coming from

allowEdit iOS only – allows the user to edit the image before returning it to the app allowEdit: true

encodingType Encoding type indicates what kind of picture to take Most cameras today take JPEG images, but some can also record PNG file formats JPG is the default on most cameras

targetHeight and targetWidth These parameters control the width and height of the image Either of both can be indicated API will scale to smallest aspect ratio No way to accurately indicate image canvas unless testing on each and every device possible Syntax targetHeight: 400 targetWidth: 400

mediaType Devices can store many different media types in a photo library Setting media type parameter to the following values when retrieving stored images will produce the indicated results

popoverOptions (iOS only) specify the anchor element location and arrow direction of the popover when selecting images from an iPad's library or album the size of the popover may change to adjust to the direction of the arrow and orientation of the screen

ERROR CALLBACK Provides an error message A String containing the a message provided by the device's native code

SUCCESS CALLBACK The returned value is in one of the following formats, depending on the options: A String containing the Base64-encoded photo image. A String representing the image file location on local storage (default) You can do whatever you want with the encoded image or URI, for example: Render the image in an <img> tag, as in the example below Save the data locally (LocalStorage, Lawnchair, etc.) Post the data to a remote server

SUCCESS CALLBACK (cont.) function cameraCallback(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; } https://github.com/apache/cordova-plugin-camera

camera.cleanup() Removes intermediate image files that are kept in temporary storage after calling camera.getPicture() Applies only when the value of Camera.sourceType = Camera.PictureSourceType.CAMERA and the Camera.destinationType = Camera.DestinationType.FILE_URI navigator.camera.cleanup(onSuccess, onError); function onSuccess() { console.log("Camera cleanup success.") } function onError(message) { alert('Failed because: ' + message);

Cameras can have problems Error function gets an error object which can be examined Use the console log to record the error Possible errors Device does not have a camera Too much raw camera data, and it can’t be handled by the device To avoid common memory problems, set Camera.destinationType to FILE_URI rather than DATA_URL

EXAMPLE var options = { quality:75, sourceType: Camera.PictureSourceType.CAMERA, destinationType: Camera.DestinationType.FILE_URI, allowEdit: True, encodingType: Camera.EncodingType.JPEG, mediaType: Camera.MediaType.PICTURE, targetWidth: 400, targetHeight:400, correctOrientation: true } navigator.camera.getPicture(success,error,options);

EXAMPLE function success(imgUri) { } var elem = document.getElementById('imageFile'); elem.src = imgUri; }