dr|z3d
also, zzz: text-rendering="optimizeLegibility" not required for labels. browser will do a fine job without.
dr|z3d
you're more likely to want to use that when you're presenting paragraphs etc.
dr|z3d
coming along nicely, though. props.
dr|z3d
also, you've got a ton of these in your svg which looks like they shouldn't be there, <circle cx="0" cy="0" r="5" fill="none" stroke="rgb(192,0,0)" stroke-opacity="0.75" stroke-width="2" />
dr|z3d
another thing.. you might want to add groups to the lines and circle (mapoverlayanim) elements and separate them, so your line overlay group appears above the animated circles in the svg, then the circles will all appear on top of the lines.
dr|z3d
here you go, zzz, my map, your animations: cake.i2p/file/Y0k8tDAkw2_TBAV4G1a7bzafdsMhGZc3pQrDdfr0v_YHCTo82PVk/geomap-animate.svg
dr|z3d
visuals tweaked, though you wouldn't expect anything less :)
dr|z3d
(some) optimization of the various properties there as well, and a subtle drop shadow for the tunnel lines that separates them from the countries.
dr|z3d
if we can get the packet circles classed as inbound or outbound, we can color them distinctly.
dr|z3d
just adds a bit more variation/differentiation.
dr|z3d
also, after some experimentation with the tunnel lines, these stroke paths don't look too bad:
dr|z3d
#geomap #tunnels path{stroke:#3f3a;stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1,4;stroke-dashoffset:0}
dr|z3d
#geomap #tunnels path.outbound{stroke:#90fa;stroke-dashoffset:2}
dr|z3d
pulsing packets, dashed tunnel lines.
zzz
that's a little disco
zzz
you don't want to change the country border color on hover because they're not complete, hover over brazil to see
zzz
the two circles is because the Graphics2D API doesn't let you have separate border and fill colors in one shot
zzz
to fix that the MapMaker will have to talk straight to the puker which will happen at some point
dr|z3d
lol @ disco
dr|z3d
just need a few dancing anthropomorphic garlics and we'll be there :)
zzz
looks like playing asteroids
dr|z3d
yeah, but you like it, admit it :)
zzz
the dashed lines and colors are almost giving me a seizure though
dr|z3d
hmm, let me upload the current revision, different colors for the lines.
dr|z3d
green not the best choice of color, it suggests it's somehow better than everything else in this context.
dr|z3d
any better?
dr|z3d
I went with dashed lines so we have a better idea when inbound and outbound are following the same path.
dr|z3d
not 100% convinced on the pulsing packets, mind, that was just a "let's see if this looks any good" experiment.
zzz
we could do arrowheads at the endpoints
dr|z3d
yeah, I've been looking into that.
dr|z3d
arrowheads at the endpoints, or animated arrows indicating direction of travel. it's a bit tricky though.
dr|z3d
separate colored packets for in/out would be a good start.
zzz
another idea - at our router, to reduce clutter, offset our tunnel gw/ep client/expl up/down/left/right, maybe to the four corners of the "me" box
dr|z3d
yeah, could work, crossed my mind, too, some sort of offset.
zzz
maybe rotate the "me" box and make it a diamond. or a star
dr|z3d
I'd probably put a js toggle on the map somewhere so in/out could be independently toggled.
dr|z3d
I was thinking more an svg graphic, usual router-style screen icon.
zzz
google 'compass rose' images, that's what I'm thinking, something stylish
dr|z3d
this was what I was thinking: git.skank.i2p/i2pplus/I2P.Plus/src/branch/master/installer/resources/themes/console/images/client.svg
dr|z3d
let's see what compass rose has to offer...
dr|z3d
oh, that. orignal navigator / safari style icon.
dr|z3d
we're not going anywhere though, we're sitting in one place. :)
dr|z3d
plus that will start to look less than stellar as the viewport scales down. too much detail. it might be bigger than 16x16, but 16x16 is a good test of whether the image works.
dr|z3d
on my map, the country hover is slightly borked by virtue of the absence of js, just so you know. with js, the hovered country has the correct z-index and full borders.
dr|z3d
with those js tooltips, we can present more info about the tunnels, like expiry, data transferred etc.
zzz
sure, but you should probably make non-js hover not look borked by fixing the css hover
dr|z3d
not that easy. there's no z-index in svgs, order of the elements determines z-index.
dr|z3d
could just lose the borders and change (lighten) the colors, might be the best we can do without js. separate js/non-js css rules.
zzz
yeah I'm fighting that too
dr|z3d
I'll probably just make the map unavailable if js is disabled tbh.
zzz
eyedeekay set the checkin deadline a lot earlier than I was expecting, and I can't drag any comments out of him on any of my MRs or ideas, so I'm about done with this for now, I'm shifting to canon bug fix mode
dr|z3d
10-4
dr|z3d
good progress made, anyways. well done.
zzz
also fyi my dumb xhr overlay refresh, copied from graphs.js, causes a "flash" that's not great
zzz
to do it right, we'd have to have the js go thru the DOM, calculate the changes, and add/remove individual tunnel elements
dr|z3d
that's correct.
dr|z3d
you don't want to refresh the entire svg, you want to identify the "volatile" elements and only update them if they've changed.
zzz
for tunnel in oldtunnels {if tunnel not in newtunnels oldtunnels.remove(tunnel)}
zzz
for tunnel in newtunnels {if tunnel not in oldtunnels oldtunnels.add(tunnel)}
zzz
more or less
dr|z3d
something like that.
dr|z3d
or if you have the various elements in groups, you can just check if the DOM content is the same as the xhr, and if not, replace.
dr|z3d
git.skank.i2p/i2pplus/I2P.Plus/src/branch/master/apps/routerconsole/jsp/js/refreshElements.js
zzz
but a tunnel is one element. if your group is all tunnels, you get the flash, the animation will restart, etc
dr|z3d
yeah, you're probably right, and definitely right wrt animations.
zzz
as long as everything you're adding/subtracting has a unique id, it will work and is pretty straightforward, thats why I stuck the tunnel ID into the element ID
dr|z3d
sure, ids handy.
zzz
alternative is to caclulate the changes on the server side and send the delta as json but that's really messy
dr|z3d
yeah, agreed. just check the elements in the DOM and xhr response and update as required. easy.
dr|z3d
that js I linked is mostly sufficient. you'd just add a clause to remove elements not found in the dom.
dr|z3d
the targetSelector in this case would be path[id^="tunnel"] or whatever.
dr|z3d
or path[id^="tunnel"], circle[id^="packet"] .. you can declare as many elements as you want to check.
dr|z3d
*remove elements not found in the xhr response
dr|z3d
couple that with the routercount xhr and you're good to go.
dr|z3d
speaking of graphs.js, feel free to review the latest changes in git, I'm now loading all the images concurrently.
zzz
and then if we do add/remove right, we can add a nice CSS or animation fadein/fadeout or *zap*/*poof* thing
dr|z3d
sure, easy peasy :)
zzz
or slowly "draw" the tunnel from gw to ep
dr|z3d
you'd delay the remove for however long you want the animation to run for, add a class to indicate the tunnel expired, apply animation to the class, and then remove the element once the animation's run.
zzz
did some quick 'svg explode' googling, here's the coolest one so far: codepen.io/osublake/pen/wzZMBM
zzz
better for nuking countries than tunnels though
dr|z3d
yeah, but no. definitely a no.
dr|z3d
*** chuckles. ***
dr|z3d
start adding animations like that and kiss goodbye to smooth.
dr|z3d
just animating the packets is sufficient to slow things down, so probably just a quick fadeout is what we want when a tunnel expires.
dr|z3d
increasing blur + fade probably acceptable, so the tunnel dissolves.