Canvas und andere Katastrophen - Vektorkarten im (mobilen) Browser

50 %
50 %
Information about Canvas und andere Katastrophen - Vektorkarten im (mobilen) Browser
Technology

Published on February 25, 2014

Author: Junghans-Schneider

Source: slideshare.net

Description

Vortrag zum Thema Vektorkarten im Browser (KarlsruheJS-Meeting am 29.01.2014): Wie lassen sich vektorbasierte Karten im (mobilen) Browser effizient darstellen, um DPI-unabhängig zu sein und Bandbreite einzusparen?

Audio ist hier verfügbar: http://www.youtube.com/watch?v=2evX1UORnyI

Canvas und andere Katastrophen Vektorkarten im (mobilen) Browser

Vorstellung Junghans+Schneider • 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) Folie 2 Junghans+Schneider 2014

Inhalt Themen • 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 Folie 3 Junghans+Schneider 2014

Vektor-Karten per Canvas Konzept • 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 iPhoneAnwendungen • Kompromiss zwischen Online- und Offline-Rendering Folie 4 Junghans+Schneider 2014

Vektor-Karten per Canvas Umsetzung (2012) • Realisiert für PTV AG, Karlsruhe • Browser • iOS (nativ) • Render-Code im Browser: ca. 1 KB (minified + GZIP) Folie 5 Junghans+Schneider 2014

Vektor-Karten per Canvas Umsetzung (2014) • 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) Folie 6 Junghans+Schneider 2014

Text-Darstellung Browser-Vergleich (2012) • Firefox 9 • IE 9 • Chrome 16 • Safari 5 (Windows) • Safari 5 (Mac) Folie 7 Junghans+Schneider 2014

Text-Darstellung Browser-Vergleich (2014) • Firefox 9 26 • IE 9 11 • Chrome 16 32 • Safari 5 (Windows) • Safari 5 7 (Mac) Folie 8 Junghans+Schneider 2014

Text-Darstellung Konsequenz aus (fehlender) Weiterentwicklung • 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 Folie 9 Junghans+Schneider 2014

Performance Komplexität (2012) • 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 DPIUnabhängigkeit Folie 10 Junghans+Schneider 2014

Performance Komplexität (2014) • 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 DPIUnabhängigkeit Folie 11 Junghans+Schneider 2014

Performance Geschwindigkeit im Browser • 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 Folie 12 Junghans+Schneider 2014

Performance Lösungen • 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 Folie 13 Junghans+Schneider 2014

Performance Lösungen • „Kooperatives Multitasking“ Folie 14 Junghans+Schneider 2014

Kompatibilität Anforderungen an Browser • Canvas mit line-dash • Web Worker • Cross-Domain requests • Verbleibende Browser • Chrome • Firefox • Safari • IE 11 • Android 4.4 • iOS 7 Folie 15 Junghans+Schneider 2014

Kompatibilität Anforderungen an Browser • 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 Folie 16 Junghans+Schneider 2014

Druckmodus Canvas im Browser drucken? • 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 Folie 17 Junghans+Schneider 2014

Frameworks und Techniken Daimler-Händlersuche unter mercedes-benz.de • Responsive Anwendung • Zustandsverwaltung der GUI per CSS • Frameworks und Bibliotheken • jQuery • Leaflet • Handlebars • Build-Tools • Grunt • Compass • Demo ➔ Browser Folie 18 Junghans+Schneider 2014

Fazit Vektor-Karten mit Canvas (2012) • Canvas-API ist breit verfügbar • Performance ist hoch • (Noch) Unschönheiten beim Text-Rendering • HTML5 rocks :-) Folie 19 Junghans+Schneider 2014

Fazit Vektor-Karten mit Canvas (2014) • 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 Folie 20 Junghans+Schneider 2014

Add a comment

Related presentations

Related pages

#9 KarlsruheJS: High Performance JavaScript, Canvas und ...

Canvas und andere Katastrophen ... (mobilen) Browser: Andreas Junghans hielt bereits vor zwei Jahren bei uns einen Vortrag über Canvas auf Desktop und ...
Read more

KarlsruheJS: Andreas Junghans Canvas und andere ...

KarlsruheJS: Andreas Junghans Canvas und andere Katastrophen KarlsruheJS. ... neue, behäbige und fehlerhafte Mobil-Browser kommen dazu.
Read more

Openlayers mit Vektorkarte / users: Germany ...

Wollte es daher mit Vektorkarten, ... und diese dann via OpenLayers in einem Browser darstellen? ... (Canvas), einen kompletten ...
Read more

JavaScript « Advitum.de

... JavaScript und dem Canvas einen interaktiven Effekt erstellen kann. ... Damit könnt ihr direkt im Browser eigene Kreuzworträtsel erstellen. ...
Read more

Scalable Vector Graphics – Wikipedia

... sind Inhalte von SVG-Dateien für computerunterstützte Übersetzung und andere ... Inzwischen war bei mobilen Geräten auch ... das Browser-DOM ...
Read more

Anforderungen an mobile Geo-Datenbanken für ...

... der Anforderungen gegenüber anderen Typen von mobilen ... wurden auch erste SVG-Browser für mobile Geräte ... bei anderen Katastrophen ...
Read more

Alle Taschen für Damen - Fossil

Cookies und andere Technologien. ... sobald Du Deinen Browser schließt und Deine Sitzung beendest. ... Katastrophen oder technischen Fehlern schützen.
Read more