Hello Vaadin Forum,
Is there a [hopefully straightforward]
way to pass a Vaadin component, window, panel etc to e.g. phantomjs or similar to have it render on the server-side (no client browser)?
Charts’ SVGGenerator does this using phantomjs but only for Vaadin Charts, and there’s a fair bit of js-specific manipulation going on in svggen.
Building urls to pass to phantom is very cumbersome and inefficient so hoping for a better way.
Any ideas on a good approach?
(btw can’t use selenium or testbench as this is on production appliances).
Thanks!
Hello Peter,
You want to use a headless browser to request a server resource (html page or fragment) and the response should be a image renderization of it. Is that it?
If I understood it right, a possible solution is to user a
Filter
on the server side intercepting those requests and using something like
CSSBOX
to convert the server’s html response to svg or png format. This filter implementation can be a little bit tricky (you have to ensure the response buffer doesn’t get flushed to the client before you can convert it to image and change the response’s content and headers), but it’s a way of doing it in a general way.
Hope it helps!
Peter,
You could also use PhantomJS to print the screen from the client side, what would be pretty straightforward.
Best regards.
Thank you very much for your reply.
I have been looking at using phantomjs as the ‘headless browser’.
The tricky bit is that building/sending a url is not very practical as this is a very complex, authenticated UI, so building a secure url just to render elements isn’t the most efficient approach.
ideally, what I’m looking to do is this:
send phantomjs (or similar client-less wrapper) a vaadin container (let’s say, a VerticalLayout or a Window) and have it render it to an svg or png or some graphics format (doesn’t really matter what it is, I can convert it as needed).
From what I can see in phantomjs, it takes a javascript argument or a url. Is there a way to turn a vaadin component into javascript, or wrap it inside a js to get phantomjs to render it?
I had a little look at rasterize.js, but it doesn’t understand vaadin components, so would need some sort of conversion/wrapper code.
SVGGenerator looks to be an approach that could work, but it is chock full of ‘javascript hacks’ to get phantomjs to render charts (apologies for using the ‘h’ word - can you tell I’m a java guy? 
. svggen can work in this way because highcharts.js is doing the grunt work - the vaadin configuration is well, just configuration.
I’m not looking to ‘take a screenshot’ - rather render a vaadin component/container in a headless environment so it can be made into graphics.
Thank you
Peter