The shape you’re trying to draw is called a catenary: it’s the shape that a cable/cord of constant density takes when supported at each end. You’ll have to do some research to find a parametric equation for its shape—this page has a start, though it doesn’t let you substitute in the endpoints so you’ll need some additional work there.
Once you have an equation that gives you a point along the curve as a function f(t) = (x,y)
, where t
is in the range [0,1], you can draw it the same way you would any other parametric curve: step along the function from 0 to 1 in small increments, drawing individual line segments from the value of f
at the previous increment.
For nicer-looking cables, you can follow that process with a wide line in a dark color followed by a narrow line in a lighter one to give the appearance of shading, draw a shadow with the same curve offset vertically in partially-transparent black, etc.
As to the patch ports themselves… you can make grids pretty easily by using an image for a single port and drawing it at regular intervals across the space you want to cover. To figure out which port a given screen position corresponds to (e.g. if the user clicks on a particular one), get that position, divide it by the size of the interval you drew the ports at, and take the ceiling of that value. In other words, if you’re drawing a port every 20 pixels and the user clicks on (42, 27), dividing each coordinate value by 20 gives you (2.1, 1.35), which ceils to (3, 2)—i.e. the third column and second row.