PowerApps

Post was inspired by a comment with a question posted some time ago under the post about hand written signatures. Kevan asked, if this is possible to take a photo, then sketch-note on it and finally save two images as a single one.

I thought that it should be fairly easy and to be honest it was, however I failed on the last step – merging the images. I must really admit it – I didn’t make it on my own. Instead I decided to use free API called “Convert API“. I wanted to make it using Azure Function, but I wasn’t able to do it alone and help didn’t come from anywhere too 🙂

The solution

It is build from the following components:

  1. PowerApps – is used for taking a photo and then overlaying notes on it;
  2. Blob Storage – used for uploading image from a camera and second one – with sketch-notes, as well as for uploading the final, merged image;
  3. Flow – receives all the information about transformations done to the images and overlays and creates HTML merging two images in a single canvas;
  4. Convert API – used to perfectly convert HTML into a PNG file 🙂

Sketch-noting in PowerApps

The idea is simple – first user is taking a picture:

Camera in PowerApps for taking pictures
Camera in PowerApps for taking pictures

Then, can manipulate it (rotate, scale, position) using the available controls:

Image manipulation in PowerApps
Image manipulation in PowerApps

And finally can append notes:

Appending notes to an image
Appending notes to an image

Finally clicks the button to merge two pictures and gets the result:

Confirmation message after merging photo with notes in Microsoft Flow
Confirmation message after merging photo with notes in Microsoft Flow

And a generated file:

Merged image with notes
Merged image with notes

Merging images in PowerApps (and Flow 😉

Flow plays first chair in the solution. First it receives all the information about the transformation done to the image:

Receiving image transformation properties in Flow
Receiving image transformation properties in Flow

Data is passed from PowerApps via function parameters:

Set(
    FileURL,
    Mergedrawingwithphoto.Run(
        "/files/takenNotes.png",
        "/files/takenPhoto.png",
        TakenPhoto.Width,
        TakenPhoto.Height,
        Notes.Width,
        Notes.Height,
        Scale_slider.Value,
        Value(Rotation),
        TakenPhoto.X,
        TakenPhoto.Y
    )
);

Next Flow is downloading photo and notes from the Blob Storage:

Downloading blobs from Blob Storage in Microsoft Flow
Downloading blobs from Blob Storage in Microsoft Flow

Next Flow checks, whether the image was rotated to a vertical position, or is it in horizontal. Based on that it then generates different HTML:

Flow generating HTML with overlaying images
Flow generating HTML with overlaying images

Then it is sending the HTML code to the Convert API service to get back a JSON with PNG file contents:

Passing HTML to ConvertAPI
Passing HTML to Convert API

Lastly, it is parsing the JSON it receives from Convert API and uploads the PNG file contents to Blob Storage, and is returning uploaded file URL back to PowerApps:

Parsing JSON and uploading file to Blob Storage
Parsing JSON and uploading file to Blob Storage
body('Parse_Conversion_Body')?['Files'][0]['FileName']
body('Parse_Conversion_Body')?['Files'][0]['FileData']

The working solution

Check how it works:

PowerApps desktop - merging image with notes
PowerApps desktop – merging image with notes

It does also work fine when using a mobile version:

PowerApps mobile - merging image with notes
PowerApps mobile – merging image with notes

You can find the app published to PowerApps Community Gallery here:
https://powerusers.microsoft.com/t5/Community-Apps-Gallery/App-for-taking-photos-and-adding-notes/m-p/289368#M186