Hi all.


Soon I will have to create a screen like the one attached. I'd like to hear from you what is the best way to draw the arrows.


i will have two lists with the boxes and the pattern starts with 2 or 3 boxes for the first arrow.


Thanks

Would probably be easier to help if you provided more information on the purpose of the boxes and arrows, and how the user will interact with them.

Additionally, what version of the OutSystems platform, and what version of Service Studio you're using.

Last, but not least, is this for a web app or a mobile app?

Hi Denis,

The previous reply makes a good point, a little more info would help.

Though making a few assumptions, I might consider using SVGs, HTML and CSS. There are some good ideas for this on Stack Overflow https://stackoverflow.com/questions/20037122/draw-an-arrow-between-two-divs and this fiddle: https://jsfiddle.net/red_lebowski/13029ngy/ 

(Copied from stack overflow:)

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>

I hope this helps.  If not, other useful information might be how the boxes and arrows size change as the screen size changes; ie how responsive it should be, and if the arrows are always the same distance apart, or do the angles differ.

Kind regards,

Stuart

G. Andrew Duthie wrote:

Would probably be easier to help if you provided more information on the purpose of the boxes and arrows, and how the user will interact with them.

Additionally, what version of the OutSystems platform, and what version of Service Studio you're using.

Last, but not least, is this for a web app or a mobile app?

The arrows are just to show the way, no interaction through them. The boxes are to show types of products, there will be drag and drop interaction with a third list where I could choose items and drop on the boxes.

It will be using Outsystems 11.


This will be an web application.


Thanks Andrew

Stuart Harris wrote:

Hi Denis,

The previous reply makes a good point, a little more info would help.

Though making a few assumptions, I might consider using SVGs, HTML and CSS. There are some good ideas for this on Stack Overflow https://stackoverflow.com/questions/20037122/draw-an-arrow-between-two-divs and this fiddle: https://jsfiddle.net/red_lebowski/13029ngy/ 

(Copied from stack overflow:)

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>

I hope this helps.  If not, other useful information might be how the boxes and arrows size change as the screen size changes; ie how responsive it should be, and if the arrows are always the same distance apart, or do the angles differ.

Kind regards,

Stuart

Thanks for the reply Stuart.


I had a look and I will try to find out if it works for me.

The boxes and arrows sizes don't change. Apart from the first arrow that covers the boxes 1, 3 and 5 that can cover 2 or 3 boxes (1, 3 and 5 or only 1 and 3).


It's preferable that it resize according to the size of the window.

Solution

I ended up using the directions from this website:

https://vanseodesign.com/web-design/svg-markers/


Code example:

<svg width="600px" height="100px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
    </marker>
  </defs>
  <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>

Solution

Thanks Denis for your final feedback. It can help others.