Rendering client-side to graphics on server-side

Vaadin 6 / 7 / 8
1

Hi Vaadin Forum,
The Use-Case here is to render a layout/component/set of components ultimately to a png file, but purely on the server-side.
This is similar to a headless testbench type scenario, except that the ‘client’ is created, the relevant UI/view is placed into it, and it is then rendered/exported to a png (or svg or similar) all by a server-side process.
Note: I can already do this quite easily using vaadin charts - for vaadin charts. But for general components (e.g. a table) I can’t use SVGGenerator (afaict).
My first thought is to use PhantomJS for this, but phantomjs wants a js file(s), but where would I get these…they’re all handled internally within the widgetset code.
Note this isn’t for testing, this is for rendering components to a graphics file on the server side.
Any help is greatly appreciated!
Thanks,
Peter

2

Hey!

I had a similiar requirement two years ago – we had to take ~ 5000 screenshots of an application views, multiplied by 5 language versions. Those were supposed to be used in a user manual. I used TestBench and its screenshot-taking facility. One pattern that might be particulary useful is the so called Page Object. There’s a
nice article from Martin Fowler
 about it.

3

Hi,
Thanks for the link. For screenshotting, this is a nice approach, and wrapping elements in a PageObject is good pattern for insulating changes.
My requirement isn’t actually to take screenshots - but rather to render a Component/Container/Table or other UI object with a specified dataset in a headless environment, then export it to a graphics file.
The main differences here from a screenshot are:

  1. The rendering is only a specific component (and its children)
  2. The drawing context is [sort of]
    infinite - e.g. a table would keep rendering all rows/columns with no ‘screen’ margins - no scrollbars

I may be able to use your TestBench/PageObject suggestion to create custom ‘pages’ (with only the required element) in a controlled ‘screen’ environment (e.g. infinite height).
Thanks

4

Hi Peter,

You’re welcome. Please remember that you can use TestBench in combination with PhantomJS and PhantomJS
allows you to do screen-capture
. I believe this is the easiest way to achieve your goals.

Please let us know if it worked for you! :slight_smile:

Kindest regards