GithubHelp home page GithubHelp logo

gallery's Introduction

ICPC.global World Finals Photo Gallery V2022

Created to substitute news.icpc.global/gallery photoarchive.

Figma mockups

Important features to keep:

  • no-backend flickr-based solution
  • photos are classified based on public flickr tags: year, event, team
  • individuals are tagged as "Firstname Lastname (location)"
  • show metadata information: photographer, year, event, team, tagged individuals, highlight tag locations
  • search by substring over all tags
  • easy image download
  • adaptive interface for larger screens
  • mobile version

User guide

Welcome to the updated icpc gallery. All official photos from ICPC World Finals are stored here. If you would like to contribute your photos, email to [email protected].

Year Filter

Select a year! Selector is located on the left on desktop and in the upper menu on mobile/ By default, when selectin a year with no other filters preset, you will enter a Photo Tour.

Event Filter

Photos from each year are classified into multiple events. Select the appropriate event in the Events filter. Some noteworthy filters are Opening Ceremony. Team Photos, World Finals and Closing Ceremony.

Team Filter

Pictures may have specific teams tagged in them. Select the team name from the list (or type a few letters to narrow your search) to get all images of that team in the selected year.

People Filter

To select the images with recognised individuals, pick a name from the list of suggestions, or type a few letters to narrow your search.

General Search

To search by a keyword just type it into the Search field. For example, Bill, Opening or Champions

Development

The gallery is built on top of the flickr api backend. All metadata is stored in photo exif tags. Tag types are:

  • year, for example album$2001
  • event, for example event$Team Photos
  • team, for example team$Aalto University
  • person, for example Bill Poucher(1761524d3f579a4d). The data in parenthesis denotes face location within the image in Picasa standard.

Picasa Standard Face Tag

The 16 characters enclosed in rect64(…) is a 64-bit hexadecimal number which can be broken up into four 16-bit numbers used to identify the position of the rectangle used to mark the face.

If you divide each of the four 16-bit numbers by the maximum unsigned 16-bit number (65535), you’ll get four numbers between 0 and 1 which give the relative coordinates for the face rectangle in the order: left, top, right, bottom.

To calculate the absolute coordinates, multiply the left and right relative coordinates by the width of the image and multiply the top and bottom relative coordinates by the height of the image. This way the faces will always be identified even when the image is re-sized.

Flickr Tag Processing

Even though flickr stores tags in their initial form, it is important to remember the following

  • by default, manually entered tags are split into separate words. Enclose the tag in quotes "team$Aalto University" to keep tag intact
  • flickr eliminates all spaces and non-letter sybmols from tags for the filtering purposes
  • make sure to keep correct encoding on tags, specifically in people names, to consistently process diacritic symbols
  • make sure to enclose all university names with punctuation in quotes

Configuration

src/const.js contais access detail and general year setup.

Each year separately can be setup through individual year files in /public/. First line of year file holds the list of events. Second line holds list of universities, third line holds list of people present.

Deployment guide

  1. Set path
set PUBLIC_URL=/gallery
  1. Start production build
npm run build
  1. rename build folder into gallery
  2. upload gallery folder to your server

Future Work:

  • easy interface to suggest a photo tag change
  • infinite scroll though all years by given filter
  • work better with university names with commas, ampersands and other symbols in the name
  • (?) support universities changing names
  • rename events for better consistence (correct flickr tags)
  • release badge recognition tool
  • release tag embedding tool
  • support a face recognition tool

gallery's People

Contributors

lperovskaya avatar masha238 avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

lperovskaya

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.