wesuku_de_floradex_www_

Erster funktionaler Prototyp

Floradex basiert momentan auf einem Gerüst aus Ionic, AngularJS und JSON Dateien. Diese JSON Datein werden von einem eigenen Java Programm erstellt. Dieses Tool vereint die Daten des Herbariums (Katalog, Daten und Bilder) mit den Klassifizierungen der jeweiligen Pflanzen von Tropicos.org und unserem eigenen Pflanzenformat.

Grundsätzlich benötigt floradex für jede Pflanze eine Liste der Pflanzenmerkmale. Diese Merkmale sind leider in keiner Datenbank für uns automatisch abgreifbar und müssen von Hand gesammelt werden. Für diesen Zweck haben wir ein Dateiformat entwickelt.

Screenshot_10_06_15_13_30

Dieses Format wird von einem Tool ausgelesen und steht diesem dann als Baum zur Verfügung. Dieses Format wird außerdem direkt als JSON ausgegeben um das Menü mit Daten zu füttern.

Außerdem unternehmen wir im Moment Anstrengungen einen Parser zu schreiben, der diese Merkmale automatisch aus einer Seite zu diesem Thema ausließt.

Für alle durch dieses Format bereitgestellten Pflanzen werden dann offline aus dem XML Katalog des Herbariums die passenden Pflanzen ausgelesen und unter Verwendung der bereitgestellten ID (wie z.B. B100000001 für die Pflanze Asyneuma compactum var. eriocarpum Parolly) die Metadaten über den online Service des BGBM heruntergeladen und hinzugefügt. Diese ID wird auch in der Anwendung selbst verwendet um einzelne Pflanzen zu identifizieren und die Verbindung zwischen verschiedenen Daten herzustellen.

Zusätzlich werden diese Pflanzendaten durch Infomationen von Tropicos.org angereichter. Diese Seite stellt die Taxonomie für Pflanzen bereit und ermöglicht zugriff über ein API.

java-tools

Als Möglichkeiten für die Bereitstellung dieser gesammelten Daten kamen eine Datenbank und feste Dateien in Frage. Eine Datenbank wäre langfristig leichter mit Daten zu ergänzen, würden aber auch den Arbeitsaufwand erhöhen. Aus diesem Grund haben wir uns im Rahmen des Hackathons dafür entschieden die Daten einfach als JSON zu speichern und diese in der Anwendung einzulesen. Dies hat zwar ein paar offensichtliche Nachteile (Gesamte Daten müssen bei Start der Anwendung eingelesen werden, neue Daten ersetzen immer alte komplett, keine SQL Magie, usw.) ist aber für unseren kleinen Datensatz kein Problem. Die WebApp wurde so gestaltet, dass der Datenursprung bei Bedarf auch nachträglich  verändert werden kann.

java-tools

Zusätzlich zu den Metadaten werden auch die von der BGBM bereitgestellten Bilder (Und damit der im Rahmen des Coding Da Vinci genutzte Datensatz) heruntergeladen, zu einem Rechteck gestutzt und in dem Format 25×25, 50×50, 100×100 und 200×200 gespeichert (Auch hier wird die ID der einzelnen Pflanzen verwendet um die Bilder zu benennen und sie so benutzbar macht). Diese werden in der WebApp als Thumbnails für die Ergebnisse genutzt, damit die (sehr großen) Bilder der BGMG .

thumbs

Diese gesammelten Daten (Alle Pflanzendaten und deren Merkmale, die Menüstruktur und die Thumbnails) werden dann von der WebApp eingelesen.

Diese WebApp verwendet das Framework Ionic, welches auf AngularJS basiert (welches wiederum HTML, CSS und JS verwendet).

 

zuordnungdatenDort wird die JSON Datei der Liste aller Pflanzenmerkmale verwendet um das Menü unten mit Daten zu füttern. Bei Auswahl eines Merkmals werden alle Pflanzen die diesem Merkmal zugeordnet wurden in der rechten Ergebnisleiste angezeigt. Diese besteht aus den Thumbnails und verwendet je nach Anzahl der Ergebnisse eine andere Größe dieser, damit immer alle Ergebnisse sichtbar sind.

Die Auswahl mehrerer Merkmale schließt Pflanzen nicht aus, sonder fügt immer mehr den Ergebnissen hinzu. Jedes Ergebnis hat ein Gewicht welches durch die Anzahl der zutreffenden Merkmale charakterisiert wird. So kann die passende Pflanze auch gefunden werden, obwohl man ein falsches Merkmal ausgewählt hat.

Die Auswahl eines Ergebnisses legt eine modale Ergebnisseite über die Anwendung, in welcher die Metadaten der Pflanzen  und das Hochauflösende Bilder der BGBM angezeigt werden.

Zum vollständigen Prototyp fehlen noch die Bilder für die Baukasten-Vorschau-Ansicht in der Mitte, welche helfen solle, die ausgewählten Merkmale besser zu identifizieren und die Bildchen für das Menü im Unteren Bereich.

Der aktuelle (lauffähige) Prototyp kann immer hier eingesehen werden.