WIP render qr images on the fly

[msuess]

Related #384 — This is a WIP PR for tracking purposes.

Here is a first version of the new QR rendering code. Nothing is hooked up yet and there is a lot of hardcoded stuff as well as some missing functionality, but you should be able to view the test output here.

I haven't figured out a way yet to properly embed this as an image into a github comment. I think the problem is that github and the other hosting services that I've tried don't allow hotlinking to an SVG from an img tag.

I have tested the image rendering in Firefox, Chrome, Safari and IE11, as well as Android. For me, the text is being rendered correctly.

@martinklepsch it would be great if you could confirm whether the embedded Roboto font is being rendered correctly for you, or if you're seeing a default serif font.

implementation notes

I am currently using the dali library for rendering since it provides some basic layouting functionality which makes it easy to align the different text elements without having to resort to manual positioning of the nodes. Unfortunately this is alpha quality stuff and hasn't been updated in a while. It's using the Apache Batik library internally which seems to be pretty stable though. Sadly, I have to rely on calling undocumented functions to be able to fulfill our requirements. I have been looking into tikkba as well but it seems to be even more outdated.

For the QR rendering, I am relying on the Fast QR Code rendering library by nayuki. Unfortunately, the only way to use this is by copying the source files. There's no proper to use this as a dependency through maven that I am aware of. This is the only QR java lib could find that supports SVG output.

next steps

The next step would be to figure out how to properly embed the svg into a github comment to make sure that the embedded font shows up correctly. All the hosting services I found either don't allow hotlinking or are rendering the svg server side without respecting CSS font-face directives. Rendering the text in an embedded svg using an image tag from within a standard html file works for me though, as you should be able to verify by looking at the gist above.

Sorry for the quick and dirty write-up. I'll provide more details tomorrow, but it's getting late and I really have to go to bed.

[martinklepsch]

Hey @msuess, thanks for opening this PR and sharing some notes on the implementation 👍

I haven't figured out a way yet to properly embed this as an image into a github comment. I think the problem is that github and the other hosting services that I've tried don't allow hotlinking to an SVG from an img tag.

Not sure if we misunderstood before — did you say that this worked earlier? If this doesn't work we'll have to consider other approaches unfortunately.

I am currently using the dali library for rendering

Assuming the above can be fixed we could investigate to remove that dependency and instead use selmer templates as in commiteth.layout. This way our layout could be as complex as necessary without introducing any additional runtime dependencies.

For the QR rendering, I am relying on the Fast QR Code rendering library

Not sure how much this would simplify things but we could have an endpoint /qr?address=0x43nj4 that would render an appropriate QR code as regular png/gif. You could then use this inside the SVG. This would put some of the image rendering load on us but I'd think for QR codes that's not a whole lot of compute and mostly bandwidth.

@msuess if you feel like the SVG approach might be turning into a dead-end don't hesitate to reconsider the CDN idea as suggested by @jwagener.

[msuess]

@martinklepsch The problem is just that I didn't find anywhere to host the image that would serve it with the right mime type for it to show up. Embedding an SVG from ie. Wikipedia works fine.

EDIT: What did work was embedding the svg via an <img> tag in an HTML document. Unfortunately I didn't test embedding it in a github comment since I figured it would just be a normal image tag. I was wrong:

Darn. It looks like the github proxy is stripping the src attributes from inline SVG CSS definitions. The same thing happens if I host the image somewhere else.

I think it's back to the drawing board for this one. I'll look into the CDN idea. Sorry for time waste!

[martinklepsch]

Got it. An S3 Website bucket could be useful for testing here as you can easily set the mimetype using the AWS console. 🙂

[msuess]

@martinklepsch please see my edited comment!

[martinklepsch]

Oh no! No worries, much appreciate your research into this. We’re smarter now! 🙃