Double row connectors

[somhi]

I have not seen a sample with double row connectors.

Can Pinout work on boards like this one ?
https://github.com/infphyny/FpgaRiscV/blob/main/data/Deca/Deca.svg

[j0ono0]

Hi somhi! Double row connectors have definitely been a challenge, and one I'm still working on. I think pinout can reproduce something very close to your sample. I'm interest to see how close it will look! If I can find the time in the next few days I'll post back with an equivalent layout to compare.

In the mean time these have been my other experiments on this...

Breaking board details out into their own mini-diagrams. Just a small double row header on this board (verbose but maximum clarity): https://github.com/j0ono0/icebreaker/blob/pinout/hardware/bitsy-v1.1b/pinout/pinout_wip_bitsy-v1.1b.svg

Combo-labels and overlaying the board (I'm not so hot on these options): https://github.com/j0ono0/ulx3s-pinout/tree/labels_01

[somhi]

Good! I see I could do two diagrams, one for each connector. Anyway, looking forward for your new experiments!

By the way, the board above uses standard beaglebone black 46 pin connectors.

[j0ono0]

Quicker than I thought with pretty good outcome :) About 5 mins to measure locations and amend the pre-existing script into the double-label configuration. No custom code required. (fyi, base image is custom/hand made)

If you are interested in the code, this example lives in a branch of my ULX3S fork: https://github.com/j0ono0/ulx3s-pinout/tree/labels_01

pinout is under active development, so if you try it out any feedback is very welcome. I can also attempt to help if you get stuck along the way.

[somhi]

Looks great! Thanks a lot

[somhi]

I'm just starting to practice from your examples, and it looks very promising progress i've made so far. I have one problem with curved lines when Y offset is negative label_start=(100, -15), I can put positive offset but then pin 2 will be above pin 1 and don't like it. My example can be found here https://github.com/SoCFPGA-learning/DECA/tree/main/Projects/deca-pinout

[j0ono0]

Coincidentally I spend some time today reviewing docs about this quirk! Definitely as aspect I need to work on more.

Solution: The component needs to be 'flipped' by changing the +/- of the scale property. The catch with doing this is that the +/- values of some other properties are effected, eg: graphic.add(

    PinLabelGroup(
        x=16,
        y=100,
        pin_pitch=(0, 30),              # can be affected by scale
        label_start=(60, 0),            # can be affected by scale
        label_pitch=(0, 30),           # can be affected by scale
        scale=(1, 1),                      # scale=(-1, -1) will flip the labels left and up.
        labels=data.left_header,
    )
)

A little explaination The SVG format's coordinate system considers top/left as (0,0). positive x coordinates move to the right and positive y coordinates move down. pinout labels are created with positive values resulting the the label body always being placed below and right of the label's (0,0) origin. Where a label is desired in another quadrant (ie left, above, or left+above) SVG's scaling property is used to simply 'flip' the component about its origin. The drawback is that some other coordinate values are also reversed!

Armed with this knowledge you will likely deduce the right +/- values to iron those kinks out quickly. I can script a little demo if you struggle further with it.

[edit] just clicked your link - making great progress!

[somhi]

After some trial & error I finally figured it out how it works! Thanks!

[somhi]

Check results here https://github.com/DECAfpga/DECA_board/tree/main/Deca_pinout

[j0ono0]

that is very awesome -- I'd love to share it on twitter! If you post to twitter I would be keen to retweet, otherwise I'd like to post it myself with a link to your github repo.

Provided you don't mind the exposure, I completely understand if that is unappealing. Let me know your preference.

[somhi]

I would like to know your opinion. Which alignment for pins do you prefer or find less confusing?

[j0ono0]

I'm probably the wrong person to ask as I have zero real-world experience using boards with double headers. As a graphic designer and tinkerer of simpler dev boards I can make some educated guesses and observations. They might help re-enforce your own thoughts or provide some new directions...

the top diagram: I like the 'clean' look with less leader-lines and have considered variations on that theme along the way. To me its biggest detractor is potential confusion on whether the labels are shifted (left hand column of labels links to the left hand column of pins) or mirrored (outside column of labels links to outside column of pins).

the bottom diagram: It is explicit, and I really like that! when we started this discussion I thought the high number of leader-lines would bother me more but I think they are okay in retrospect. So I guess this is my winner. I think the line's stroke weight and color are critical to remain clear but avoid being an eye-bending distraction.

Design variations to consider The 90° bend on the leader-lines do bother me though and I did note your 45° angles. I liked them so much I commenced coding that variation ...only to find I had already done it previously :D

code change to use them: leaderline=lline.Diagonal(direction="vh")

I also tried breaking up the leader-line with inside/outside styling:

And finally tried shifted all the labels so the diagonal leader-line was consistently on them all (doesn't look great with my graphic but might look good on your darker pin header):

An option I haven't really considered with double pin headers is no leader-lines at all. Just the two columns of labels - they could almost be spreadsheet/grid like in style. Essentially your first diagram but restyled. ...I'll resist going further down this rabbit-hole before my day completely disappears!

If you need help implementing any of these samples or have some other variation(s) you want to tryout but can't achieve, let me know and I'll help where I can.

[somhi]

Lots of possibilities !!! Everyone like one way or another so we left both scripts in our github so people can take whatever they like. I might try the two color styles approach. Do you have an example on how to draw inner leaderlines with different color ?

[j0ono0]

Altering the pinlabel appearance is purely a styling change. In the following code snippets I've used the tag name 'inner'.

1) Add a tag to the relevant pinlabels. The tag property can take multiple words separated with spaces - they become CSS classes.

lhs_inner_numbered = [
    [
        ("2", "pinid inner",{"body": {"width": 30, "height": 20}}),
        ...

2) Add styles to your CSS file

.pinid.inner .pinlabel__body{
    fill: rgb(199, 131, 29);
}
.pinid.inner .pinlabel__leader{
    stroke: rgb(199, 131, 29);
}
.pinid.inner .swatch__body {
    fill: rgb(199, 131, 29);
}

If you get stuck I'll fork your repo and demo on the actual code :)

[somhi]

Thanks!!! Seems all clear!