Retrieve the picture that was taken by the Raspberry Pi in a Swift application

Be sure you’ve completed Lab 1 and all previous steps in this lab.

Now, you can see the picture and pass it to the database on your mobile application.

    1. In Xcode, add a button and the Image View in the existing view controller in Main.storyboard by dragging and dropping the relevant components from the list on the bottom right pane:

Connect the view to the code. If you need help, watch the solution video for Lab 2.

  1. Create a function:
    @IBAction func showPictureButtonPressed(_ sender: Any)
  2. Create a parameter:
    @IBOutlet weak var imageFromDb: UIImageView!
  3. Optional: Add a helper parameter:
    private var fetchedImage = UIImage()
  4. As in Lab 1, implement the function showPictureButtonPressed.
    Connect to the database and read the JSON document with the stored picture as you did in Lab 1. You can use the Cloudant library again to do CRUD operations in the Cloudant database.
    Use this code to connect to the database and read the JSON with the embedded picture:
    //connect to pictures DB
    let cloudantUrl = NSURL(string: "cloudant db connection url")
    let cloudantClient = CouchDBClient(url: cloudantUrl! as URL, username: "cloudant db connection user", password: "cloudant db connection password")
    let database = "pictures"

    //get picture
    let find = FindDocumentsOperation(selector: [:], databaseName: database, fields: ["value", "pic_date"], limit: 1, skip: 0, sort: [], bookmark: nil, useIndex: nil, r: 1)
    { (response, httpInfo, error) in
    if let error = error {
    print("Encountered an error while reading a document. Error:\(error)")
    } else {

    //get the temp value from JSON
    do {
    let data = try response!, options: [])

    let parsedJson = try JSONSerialization.jsonObject(with: data, options: []) as! [String:Any]
    if let nestedArray = parsedJson["docs"] as? NSArray {

    //getting nested temp from payload
    let newDoc = nestedArray[0] as? [String:Any]

    // access nested dictionary values by key
    let encodedImage = newDoc?["value"] as! String
    let index = encodedImage.index(encodedImage.startIndex, offsetBy: 22)
    let jpgImage = encodedImage.substring(from: index) //data:image/png;base64,
    let imageData = NSData(base64Encoded: jpgImage, options: [])!
    let image = UIImage(data: imageData as Data)

    self.fetchedImage = image!

    } catch let error as NSError {

  5. Show the picture on your mobile device. Be sure to allow some time to retrieve the picture from the database in Bluemix:
    //show the picture
    //we need to wait for the result
    DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(10), execute: {
    // Put your code which should be executed with a delay here
    NSLog("Read doc: 10 sec")
    self.imageFromDb.image = self.fetchedImage as UIImage

    Your application should now be able to show a picture on your mobile device.