Git Product home page Git Product logo

curationarena's Introduction

README Curation Arena

Curation Arena offers a web-based platform for large display curation and display of personal photos. It uses two handheld devices to control one larger display.

Artist impression of CurationArena in action Artist impression of Curation Arena

This was part of a Materialising Memories project into the curation of personal photos and interpersonal storytelling. It was developed to be run in the UTS Data Arena, a large-scale (10m) 360º display.

Design: Mendel Broekhuijsen

Coding: Mendel Broekhuijsen & Jesus Muñoz Alcantara, Eindhoven University of Technology

Setup

The system uses a nodejs server (the focus of this repository), with each device running a browser window for their respective interfaces. A maximum of two handheld devices are each served a dedicated set of photos to browse (which have to be uploaded to the server beforehand), while the display device would start with a black screen. Users can select photos to put onto the display screen, filling it up over time.

We have tested the system with various devices and browsers. Google Chrome/Chromium and iPads seem to be supported the best, but MacBooks with Firefox and a Hololens running Microsoft’s Edge browser also work fine. A large TV should also suffice if you don’t have a Data Arena handy.

Installation of server

  • Clone or download this repository
  • Install exiftool
  • Install nodejs (we tested with v8)
  • (for macOS) Install Xcode Command Line Tools via xcode-select --install

Open a terminal window and navigate to the curationarena directory. Run the following command to update and compile all dependencies:

npm update

This should complete without major errors, otherwise those would need to be resolved first.

Running the software

npm start will start a webserver on port 3000.

To see the arena view, open a browser window and go to http://localhost:3000/arena-view.html (assuming you’re viewing this on the same device as the server is running on, otherwise substitute localhost for the correct IP-address). This view is black when just launched or (in later versions) features a mostly black background with a dotted pattern.

In the Data Arena, a full-width Chromium window is required and should point to the same URL as listed above. When running the server off a laptop, it may be wise to get a fixed IP-address to avoid it changing upon restarts, standby, etc.

iPads (or other devices with a comparable display resolution) should navigate to http://localhost:3000. The user will be prompted to choose between participating as A or B. The interface works best when run fullscreen, if possible. Loading the page may take a little while as images are downloaded all at once.

Once ready, tapping a photo on the tablet screen makes it appear on the arena screen. That photo gets a blue border on the tablet to indicate its published status. Tapping it once more removes it from the arena view. That’s it!

To stop the webserver, use ^c (ctrl+c), or close the terminal window.

Adding photos

At the moment, two users can show, browse, and tell at the same time. Their photos are located in two folders in curationarena/public/ExamplePhotos. Photos go in respectively the A and B folders for each user.

Adding photos only works before the server is started. Once it starts, the server will first make thumbnails of all images it can find. This process may take a while but is much quicker upon subsequent starts as it skips over images for which thumbnails were created previously.

Based on our experience, adding more than a few hundred photos for a single session tends to be counterproductive; most will be skipped over during the actual use of Curation Arena.

curationarena's People

Contributors

jmunox avatar dvangennip avatar

Watchers

 avatar Mendel avatar

Forkers

dvangennip

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.