WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Mobile & Device Widgets

Widgets & Prefabs Library

  • Widgets Library
  • Widgets Composition

Cards

  • Overview
  • Creating a Card
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Data Table

  • Overview
  • Creating a Data Table
  • Data Source
  • Layouts
  • Styles
  • Configuration
  • Field Configuration
  • Summary Row
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

  • Overview
  • Creating a List
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Form

  • Forms Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Field Validations
  • Events & Methods

Live Form

  • Overview
  • Creating a Live Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Actions
  • Events & Methods
  • Use Cases

Form Widgets

  • Button
  • Button Group
  • Text
  • Number
  • Textarea
  • Select
  • Chips
  • Currency
  • Radioset
  • Checkbox
  • CheckboxSet
  • Toggle
  • Switch
  • Date,  Time and  Datetime
  • Calendar
  • FileUpload
  • Color Picker
  • Slider
  • Rating Widget
  • Select Locale

Live Filter

  • Overview
  • Creating a Live Filter
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Actions
  • Events & Methods
  • Use Cases

Container

  • Grid Layout
  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

  • Label
  • Anchor
  • Icon
  • Picture
  • Tree
  • Video
  • Audio
  • HTML
  • Iframe
  • Message
  • Spinner
  • Search
  • Search - Basic Usage
  • Richtext Editor
  • Progress Bar
  • Progress Circle

Charts

  • Chart Widgets
  • Callback Event

Navigation

    Nav

    • Nav Overview
    • Creating navigation

    Nav Bar

    • Nav Bar Overview

    Breadcrumb

    • Breadcrumb Overview
    • Creating a Breadcrumb

    Dropdown Menu

    • Dropdown Menu
    • Creating a Dropdown Menu

    Popover

    • Popover Overview
    • Creating a Popover

Advanced Widgets

  • Login
  • Marquee
  • Carousel

Dialog Widgets

  • Modal Windows/ Dialogs
  • Design Dialog
  • Alert Dialog
  • Confirm Dialog
  • IFrame Dialog
  • Page Dialog
  • Login Dialog

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Prefabs Overview
  • Create Prefab
  • Prefab with Partials
  • Use Cases - Prefabs
  • Prefabs Directory

    • Youtube
    • Googlemaps
    • QRCode
    • Barcode Scanner Prefab
    • Box Viewer Prefab
    • Entity Extraction Prefab
    • Docusign Prefab

    OAuth

    • OAuth Prefabs
    • Box
    • Facebook
    • Google
    • Instagram
    • LinkedIn
Edit

Camera

The camera is abutton based widget that opens device camera for taking photos or videos. The path of the photo or video captured is exposed as outbound property ‘localFilePath’.

Features

The camera can be used for taking a picture or video. To specify the mode of the camera, set the Capture Type property to Image or Video.

Following Image Properties can be further configured:

  • Target Width - A picture is scaled to this property’s value while maintaining the image’s aspect ratio.
  • Target Height _-_A picture is scaled to this property’s value while maintaining the image’s aspect ratio. If both target width and target height are specified, then the image will be scaled to the minimum of them.
  • Encoding Type - the format in which the image has to be saved. Supported formats are JPEG and PNG.
  • Image Quality - This is JPEG compression level in percentage. So, this value is used only when JPEG is selected as encoding type. If the value is 100, then no compression is applied to the image.
  • Save To Gallery - If turned on, then photos taken using this widget will be saved to the device gallery.
  • Edit - If this property is checked, then the user can edit or crop the picture taken.

You can use the localFilePath and localFile to further enhance the app functionality. These properties are passed as parameters for Camera Success Event. See Use Case for more details.

Properties

PropertyDescription
NameThe name is a unique identifier for the Camera. Special characters and spaces are not allowed in widget name.
Accessibility
HintAny text or HTML you enter for this property will be shown as a tooltip if the mouse hovers over this widget for 1.5 seconds.
Default Value
ValueThis is the default value to display value for an editor widget. Note that the display value is just what the user sees initially, and is not always the dataValue returned by the widget.
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
Capture TypeThis specifies whether the image or video that is to be captured.
Graphics
Icon ClassThis bindable property defines the class of the icon that is applied to the button.
Icon SizeThis property defines the size of the icon. Value has to be specified along with the units (em or px).
Format
Horizontal AlignThis property specifies how the elements should be aligned horizontally - left, center or right.
Image Properties
Target WidthThis property specifies the width in px to resize the image.
Target HeightThis property specifies the height in px to resize the image.
Image QualityQuality of the saved image expressed as a range of 0-100, where 100 is typically full resolution with no loss of file compression
Encoding TypeChoose the returned image file's encoding. The default is JPEG.
Save to GallerySave the image to the photo album on the device after capture
EditAllow simple editing of the image before selection.

Events

  • On Success - The event listener to call when a photo or video is successfully captured. This can be bound to a Database CRUD Variable of Insert operation, to save the picture into a database

Usage

Capture an image using camera and store in the database using CRUD variable (we are using a Customer Database with pic as the blob type field):

  1. Bind the Input Fields from the Data tab for the CRUD Variable to the Camera -> localFile field
  2. On Sucess event of Camera widget needs to invoke the above Insert Variable

Use Cases

Overview

Camera Widget can be used to capture images and videos from a Mobile App In this post, we will create a mobile app to capture and display a photo.

Step 1: Building Page

  1. Create or Open a Hybrid Mobile App.
  2. Create a page using blank template and layout as ‘One column layout with top navbar’
  3. Drag and drop a container widget and set horizontal align property as the center.
  4. Drag and drop a camera widget.
  5. Drag and drop a picture widget and set its width to 100%.
  6. Bind the source of the picture to the ‘localFilePath’ of camera widget.

Step 4: Build & Run

  1. Build the apk, install it on an android phone and open the app.
  2. Open the app and click camera button and take a photo.
  3. The captured image will get displayed in the app. camera_run3
Last updated on 11/27/2019 by Swetha Kundaram
← Login DialogMedia List →
  • Features
  • Properties
  • Events
    • Usage
  • Use Cases
    • Overview
    • Step 1: Building Page
    • Step 4: Build & Run
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.