Drawing a line from point to point on an app (including verticle)

[Mattw112IG]

So I know in the past others have asked and the answer has been no.  Any changes to this?  Any other creative solutions?  Any PCF's?

Thanks,

Terry

[RandyHayes]

@Mattw112IG 

Have you looked at using an SVG image?

Sorry...I put this here as an image rather than text only because this forum always messes up the first line

I hope this is helpful for you.

[timl]

Very clever @RandyHayes!

[Mattw112IG]

I had not thought of that, in fact I'm not really sure what is possible with SVG.  But more details on what I would be doing... I could do 8 lines that connect or an octogon... trying to create something similar to a "Wellness wheel" see below

It is faint on this graphic, but do you see the dotted lines connecting the points.  It would look like that based on the users score.

Thanks,

Terry

[RandyHayes · Accepted solution]

@Mattw112IG 

Yes, you could do that with SVG.  It would not be trivial.  You might consider layering.  Having the wheel as a static image and then a dynamic SVG on top of it (transparent fill).

[Mattw112IG]

Thanks Randy,

That's what I ended up doing with .png files.  Basically captured every state into a png and then layered them, then using logic to show the right pieces at the right time.  Would be nice though if could draw regular lines not just boxes.

[RandyHayes]

@Mattw112IG 

Ouch!! That sounds painful.  A lot of files to deal with.  Glad you have something you need now though.

[mhopus]

I found this thread and the issue interesting, so following Randy's tip I built an example project that uses a dynamic SVG map:

All the values are in a collection (8 records), so inside the SVG image I loop the collection through and using each value, I convert it to x and y and build a polygon to be placed on the map.

Here is the OnVisible code of the screen. A point to raise is that my solution requires each category to know, where the max value (5) is located pixel-wise on the map. Knowing that, it's easy to reverse-engineer the locations of 4, 3, 2 and 1 going towards zero, the middle of the map.

//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"; prev_code:"SO"; 
    label:"Emotional Welness"; value:5; max_x:430; max_y:75};
    {code:"SP"; prev_code:"EM"; 
    label:"Spiritual Welness"; value:5; max_x:555; max_y:210};
    {code:"IN"; prev_code:"SP"; 
    label:"Intellectual Welness"; value:5; max_x:555; max_y:395};
    {code:"PH"; prev_code:"IN"; 
    label:"Physical Welness"; value:5; max_x:420; max_y:525};
    {code:"EN"; prev_code:"PH"; 
    label:"Environmental Welness"; value:5; max_x:230; max_y:525};
    {code:"FI"; prev_code:"EN"; 
    label:"Financial Welness"; value:5; max_x:95; max_y:380};
    {code:"OC"; prev_code:"FI"; 
    label:"Occupational Welness"; value:5; max_x:95; max_y:210};
    {code:"SO"; prev_code:"OC"; 
    label:"Social Welness"; value:5; max_x:230; max_y:75}
);;

And here is the code I put into the "Image" property of the SVG image:

"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

I also attached a working sample project, if you have the courage to download stuff from the internet.

[enzo2]

Would be possible to change the slider positions to use the elements X and Y pos? So if any change to the layout is made, the UI would automatically update all the connecting lines

[DitIsEenUsrName]

this has been very helpful to me, thank you very much for sharing this example.