Funktionserweiterung «Bilder vergleichen» im Cranach Digital Archive


Fatmagül Cömez & Julia Tretjakov

Kontext
Cranach Digital Archive (CDA)
Modul
Screendesign
Semester
Wintersemester 2020/21
Studiengang
Medieninformatik Ba.

Hiermit präsentieren wir unser Projekt: Funktionserweiterung «Bilder vergleichen». Das Konzept wurde auf der bereit bestehenden Seite aufgebaut, und passt sich somit nahtlos an.

Zunächst wurde die Erstansicht überarbeitet. Hier wurde ein „Vergleichen“-Button, sowie ein „Filter & Sortieren“-Button eingebaut. Wird der „Filter & Sortieren“-Button betätigt, erscheint rechts eine Filter-Bar, nach der die Galerie nach verschiedene Optionen gefiltert werden kann. Zusätzlich legt sich ein schwarz-transparenter Schleier über die Galerie. Durch den x-Button zieht sich diese wieder nach rechts zurück und der Schleier verschwindet. Bedient man den „Vergleichen“-Button, öffnet sich, eine zunächst leere, Slide-Bar. Dazu erscheinen gelbe Check-Boxen. Möchte man ein Werk der Sammlung hinzufügen, wählt man die Check-Box aus. Das Bild springt in die Slide-Bar und ein Haken erscheint in der Check-Box. Es ist auch möglich ein Bild anzuklicken, wodurch Extra-Details angezeigt werden. Hier kann man verschiedene Zustände betrachten. Auch diese können durch einen Klick auf die Check-Box gewählt werden. Hat man eine andere Version, als in der Gesamt-Übersicht zu sehen, auserwählt, kann man in der Slide-Bar über das Bild hovern, und es wird angezeigt welche Version gewählt wurde. Werden mehr als vier Bilder auserwählt, kann man durch die Slide-Buttons durch die Slide-Bar navigieren. Ist der Vergleichsmodus aktiviert, kann man sich über bei die Navigations-Bar durch die verschiedenen Artefakte navigieren. Hat man seine Bildauswahl abgeschlossen, kann man nun durch den „Hinzufügen-Button“, diese der Sammlung hinzufügen. Es müssen jedoch mindestens zwei Bilder gewählt sein.

In der Sammlung, die man über die Navigations-Bar über den Punkt „Sammlung“ erreichen kann, besteht die Möglichkeit auch hier nochmal seine Ergebnisse filtern zu lassen. Nachdem man den „Vergleich starten“-Button drückt beginnt der eigentliche Vergleich. Die bekannten Check-Boxen sind wieder zu sehen. Es besteht die Möglichkeit zwei bis vier Bilder zu vergleichen. Ist nur ein Bild ausgewählt, ist der „Vergleich starten“-Button nicht aktiviert.

Befindet man sich im Vergleichsmodus, legt sich wieder ein Schleier über die Sammlung. Nun besteht auch die Möglichkeit die Slide-Bar ein- und auszufahren. Klickt man die Werke in der Slide-Bar an, legt sich ein gelber Rahmen um diese, der kennzeichnet, dass diese nun verglichen werden. Für zwei bis zu vier Bildern ist dies möglich. Zusätzlich erscheint die Tool-Box unter den ausgewählten Werken. Hier kann man ein Lock-Zoom oder ein Lock-Panning verwenden. Das Lock-Paning ist jedoch erst nutzbar, nachdem der Lock-Zoom aktiviert wurde. Durch den Schiebe-Regeler, der sich mittig auf den Raster-Linien befindet, kann man die Aufteilung der Werke verändern. Auch ist es möglich, für jedes Bild einzeln, den Zoom zu aktivieren, das Bild im Vollbild-Modus anzeigen zu lassen, oder es wieder zu zentrieren. Möchte man ein Bild aus dem Vergleich entfernen, geht dies über den x-Button der sich jeweils auf jedem Werk in der Slide-Bar befindet. Durch den „Schließen“-Button kann man den Vergleich endgültig beenden.

Style-Guide

Styleguide für das Projekt von Fatmagül Cömez & Julia Tretjakov