So @mary opened a rad pull-request to make it possible to modify your replication hops in #patchbay

I reviewed what she had made, but "describing hops" to someone using this in an accessible way is still super hard to do well concisely. So ... I carved up this SVG from the protocol docs that @duncan made and I've made it respond dynamically to the slider.

THERE's STILL A LOT OF STYLING TO DO = do not give me design feedback right now

I just wanted to share what I'd built so far this weekend and celebrate a little with you

This is up now on the hops branch of #patchbay

@mixmix and @mnin, patchbay looks more useful, friendly and beautiful everyday. Thanks a lot for the hard work.

wow, this is great.

Woah amazing stuff! Love how these settings makes for self-documention of how ssb works.

@SoapDog (SurfaceGo), it's open source, you can steal it and put it in your client ! ... so long as it's also open source ... AGPL strikes again!!!

aaand... LIVE in master

So preeeetyy! Nice one!

p.s. if anyone wants to go mess with the styles, you're most welcome. Add this to the custom-styles, and if it's rad share it or open a PR and we can over-ride my defaults here.

.FollowGraph {
  --out-node-fill: #e4e4e4;
  --out-node-stroke: #808080;
  --out-edge-stroke: rgba(143, 143, 143, 0.3);
  --out-edge-marker: var(--out-edge-stroke);
  --out-circle-fill: rgba(0, 0, 0, 0);
  --out-circle-stroke: rgba(0, 0, 0, 0.2);

  --in-node-fill: rgba(255, 49, 221, 0.65);
  --in-node-stroke: #ff0000;
  --in-edge-stroke: rgba(255, 0, 115, 0.28);
  --in-edge-marker: var(--in-edge-stroke);
  --in-circle-fill: rgba(161, 120, 255, 0.3);
  --in-circle-stroke: rgba(211, 14, 241, 0.17);
}

translating my variable names :

• out / in = outside / inside your hop range
• node = one of the peer dots on the graph
• edge = one of the connecting lines
• circle = the areas that coloured in showing the hop ranges

The easiest way to custom tune is to open inspect the svg and find the div.FollowGraph which is containing it. All these css variables are attached to that. From there you can tune the values with a colour picker in the dev tools. Like this :

CSS IS FUN!

see :

live in master

i.e. the master branch of the repo. Building releases and testing them takes about 30 minutes ... i tend to do it when I need to get bigger things out. The enthusiasm and interest is appreciated though @bob

@mixmix before stealing it, I need to double check AGPL because I have rebelious plans that might not be compatible with it. I don't know if I can bundle AGPL code with non-AGPL/non-GPL code (as in bundling AGPL with other software which is MIT/BSD/Mozilla licenses).

PS: not trying to close any software, just need to double check if those licenses can play well together.

hey @cameralibre there's a new feature in patchbay (the repo only so far) which is SVG based and dynamic. I'm kinda proud of it and also embarrassed by some of the things I did. Anyway, I feel like I learnt a bit more SVG, and wanted to show it off to you sometimes, and maybe get some feedback on how I did things !