Taking Photos on a Mobile Device

Capturing Photos

Profound UI provides a simple JavaScript API for taking photos and uploading them to the IFS on the IBM i. The API is called pui.capturePhoto(). The API can be invoked using the onclick event on a button. It can be used within the Profound UI Mobile Client or within an application built using PhoneGap. The parameters passed to pui.capturePhoto() can be hard-coded values or dynamic values retrieved from RPG output or hidden fields.

Creating a Sample Photo Capturing Application

For example, if you wanted to create a simple application that captures a photo and displays it back to the user, follow the steps described below.

Create the display file using the Visual Designer

Drag a mobile device layout and click the maximize button to expand it to the full size of the screen
Drag a Heading Label to the Top Bar of the Layout, set the left property to 10% and the width property to 80% to center the heading widget. Double-click the heading to edit the heading name, adjust the font color, and to center the text within the widget.
Drag a button to the bottom bar and set the text on the button to “Take Picture”. Set the onclick event to takePicture(), which we will define later in the tutorial;
Add another button to the bottom bar and set the text on the button to “Exit”. Bind the response property to a named indicator called btnExit.
Add an image to the content section of the layout. Set top and left properties to 0px and the width and height properties to 100%. This ensures that the image expands to fill the screen based on the size of the device and adjusts automatically when the user rotates the device. Create a temp directory in /www/profoundui/htdocs and put a placeholder picture there named picture.jpg. Then, set the image source property to js: pui.normalizeURL("/temp/picture.jpg?rnd=") + Math.random(). Note, Math.random() is used here to prevent caching.
Name the record format, save the display file, and compile it. Your screen in the Visual Designer should look similar to the following:

Create the takePicture() function

Edit your app.js file in PhoneGap and add the following code at the end:

function takePicture() {  // this is called from the display file using the onclick event
  pui.capturePhoto({
    dir: "/www/profoundui/htdocs/temp",
    fileName: "picture.jpg",  // we're using a hard-coded file name; use the get() API for a dynamic file name
    overwrite: true,
    handler: function(response) {
      if (response.success) pui.click();  // submit the screen on success
      else alert(response.error);  // otherwise, display the error message returned from the API
    }
  });
}

Create the RPG code

The RPG code for this basic application can be as simple as the following:

H DFTACTGRP(*NO)
FPICDSPF   CF   E             WORKSTN Handler('PROFOUNDUI(HANDLER)')
 /Free
      Dou btnExit = *On;
        ExFmt PICREC;
      EndDo;
      *InLr = *On;
 /End-Free

When you run the application on your device, it will allow you to take a photo, and then automatically upload it to the IFS. The image will be displayed from the IFS once uploaded.

Allowing the upload

Profound UI secures all uploads using the PROFOUNDUI/PUIUPLEXIT exit program. The exit program must explicitly allow uploads into the temp directory you created. This can be accomplished by adding the following lines to the exit program.

If FileInfo.Directory = '/www/profoundui/htdocs/temp';
  Allow = 1;
EndIf;