AppStudio 4: Using the Camera

AppStudio 4 makes it much easier to use the camera from your device. Before, there was a complex chain of events which had to be managed, and a bug in iOS made things difficult.

Let’s walk through a simple app. Here is how it looks:

The project is simple: there’s a header to make it pretty, a TextBox labeled “Choose File” and a PictureBox to show the resulting picture.

The only thing that is unusual is that for the TextBox, we specified an inputType of “file” in the Properties window of the IDE. This tells the runtime that when the button is clicked, to go to the camera or the archive to get a picture. When it returns, the _onchange() event for the TextBox is called:

reader = new FileReader()

Function txtGetPicture_onchange()
  reader.readAsDataURL(txtGetPicture.files[0])
End Function

When this function is called, the picture information is stored in the files property of the TextBox. We use the FileReader.readAsDataURL function to read it in. This can take a few moments, depending on the size of the picture and the speed of the device. When complete, it will trigger another event, this time to our reader:

Function reader_onload(e)
  pb = PictureBox1.getContext("2d")
  pb.addImage(e.target.result,0,0,0,0,0,0,PictureBox1.width,PictureBox1.height)
End Function

We then use addImage to put it in our PictureBox. We have to tell it the resulting width and height in the last two parameters of addImage. The first 4 zeros indicate the bounds of the source image we want to display: having 0 for width and height means we want to show the entire image.

Note: addImage automatically takes care of rescaling the image to get around an iOS bug, still not fixed in 7.1.

Emailing a Picture

Once the image is in a PictureBox, you can save it in a database or email it. The toDataURL() function takes the contents of a PictureBox and converts it to a Base64 string. Base64 strings can be saved or emailed like any string.

Here’s how:

Function btnMail_onclick()
  Dim Base64 = PictureBox1.toDataURL()
  location="mailto:" & encodeURI("myaddress@yahoo.com") & _
    "?subject=" & encodeURI("My Great Photo") & _
    "&body=" + "<img src='" & Base64  & "'/>" 
End Function

Complete Source

You can see it in the Camera sample in Samples folder 2.

'This sample lets you get a picture from the camera or the Photo Library

reader = new FileReader()
 
Function txtGetPicture_onchange()
  'This gets called after the picture is chosen. 
  'Next, let's read it in.
  'The _onload function will be called when that completes.
  reader.readAsDataURL(txtGetPicture.files[0])
End Function

Function reader_onload(e)
  'read of the file is complete.
  'put it in the PictureBox
  pb = PictureBox1.getContext("2d")
  pb.addImage(e.target.result,0,0,0,0,0,0,PictureBox1.width,PictureBox1.height)
End Function

Function btnMail_onclick()
  Dim Base64 = PictureBox1.toDataURL()
  location="mailto:" & encodeURI("myaddress@yahoo.com") & _
    "?subject=" & encodeURI("My Great Photo") & _
    "&body=" + "<img src='" & Base64  & "'/>" 
End Function