Tersus: Stage 3 - Taking a picture

Stage 3 - Taking a pictureDate: Jan 10, 2024Using the Camera

Zoom back to Form (under New Visitor / Content), and add Button from the Display section of the palette. Name it Add Picture. When the user clicks it, we would like to activate the phone's camera to take a picture of the visitor.

Still in Form, add Image from the Display section of the palette. Image will display the picture.

Zoom into Add Picture and then into <On Click>, and add Take Picture (from the Display Actions section of the palette).

To make Image display the picture taken by Add Picture, do the following:

Right click inside <On Click> and select Add Ancestor Reference -> Form. Adding a reference to Form is helpful, because both Take Picture and Image are inside Form, and now we can connect them.
Add a Flow (an arrow) from the exit of Take Picture to the <SRC> element of the Image element of Form:
- Expand the Image element by clicking the '+' sign at its upper right corner.
- Click Flow in the palette, then click the <Data URL> exit of Take Picture, and then click Form->Image-><SRC>).
The flow we have just added indicates that the output of Take Picture is "implanted" in the <SRC> element of Image. When Take Picture finishes, Image will display the taken picture.
The model of Add Picture now looks like this:

Save your changes and return to the browser. The application will automatically reload.

Press the New button, type the details of a visitor, and press Add Picture. Since your browser cannot operate a real camera, the simulator will offer you to use a sample picture, just for testing:

Note: iPhone users can now transfer the application to the iPhone device and take real pictures.Download model: Stage 3Stage 4 - Saving visitor details and pictureSee Also:

To use the full functionality of this web site, JavaScript needs to be turned on.

For best results, use the Firefox browser..

Loading ...