Power Platform Community Forum Thread Details

Hello,

I am a student and I am developing a business application for the SUEZ group in the field of water and waste management.

I'll have to code a plugin in my powerapps app and find a way to integrate it into the powerapps app.

I would like to code a rather simplistic drawing module that would be a slight equivalent of Microsoft Visio.

The goal is to simply draw pipelines and add pre-established forms such as sewer hatches, broken eyes, etc., and this image is then saved in .png or jpg format ... in the list share points associated with my PowerApps application.

I thought about coding it in C # with the .NET framework. With the .NET graphical APIs. What do you think? Do you have other solutions to offer? Is it possible to do?

At the moment, I'm thinking about how to do it ... And especially how to connect this drawing module to Powerapps ... The task is not easy ... lol 😉

Categories:

Power Apps Pro Dev & ISV

Well everything is not easy before it is, so try for the best you can do.

Best place to start for this is PowerPoint. Create a user flow to outline what are you trying to acheive. That will help me and other experts in this community understand what needs to be done. If this is image annotation may be you can use the HTML canvas with inking library. I know there are controls created using PCF for that.

Note that PCF (current forum topic) is not available on PowerApps yet and will be available around Sep timeframe.

So from whats available today, you can try fllowing (which I shamelessly copied from @Mr-Dang-MSFT 's email. Let me know if this looks interesting and I will try to get more details.

======

Big idea: An SVG image can show base64 images. And SVG can stack any number of layers of images and shapes and transform them at will.

Download the sample: https://powerblob.blob.core.windows.net/powerapps/InkonImage_20190303023944.zip (includes app and flow)

Go to web.powerapps.com > Apps > Import > Upload > browse for the zip

I created 3 experiences.

Experience 1:

Insert a camera control. Make it collect photos to a collection.

Experience 2:
- Create a blob of the photo.
- Create a blob of the ink.
- Run a flow that returns the base64 versions of both images (and also creates a 3^rd blob that combines both images).

Insert an image control. Point it to the last image in the collection.
Insert an ink control. Layer it on top of the image control and make it the exact same dimensions as the image box.
Create a save button with these actions:

Experience 3:

Insert an image box with raw SVG that pulls in the two base64 strings.
Insert conditions into the SVG to show and hide the photo or ink if a toggle is switched.

Customizations you’ll need to make:

I’m storing my images in Azure blob storage. I do not have a solution for other locations.
I save my images to a blob container called “ink.” You’ll need to change that in the app and flow.
I’m naming my files as GUID().extension. If you need a more specific pattern, you’ll need to change that.
The images are created in blob, but you’ll need to save URLs to photo, ink, combined SVG into their own columns in a database.
Limitation: cannot revise old ink.

Hemant