Tip: dynamically draw lines on app

[mhopus]

I first wrote this same post as a response to a year-old post found here, but I felt this would benefit from a post of it's own to get a bit more visibility and be found easier. This is an example of something you too can create in Powerapps:

So what is going on here?

If we strip out all extra code, this is how you can draw an octagon. Just add an image object to your app and write the code below into the "image" source field. Now you have a red, lightly filled octagon:

"data:image/svg+xml;utf8, " & 
EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' " &
    "viewBox='0 0 600 600'> " & 
    "<polygon points='" &
    "430 75," &
    "555 210," &
    "555 395," &
    "420 525," &
    "230 525," &
    "95 380," &
    "95 210," &
    "230 75" & 
    "' "&
    "stroke='red' stroke-width='2' " &
    "fill-opacity='0.3' fill='red' /></svg>"
)//encodeURL

The we can add a background image to the app so that this octagon makes more sense:

But the polygon cannot be a hardcoded shape: user's input must change the shape of the polygon. So we need to change the polygon code to use variables. There are many ways to do it. The simplest would have been something like below: add 8 dropdowns onto the app for each sector such as "dropdown_emotional" and when OnChange is triggered, have some code that changes context variables accordingly:

//dropdown_emotional.OnChange
//
Switch(
    Self.SelectedText.Value;
    "5";
    UpdateContext({
        emotional_x:430;
        emotional_y:75
    });
    "4";
    UpdateContext({
        emotional_x:400;
        emotional_y:85
    });

Then change the SVG code to this:

"data:image/svg+xml;utf8, " & 
EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' " &
    "viewBox='0 0 600 600'> " & 
    "<polygon points='" &
    $"{emotional_x} {emotional_y}," &
    $"{spiritual_x} {spiritual_y}," &
    $"{intellectual_x} {intellectual_y}," &
    $"{physical_x} {physical_y}," &
    $"{environmental_x} {environmental_y}," &
    $"{financial_x} {financial_y}," &
    $"{occupational_x} {occupational_y}," &
    $"{social_x} {social_y}" &
    "' "&
    "stroke='red' stroke-width='2' " &
    "fill-opacity='0.3' fill='red' /></svg>"
)//encodeURL

I chose to do it a bit differently. I added all the sectors/categories into a collection like so and I tell, where is the furthest coordinates of that point (e.g. value "5" for each category).

//Set default values for collection
ClearCollect(
    coll_data;
    {code:"EM"; label:"Emotional Welness";     value:5; max_x:430; max_y:75};
    {code:"SP"; label:"Spiritual Welness";     value:5; max_x:555; max_y:210};
    {code:"IN"; label:"Intellectual Welness";  value:5; max_x:555; max_y:395};
    {code:"PH"; label:"Physical Welness";      value:5; max_x:420; max_y:525};
    {code:"EN"; label:"Environmental Welness"; value:5; max_x:230; max_y:525};
    {code:"FI"; label:"Financial Welness";     value:5; max_x:95;  max_y:380};
    {code:"OC"; label:"Occupational Welness";  value:5; max_x:95;  max_y:210};
    {code:"SO"; label:"Social Welness";        value:5; max_x:230; max_y:75}
);;

And then I change toe SVG image code so that instead of looking at 8 variables, the SVG code actually loops through that collection. For each record I check what is the current value of that record. We know what are the coordinates of the middle of the image. We also know, what is the outer limit of this category, e.g. when Emotional welness is set at 5, the polygon point must be at x:430, y:75. Since we also know what is the coordinate for the middle of the image, we can calculate what the coordinates should be if the value for emotional welness is set at 4, 3, 2 or 1, correspondingly:

"data:image/svg+xml;utf8, " & 
EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' " &
    $"viewBox='0 0 {img_Map.Width} {img_Map.Height}'> " & 
    $"<polygon points='" &
    Concat(
        ForAll(
            coll_data As record;
            With(
                {
                    x_step:
                    Round(
                        (LookUp(
                            coll_data;
                            code=record.code
                        ).max_x - map_center_x ) / 5
                    ; 0);
                    y_step:
                    Round(
                        (LookUp(
                            coll_data;
                            code=record.code
                        ).max_y-map_center_y) / 5
                    ; 0)
                };
                $"{map_center_x+record.value * x_step} " & 
                $"{map_center_y+record.value * y_step} " 
            )//with
        );Value;","
    )//Concat
    & 
    "' "&
    " stroke='red' stroke-width='2' fill-opacity='0.3' fill='red' />" &
    "</svg>"
)//encodeURL

To allow the user to change the values, I added a gallery with a label and a dropdown onto the app:

When the dropdown value is changed, the dropdown updates the value into the collection variable: here is the OnChange code of the dropdown:

UpdateIf(
    coll_data;
    code = ThisItem.code;
    {
        value: Value(Self.SelectedText.Value)
    }
)

so, to add a few more required default values, the Onvisible code of the app now looks like this:

//set default values for map properties
UpdateContext({
    map_center_x: 315;
    map_center_y: 300;
    var_fill:true;
    var_border:true
});;

//Set default values for collection
ClearCollect(
    coll_data;
    {code:"EM"; label:"Emotional Welness";     value:5; max_x:430; max_y:75};
    {code:"SP"; label:"Spiritual Welness";     value:5; max_x:555; max_y:210};
    {code:"IN"; label:"Intellectual Welness";  value:5; max_x:555; max_y:395};
    {code:"PH"; label:"Physical Welness";      value:5; max_x:420; max_y:525};
    {code:"EN"; label:"Environmental Welness"; value:5; max_x:230; max_y:525};
    {code:"FI"; label:"Financial Welness";     value:5; max_x:95;  max_y:380};
    {code:"OC"; label:"Occupational Welness";  value:5; max_x:95;  max_y:210};
    {code:"SO"; label:"Social Welness";        value:5; max_x:230; max_y:75}
);;

Then lets add a little bit more, a choice of including or leaving out the border and the filling, let add these two guys onto the form:

And let's change the last part of the image source to use the values those objects update:

"data:image/svg+xml;utf8, " & 
EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' " &
    $"viewBox='0 0 {img_Map.Width} {img_Map.Height}'> " & 
    $"<polygon points='" &
    Concat(
        ForAll(
            coll_data As record;
            With(
                {
                    x_step:
                    Round(
                        (LookUp(
                            coll_data;
                            code=record.code
                        ).max_x - map_center_x ) / 5
                    ; 0);
                    y_step:
                    Round(
                        (LookUp(
                            coll_data;
                            code=record.code
                        ).max_y-map_center_y) / 5
                    ; 0)
                };
                $"{map_center_x+record.value * x_step} " & 
                $"{map_center_y+record.value * y_step} " 
            )//with
        );Value;","
    )//Concat
    & 
    "' "&
    If(
        var_border; 
        " stroke='red' stroke-width='2' "; 
        " stroke='none' "
    ) &
    If(
        var_fill;
        " fill-opacity='0.3' fill='red' ";
        " fill='none' "
    ) &
    "/>" &
    "</svg>"
)//encodeURL

And now you should have something like this:

I also attached a working example to this post in case you want to try it.

Cheers!

[v-xiaochen-msft]

Hi @mhopus ,

Cool. Thanks for sharing!

Best Regards,

Wearsky

[EddieE]

@mhopus 

Nice work mate! I enjoy seeing the use of SVGs and variables to produce some very neat outcomes! 

You could also create a Blog post in the Power Apps Community Blog as this great post won't get as lost over there.

[mhopus]

Thanks! I did consider the blog option first but hesitate since I don't want to become a one blog wonder since I have no material in reserve. The idea of this tutorial just happened to fall into my lap at the right time.

[EddieE]

@mhopus 

Haha, nothing wrong with being a one-hit wonder / blogger in the Community Blog - I am 🙂 

https://powerusers.microsoft.com/t5/Power-Apps-Community-Blog/The-power-of-Sequence-when-used-to-col...

Anyway, it's up to you and what you think is best. I think there'd be some more material around the use of SVGs in similar ways to how you've used it for more blog material - but that's just me.

All the best!