riksantikvarieambetet / generous-interface-fashion

A prototyping project focusing on a generous interface for users interested in finding inspiration for their own clothes and accessories designs

Generous Interface Fashion

This project was created within an evaluation of generous interfaces as a complement to common web interfaces of archives and museums often dominated by text search. This prototype is centered around images, fashion and the history of dress and costume. The intended user of the prototype is a person with deep interest in the topic and who is an active hobbyist producing her own designs or clothes. She could be a cosplayer, a reenactor, or simply someone who likes to make vintage or historical clothing.

The project is a partnership between the National Heritage Board, the Nordic Museum, the Museums of World Cultures, the National Museum of Art, and Malmö Museums.

Note that our prototype does not currently work in Internet Explorer and we're not likely to change that. The reason being we view the prototype as being a concept prototype and demonstrator (a minimum learnable product) rather than a pre-cursor to a operational product.

Setup

git clone https://github.com/riksantikvarieambetet/Generous-Interface-Fashion.git

Web Application

Installing and running the web application:

cd app
npm install
npm run serve

Fetching Data

Prerequisites

• An Europeana API key
• A billing enabled Google service account with Google Vision access enabled.

Note that you will be prompted for your Europeana API key and the path to your Google service account file.

cd data
pipenv --python 3.7
pipenv install
pipenv run python data-generator.py

To use the fetched data in the web application switch out the data.json files.

generous-interface-fashion's Issues

Object view: disable background scroll?

In the object view, the underlying grid is still scrollable. Perhaps disable this? (not sure if this is a bug or an enhancement…)

Migrate colors and color features to HSL

rewrite grid

squares :-)

inconsistent filter toggle behavior

even though the filter toggles start as red, everything is displayed. i.e. there is no difference between everything red and everything green. This is probably something that should be user tested to figure out what their expectations are.

Order public SNHB test server

For possible backed component

Filter menu should be visible in the object view

Implement color similarity filter

The best solution is probably an HEX/threshold based algorithm.

Extract colors

need investigation

Include items from SMVK

Identify datasets or dataset and look into what meta data can be improved.

clarify link description for full object view

currently only institution name is shown. i.e. instead of "Malmö museer" link text should be "fullständig objektbeskrivning hos Malmö museer"

clarify add color button

"add color" is a bit vague, maybe "add additional color"/"add a new color"/"add another color"?

Extract and or create type of item

What to do with items with multiple or unknown types

Merge/Union all data

To begin with lets do a large JSON file, it can be indexed in Elastic or Blazegraph if needed later on.

Write a new Europeana generator

drop Isotope in favor of CSS columns

+
We are not using the inbuilt filtering features because they are not powerful enough,
Styling is a pain when working with images,
The connection to the state is not always fast enough

-
Browser support
Requires custom solution for image loading

Extract or create year

Write a cache layer for Google Vision data

To keep us under the rate limit and speed up the harvesting process,

It should store the raw data and the generic computing should be done each time anyway.

Define core data model

For the JSON, possible backend could look very different, should be extensible.

Allow multiple color filters at the same time

Keyword view and filter

Filtering component

move and change how filters works

Include new datasets

add support for touch actions

Seams like something we would like to implement in a bunch of places

https://github.com/bsdfzzzy/vue2-hammer

toggle display of black & white photos

add a toggle to the image filter that controls display of black & white images (i.e. no color box with saturation > x %)

Allow ImageWall to load more items

On scroll, should reset when filtering options changes.

animate number of active items

https://github.com/wangdahoo/vue-animate-number but with dynamic data?

Scroll: loading of more items should happen earlier

As noted by a test user the loading of more items should happen before the user reaches the absolute bottom.

Update object view to include more metadata

Obejct view: License link, toggle button sometimes not visible

In the object view, the license link and toggle button are sometimes below the fold (depending on image proportions). Some styling tweak is needed. Two examples attached w different image proportions:

Include items from Nationalmuseum

Can be difficult, the data that are both in Europeana and under a semi-open license is very limited and the meta data is poor.

Limit number of items that can viewed in the ImageWall

Currently all items in the dataset gets loaded by default into the ImageWall setup a limit.

Note that filtering should happen globally and be independent from the visible items.

Basic filtering UI - tabbed

Image wall

Vue.Isotope

When filter changes reset scroll and visibleLimit

Needs some type of watcher(or watchers) or a heavy state system.

Investigate if Vuex can watch multiple state properties in one watcher.

New color picker

HTML slider based?

Add readme

Should include:

• Background
• Travis status
• Setup/Dev/Build: app
• Setup/Execute: data

File name on download

File name on download is always: 'thumbnail-by-url.jpeg'
Should reflect object, e.g. its title, to help find and use the file.

Suggest color filters on object pages

Object view

• visa bild
• licens
• länk till källa
• visa beskrivning
• uppdatera filtrering

Frontend setup

• vue
• vue store
• vue router (needs investigation)

Setup automatic deployment

Do not harvest the same items multiple times

It breaks the application and increases the data harvest load.

This should happen as early as possible and after the GCV step is not an option.

Create a Europeana module

Should include a generator and a parser.

Create a data transformation module

To begin with:

ShortDescription $desc
Should create the best possible item description from the existing description.
Parser:
paragraph: invalidation
sentence: length helper
word: validator

MergeTitleDescription $title $desc
If the title adds value it should be added to the description(Wikipedia-style?)
parser:

LicenseGenerator $licens
Given a license URI return the url, name, and image.

Extract existing data

• image
• description / label
• source
• license

Icons

We have a lot of use cases for icons, such as for the filter menu and the toggle object btn.

Therefor we should add a Icon font to the project.

color picker suggested changes

• display hue slider above saturation/lightness box.
• increase height of hue slider
• change marker in hue slider to show final selected color instead of only hue

Identify datasets

Add license