~dr|z3d
@T3s|4
@T3s|4_
@eyedeekay
@orignal
@zzz
%Liorar
+Afkaid
+Hikari
+Unbur
+Xeha
+acetone
+profetikla
+semantica
+snex
+uop23ip
+weko
Arch
DeltaOreo
FreefallHeavens_
Irc2PGuest30202
Irc2PGuest42421
Irc2PGuest83825
Leopold
Nausicaa
Onn4l7h
StormyCloudInc
Titlacahuan_
anon4
anontor2
anu
cumlord
itsjustme
limak
not_bob_afk
poriori_
rs231
thetia
u5657
cumlord
no tooltips on a couple like falklands south korea tiawan, some small islands are too small to trigger tooltip to load but if you zoom you can get it
dr|z3d
yeah, I noticed a couple of countries missing from the js map.
dr|z3d
(the js map that assigns countries to paths)
dr|z3d
looks like it could be an issue with commas and spaces in the names. let's see if we can fix most of those.
cumlord
That could be it
dr|z3d
yeah, fixed. good catch.
dr|z3d
good excuse to replace the nonsense Tawian (Province of China) bullshit.
dr|z3d
*Taiwan
dr|z3d
just Taiwan will do fine.
zzz
derp derp derp batik replacement in 100 lines of code, test output: cake.i2p/view/fuk3xMG5c9_TB6eJDBTfxGRj0llMspUssM7RH4oTM_4PAl8La294/foo.svg
zzz
buf.append("<line x=").append(x) ... actually is one of our core competencies after all
dr|z3d
haha, even cake is conspiring with you.
dr|z3d
let's have a look at the image, when cake decides to load it...
dr|z3d
If I didn't have access to the source, I'd have sworn that was a bitmap image.
dr|z3d
you probably *do not want* crisp edges for anything other than vertical or horizontal lines.
dr|z3d
try removing the crispEdges property and your image will look like an svg, not something you knocked up in ms paint :)
zzz
if I have style= then you can't override it with css, right?
dr|z3d
wrong.
dr|z3d
you can override with !important
zzz
would it be better to do it without style like <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
dr|z3d
yeah, probably. then you'd just supply a css file to style it.
dr|z3d
just give the elements you want to style classes or ids as required.
zzz
stroke=black could be overridden with CSS without !important then?
dr|z3d
correct.
dr|z3d
path{stroke:#f00} etc.
dr|z3d
or rect or whatever svg primitive.
dr|z3d
in the svg, something like <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="/themes/geomap/geomap.css"/>
dr|z3d
to link to an external css file.
dr|z3d
well done for getting rid of the batik dependency. good stuff.
dr|z3d
also, if you don't want an svg element filled, use fill="none"
dr|z3d
and for transparency, you might prefer just using #rgba instead of setting the opacity separately.
dr|z3d
#rgba or #rrggbbaa
dr|z3d
#f008 for example for a 50% opaque red.
zzz
yeah but I'd have to figure out leading zeros and all that mess
zzz
and convert to hex
zzz
working on correctness not optimization
dr|z3d
up to you.
dr|z3d
I just hope we don't get anything like this: stroke-opacity: 0.5019608 :)
zzz
this is proof of concept hackery, not the time for nitpicks
zzz
and not my fault 128/255 isn't pretty
dr|z3d
just offering some friendly guidance. feel free to ignore.
dr|z3d
and that's not to denigrate your own svg rendering solution. that's superb.
dr|z3d
also, try dividing by 256 for a cleaner number :)
dr|z3d
< 0 = 0.
dr|z3d
Math.round probably also worth leveraging. 2 decimal places max?
zzz
not math.round; String.format("%.2f", value)
dr|z3d
yeah, or that, better still :)
dr|z3d
latest tweaks to map js/css -> git.skank.i2p/i2pplus/I2P.Plus/commit/bf854a425af5629aa56e9c37557641c6f5f83aa5
dr|z3d
tooltips now display country flag.
dr|z3d
+ dev build shortly..
dr|z3d
if you want to hack on it, snex, all the relevant files are in i2p/docs/themes/geomap/
dr|z3d
no need to recompile to see changes, js, svg and css all there.
dr|z3d
(for now)
zzz
a little cleaner with attributes instead of style:
zzz
<circle id='a' class='b' cx='75' cy='56' r='27' stroke='rgb(33,33,33)' stroke-opacity='0.50' stroke-width='8' fill-opacity='0' />
dr|z3d
coming along nicely.
dr|z3d
fill-opacity='0' == fill='none'
dr|z3d
for lines and paths, you probably want "stroke-linejoin:round;stroke-linecap:round" in your css.
dr|z3d
and if you want fixed line widths that don't scale relative to the size of the svg, this one's super handy: vector-effect:non-scaling-stroke
dr|z3d
then when you set stroke-width:2px, that's exactly what you'll get, regardless of the size of the svg.
zzz
not doing any css in this code, just want to make it css-friendly
dr|z3d
sure, best to load the css externally, keeps the svg clean.
zzz
this is for the inner svg xhr puking
dr|z3d
ok. remember if you have classes and ids, you don't necessarily need all the attributes you're setting.
dr|z3d
depends on how granular your values are.
dr|z3d
your mercator coords could also go in the js, thinking about it.
dr|z3d
embrace and extend the data map.. I've already added country codes which are used to pull the router count and flags:
dr|z3d
const m = {
dr|z3d
data: {
dr|z3d
countries: {
dr|z3d
Afghanistan: { region: "Asia", code: "af" },
dr|z3d
Albania: { region: "Europe", code: "al" },
dr|z3d
Algeria: { region: "Africa", code: "dz" },
dr|z3d
Andorra: { region: "Europe", code: "ad" },
zzz
no I'm making it css-friendly, not css-required
dr|z3d
ok
dr|z3d
fair enough.
zzz
switching to fill=none, thx
zzz
my approach for now is no js except for the xhr
dr|z3d
no tooltips?
zzz
dunno
dr|z3d
I think they're worth it, they make the map interactive and keep the map clean.
dr|z3d
extensible, too. lots of scope to add more country-specific info there.
zzz
here's where I'm at cake.i2p/file/bJIL4QPeyt_NoAnPdBn2eqoKhmUoY8GK4oXSigwwI_YUONkFj17W/foo.svg
dr|z3d
looks good.
dr|z3d
syntactically at least, and the shapes look like vectors now :)
zzz
baby steps
dr|z3d
it's all good.
zzz
you don't think the <title> style of tooltips are acceptible?
dr|z3d
no
dr|z3d
they're a bit lacking.
dr|z3d
no way to format the data, no inclusion of images, no styling etc.
dr|z3d
1 sec, I'll show you what I've got,. tooltip-wise. might be persuasive.
zzz
yeah that's sharp
dr|z3d
we don't have the b/w tier breakdown by country easily acccessible, but that's also something that could go in there as an example of extra info. maybe.
dr|z3d
are your latest mercator coords based on the svg?
zzz
mercator.txt is based on a square projection, now 1600x1600, and the offsets to a cropped and rotated map are handled in MapMaker.java
zzz
so mercator.txt only changes if the size changes
dr|z3d
ok, asking because it wouldn't be difficult to add those coords to the data map.
dr|z3d
if there's any use in doing so?
dr|z3d
the same logic to manipulate them into something useful for the map can be done in js of course.
zzz
so mapmaker is only doing fast adds, no multiplications or trig
zzz
as discussed, unless svg can do 'draw line from id foo to id bar' there doesn't seem much point, and even then...
dr|z3d
I was thinking something like this: cake.i2p/view/eoxAZ1BhhQ_pFvv9rkAq7SDFySb2nxtXOOGnnydDG_kdHggauiv1/eoxAZ1BhhQ.txt
dr|z3d
instead of drawing from id x to id y, you'd lookup the coords for country a, country b, convert those to absolute values on the map, and then plot the line.
zzz
i dunno what that buys you
zzz
you're taking a very js-centric approach to this which is fine but it's not at all what I'm doing
dr|z3d
I'm not sure either, but if you're refreshing the lines via xhr, then maybe having the coords in the js is helpful, maybe not.
zzz
I'm out for the night, have fun
dr|z3d
you too!
trial
The proxy server is refusing connections
trial
An error occurred during a connection to www.google.com.
trial
Check the proxy settings to make sure that they are correct.
trial
Contact your network administrator to make sure the proxy server is working.
trial
I really needed google maps this time :(
dr|z3d
retry, or restart your http client tunnel. sometimes you may hit a router hosting a proxy that's updating.
T3s|4
dr|z3d: lols on the *poof* :D
T3s|4
dr|z3d: all smooth sailing with the second iteration of blackjack+ :)
dr|z3d
*thumbs up* T3s|4
dr|z3d
so what about this as an idea, zzz. hybrid solution as you suggested, we keep the js light, update via xhr, and write the tunnel connection lines into the inline svg (loaded from file into the page) on refresh. heatmap for router count can also be written to the svg (add relevant classes per country id to the country class). which leaves just tooltip with router count being updated via js.
dr|z3d
space, the final frontier.
zzz
drz, maybe, but I'm still just playing around, premature to try to converge on something
zzz
still have no comments from anybody else on the MR or the idea
zzz
also, I'm probably going to back up, put maps aside, and investigate if I can put my puker under a from-scratch SVGGraphics2D and SVGImageMaker to bring svg to graphs w/o jfree or batik
zzz
which might be a prerequisite to doing anything with maps anyway. there's no svg in canon
dr|z3d
yeah, if you can get your renderer to handle graphs, great.
dr|z3d
as for the map, now you've done the heavy lifting and have synced your coords with the svg, my current implementation should be easy enough to merge with your tunnel lines if that's where you want to take things.
dr|z3d
I've cleaned the svg up some more, removed the out-of-bounds container that wasn't doing anything useful.
zzz
first cut at rrd4j + puker cake.i2p/file/plEr9acOHh_NwZTTHu5OTR7wsbdlDOkZVTTjpqNpY_tEKSsNH1aF/router.memoryUsed.svg
zzz
it was over an hour of mindless typing because Graphics2D has over 60 abstract methods that have to be filled in ((((
zzz
grr rrd4j needs clip-paths
dr|z3d
dang that's pretty good.
dr|z3d
clip-path, nothing special.
dr|z3d
<defs><clipPath id="clip-0"><path d="M63 27L366 27L366 103L63 103L63 27.0Z"/></clipPath> ...
dr|z3d
if you can group the lines and paths in groups, that's where you want crisp edges.
dr|z3d
so you're calling the class SVGPuke?
dr|z3d
*** chuckles. ***
T3s|4
dr|z3d: no `Hal` ^space journey there, just another k/b cleaning attempt gone awry ;p
dr|z3d
:)
zzz
yeah the problem was the back-ref to a previously defined clipPath, tried to not do that but didn't work, think I got it now
zzz
the only things I'm missing is vertical text, which we don't use, and the dashed lines for the axes
dr|z3d
ah, stroke-dasharray.
dr|z3d
that can get quite involved with multiple values, but you probably don't need/want to support more than 2, length,spacing.
zzz
annoying
dr|z3d
anoying until you've implemented it, then hugely satisfying :)
dr|z3d
stroke-opacity='1' stroke-width='1' <- those are default values, can be omitted.
dr|z3d
maybe too early to think about optimizations, but when you do, css and classes for shared properties.
zzz
ok
dr|z3d
this is what I've got by way of example:
dr|z3d
<style>text{fill:#f4f4be;font-weight:600;text-rendering:optimizeLegibility;white-space:pre}line,path,rect{shape-rendering:crispEdges}.axis{stroke:#eea;stroke-width:2;stroke-linecap:round}.bold,.sans.s12 text,.sans.s13 text,.sans.s14 text{fill:#f4f4be;font-weight:700}.dash{stroke:#f4f4be;stroke-opacity:.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1,1}.line{stroke:#f4f4be;stroke-opacity:.2}.mono{fo
dr|z3d
nt-family:FiraCode,monospace;font-weight:500}.sans{font-family:Open Sans,Segoe UI,Noto Sans,sans-serif}.s10{font-size:10px}.s11{font-size:11px}.s12{font-size:12px}.s13{font-size:13px}.s14{font-size:14px}.major{stroke:#f4f4beaa}.minor{stroke:#c8c80099}</style>
dr|z3d
which makes me think you probably don't need much to implement dash-array, if anything, other than assigning a property / class. svg renderer should handle the rest, no?
zzz
just gotta redo the puker API for the tenth time, nbd