Author Topic: Improving appearance - making flow lines parrallel  (Read 445 times)

Offline ltjudd

  • Full Member
  • ***
  • Posts: 11
Improving appearance - making flow lines parrallel
« on: June 15, 2020, 03:39 PM »
Does anyone have any tips as to how to avoid the problem of flow lines separating. see the two attached images . Because the  blue line wants to "snap " to the grid I cant get it parallel to other lines

I have no idea what you have to do to attach an image!

Offline pbeilschmidt

  • Administrator
  • Hero Member
  • *****
  • Posts: 573
  • e!Sankey - show the flow.
    • Umberto - know the flow.
Re: Improving appearance - making flow lines parrallel
« Reply #1 on: June 15, 2020, 04:03 PM »
To attach an image to a post here in the forum, use the blue "Attachment and other options" button below the text box. Then upload the image.

You can also send your request via regular e-mail (with image attached) to support@e-sankey.com ... although it is nice to see your support inquiry here in the public forum. Other users may learn from it or post additional suggestions.
Peter Müller-Beilschmidt
e!Sankey Forum Moderator
ifu Hamburg GmbH

Offline ltjudd

  • Full Member
  • ***
  • Posts: 11
Re: Improving appearance - making flow lines parrallel
« Reply #2 on: June 17, 2020, 02:42 PM »
Hi,

As per the below two attached screen shots , is there any way easy way to get the liens to appear parallel, Because the process flow lines are snapping to the grid they are not coming out parallel to the line above.

Offline pbeilschmidt

  • Administrator
  • Hero Member
  • *****
  • Posts: 573
  • e!Sankey - show the flow.
    • Umberto - know the flow.
Re: Improving appearance - making flow lines parrallel
« Reply #3 on: June 18, 2020, 09:52 AM »
Hello ltjudd, great you managed to upload the pics!

One can see the issue you have described at the teal-coloured 310 kW arrow you marked. It is also visible at the brown-red 360 kW arrow underneath.

What I understand is that you are moving the grey waypoint up (C1) and down (c2), and as it snaps to the grid, the horizontal segment of the arrow either slightly goes up, or there is a slight downward slope.

First idea (although not the one I recommend!) would be to switch off the option 'Snap to grid'. In this case you will be able to move the grey waypoint up or down pixel-by-pixel (use the cursor or the arrow keys on the keyboard, hitting key moves one grid step, use CTRL+arrow key to move by one pixel). You could then try to fine tune the waypoint so that the line stays straight up to where it bends downwards.

But there is a better way to do this: why do you need and additional waypoint here at all? I would remove the grey waypoint, and instead pull the yellow lug point on the arrow all the way to the right, so that it sits above the vertical segment of the arrow. The first segment of the arrow will stay absolutely horizontal, and only after the yellow waypoint will the arrow start bending downwards.

I have made a small example similar to yours, see the three screengrabs below:
The first image is the start situation, then I drag the yellow lug point all the way to the right, to make the yellow point sit on top of each other in a vertical line. As you can see, there is now no downward sloping middle segment of the arrow, as I have not added an additional waypoint on the arrow.
 
Let me know if you could achieve what you were looking for with this trick.
« Last Edit: June 18, 2020, 10:01 AM by pbeilschmidt »
Peter Müller-Beilschmidt
e!Sankey Forum Moderator
ifu Hamburg GmbH

Offline ltjudd

  • Full Member
  • ***
  • Posts: 11
Re: Improving appearance - making flow lines parrallel
« Reply #4 on: June 20, 2020, 08:50 AM »
Hello , I cant replicate what you are doing.
I can not get to the same start point as you, because I can not get the default start position to go from the side of one process box to the side of another . It always wants to go side to top , or top/bottom to side.

Thus, I end up with an extra way point which i cant get rid of . So even when I Drag the lug pint caross I can never get them perfectly in line and therefore there is a very slight "out of parallel". Alos when  way points are not in line , this manifest when you try to increase the width by the slider , the line starts to break up.

Offline ltjudd

  • Full Member
  • ***
  • Posts: 11
Re: Improving appearance - making flow lines parrallel
« Reply #5 on: June 20, 2020, 08:57 AM »
This is the best I could do,

note - still a very small white gap on the left hand side, indicating the lines are not parrallel

Offline ltjudd

  • Full Member
  • ***
  • Posts: 11
Re: Improving appearance - making flow lines parrallel
« Reply #6 on: June 20, 2020, 09:23 AM »
Related to the above - I cant even get a simple straight line to be parallel if adding two flows to a process box. Notice how when I add a third, it centralises the middle one , thus making the line straight.

Offline ltjudd

  • Full Member
  • ***
  • Posts: 11
Re: Improving appearance - making flow lines parrallel
« Reply #7 on: June 21, 2020, 04:08 PM »
Hi, just wanted to update you. I spent quite a while playing around with this and eventually realised that most of the problems I am having are inherent in the program, code or whatever. The best way to get a good  looking diagram is to follow the styles and layouts on the demo diagrams on the home page.
That is- to use intermediate process blocks and "hide them" later and let the process flow lines go where they want to without too much manual intervention.  They generally want to go in an S shape but I found it was often better just to wiggle the end of the process box around and try to get it to "snap" to the way I wanted , rather than trying to pull the lug points.
One things I did notice , If you want some central flow to continue on in a straight-line , you really have no choice but to turn off the "snap to grid" and try and line it up manually. This is because the program tries to keep the centre of the input and the centre of the output on the same line, but because they are not the same width, some flow lines inevitably get kinks in them. Perhaps something you can look at in a future revision. Also it seems that you cant avoid having the thin white line separating flow streams of the same colour - even your demo diagrams have that.
Any how attached is my "finished" version.

Offline pbeilschmidt

  • Administrator
  • Hero Member
  • *****
  • Posts: 573
  • e!Sankey - show the flow.
    • Umberto - know the flow.
Re: Improving appearance - making flow lines parrallel
« Reply #8 on: June 22, 2020, 01:45 PM »
Hello ltjudd,

your final version looks very good, congratulations!

I do, however, disagree with your opinion, that the problem is in the code. Since the demo files (mostly) do the job for you, I rather think that it is the settings in the demo files that seem to be more adequate.

Your observation that the arrow line connects to the center of a process, and hence process node heights should be the same (or multiples of the grid distance) for neighboring processes is correct. This may cause the need to tweak, if you have stacked arrows on one of the two processes you connect. This post describes the underlying issue.

I will address some of the points from your last posts separately.
Peter Müller-Beilschmidt
e!Sankey Forum Moderator
ifu Hamburg GmbH

Offline pbeilschmidt

  • Administrator
  • Hero Member
  • *****
  • Posts: 573
  • e!Sankey - show the flow.
    • Umberto - know the flow.
Re: Improving appearance - making flow lines parrallel
« Reply #9 on: June 22, 2020, 01:50 PM »
Regarding this point:

Quote
Hello , I cant replicate what you are doing.
I can not get to the same start point as you, because I can not get the default start position to go from the side of one process box to the side of another . It always wants to go side to top , or top/bottom to side.

My advice: set the connectivity for the arrow in the process property to "Left-to-Right" for the start process, and to "Top-to-Bottom" for the target process. Arrow will leave the start process to the right, and arrive at the destination process from the top. If you leave the connectivity at "Free", the arrow will go the most direct line (between the yellow points). And that line depends on the position of the processes relative to each other. Limiting the freedom of the arrow by setting connectivity mostly helps (and avoids that you have to add additional waypoints)

Quote
They generally want to go in an S shape but I found it was often better just to wiggle the end of the process box around and try to get it to "snap" to the way I wanted , rather than trying to pull the lug points.

By "wiggling around" the process node you most likely end up having processes of different heights, and consequently the straight line is difficult to set. Try the "Connectivity" settings for the two processes instead.
« Last Edit: June 22, 2020, 01:53 PM by pbeilschmidt »
Peter Müller-Beilschmidt
e!Sankey Forum Moderator
ifu Hamburg GmbH

Offline pbeilschmidt

  • Administrator
  • Hero Member
  • *****
  • Posts: 573
  • e!Sankey - show the flow.
    • Umberto - know the flow.
Re: Improving appearance - making flow lines parrallel
« Reply #10 on: June 22, 2020, 01:57 PM »
In the attached image the horizontal segments of the arrow connecting Process 4 to the next process are too long.
My advice, if you have to place processes very close to each other: reduce the forced horizontal segment, by moving the yellow lug points closer to the process.
« Last Edit: June 22, 2020, 02:04 PM by pbeilschmidt »
Peter Müller-Beilschmidt
e!Sankey Forum Moderator
ifu Hamburg GmbH

Offline pbeilschmidt

  • Administrator
  • Hero Member
  • *****
  • Posts: 573
  • e!Sankey - show the flow.
    • Umberto - know the flow.
Re: Improving appearance - making flow lines parrallel
« Reply #11 on: June 22, 2020, 02:07 PM »
This video might be helpful to get a sense of how to tackle the "parallel lines" issue that occurs when you have stacked arrows on one of the neighboring processes... It also shows an alternative way to approach this challenge using arrow connect at top or at the bottom of the process.

e!Sankey 5 - Helpful Options for Alignment (YouTube video)

Jump to 2:25 if you want to go directly to the option I am referring to.
« Last Edit: June 22, 2020, 02:18 PM by pbeilschmidt »
Peter Müller-Beilschmidt
e!Sankey Forum Moderator
ifu Hamburg GmbH

Offline ltjudd

  • Full Member
  • ***
  • Posts: 11
Re: Improving appearance - making flow lines parrallel
« Reply #12 on: June 26, 2020, 03:31 PM »
Thank  you , the above  tips and the video were very helpful and I am now getting the results I was after with my diagrams.