Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


  • 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:

Image Modified

Create the takePicture() function