Image Rendering Integration

StatistikStadtZuerich / stat.stadt-zuerich.ch

API Backend for the linked open statistical data of the Municipality of Zurich

Other

0 stars 0 forks source link

Image Rendering Integration #29

Closed ktk closed 6 years ago

ktk commented 6 years ago

Wir brauchen noch Pupetron oder ähnlich Integration damit Serge den Call absetzen kann

ktk commented 6 years ago

mchlrch commented 6 years ago

In STIP gibt es mindestens zwei Verwendungen fürs Image Rendering:

Printscreen auf der Datensatz Detailseite (PNG, PDF)
Pre-Rendering der Mini-Charts auf der Einstiegsseite und auf Detailseite bei "Verwandte Statistiken"

Die Images würden dabei serverseitig gerendert und auf Varnish gecached.

Bei einem kurzen Test sieht es so aus, als ob Puppetron nicht wartet, bis fertig gerendert ist. Es werden JPEG Images erzeugt. Es gibt einen Pull-Request für PNG, der wurde aber verworfen.

Rendertron wartet, bis gerendert ist, max. 10 sec. Es werden JPEG Images erzeugt.

l00mi commented 6 years ago

Rendertron produziert JPGs mit starken artefacts. Puppetron ist nicht genug konfigurierbar.

Ich würde versuchen direkt mit puppeteer zu arbeiten. Dabei ist wichtig für das Timing waitUntil: "networkidle0" zu verwenden. Hier konnte ich saubere PNGs und auch PDFs generieren in tests. https://github.com/GoogleChrome/puppeteer

l00mi commented 6 years ago

Für den Printscreen sollte es eine spezial seite geben welche nur die nötigen Elemente enthält. Serge hat glaub ich mal daran gearbeitet.. finde diese aber grad nicht.

surfiend commented 6 years ago

Meinst du den 'Grafik' Button auf der Detailseite, z.B. http://stat.integ.stadt-zuerich.ch/dataset/BEW-RAUM-ZEIT-SEX/export ?

mchlrch commented 6 years ago

Puppetron habe ich entsprechend angepasst (warten bis gerendert, PNG Screenshots, Timeouts parametrierbar, etc.) und funktioniert soweit.

Screenshot Beispiel (mit Puppetron lokal)

Noch offen ist das Aufsetzen von Puppetron in der Zazuko Infrastruktur (Dockerfile von Puppetron anpassen, Aufnahme ins CI, docker-compose, etc.).

Für die Integration ins Frontend gibts von Bergi folgendes Stück Code als Hilfestellung.

mchlrch commented 6 years ago

@surfiend Puppetron ist jetzt in der Infrastruktur verfügbar:

Erzeugen eines PNG: http://stat.integ.stadt-zuerich.ch/screenshot/?url=ENCODED_PAGE_URL
Erzeugen eines PDF: http://stat.integ.stadt-zuerich.ch/pdf/?url=ENCODED_PAGE_URL

Weitere Parameter sind hier dokumentiert.

Hier zwei Beispiele mit Datensätzen:

surfiend commented 6 years ago

https://stackoverflow.com/questions/20508788/do-i-need-content-type-application-octet-stream-for-file-download?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

mchlrch commented 6 years ago

Wie mit Express und fetch das PNG von Puppetron geholt und an den Client weitergeleitet werden kann habe ich als Beispiel implementiert. Der Aufruf von http://localhost:3001/ im Browser speichert das PNG ab.