Canvas und andere Katastrophen - Vektorkarten im (mobilen) Browser

Junghans+Schneider 2014Folie

Junghans+Schneider

Vorstellung

• http://junghans-schneider.de

• Gegründet 2010

• Team• Andreas Junghans (M.Sc., Dipl.-Inform. (FH))• Til Schneider (M.Sc., Dipl.-Inform. (FH))• Peter Barth (Dipl.-Inform. (FH))• Johannes Kissel (M.Sc.)

• Auftragsentwicklung und Schulung• Web-Anwendungen (JavaScript, Java)• Apps für Mobilgeräte (iOS, Android)

2

Junghans+Schneider 2014Folie

Themen

Inhalt

• Rückblick: Konzept Vektor-Karten per Canvas

• Performance, Qualität, Kompatibilität – oder: Schwierigkeiten, Hindernisse und Probleme

• Grüße aus der analogen Welt

• Lösungen und Workarounds

• Frameworks und Techniken

3

Junghans+Schneider 2014Folie

Konzept

Vektor-Karten per Canvas

• Gleiches Prinzip wie Google Maps und OSM• Kartendarstellung mit Kacheln

• Idee: Kacheln nicht als Bitmap-, sondern als Vektor-Grafiken• Platzsparend (über proprietäres Vektor-Format)• DPI-neutral (in Grenzen)

• Realisiert in Google Maps 5 für Android und vielen iPhone-Anwendungen

• Kompromiss zwischen Online- und Offline-Rendering

4

Junghans+Schneider 2014Folie

Umsetzung (2012)

Vektor-Karten per Canvas

• Realisiert für PTV AG, Karlsruhe• Browser• iOS (nativ)

• Render-Code im Browser: ca. 1 KB (minified + GZIP)

5

Junghans+Schneider 2014Folie

Umsetzung (2014)

Vektor-Karten per Canvas

• Realisiert für PTV AG, Karlsruhe• Browser• iOS (nativ)• Android (nativ)• Windows 8 und Windows Phone 8 (nativ)

• Render-Code im Browser: ca. 1 4 KB (minified + GZIP)

6

Junghans+Schneider 2014Folie

Browser-Vergleich (2012)

Text-Darstellung

• Firefox 9

• IE 9

• Chrome 16

• Safari 5 (Windows)

• Safari 5 (Mac)

7

Junghans+Schneider 2014Folie

Browser-Vergleich (2014)

Text-Darstellung

• Firefox 9 26

• IE 9 11

• Chrome 16 32

• Safari 5 (Windows)

• Safari 5 7 (Mac)

8

Junghans+Schneider 2014Folie

Konsequenz aus (fehlender) Weiterentwicklung

Text-Darstellung

• Text-Qualität nicht überall ausreichend• Weder per Canvas-Text-API noch per DOM und CSS

• Lösung: Vorverarbeitung in Linienzüge• typeface.js und ähnliche Lösungen

• Vorteil• Gleiche Qualität und Darstellung in allen Browsern

• Nachteil• Etwas langsamer als Canvas-Text-API

9

Junghans+Schneider 2014Folie

Komplexität (2012)

Performance

• Demo-Kachel• Vektor-Größe (nach GZIP): ca. 5 KB• Bitmap-Größe (PNG): ca. 50 KB• Polygonpunkte: 2411• Linienpunkte: 2836• Zeichenstile: 14

• Mögliche Optimierungen• Kleinere Punktzahl auf Kosten der Qualität• Kleinere Auflösung auf Kosten von Qualität und DPI-

Unabhängigkeit

10

Junghans+Schneider 2014Folie

• Demo-Kachel• Vektor-Größe (nach GZIP): ca. 5 5,5 KB• Bitmap-Größe (PNG): ca. 50 55 KB• Polygonpunkte: 2411 9206• Linienpunkte: 2836 4504• Zeichenstile: 14 22

• Mögliche Optimierungen• Kleinere Punktzahl auf Kosten der Qualität• Kleinere Auflösung auf Kosten von Qualität und DPI-

Unabhängigkeit

Komplexität (2014)

Performance

11

Junghans+Schneider 2014Folie

Geschwindigkeit im Browser

Performance

• Render-Performance prinzipiell ausreichend ...• 5-100 ms pro Kachel

• ... aber auf Kosten der Bedienbarkeit• Event-Verarbeitung im Browser leidet

• Unerwartete Probleme• line-dash in Google Chrome

• Alternative WebGL?• Genutzt in Google Maps• Nicht verfügbar auf den meisten Mobil-Plattformen

12

Junghans+Schneider 2014Folie

Lösungen

Performance

• Web Worker für Parsing• ARKB... ➔ (0,-8),(-1,-9),...

• Web Worker für Rendering?• Nur direktes Arbeiten auf Pixel-Daten möglich• Keine echte Zeichen-API mehr, keine Hardware-Beschleunigung

• Lösung: „Kooperatives Multitasking“ für Rendering• Regelmäßige Prüfung, wieviel Rechenzeit verbraucht wurde• Bei Überschreiten festgelegter Grenzen: Abgabe der Kontrolle• Herausforderung: Zustand konsistent mit Canvas merken• Erhöhte Komplexität im Renderer

13

Junghans+Schneider 2014Folie

Lösungen

Performance

• „Kooperatives Multitasking“

14

Junghans+Schneider 2014Folie

Anforderungen an Browser

Kompatibilität

• Canvas mit line-dash

• Web Worker

• Cross-Domain requests

• Verbleibende Browser• Chrome• Firefox• Safari• IE 11• Android 4.4• iOS 7

15

Junghans+Schneider 2014Folie

Anforderungen an Browser

Kompatibilität

• Eingeschränkte Browser-Auswahl nicht akzeptabel

• Lösung: Server-seitiges Rendering als Fallback• Portierung Render-Code in bestehende Java-Umgebung

• Vorteil• Kartendarstellung überall identisch verfügbar• Hohe Performance auch in älteren Browsern

• Nachteile• Hohes Datenvolumen• DPI-Unabhängigkeit nur durch höher aufgelöste Bitmaps

16

Junghans+Schneider 2014Folie

Canvas im Browser drucken?

Druckmodus

• Canvas-Druck teilweise sehr problematisch

• Kartenbild alleine genügt nicht• Icons, Routen, Maßstab, ...

• Lösung: Server-seitige Canvas-API• Angesteuert vom Browser• Ergebnis: Ein PNG mit sämtlichen Inhalten

• Vorteile• Identisches Druck-Bild in allen Browsern• Keine Probleme mit dem Druck in älteren Browsern

17

Junghans+Schneider 2014Folie

Daimler-Händlersuche unter mercedes-benz.de

Frameworks und Techniken

• Responsive Anwendung• Zustandsverwaltung der GUI per CSS

• Frameworks und Bibliotheken• jQuery• Leaflet• Handlebars

• Build-Tools• Grunt• Compass

• Demo ➔ Browser

18

Junghans+Schneider 2014Folie

Vektor-Karten mit Canvas (2012)

Fazit

• Canvas-API ist breit verfügbar

• Performance ist hoch

• (Noch) Unschönheiten beim Text-Rendering

• HTML5 rocks :-)

19

Junghans+Schneider 2014Folie

Vektor-Karten mit Canvas (2014)

Fazit

• Canvas-API ist breit verfügbar• ... aber nicht mit allen Features

• Performance ist hoch• ... aber flüssige Bedienung erfordert viel Aufwand

• (Noch) Unschönheiten beim Text-Rendering• ... gilt auch zwei Jahre später

• HTML5 rocks :-)• ... macht aber viel Arbeit

20