Adding more styling options (Curved lines, Rounded Rectangle...)

[AbdelbakiBoukerche]

With large topologies it becomes hard to see connections between devices, and the topology looks a bit ugly. I'd love if there was a way to provide different link style types (curved, orthogonal...), I've managed to implement simple curved line but I'm not familiar with the code base and it's a bit hard to follow along. The implementation is not perfect as you can see the link status indicator are way off

[grossmj]

Thanks looks great already, do you plan to submit a PR soon?

[AbdelbakiBoukerche]

I'm having problem aligning the link status indicator (as shown in the pictures) I'll submit a PR as soon as I fix it and do further testing making sure nothing else breaks.

[AbdelbakiBoukerche]

I added Flow Chart type of links and fixed some issues I had with the Bezier curves. I still have the same problem with the status indicator I managed to work around it by using QPainterPath.pointAtPerecent() but the behavior changes depending on the length of the link (the longer the link the further green dot gets). Also I couldn't find any documentation that tells the formula used by Qt to calculate the path so I can't just solve for x and get a y value. Another method that I'm considering is to draw a rectangle from the source node to bottom node I then can you use lines inside the rectangle to check if they intersect with the curve and pick the best one. Although I'm not sure about the performance hit!

Link Style: Allow you to pick from (Straight, Bezier, Flow Chart) Style Factor: Allow you to adjust the Bezier curviness.

[cristian-ciobanu]

@AbdelbakiBoukerche have you had any progress with implementing these the link styles ? I'm also working on large topologies and when connecting more than 8 links to the same device it is hard to follow where the connection goes to.

[AbdelbakiBoukerche]

@cristian-ciobanu unfortunately, no. Qt doesn't provide any documentation on how they draw a Bezier curve this means I can't get x,y coordinates of points on the curve. I tried another way (basically creating an invisible box between the source and destination and horizontal lines to see where they intersect with the curves), but it was slow and resulted in some artifacts when rendering.

One thing that can be done is to remove those link indicator (red, green, and yellow dots) and replace them with something like EVE-NG, if a node is inactive, it's greyed out, and if it's active show the normal color... And I'm not sure if that's okay with the GNS3 team.

[cristian-ciobanu]

@AbdelbakiBoukerche Sorry to hear that. Maybe someone with good Qt and Python experience can give you a helping hand. This feature was requested a few years ago by different users and it still does not have a milestone.

[grossmj]

One thing that can be done is to remove those link indicator (red, green, and yellow dots) and replace them with something like EVE-NG, if a node is inactive, it's greyed out, and if it's active show the normal color... And I'm not sure if that's okay with the GNS3 team.

@AbdelbakiBoukerche sorry for the late answer. We would be okay removing the link indicator when using a Bezier curve.

In fact we already have an option to not display them at all, "Draw link status points" in the preferences:

I will be happy to review your PR and finally include this in our next release. Thanks 👍

[cristian-ciobanu]

@grossmj here is the branch https://github.com/AbdelbakiBoukerche/gns3-gui/commits/feature_link_style on which @AbdelbakiBoukerche worked for adding more styling options to links and add a new rounded rectangle.

Maybe you can cherry pick these commits and have a look if they can be updated to work.