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. 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 JSONSerialization.data(withJSONObject: 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)

   print(image?.size)
   self.fetchedImage = image!
   }

   } catch let error as NSError {
print(error)
}
}
}
cloudantClient.add(operation:find)

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.