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