Schlagwort-Archive: SVG

Sauvignon : Parallaxe #tt Session 2014/08/14

Da soll noch einer sagen wir starten ständig Projekte und bringen keins zu Ende. Der Auslöser für unser Android SVG Projekt Sauvignon gehört seit heute nicht mehr dazu.

Aber der Reihe nach : Um dem (zukünftigen) Anwender unserer Apps langweilige Wartezeiten beim Laden zu ersparen, kam uns Idee, den Splash Screen einer App während des Ladens zu animieren. Mittels Bewegung des Smartphones sollte durch Parallaxe der Eindruck von räumlicher Tiefe entstehen. Soweit die Theorie.

Lass uns doch dafür SVG verwenden …

-Matthias

Nach mindererfolgreicher Suche nach einer passenden Bibliothek für Android begann der steinige Weg zu Sauvignon, einer SVG Bibliothek, die neben einem Parser und einen Renderer mittlerweile auch eine rudimentäre Animationsengine beinhaltet.

Zurück ins jetzt : eben diese Engine ermöglicht es uns heute, SMIL basierte Animationen zu realisieren. Die Ursprungsgrafik stammt wie gehabt aus einer SVG Datei, die Animation wird zur Laufzeit hinzugefügt sodass zum Beispiel der Beschleunigungssensor oder Touch Eingaben für interaktive Animationen verwendet werden können.

Ersteres nutzen wir um grafische Elemente abhängig von ihrem z-Index um einen bestimmten Wert zu verschieben. Et voilà, ein parallaktischer 3D Effekt.

Sauvignon : Falsch positiv #tt Session 2014/07/10

In dieser Session mussten wir schmerzhaft feststellen, dass Anwendungen mit rein grafischem Output nur schwer automatisch zu testen sind.

Einige Fehler in unserer SVG Engine sind uns erst aufgefallen, nachdem wir die Ausgabe auf verschiedenen Geräten und damit mit unterschiedlichen Auflösungen getestet haben.

Hinzu gekommenen sind kleinere Features wie die Integration von Polygon und Polyline Elementen, die Interpretation von verschiedenen Line Caps bei Path Elementen und die Unterstützung von verschiedenen Farbformaten.

Sauvignon : Bounding Rects #tt Session 2014/06/30

Auch in dieser Woche stand die Arbeit an unserer SVG Engine Sauvignon im Vordergrund. Diesmal beschäftigten wir uns mit dem Thema Bounding Rects.

Ein Bounding Rect ist ein Rechteck, das ein zweidimensionales Objekte minimal umschließt. Nutzen wollen wir diese Rechtecke um insbesondere Animationen besser nachvollziehen zu können. Besonders wenn ein Element von einem anderen verdeckt wird, können Bounding Rects nützlich sein.

Bei der Umsetzung haben wir zwei Varianten berücksichtigt:

In der ersten Variante wird ein Bounding Rect um das untransformierte Objekt gelegt und anschließend auf die gleiche Weise transformiert, wie das Objekt selbst.

Bei der zweiten Variante wird das Bounding Rect erst erzeugt, nachdem sämtliche Transformationen auf das Element angewendet wurden. Es verhält sich somit parallel zu den Achsen des Bildschirms.

Sauvignon : SVG Animation #tt Session 2014/06/13

In der dieswöchigen Session haben wir uns Gedanken zum Thema SVG Animation gemacht und verschiedene Ansätze diskutiert. Dabei haben wir uns auf drei Varianten festgelegt.

Die erste besteht darin, die Animationen in Form von SMIL im SVG selbst zu definieren. Diese Form ist Teil der SVG Spezifikation und wird normalerweise auch durch Browser unterstützt.

Sauvignon : Path Element #tt Session 2014/05/29

Genau wie in der letzten Woche haben wir auch diesmal zusammen an unserem SVG Parser weitergearbeitet. Nachdem sich zuletzt eine gewisse Komplexität beim Rendering von Path Elementen angedeutet hat, haben wir und diesmal fast ausschließlich auf Path Segmente vom Typ arc konzentriert. Anders als bei anderen Segementtypen gibt es hier keine direkte Entsprechung in Android.

Android : Fairphone // Sauvignon : Ellipsen #tt Session 2014/05/02

Wo soll ich anfangen? Matthias hat mittlerweile ein Fairphone, auf dem wir das Debugging von Android Apps getestet haben.

Parallel dazu haben wir die App Mirrorop dazu verwendet den Bildschirm eines Android Geräts auf einen Windows Rechner zu spiegeln. Abgesehen von den Aufforderungen eine Lizenz zu erwerben, funktioniert das sehr gut. Auf diese Weise können wir nun beim Debuggen einen größeren Bildschirm verwenden.

An unserem SVG Parser Sauvignon arbeiten wir jetzt gemeinsam und bündeln dabei unser Know How in den Bereichen Android App Entwicklung in Java und SVG Manipulation in JavaScript.

Zur Aufwärmung haben wir die Parser und Rendering Engine um Ellipsen erweitert. Dass Path Elemente zu den kompliziertesten Komponenten eines SVG gehören, bedingt dass wir uns in einer gesonderten Session mit dem d Attribut auseinander setzen müssen.

Bis dahin.

Baumhaus : Unterstützerdatenbank // Sauvignon : eigene Bibliothek #tt Session 2014/04/24

Nach einer Pause in der letzten Woche haben wir uns an diesem Donnerstag wieder zum Thinktank getroffen um gleich mehrere unserer Projekte voranzutreiben.

Als erstes haben wir für Baumhaus Berlin eine Minimallösung einer durchsuchbaren Datenbank aller Unterstützer getestet. Dafür haben wir das die Plugins Contact Form 7 und Contact Form DB verwendet. Die Daten von Unterstützern können über eine Formular auf einer WordPress Seite erfasst werden und landen dann in der gleichen Datenbank wie auch sämtliche andere WordPress Daten. Anzeige, Suche und Export laufen dann über eine gesonderte Sektion im WordPress Dashboard ab.

Unser Android SVG Parser Projekt Sauvignon hat derweil ebenfalls einige Fortschritte gemacht. In der letzten Woche haben wir die Parser und Render Funktionalitäten aus dem Prototypen herausgelöst und als eigenständige Bibliothek angelegt. Wir konnten dann die Demo App erfolgreich auf einem Gerät mit Android 2.3.x Gingerbread starten, indem wir die minimale Android SDK Version auf 10 herabgesetzt haben.

Unser dritter Mitstreiter wurde indes beauftragt, nach einem passenden Monitoring Tool für unseren Server zu suchen und dieses dann zu installieren und zu konfigurieren.

Sauvignon : SVG Model #tt Session 2014/04/04

Wie in der letzte Woche angekündigt, haben wir heute begonnen, einen SVG Parser für Android zu implementieren. Zuerst haben wir die Vorgehensweise diskutiert und sind dabei auf Philosophieunterschiede zwischen kompiliterbaren und geparsten Sprachen am Beispiel Java und Javascript eingegangen.

Letztendlich haben wir uns an diesem Abend fürs Erste darauf beschränkt, die Java Repräsentation für ein minmales SVG und den dazugehörigen Parser zu schreiben. Um dieses Minimalbeispiel abschließen zu können, fehlt noch der Test des Parsers und die Implementierung der Funktionalität die unser geparstes SVG Objekt zum Beispiel auf eine Canvas zeichnet.

Wenn wir diese beiden Schritte bis nächte Woche abgeschlossen haben, können wir unser SVG Datenmodel schrittweise erweitern und uns sogar schon an die ersten Animiationen heranwagen. Dazu sollten wir uns im Vorfeld nocheinmal ausführlich mit allen Attributen der von uns implementierten SVG Elemente beschäftigen um unsere Engine möglichst ähnlich der der gängigsten Browser zu  gestalten.

Android : SVG #tt Session 2014/03/27

An diesem Donnerstag haben wir uns eingehender mit dem Oberflächendesign und der Verwendung von Grafiken in Android Apps beschäftigt. Grafiken lassen sich in Android über ein Canvas View relativ einfach erzeugen und manipulieren, jedoch stößt man bei einer größeren Anzahl von Objekten leicht an die Grenzen der Übersichtlichkeit. Auch ist es mitunter lästig, dass man dass man die fertig gezeichnete Grafik nur sehen kann, wenn man die App startet. Dies macht ein wirkliches Designen und vor allem Animieren mühselig und zeitaufwendig.

Wir suchten also nach einer Möglichkeit, Grafiken einfach zu erstellen, in Android Apps anzuzeigen, aber auch gleichzeitig per Java Code veränderbar zu machen, um so Animationen zu ermöglichen. Uns schien, dass Vektorgrafiken diesen Anforderungen am besten abdecken sollten, da es für diese gute Editoren gibt und wir für verschiedenste Zwecke die gleiche Grafik verwenden könnten.

Leider unterstützt Android nativ kein SVG. Auch die SVG Bibliotheken, die wir uns angehen haben – AndroidSVG und svg-Android – können zwar Vektorgrafiken parsen und darstellen. Sie erlauben jedoch keinen Zugriff auf die Java Repräsentation der SVG Datei, um die Werte zur Laufzeit zu manipulieren und somit eine Animation möglich zu machen.

Bis zum nächsten Donnerstag wollen wir uns informieren, ob es doch eine existierende Möglichkeit gibt Vektorgrafiken in einer Android App darzustellen und zu manipulieren. Sollte dies nicht der Fall sein, werden wir in Betracht ziehen, einen eigenen SVG Parser zu schreiben.

SVGs in Android-Apps Analysis

Für Logos und auch für Spiele wäre es sehr nützlich, ein Android-Element (View) zu haben, das Vektorgraphiken erzeugen bzw. laden (rendern) kann, die man zur Laufzeit aus der App heraus manipulieren kann. Zum Rendern gibt es bereits ein paar Lösungen:

androidsvg
svg-android
http://code.google.com/p/svg-android/source/browse/trunk/svgandroid/src/com/larvalabs/svgandroid/SVGParser.java

Diese bieten bereits mächtige Render-Fähigkeiten aber noch keine Manipulationsmöglichkeit zur Laufzeit.

Möglicherweise ist es an der Zeit, dass wir entsprechende Bibliotheken in Angriff nehmen.